Tasarımcı olmasa da, tasarım konusunda işi gereği yorum yapan uzman, yönetici veya ajans çalışanları için bu paylaşımın faydalı olacağına inanıyorum. Verdiğimiz kararlarda asıl alanımızdan çıkıp, estetik anlayışımıza, yetişme tarzımıza bağlı olan kararlar veriyoruz ve hedef kitlenin kendimiz olmadığını sıkça unutuyoruz. Aşağıdaki paylaşım, tasarımları değerlendirirken daha objektif değerlendirme sunmamıza yardmcı olacaktır.
Görsel Hiyerarşi: Doğal göz hareketi modellerini takip edecek şekilde içeriği düzenleme
Herhangi bir dijital sayfa düzenindeki içerik, belirli bir hiyerarşiyi izleyecektir. Başlıklar, gövde metninin üzerinde görünür. Menüler ekranın üstüne, altına, soluna veya sağına (veya bunların herhangi bir kombinasyonuna) gider. Tasarımcılar içeriği, herhangi bir sayfada ilk önce en yüksek öncelikli içeriği sunacak şekilde düzenlemeye çalışırlar. Ardından, içeriğin geri kalanını en yüksekten en düşüğe doğru iletirler.
“Hiyerarşi” basitçe organize en çok en önemlisi demenin daha güzel bir yoludur. İçerik blokları arasındaki ilişkileri (ilişkilerin olduğu yerlerde) göstermek için de “hiyerarşi” kullanıyoruz.
Kullanıcılar bir web sitesi veya uygulamanın görsel hiyerarşisini tanımlar. Gözün dikkatini çeken ilk öğe hiyerarşinin en üstündedir. Daha sonra dikkat çeken her öğe, bir öncekine bağımlıdır.
Hiyerarşi İlkesi
İnsan gözü bilgiyi veri blokları yerine görsel olarak algılar. Bilgisayarların aksine, gözümüzün doğal eğilimlerinin insafına kaldık. Küçük çocuklar olarak karşılaştığımız okuma materyalinde birçok resim ve daha büyük baskılar yer alıyordu. Bunlar çizgi roman, boyama kitabı veya hikaye kitabı olsun, neler olup bittiğini anlayabilirdik çünkü illüstrasyonları algıladık ve olayların sırasını okunması kolay metnin yanında yorumladık.
Bilgiyi algılama şeklimiz, içeriğin hiyerarşisini mizanpaj içinde nasıl sıraladığımıza katkıda bulunan çeşitli faktörlerden etkilenir. Jones (2011), hiyerarşiyi etkileyen faktörlerin şunları içerdiğini gösterdi:
- Boyut : Öğe ne kadar büyükse, küçük öğelere kıyasla o kadar fazla dikkat çekecektir. Bir gazete manşetini düşünün. Gazete, metnin geri kalanının (daha küçük yazı tipinde) ne vereceğini belirtmek için bu (büyük yazı tipi) başlık metnini kullanır. Farazi bir “son dakika” hikayesini ele alalım. Gözün doğrudan başlığa gitmeli. Sizi neyle ilgili olduğunu öğrenmeye teşvik ederek nasıl hakim olduğunu fark ettiniz mi?
- Renk : Parlak renkler, sıkıcı tonlardan daha çok dikkat çeker. Muhtemelen hepimiz, fotokopili bir bildiride olağanüstü noktaları işaretlemek için bir fosforlu kalem kullandık. Sarı, beyazdan daha zengin ve daha parlaktır (beyazın daha sessiz olması anlamında), bu yüzden öne çıkar. Parlak renklerden sonra daha zengin ve koyu renkler gözün dikkatini çekecektir. Bunu daha açık tonlar takip eder, çünkü daha soluk ve uzak görünürler. Renk hiyerarşisinin altında gri tonlamalı veya hafif renkler vardır.
- Kontrast : Dramatik olarak kontrast oluşturan renkler, biraz kontrast oluşturan renklerden daha fazla dikkat çekecek. Kontrast, tasarımınızda neyin daha önemli olduğunu göstermenize yardımcı olur. Her şey görecelidir. Bir mimarın yüksek katlı apartmanlar planına dayalı bir tasarım yapmak istediğinizi hayal edin. Havadar ve çevre dostu binaları yerin üstünde göstermek istiyorsunuz, ancak aynı zamanda güçlü, derin temelleri ve altındaki yer altı otoparkını da göstermelisiniz. Tasarımınızı bu şekilde bölerek orman kenarındaki apartmanların keyifli yaşam özelliklerine dikkat çekin. Bu, yapıların kullanışlılık ve güvenlik tarafını gösterdiğiniz alt mesaj da verir. Küçük bir hiyerarşi, kullanıcıyı meşgul etmek için büyük bir yol kat eder.
- Hizalama : Hizalama, tasarım öğeleri arasında düzen oluşturabilir. Örneğin, içerik ve ardından bir kenar çubuğu sütunu yerleştirmek okuyucu için bir öncelik oluşturur. Önemli bilgilerin (giriş düğmeleri gibi) bir sayfanın sağ üst köşesinde olmasını bekleriz. Bunu dergilerde de görüyoruz. Mesela alıntılar.. Yazarın konunun ne dediğini vurgulamak istediği alıntı, röportajın parçasıdır. Daha büyük yazı tipi ve diğer metnin hizalamasından kopması ile önce gözümüzü çeken bir hiyerarşi oluşturur.
- Tekrar : Tekrar eden stiller, izleyiciye içeriğin ilişkili olduğu hissini verebilir. Bir başka güzel örnek de hiper bağlantılardır. Altı çizili çok sayıda mavi kelime olan bir sayfayı ziyaret ettiğinizde, birçok başka sayfaya tıklayabileceğinizi hemen anlarsınız.
- Yakınlık : Tasarım öğelerini birbirimize ne kadar yakın yerleştirdiğimiz, kullanıcılarımıza bunların ne kadar ilişkili olduklarını söyler. Listemizde, öğeleri tek bir satır boşlukla ayırdık. Bu yakınlık, liste öğelerinin ayrı olduğunu (birbiriyle tamamen alakasız olmamakla birlikte), ancak başlıkların aşağıdaki içerikle ilgili olduğunu gösterir.
- Boşluk : Belirli içerik parçalarına dikkat çekmek için içeriğin etrafındaki boşluğu (sadece beyaz değil, herhangi bir renk olabilir) kullanabilirsiniz. İki görevi yerine getirir: bilgiyi gözün sindirmesini kolaylaştırır ve gözün her bilgi alanına (bu durumda paragraflar) odaklanmasını sağlar.
- Doku ve stil : Dokuların ve stillerin kullanımı da içeriğin önceliklendirilmesine yardımcı olabilir. Yazı tipleri gibi, tasarımın tonunu belirleyebilirler. Bir çift proje hayal edin. İki seyahat acentesi, tatil köyü paketi fırsatlarını göstermek için bir açılış sayfası istiyor. Biri plaj temalı, diğeri göl temalı. Plaj temalı tatil köyü için, güzel beyaz kumun üzerinde uzanan berrak suyun arka plan yakın plan görüntüsünü sunabilirsiniz. Bu etkili olur, ancak etkiyi göl ile tekrar etmeye çalıştığımızda, kristal berraklığındaki suyun bize çok sayıda büyük, koyu çakıl ve taş verdiğini görebilirsiniz. Bu doku, pürüzsüz kumdan çok daha dokulu olduğu için çok dikkat dağıtıcı oldu.
“Göz Alıcı Tasarımların Psikolojiye İhtiyacı Var”
Hiyerarşi Kalıpları
Hem basılı sayfada hem de dijital sayfada hiyerarşi için ortak modeller vardır. Bu modeller, yeni bir sayfa ile sunulduğunda gözlerimizin yapma eğiliminde olduğu hareketlere dayanmaktadır. Örneğin İngilizce soldan sağa doğru okunur. İngilizce okuyucular bir metin sayfasına bakarken belirli bir tarama modeline sahiptir. Arap okuyucular farklı bir kalıba sahiptir. Neden? Çünkü Arapça, sağdan sola okunur.
Bir hiyerarşi modelini benimsemeden önce kitlenizin bilgileri nasıl işlediğini anlamak önemlidir . Bu yazının orjinali İngilizce olduğundan, buraya soldan sağa okuyanlar için kullanabilecek iki yaygın soldan sağa kalıbı ekledik:
Z Modeli
Düşük düzeyde metin içeriğine sahip web sitelerinde (örneğin, hacimli bilgi sunmak yerine bir işletme veya ürün için küçük reklamlar görevi gören web sitelerinde), Z göz tarama modeli yaygındır. Kullanıcı “text-lite” sayfasını görür ve sol üstten sağ üste tarar, ardından sağ alta geçmeden önce içeriğe (köşegeni takip ederek) sol alta doğru bakar.
Bu göz hareketinin takip ettiği Z modeli boyunca en önemli bilgileri dahil ettiğinizden emin olarak bu kalıbı kullanabilirsiniz. Z şeklinde giden üç çizgiyle birleştirilen dört noktanız olacak.
F Modeli
Tasarımcılar genellikle metin ağırlıklı içerik ve / veya video içeriği içeren web sitelerinde F modelini uygular.
F kalıbı ile, kullanıcılar yukarıdan soldan sağa tarayarak başlarlar, ancak aradıkları bilgiye ilişkin görsel ipuçlarını arayarak sayfanın sol tarafını aşağı doğru tararlar. Böyle bir ipucu bulduklarında soldan sağa doğru tarama yaparlar. Bu işlemi sayfanın sonuna gelene kadar tekrar ederler.
Bu tarama modeli, genellikle bu makalenin üst kısmındaki resimde gösterildiği gibi “F” harfine benzeyen bir ısı haritası oluşturur.
Aynı web sitesinde hem Z hem de F kalıp sayfalarını kullanmak tamamen mümkündür. Örneğin, Z modelini kullanan çok temiz bir ana sayfanız olabilir; ancak, kullanıcı siteyi daha derine indiğinde, çok daha fazla veri sunabilir ve bunun yerine bir F kalıbı kullanabilirsiniz.
Son söz
Hiyerarşiler, bir tasarımı kolayca anlamamız için bize emir verir. Kullanıcılarımızın ne istediğini nasıl bildiğimize ve onlardan ne yapmalarını istediğimize göre başlıklara ve menülere öncelik vermek istiyoruz. Bilgileri görsel olarak işliyoruz, unsurları tasarımcının vurguladığı sırayla algılıyoruz:
- Boyut – Daha büyük öğeler hakim olacak ve önce göze çarpacak.
- Renk – Parlak renkler, sessiz ve sıkıcı renklerin önünde göze çarpar.
- Kontrast – Öğeler arasındaki keskin farklılıklar, gözleri daha parlak olana çeker.
- Hizalama – Kullanıcılar belirli öğeleri aynı yerde bulmayı beklerler.
- Tekrar – Tekrarlanan bir kalite (ör. Metnin renkli kısımları) kullanıcının dikkatini çeker.
- Yakınlık – İlgili öğeleri (ör. İlişkili metinle başlık) yan yana koymak, bunların ilişkili olduğu anlamına gelir.
- Beyaz Boşluk – Öğelerin etrafına beyaz boşluk eklemek, bunları ayrı bilgi grupları olarak ayırır.
- Doku ve Stil – Farklı dokular / stiller (ör. Kalın, askeri tarz düğmeler) kullanmak, temayı ayarlarken göze çarpıyor.
Batı Dünyasında tasarımları iki ortak hiyerarşik modele göre okuruz:
Z Deseni – Çok fazla metin içermeyen tasarımlarda, gözümüz soldan sağa, sonra çapraz olarak aşağıdan sola doğru taramaya başlar ve sağ altta durur.
F Deseni – Daha fazla metin içeren tasarımlarda, bilmek istediklerimizle ilgili ipuçlarını arayıp yukarıdan soldan sağa, sonra sola tararız.
Daha etkili tasarımlar yapmak için bu faktörleri dahil edebileceğinizi garanti etmek için kullanıcınızın gözüne sahipsiniz. Planlarken tüm bunları aklınızda bulundurun. En iyi çabanız, Z ve F modellerinin bir birleşimi de dahil olmak üzere hepsini kullanmayı içerebilir. Kullanıcılarınız için tasarladığınızı unutmayın. Ne kullanıyorlar ve bunu çevrimiçi olarak nasıl görmek isteyebilirler?
Nereden Daha Fazla Bilgi Edilebilir (İngilizce)
Kurs: Görsel Algılama ve Tasarım:
https://www.interaction-design.org / kurslar / görsel algı ve tasarıma-nihai-kılavuz
Jones, B. (2011) Web Tasarımında Görsel Hiyerarşiyi Anlama. Web Tasarımı Tuts Plus. Erişim: http: //webdesign.tutsplus.com/articles/understandi … [2015, Mayıs]
Bank, C. (2015?) “Web UI Görsel Heirarchy’yi Anlamak” .Awwwards. : http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html
Bradley, S. (2015). “Tasarım İlkeleri: Hakimiyet , Odak Noktaları ve Hiyerarşi”. Smashing Magazine . Erişim: http://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/
Cao, J. (2015). “Web tasarımında görsel hiyerarşinin 5 Sütunu”. / TNW. : http://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/