[UX mevs] #01 — Gutenberg Prensibi

S01E01

Giriş

Merhaba Ben Çağdaş ve burası TurkNet Design. Serinin ilk bölümünde, basit ve fakat doğru uygulandığında tasarladığın arayüze +1 değer puanı kazandıracak bir konuya değineceğim.

[UX mevs] #01 — Gutenberg Prensibi

Gelişme: Gutenberg prensibi ya da diğer adıyla Z-Pattern

Nedir?

Gutenberg [Z-Pattern] kullanıcıların tasarım üzerindeki genel göz hareketlerini açıklamaya çalışan bir araştırmaya dayanıyor.

Nasıl Çalışıyor?

Z-Pattern’e göre soldan-sağa dilleri okuyan kullanıcılar bir içerik tüketirken bunu genellikle Z biçiminde bir okuma yolu ile yapıyorlar.

1. Primary Optical Area
2. Strong Fallow Area
3. Weak Fallow Area
4. Terminal Area

Sonuç

Dolayısıyla tasarımlarını uygularken önemli olduğunu düşündüğün aksiyonları bu pattern’e göre yerleştirdiğinde tasarladığın ürünlerin kullanılabilirliğini daha yukarılara çıkarabilirsin.

👎 Mobil evrende hatalı kullanıma örnek — 🖖 Mobil evrende doğru kullanıma örnek:

👎 Geniş cihazlarda hatalı kullanıma örnek:

🖖 Geniş cihazlarda doğru kullanıma örnek:

Sen de kullanıcılarının okuma alışkanlıklarını hotjar, logrocket, inspectlet veya benzer araçları kullanarak görebilir ve yorumlayabilirsin. Ziyaretçilerine göstermek istediğin önemli içerikleri ve aksiyonları bu okuma alışkanlarına göre doğru alanlara yerleştirebilir, bu sayede tasarımının okunabilirliğini daha yukarı çekebilirsin. 🧠

Ve en önemlisi de, tasarımlarını gutenberg prensibine uygun olarak çalışmak bedava 🫠 Yani, sana hiçbir şey kaybettirmeyecek.

Bonus:

Ayrıca bunun kati bir kural olmadığını, benzer şekilde farklı bir okuma modeli olan F-Pattern’in de oldukça popüler olduğunu hatırla ve kendi araştırmanı yap.

Sıkça tartışılan tarama deseni F vs Z Pattern

Kaynaklar

• https://elearningindustry.com/user-interface-design-hacks-create-dynamic-box-experience-actionable-5
• https://medium.com/@CallaghanDesign/left-or-right-824aee5f96c9

Serinin Devam Yazısına Git 👇

[embed][UX mevs] #02 — Görsel Kullanımının Kullanıcı Deneyimine Etkisi #S01E02medium.com