F ve Z okuma deseni: kullanıcı sayfayı gözüyle nasıl tarar?
Kullanıcının sayfaya nereden başlayıp gözünü nereye götürdüğünü anlatan F ve Z desenlerini, ne zaman ortaya çıktıklarını ve yerleşimi nasıl şekillendirdiklerini öğrenirsiniz.
Bir bakışta
- F deseni, metin yoğun sayfalarda gözün F harfi çizerek ilerlemesidir. Üstte yatay bir tarama, biraz aşağıda daha kısa bir tarama ve sol kenarda dikey bir iniş görülür.
- F deseni bir tasarım hedefi değil, zayıf sinyallerin sonucudur. Sayfada gözü yönlendiren güçlü işaret yoksa kullanıcı en az çabalı yolu izler.
- Z deseni, az metinli sayfalar için kullanılan bir yerleşim varsayımıdır. Göz üstten sağa, çapraz yoldan sola ve sonra sağa doğru gider; önemli öğeler bu yola dizilir.
- Tasarım, desene uymak yerine gözü bilinçli yönlendirmelidir. Başlık, vurgu ve gruplama taramayı daha dengeli ve kolay hale getirir.
F ve Z okuma deseni nedir?
F ve Z desenleri, kullanıcıların bir sayfayı baştan sona okumak yerine gözlerini hangi yolla gezdirdiğini tarif eden iki yerleşim modelidir. Her ikisi de aynı gözleme dayanır: insanlar web sayfasını kelime kelime okumaz, tarar.
F deseni metin ağırlıklı sayfalarla, Z deseni ise az metinli, görsel ve eylem çağrısı odaklı sayfalarla ilişkilendirilir. Bu desenler birbirinin alternatifi değil, farklı sayfa türlerinde başvurulan farklı varsayımlardır.
F deseni nasıl oluşur?
F deseni, göz izleme çalışmalarında gözlenmiştir. Kullanıcı önce sayfanın üstünde yatay bir tarama yapar. Biraz aşağıda ardından daha kısa bir yatay tarama izler. Son olarak sol kenar boyunca dikey olarak iner. Sonuçta ilk satırların ve her satırın ilk birkaç kelimesi en çok dikkat çeker. Desen sağdan sola okunan dillerde ayna görüntüsü olarak da görülür.
Deseni ortaya çıkaran şu koşullar vardır: sayfa vurgusuz, bölümsüz ve madde işaretsiz bir metin yığınıdır; kullanıcı verimli olmak istemektedir; ve her kelimeyi okuyacak kadar ilgili değildir. Gözü çeken güçlü işaretler olmayınca kullanıcı en az çabalı yolu izler.
Z deseni neyi anlatır?
Z deseni, tasarım pratiğinde az metinli sayfalarda (açılış sayfası, ürün tanıtımı) başvurulan bir yerleşim varsayımıdır. Göz sayfanın sol üstünden sağ üstüne gider, çapraz olarak sol alta iner ve oradan sağ alta ilerler.
Bu yola dayanarak logo ve menü üst bantta, ana mesaj ve görsel ortada çaprazda, eylem çağrısı ise yolun bittiği sağ altta konumlandırılır. Z deseni F deseni kadar göz izleme verisiyle belgelenmiş bir bulgu olarak değil, yönlendirici bir tasarım kuralı olarak kullanılmalıdır.
F metinde, Z sade sayfada taramayı tarif eder
Desenlerin karşılaştırması
| F deseni | Z deseni | |
|---|---|---|
| Tipik sayfa | Makale, haber, uzun metinli sayfa | Sade açılış sayfası, tanıtım sayfası |
| Göz yolu | Üstte yatay, biraz aşağıda kısa yatay, solda dikey iniş | Sol üstten sağ üste, çapraz sol alta, sağ alta |
| Nasıl doğar | Vurgusuz metin yığınında, verimli ve acelesi olan okurda | Az öğeli, belirgin yerleşimli sayfada varsayılır |
| Tasarım hamlesi | Önemli bilgiyi başa ve satır başlarına koymak | Mesajı ve eylem çağrısını yolun duraklarına yerleştirmek |
Tasarımda neyi değiştirir?
F deseni, metin yazanlar ve tasarımcılar için bir uyarıdır. Bu yüzden önemli noktalar ilk paragraflara taşınır, başlıklar gövdeden belirgin biçimde ayrılır ve en anlamlı kelimelerle başlar. Satırların ilk kelimeleri bilgi taşımalıdır.
Kullanılan başlıca araçlar şunlardır: • Bilgilendirici başlık ve alt başlıklar • Anahtar sözcüklerde kalın vurgu • Madde işaretli veya numaralı listeler • İlgili küçük içerik parçalarını çerçeve ya da arka planla gruplamak • "Buraya tıklayın" yerine açıklayıcı bağlantı metni
Z deseninde ise önemli unsurları gözün durduğu noktalara yerleştirmek ve sayfayı fazla öğeyle doldurmamak esastır.
Sık yapılan yanlışlar
En sık hata, deseni kesin bir kural gibi uygulamaktır. Gerçek kullanıcı davranışı sayfanın içeriğine, hedefine ve kullanıcının amacına göre değişir. Güçlü başlıklar, görseller ve gruplama olan bir sayfada F deseni ortaya çıkmayabilir; kullanıcı gözü çeken öğelere göre farklı bir yol izler.
Bir başka hata, önemli bilgiyi desenin boş kalan bölgelerine, örneğin uzun bir paragrafın ortasına gömmektir. Tersine, her şeyi vurgulamak da hiçbir şeyi vurgulamamak anlamına gelir. Bu nedenle desen bir kalıp değil, yerleşimi test ederken kullanılacak bir gözlem çerçevesidir; ısı haritası ve göz izleme gibi araçlarla gerçek davranış doğrulanmalıdır.
UX ve UI programlarında yeri
Tarama desenleri, UI tasarım temellerinin bir parçasıdır. UX/UI Bootcamp, UI tasarım temellerini ve bilgi mimarisini işler; UX / UI Uzmanlığı Sertifika Programı ise kullanılabilirlik ve erişilebilirliği, wireframe ve prototip çalışmalarıyla birlikte ele alır. Desenler burada yerleşim kararlarını test ederken kullanılan bir bakış açısı olarak yer alır.
İlgili Mindset programı
UX/UI Bootcamp
Sık sorulan sorular
F deseni her sayfada görülür mü?
Hayır. Gözü yönlendiren başlık, görsel ya da gruplama varsa desen belirgin olmaz. F deseni, özellikle güçlü işaret olmayan metin yığınlarında ve acele okuyan kullanıcıda ortaya çıkar.
F deseni mobilde de geçerli mi?
Göz izleme çalışmalarına dayanan kaynaklar, desenin hem masaüstünde hem mobilde görüldüğünü bildirir. Mobilde ekran dar olduğundan satır başlarının ve ilk kelimelerin önemi daha da artar.
Z deseni mi F deseni mi seçilmeli?
Seçim sayfanın türüne bağlıdır. Uzun, bilgi veren metinlerde F deseninin uyarısı geçerlidir; kısa, tek amaçlı ve görsel ağırlıklı sayfalarda Z yolunu yerleşim fikri olarak kullanabilirsiniz. Her ikisi de gerçek kullanıcıyla sınanmalıdır.
Sağdan sola yazılan dillerde ne olur?
F deseninin sağdan sola okunan dillerde ayna görüntüsü olarak ortaya çıktığı bildirilmiştir. Yani göz sağ kenardan başlar. Türkçe soldan sağa okunduğundan bu durum Türkçe sayfalar için geçerli değildir.