UX Tasarımında Göz Taraması Görsel Hiyerarşiyi Nasıl Etkiler?
Yunan vazolarından İtalyan şapellerine kadar binlerce yıllık sanat, güzelliğin ne olduğu konusundaki anlayışımızı şekillendirirken, göz izlemenin arkasındaki nispeten yeni teknoloji, dünyayı görsel olarak algılayışımıza yeni bir dinamik katıyor. Daha da önemlisi, bu heyecan verici yeni bilim, hem etkili hem de estetik olan web sitelerinin daha iyi anlaşılmasına - ve daha iyi bir tasarıma - yardımcı oluyor.
Web tasarımı (görsel sanat olarak), daha geleneksel sanat biçimleriyle aynı kuralların çoğunu izler. Bu yazıda görsel organizasyonun önemini kısaca anlatacağız, ardından göz izleme bulgularının web arayüzlerinin düzenini nasıl geliştirebileceğini açıklayacağız.
Görsel organizasyon oluşturma
Bir web sitesinin nasıl göründüğünün başarısını nasıl etkilediği hiç de şaşırtıcı değil, bunun nedenlerini belirlemek önemlidir. Onun gazetesinde Görsel Hiyerarşi ile İletişim Kurmak , Luke Wroblewski, Yahoo! 'Da Tasarım ve Ürün Tasarımı Kıdemli Müdürü, bir web arayüzünün görsel sunumunun aşağıdakiler için gerekli olduğunu açıklıyor:
Rehberlik
İyi yapılmış bir arayüz, kullanıcıları bir eylemden diğerine aşırı hissetmeden hissettirebilir. İş uygulamalarını düşündüğünüzden bağımsız olarak, şüphe yok ki Uber inanılmaz derecede pürüzsüz ancak yapılandırılmış bir web sitesinin bir örneğidir. Değer önerileri kaydırmanın en üstünde yer alır, ardından farklı araba seçeneklerini öğrenmek için eğlenceli bir kaydırıcıyı takip eder ve şehrinizde yolculuk bulmak için mantıklı bir sonraki adımı tamamlar.
İletişim
Aksine bilgi parçalarından farklı olarak, bir kullanıcı arayüzü, kullanıcının aklındaki linkleri oluşturarak, bir şey söylemeden mesajlar iletebilir. Popüler tasarım web sitesine bakın Abduzeedo : Geniş kategoriler en üstte, ortadaki içerik özelliklerinde ve altbilgideki ayrıntılı kategorilerde.
Duygusal etki yaratmak
Web sitenizi düşünmenin hatalarını yapma, sadece mekanize bir araçtır. Web siteleri duygusal bağlantılar kurma potansiyeline sahiptir ve eğer sizinkiniz değilse rakiplerinizin iradesidir. Aslında, olumlu bir sonuç çıkarsanız, insanlar ara yüzünüzün kusurlarını affetmeye daha eğilimli olabilirler. duygusal tepki . MailChimp Kullanılabilir, arayüzlü ve kullanımı eğlenceli bir arayüze sahip bir sitenin mükemmel bir örneğidir.
Öngörülebilir insan gözü
Bazen, gözlerin kendi zihinleri vardır. Yıllarca süren evrim, bizi önemli gördüğü nesneleri ve hareketleri, birinin caddede seksi bir yürüyüş yapıp yapmamasını ya da sevimli bir bal ayı reklamının olup olmadığını belirleme içgüdülerini verdi. Önemli olanlara verdiğimiz nispi ağırlık insandan insana farklılık gösterebilirken, bir sabit, davrandıkları mekanizmalardır. Büyük ölçekte, insanların çoğunluğu bir web sayfasını görüntülerken aynı eğilimleri takip eder.
Bu trendlerden, ayrıntılı olarak tartışacağımız iki tane var. Bir görsel ilkeler hakkında makale 99Designs için Tasarım Yazarı Alex Bigman, soldan sağa okuyan kültürler için, bir web sitesinin düzenini tasarlarken bu iki modelin en yaygın ve en kullanışlı olanlarını nasıl gösterdiğini gösteriyor.
Birincisi, F-Deseni, çoğunlukla metin için kullanılır (ancak başka amaçlar için uyarlanabilir). İkincisi, Z-Modeli, herhangi bir görsel düzen için kullanılabilir. Aşağıda her biri için farklı artıları ve eksileri açıklayacağız.
F-Desen
F-Deseni, metinler, genellikle bloglar, haber kaynakları, makaleler vb. İle yüklü olan sayfalarda ortaya çıkan görme eğilimidir.
Bir kelime bloğu ile karşılaşıldığında, çoğu okuyucu ilk olarak metnin sol tarafında aşağıya doğru bir dikey çizgi tarayacak ve genellikle paragrafın ilk cümlelerinde anahtar kelimeler veya ilgi noktaları arayacaktır. Sonunda okuyucu beğendikleri bir şey bulur ve normal olarak okumaya başlar, yatay çizgiler oluşturur. Son sonuç, F veya E harflerine benzeyen bir şeydir.
Nielson Norman Group'un Jakob Nielson, binlerce web sitesini taranan 232 kullanıcıya dayanan bir okunabilirlik çalışması gerçekleştirdi. Araştırmalarından, neye inandığını kaydetti. pratik çıkarımlar F-Modelinin
- Kullanıcılar metninizin her kelimesini nadiren okuyacaktır.
- İlk iki paragraf en önemlisidir ve kancanızı içermelidir.
- Baştan çıkarıcı anahtar kelimelerle paragrafları, alt başlıkları ve madde işaretlerini başlatın.
Her zaman olduğu gibi, sol üst köşede, tüm soldan sağa okuma kültürlerinin başladığı yer olduğu gibi, en önemli olanıdır. Kullanıcı genellikle başlık üzerinde yatay olarak okuyacaktır, bu yüzden bir gezinme çubuğu ve / veya harekete geçirici mesaj için iyi bir yer. Ardından kullanıcı, onları ilgilendiren içeriğe rastlayana kadar, dikey olarak sol tarafa doğru tarar. Son olarak, kullanıcı sayfanın sağ tarafında, harekete geçirici mesaj veya reklam içeren harika bir yerle biter. Sadece kenar çubuğunun içeriğe zarar vermesine izin vermeyin.
Ancak F-Deseni bir şablon değil - gerçekte tam bir uygulama değil, çoğu kullanıcının eğilimlerinden oluşan gevşek bir kılavuz. Bunu aklınızdan çıkarmayın çünkü F-Pattern etkinliğini kaybeder F'nin üst sıralarından sonra.
Kickstarter, özellik projelerini göstermek ve ilk 500 pikselden sonra görsel olarak sıkılmamak için bir kart düzeni kullanır.
Diğer yandan, iZettle ana sayfalarında F-Pattern'e daha geleneksel bir yaklaşım getiriyor. Ancak, birincil kopyanın (“İşinizi iZettle ile büyütün”) üst üste bindirerek ve büyük arkaplan resminde harekete geçirici mesajlar kullanarak templu bir görünümden kaçınmayı başarırlar. Bu okuma modelini arayüz düzeninize adapte etmek için bu minimum değeri düşünürüz.
Z-Desen
Ek olarak, Z-Deseni, metne dayalı herhangi bir web sayfasında popüler olarak kullanılan en basit ve en evrensel modeldir. Okuyucu ilk önce yatay olarak üstte, aşağı doğru ve sol tarafa doğru tarar, ardından alttan yatay olarak tekrar tarar.
Anlamak önemlidir çok yönlü Z-Modeli hiyerarşi, markalaşma ve harekete geçirici mesajlar gibi temel web sitesi gereksinimlerini ele alır. Güzelliği sadeliğinde ve harekete geçirici mesajlar etrafında odaklanmış siteler için ideal bir düzende. Bununla birlikte, daha karmaşık veya aşırı içerik için Z-Deseni çok basit olabilir.
Z-Deseni sayfanız için doğru mu düşünüyorsunuz? Avantajları optimize etmek için birkaç en iyi uygulama:
- Arka Plan - Arka planın bulunduğu yeri koruyun. Okuyucunuzu rahatsız etmek istemezsiniz.
- Nokta # 1 - Başlangıç noktası olarak, bu genellikle logonuzu yerleştirmek istediğiniz yerdir.
- Nokta # 2 - Ana harekete geçirici mesaj daha sonra gelirse de, burada yatay bir gezinme çubuğunu işaretleyerek ikincil bir harekete geçirici mesaj için iyi bir yer. (Güzel bir grafik veya görüntü kaydırıcısı, sayfanın üst ve alt kısımlarını ayırmaya yardımcı olacak ve okuyucunun Z-Modelinin öngörülebilir yolunda kalmasını teşvik edecektir.)
- Nokta # 3 - Bu, diğer bağlantılar için dikkat çekmek için veya alternatif olarak kullanıcının görüşlerini nihai hedefe yönlendirmek için iyi bir yer: Nokta # 4.
- Nokta # 4 - "Bitiş çizgisi" olarak, bu ana harekete geçirici mesajınız için mükemmel bir yer.
Yapmak istediğiniz ilk şey, sayfanızdaki öğeleri kendiniz için önceliklendirmektir, böylece en önemli ve en önemlilerini bilirsiniz. Oradan, onları uygun “sıcak noktalara” ayırmanın basit bir meselesi.
Ayrıca, Z-Deseni sayfanın tamamı boyunca tekrarlanabilir ve genişletilebilir. Sadece nasıl bir göz atın Evernote Harekete geçirici mesajlar ve satış noktaları aracılığıyla zikzaklı zaglar.
DropBox herhangi bir arka plan görüntüsü ile uzaklaştırarak bu zikzak desenine görsel olarak daha basit bir yaklaşım getiriyor. Bunun yerine, daha fazla işlevsellik, “Daha Fazla Bilgi” harekete geçirme ifadesi, gözünüzün sayfanın altına düştüğü sırada sargı modelinin her bölümünü birbirine bağlamaya yardımcı olduğundan, düzende daha fazla işleve sahiptir. Bu ayrıca bilgilendirilmiş okuyucuların önce tüm kopyaları okumak zorunda kalmadan bir sonraki sayfaya gitmelerine yardımcı olur.
Öngörmede görüş
Büyük arayüz tasarımı, okuyucuyu düşünce hızında yönlendiren görünmez bir el gibi olmalıdır. F-Pattern ve Z-Pattern trendlerinden gelen önemli paket, en önemli içeriğinizi okuyucunun, onlara bakmak için onları zorlamaya çalışmak yerine, doğal olarak “yanmasına” neden olabileceğinizdir.
Bu incelik, herhangi bir sayfa düzeni için büyük bir avantajdır ve bu modeller, okuyucunuza bir şey düşündürmekle, boğazından aşağıya itmek arasındaki farkı yaratabilir.
Öne çıkan resim, kullanır insan gözü görüntüsü Shutterstock üzerinden.