Başlangıç > Nuh Gönültaş > web tasarımı için ipucları

web tasarımı için ipucları

 

 

\

basitçe, kullanılırlık, ziyaretçilerinizin web siteniz üzerinde ihtiyacı oldukları bilgiye ihtiyacı oldukları zamanda ulaşabilmelerini kolaylaştırır.

kullanılırlık üzerine web şirketlerinin ortak yanılgısı, onun pahalı olduğu yönündedir. evet, piyasada bazı uluslararası şirketler bulunuyor ve bu şirketler on binlerce dolar parayı kullanılırlık üzerine araştırma ve test yapılması için harcayabiliyorlar. fakat küçük ve orta ölçekli işletmeler için kullanılırlık, alanında uzmanlık ve test için pahalı ekipman gerektirmeden ulaşılabilir.

web tasarımcılarının günümüzde işi daha da kolay. sadece bu ve bunun gibi makaleleri okuyarak bazı temel kuralları öğrenebilir ve onları kendi web sitelerinde uygulayabilirler.

1. etiket satırı (tagline) kullanın

etiket satırı, şirketlerin ya da web sitelerinin filozofisini ya da görevini açıklayan söz öbekleridir. web sitesinin ana sayfasındaki en dikkat çeken element olmalıdır ve web sitesini tek cümlede özetleyebilmelidir.

i̇statistikler, bir web sitesinin, ziyaretçinin ilgisini çekebilmesi ve onu sitede tutabilmesi için 8 saniyesi olduğunu gösteriyor. belirgin bir etiket satırı olmadan ziyaretçilerinizi sitenizde uzun süre tutmak ve onların alt sayfaları gezmesine önayak olmak oldukça zordur

\
\

 

 

2. site i̇çi arama motoru kullanı
tıpkı etiket satırlarında olduğu gibi site içi arama da bir web sitesinde yer alan çok önemli bir elementtir. kullanıclar bir şey aradıklarında, gözleri aradıkları terimi girebilecekleri bir alan arar.

jacob nielsen‘in web kullanılırlık ipuçlarına göre arama kutusu, metnin kolayca görünebilmesi ve kullanılabilmesi için27 karakter genişliğinde olmalı. arama kutusunu sayfanın üst kısmına yerleştirin çünkü ziyaretçilerinizin gözleri f yapısına göre, yani sol üstten sağ alta doğru sitenizi takip eder.

\

3. çok fazla grafik kullanmayın
tasarım elementlerinin ve grafiklerin gereğinden fazla kullanımı bir web sitesi için daima kötüdür, tek yaptıkları şey ziyaretçilerinizi yanıltmaktır. web sitenizi geliştirmek için de tasarlayın, sadece dekore etmek için değil. kullanılırlık açısından daha az her zaman daha verimlidir.

4. site haritaları (sitemap) kullanın
site haritaları görece yeni bir özellik olup web sayfa navigasyonunu ve arama motoru optimizasyonunu (seo) iyileştirir. site haritaları esas itibariyle websitenizin sayfalarının ve mimarisinin yapısal sunumudur. herhangi bir biçimde bir belge, ya da web sitenizdeki sayfaları listeyen bir sayfa olabilir ve genellikle içeriği hiyerarşik olarak listeler.

\

son zamanlarda google, yahoo! ve msn gibi arama motorları sitemap protokolleri sunmaya başladılar. bu protokoller web sitenizin site haritası sayfası ile aşağı yukarı aynı olsa da veriler xml biçiminde depolanır. internet üzerinde bu belgeleri sizin vereceğiniz adres için xml biçiminde oluşturabilecek bazı araçlar bulunuyor.

\

5. i̇ş akışını kesmeyi
i̇ş akışı derken kullanıcının sitenizde attığı her adımdan bahsediyoruzörneğin form doldurmak, web sitesine kayıt olmak, kategorilere, arşivlere gözatmak vs. bu iş akışlarını kesmeyin ve kullanıcının istemesi durumunda herhangi bir işlemi iptal etmesine izin verin. kullanıcının bir iş akışını kesmesine izin vermememiz durumunda, kullanıcı istemese bile onu bir şeyi yapmaya zorlamış oluruz.

bir web sayfasındaki her işlem kullanıcılar için anlaşılır olmayabilir, bu sebeple onlara açıklayıcı ipuçları ile rehberlik edin (örneğin form doldururlarken). javascript bağlantıları genellikle iş akışlarını keserler, bu sebeple onları websitenizde kullanmanız önerilmez.

bir diğer sık yapılan hata da ziyaret edilen bağlantıların renklerini değiştirmemektir.

6. kolayca taranabilir sayfalar oluşturun
kolayca okunabilir web sayfaları oluşturmak, ziyaretçilerinizin sitenize olan bağlılığı, onları sitenizde tutabilmeniz ve içeriğinizi okutabilmeniz açısından önemli rol oynarlar. kullanılırlık testleri gösteriyor ki kullanıcılar web sayfalarını okumazlar, sadece göz gezdirirler, başlıklara, koyu renkle yazılmış yazılara, öne çıkarılmış metinlere ya da listelere bakarlar.

jakob nielsen tarafından yapılan göz izleme deneyleri, kullanıcıların içeriği f yapı modeline göre okuduklarını gösteriyor, bunun anlamı kullanıcılar web sayfasının sol üst köşesinden okumaya başlıyorlar ve ardından gözlerini biraz aşağı kaydırarak tekrar okumaya devam ediyorlar.

\

nielsen ayrıca bu okuma modelinin detaylarını şöyle listelemiş:

  • kullanıcılar web sayfasının içeriğini kelime kelime okumazlar. sadece önemli paragrafları, koyu renkli metinleri vs algılarlar.
  • i̇lk iki paragraf web sayfasında önemli yer tutar. bu iki paragraf web sitenizi ziyaret eden kullanıcıların aradıkları bilgiyi içermek zorundadırlar
  • alt başıklar ve listeler, diğer paragraflara oranla daha dikkat çekicidirler. bu elementleri önemli bilgileri vurgulamak için kullanın.

gazetelerden öğrenebileceğimiz bir diğer önemli yöntem de yazarların genellikle insanların dikkatini çeken bir manşet ve ilk paragrafta yine dikkat çeken cümleler kullanıyor olmalıdır. bu sayede okuyucuların makalenin tümünü okuma ihtimallerini güçlendirirler. i̇çeriği ters dönmüş piramit şeklinde organize ederle. ters dönmüş bir piramiti hayal edin. üstteki geniş kısım tüm makalenin en önemli bilgisini içerirken alttaki incelen kısım daha az önemli kısımları içerir.

en önemli parçaları sayfanın en üzerine, daha az önemli olanları da sayfanın alt kısmlarına yerleştirerek sitemizi organize ederken bu yöntemi kullanabiliriz, ancak hangi bilginin önemli olup olmadığını nasıl bileceğiz? haber değerlerinin yardımı ile.

7. yanlış yönlendiren kullanıcı arabirimi kontrolleri tasarlamayın
kullanıcı arabirimi (ui) kontrolleri ile web sayfa elementleri, öğeleri, widgetleri gibi kullanıcıların iletişim kurabileceği öğeleri kastediyoruz (düğmeler, açılır listeler vb.)

düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayıngenellikle tıpkı birer bağlantı gibi görünen, ancak bağlantı olmayan altı çizili metinlerle karşılaşıyoruz.

kullanıcıların umduğu eylemi kullanmayarak, onların sitenizin çalışmadığı hissine kapılmasının ve bunun ardından da bir süre sonra sitenizi terk etmesinin önünü açmış olursunuz. ui kontrollerine yönelik bir diğer önemli kullanılırlık ipucu da tutarlılık üzerine: ui kontrollerinin tutarlı olduğuna emin olun.

\

yukarıdaki resimden de görebileceğiniz üzere yahoo!, tutarlı ui kontrol tasarımına güzel bir örnektir. sayfadaki her sekme aynı şekilde görünür ve işler, her bir bağlantını altı fare ile üzerine gelindiğinde çizlir, her düğme aynı şekilde görünür vs.

8. anlamlı geribildirimler verin
anlamlı geribildirim bir web sitesi için önem arz eder. bu siteniz ve kullanıcıları arasında bir iletişim kanalıdır ve geribildirimler yardımı ile kullanıcıların sitenizde neler olup bittiğini anlamasının önünü açarsınız. diyelim web sitenizde bir hata var. doğrudan hata oluştu yazmak yerine neyin yanlış gitmiş olabileceğini ve kullanıcının bu hatayı gidermek için neler yapabileceğini listeleyin.

\
\

geribildirimler her iki yönde işler. bir kullanıcı sitenizdeki formu doldurduklarında aslında bir yandan size geribildirim yapmış oluyorlar. kullanıcılardan aynı bilgiyi iki kez girmesini istemeyin. örneğin bir kullanıc web sitenizin halihazırda kayıtlı bir kullanıcısı ise ve bir form doldurması gerekiyorsa, onlara adını ya da üye olurken size verdikleri herhangi bir bilgiyi yeniden sormayın, çünkü bu bilgiler zaten veritabanında ya da bir dosyada bulunuyor. bu verileri doğrudan veritabanından alarak tüm işlemi basitleştirebilirsiniz.

9. çok fazla javascript kullanmayın

javascript ve ajax tekniğinin gelmesi ile web tasarımcıları ve geliştiriciler karşılık verebilen ve esnek web siteleri oluşturabiliyorlar, ancak tüm bu yeni teknolojilerin de bir fiyatı var. bizim durumumuzda bu tarayıcı tutarsızlığı. her kullanıcının tarayıcısı en son sürüm olmayabilir ya da öntanımlı olarak javascript aktif edilmemiş olabilir.

bir websitesinde çok fazla javascript kullanarak bu kullanıcıları engellemiş oluruz. bunun yerine daha mütevazı ve yalın javascript kullanın.

captchalardan kaçının

türkçe’si “i̇nsanlarla bilgisayarları ayırt edebilmek için tümüyle otomatikleştirilmiş yerel turing testi” (completely automated public turing test to tell computers and humans apart) olan captcha’nın adı bile karmaşık. captcha’nın en yaygın kullanım şekli bir metnin imaja edilmesi ve bu metnin ilgili alana doğru yazılıp yazılmadığının test edilerek kullanıcının gerçek bir insan mı yoksa bir spam robotu mu olduğunu anlamaya çalışmak şeklindedir

\

captchaların sorunu her insan doğrulama metodu, kullanıcının beyninde karmaşık işlemleri yürütür(yamutulmuş metni anlamak, iki rakam eklemek vs).

captchalarla ilgili bir diğer problem de farklı kültürler arasındaki tutarsızlıktır. örneğin çince semboller, numaralar pek çok batı dilinden ve arapça’dan farklıdır. çinliler captcha kullanılan web sitelerinde latin alfabesini kullanan ülkelerin insanlarına oranla çok daha zor zamanlar geçiriyorlar.

özet

  • daima web sayfanızdaki en dikkat çeken element olarak konumlandırılmış bir etiket satırı kullanın.
  • 27 karakter genişliğinde bir arama kutucuğu oluşturun ve onu web sitenizin üst kısmına yerleştirin.
  • çok fazla grafik ve tasarım elementleri kullanmayın.
  • site haritası sayfası hazırlayın ve site haritası xml verisini arama motorlarına kaydedin.
  • kullanıcının iş akışının önünü tıkamayın. gerektiğinde her işlemin iptal edilebilmesini sağlayın.
  • kolayca taranabilir web içeriği oluşturun ve en önemli içeriği sayfanın üst kısmına yerleştirin.
  • düğme gibi görünen ancak düğme olmayan grafik elementleri tasarlamayın.
  • anlamlı geribildirimler sunun ve geribildirimlerin iki taraflı işlediğini unutmayın.
  • daha mütevazı javascript kullanın ve verim düşüşünün kabullenilir miktarda olmasına dikkat edin.
  • captchalardan kaçının ve daha kullanışlı yöntemler kullanın.
Reklamlar
Kategoriler:Nuh Gönültaş
  1. Henüz yorum yapılmamış.
  1. No trackbacks yet.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: