Kullanıcı deneyimi tasarımcıları için oldukça yararlı bir kaynak olan Konigi.com’un kurucusu Michael Angeles HTML ile prototipler oluşturmamızı sağlayacak bir yöntem olarak Protokit’i oluşturdu. Protokit Blueprint, jQuery, jQuery UI, jQuery Templates, ve iXEdit gibi açık kaynak kodlu kütüphaneleri ve eklentileri kullanarak prototip oluşturmamızı oldukça kolaylaştırmakta.

Protokit ile oluşturulmuş bir anasayfa ve bir makale sayfası protokit’in neler yapabileceğini oldukça güzel örnekliyor.

Angeles’in Protokit’i anlattığı video’yu da aşağıda görebilirsiniz.

Form Alanlarında Etiket Yerleşimi yazısında sola dayalı, sağa dayalı ve form alanının üstünde olan etiketlerden bahsetmiştik. Yapılan göz izleme çalışmasında hız konusunda en başarılı olan seçeğin etiketlerin form alanının üstünde olduğu formlar olduğu ortaya çıkmıştı.

Web Form Design : Filling in The Blanks kitabının yazarı Luke Wroblewski, Event Apart’ta yaptığı sunumda bu 3 seçeneğin hangi durumlarda kullanılması gerektiğini paylaşmış.

Wroblewski’ye göre zaman kısıtı varsa ve formda giriş yapılacak alanlar birbirine benzerse etiketlerin form alanının üstünde olduğu şekli, eğer dikey olark formun çok uzun olmaması gerekiyorsa sağa dayalı etiketleri ve eğer form alanları oldukçe gelişmiş ve birbirine benzemeyen yapıdalarsa sola dayalı etiketleri kullanmak doğru form oluşturmak için önemli bir başlangıç olmakta.

Gazetelerin raflarda dururken görünün üst tarafı için ‘Above the Fold’ terimi kullanılıyor. (Fold kıvırmak anlamına gelen bir fiil aynı zamanda) Bu alanın gazete satışlarında çok önemli bir rol oynadığını söyleyebiliriz.

Web siteleri içinse ‘Above the Fold’, kullanıcı sayfaya girdiğinde tarayıcısında kaydırma yapmadan gördüğü alana deniliyor. Farklı tarayıcılarda, farklı ekran çözünürlükleri bu alanın kullanıcıdan kullanıcıya değişmesinde rol oynamakta. Gazetelerle benzer şekilde websitesileri için de bu alan çok önemli konumda. ‘Web sitesi kullanıcının karşısına çıktığı anda yaklaşık 5 saniyede derdini anlatabilmelidir’ düşüncesi fold’u web siteleri için çok daha önemli bir konuma getiriyor.

‘Above the Fold’ ve kaydırma çubuğu hakkında bugüne kadar yapılan araştırmalarda  çıkan sonuçların oldukça farklı olduğunu görüyoruz.

Jacob Nielsen, Prioritizing Web Usability kitabında yaptığı kullanılabilirlik testlerinde kullanıcıların sadece %23′ünün kaydırma çubuğunu kullandıklarını, %77′sinin ise gördükleri alan ile yetindiklerini anlatıyor.

Web istatistik ve analiz servisi Clicktale ise 80.000 sayfa görüntülenmesi üzerinden yaptığı araştırma sonucunda sayfaların %91′inde kaydırma çubuğu (scroll bar) bulunduğunu ve  bu sayfaların %76′sında kullanıcıların bu çubuğu kullandıklarını belirtiyor.

Yakın zamanda Cxpartners blogunda yaklaşık 6 yıldır toplamda 800 kullanıcı ile yaptığı kullanılabilirlik testlerinde  kullanıcıların büyük bölümünün kaydırma çubuğu kullanıp fold’un altına kalan bölüme de eriştiklerini anlatıyor.

CXpartners ayrıca kullanıcıların fold’un altına inmesini fold’un üstünde bütün içeriğin sıkıştırılmış şekilde olmamasına bağlıyor. Örnek olarak Bristol Airport’un web sayfasının A/B testinde fold’un üstünde daha az içerik olduğunda fold’un altına daha fazla odaklanma olduğunu aşağıdaki sıcaklık haritasından görebiliyoruz.

Cxpartners çalışmalar sonrasında fold ile alakalı üç öneride bulunuyor:

1. Az çoktur – sayfada her şeyi fold’un yukarısına koymayın. Beyaz alanların ve resimlerin güzel kullanımı kullanıcıda keşfetme merakı yaratacaktır.

2. Sade yatay çizgiler kullanın- Bu tarz yatay çizgiler kullanıcıları sayfayı aşağıya kaydırmaya yöneltiyor. Tabi bu sayfayı anlamsız yatay çizgilerle doldurmak anlamına gelmiyor.

3. Sayfa içi kaydırma çubuğundan kaçının Tarayıcının kaydırma çubuğu sayfanın içerik uzunluğu hakkında net bir bilgi verirken İframe veya başka bölümlerde sayfa içinde de kaydırma çubuğu kullanmak alttaki içeriğin görünmemesine yol açabilir.

Çalışmalardaki sonuçlar bu şekildeyken ve hala fold konusu kullanılabilirlik alanında bir mit (myth) iken,  Google Labs’da pişmekte olan Browse Size adlı ürün web sitesinde hangi alanların kullanıcılar için ‘Above the Fold’ olduğunu belirlemeye yaramakta.

Browser Size, Google kullanıcılarının ekran çözünürlük istatistiklerinden yola çıkarak bir sayfanın hangi bölümlerinin ne oranda fold alanının üstünde yer aldığını gösteriyor. Örnek olarak aşağıda Userspots için çıkan sonucu görebiliriz.

Browser Size kaydırma çubuğuyla alakalı bir sonuç vermezken aynı zamanda tarayıcıların yukarı kısmında kalan bölümleri de hesaba katmıyor.

Google, Apple ve Sizin Uygulamanız karikatüründeki uygulamanın benzerine sahip bizler  websitelerimizin anasayfasına  yeni özellikler ekleyip kullanıcı deneyimini “zenginleştirirken” Google “Az Çoktur” prensibinden yola çıkarak anasayfasındaki yoğunluğu azaltmak için çalışmalara devam ediyor.

Google resmi blogundan yaptığı açıklama ile artık anasayfasında kullanıcılar fare imlecini hareket ettirmedikleri sürece sadece Google logosu ve arama kutusunun yer alacağını bildirdi.  Google Arama Ürünleri ve Kullanıcı Deneyimi Birimi Başkanı Marissa Mayer, bu değişiklik ile  sadece arama yapmak isteyen kullanıcıların dikkatlerini dağıtacak öğelerin azami seviyeye indirildiğini belirtti.

Resmin sol tarafında sayfa ilk açıldığındaki halini, sağ tarafında ise sayfanın fare imleci hareketinden sonraki halini görüyoruz.