Gözü yönetmek: renkle hiyerarşi

Kısa cevap

Bir sayfada her şey vurgulandığında hiçbir şey vurgulanmaz: göz, çevresinden ayrılan öğeyi kolayca bulur, ama çevredeki her öğe birbirinden farklı ve parlak olduğunda aradığını bulmak zorlaşır. Renkle hiyerarşi kurmanın temel yolu, sayfanın büyük kısmını sakin, nötr renklerde tutmak ve en önemli bir iki öğeye tek bir vurgu rengi vermektir. Bir tasarımın bu hiyerarşiyi gerçekten kurup kurmadığı, onu bulanıklaştırıp neyin ilk göze çarptığına bakarak sınanabilir.

Hiyerarşi nedir?

Bir afişe, bir web sayfasına ya da bir menüye baktığımızda, göz her şeyi aynı anda görmez. Önce bir noktaya gider, oradan bir başkasına geçer ve sonunda bütünü tarar. Tasarımcının işi, bu yolculuğun sırasını, yani okuma sırasını kurmaktır: önce başlık, sonra görsel, sonra fiyat, en son ayrıntılar.

Renk bu araçlardan yalnız biridir, ama güçlü bir araçtır: rengiyle öbürlerinden kopan tek bir öğeyi göz, aramaya başlamadan yakalar; DT-12 bu "öne fırlama" etkisine değinmişti. Bu, renkle hiyerarşinin temelidir. Dikkatin bilimsel açıklaması PS-04'ün konusudur; burada o bilginin tasarımdaki kullanımına bakıyoruz.

Her şey vurgulandığında ne olur?

Kartın sorusu, renkle hiyerarşinin en yaygın hatasını sorar. Bir tasarımcı başlığı kırmızı, alt başlıkları turuncu, düğmeleri mavi, fiyatları yeşil, uyarıları sarı yapar. Her öğe önemli olduğu için her biri kendi rengini alır. Sonuç, gözün nereye gideceğini bilemediği bir sayfadır.

Bunun nedeni görsel aramanın nasıl işlediğidir. John Duncan ve Glyn Humphreys'in 1989'da yayımladığı kuram, bir hedefi bulmanın kolaylığının iki şeye bağlı olduğunu savunur: hedefin çevresindeki öğelerden ne kadar farklı olduğuna ve çevredeki öğelerin birbirine ne kadar benzediğine. Sonraki araştırmalar da, çevre öğeler birbirine tamamen benzediğinde aramanın en kolay olduğunu, çevre çeşitlendikçe aramanın yavaşladığını gösterdi.

Bu, sayfa tasarımına doğrudan çevrilebilir. Nötr ve türdeş bir sayfada tek bir kırmızı düğme, gözün hemen bulduğu bir hedeftir. Ama her öğesi farklı ve doygun bir renkte olan bir sayfada, kırmızı düğme yalnızca bir renkli öğe daha olur; çevresi artık türdeş değildir ve göz onu diğerlerinden ayırmak için çaba harcamak zorunda kalır. Her şey vurgulandığında, vurgu, çevreden ayrılma gücünü kaybeder.

Bir de bellek boyutu vardır. Hedwig von Restorff'un 1933'te yayımladığı çalışmadan beri bilinen yalıtım etkisine göre, bir dizide çevresinden belirgin biçimde farklı olan öğe daha iyi hatırlanır. Bir sayfada tek bir farklı öğe akılda kalır; on farklı öğe birbirini siler.

Tek vurgu rengi

Bu bulgulardan çıkan tasarım ilkesi basittir: bir sayfanın ya da ekranın en önemli eylemini ya da bilgisini taşıyacak tek bir vurgu rengi seçin ve onu seyrek kullanın.

Vurgu rengi paletin en canlı rengi olmak zorunda değildir, ama çevresinden en çok ayrılan renk olmalıdır. Nötr ve açık bir sayfada koyu ve doygun bir renk; koyu bir arayüzde parlak bir renk vurgu olabilir. Önemli olan, bu rengin yalnız birkaç yerde, gerçekten öncelikli öğelerde görünmesidir: ana düğme, önemli bir fiyat, bir uyarı.

Birden fazla önemli öğe varsa renk tek başına bu sırayı kuramaz. İkinci ve üçüncü öncelikler için boyut, kalınlık, konum ve boşluk kullanılır; renk, sıranın en tepesine saklanır. Bir sayfada iki ayrı vurgu rengi gerekiyorsa, biri açıkça öbüründen daha güçlü seçilmelidir.

Nötr alanlar vurguyu taşır

Vurgu rengini güçlü kılan, çevresindeki sakinliktir. Bir sayfanın büyük kısmı beyaz, gri, bej ya da çok soluk renklerle kaplandığında, vurgu rengi bu zeminden kendiliğinden ayrılır. DT-12'nin baskın ve destekçi renkleri, burada vurgunun sahnesi olur.

Nötr alanlar boş alanlar değildir. Metin, görseller ve düzen oradadır; ama renk bakımından birbirine benzerler. Duncan ve Humphreys'in diliyle, türdeş bir çevre oluştururlar. Bu türdeş çevre ne kadar genişse, vurgu o kadar az renkle o kadar güçlü çalışır.

Bulanıklaştırma testi

Bir tasarımın hiyerarşisini sınamanın en pratik yolu, onu bulanık görmektir. Ayrıntılar kaybolduğunda geriye yalnız büyük renk ve açıklık lekeleri kalır ve göz, bu lekelerden hangisinin ilk çarptığını hemen söyler.

Adımlar şöyledir. Tasarımın ekran görüntüsünü alın ve bir görüntü aracında belirgin bir bulanıklık uygulayın; harfler okunmaz hâle gelene kadar. Sonra kendinize sorun: ilk nereye baktım? Bu nokta, sayfanın en önemli öğesi mi? İkinci ve üçüncü baktığım yerler, önem sırasıyla örtüşüyor mu? Birden fazla leke aynı anda "beni gör" diyorsa, hiyerarşi dağınıktır.

İkinci bir adım, bulanık görüntüyü gri tonlamaya çevirmektir. Gri tonlamada da vurgu öne çıkıyorsa, hiyerarşi yalnız tona değil açıklığa da dayanıyordur; bu, GT-02'de gördüğümüz gibi, renk görme eksikliği olanlar ve kötü ekranlar için de güvenlidir. Gri tonlamada vurgu kayboluyorsa, hiyerarşiyi yalnız ton taşıyordur ve bu kırılgandır.

Örnek — avatarın yanındaki durum noktası

Bir mesajlaşma uygulaması, kullanıcıların çevrimiçi olup olmadığını, fotoğraflarının köşesine konan küçük bir yeşil noktayla gösteriyor. Bu nokta, sayfanın vurgu öğelerinden biridir: gözün tek bakışta bulması gereken bir bilgi.

Nokta ilk tasarımda doğrudan fotoğrafın üzerine, çoğu zaman kişinin yüzünün, boynunun ya da saçının üzerine düşüyor. Sorun, fotoğrafların çok çeşitli olmasıdır. Açık tenli birinin yüzünün yanında yeşil nokta güçlü bir ayrılık yaratırken, orta tonlu bir tende, yeşil bir tişörtte ya da yeşil bir arka planda neredeyse kaybolabilir. Aynı vurgu, her avatarda farklı bir çevreyle karşılaşır ve her birinde farklı güçte çalışır.

Çözüm, vurgunun çevresini sabitlemektir: noktanın etrafına, sayfanın zemin renginde ince bir halka koymak. Böylece yeşil nokta hiçbir zaman doğrudan tene, saça ya da giysiye değmez; her zaman aynı nötr halkanın içinde durur ve her fotoğrafta aynı güçle ayrılır. Bu, vurgu renginin gücünün kendisinden değil, çevresinden geldiğinin küçük bir kanıtıdır. Kullanıcıların tenleri çeşitlendikçe, vurgunun çevresini tasarımcı değil fotoğraf belirlemeye başlar; halka, bu kontrolü geri alır.

Sık yapılan yanlış

Özet

1. Görsel hiyerarşi gözün bir tasarımda izlediği yolu kurar ve renk bunun güçlü araçlarından biridir; tek bir farklı öğe hem daha kolay fark edilir hem daha iyi hatırlanır.
2. Her şey vurgulandığında çevre çeşitlenir ve hedefi bulmak zorlaşır; bu yüzden tek bir vurgu rengi seyrek kullanılır ve sayfanın büyük kısmı nötr, türdeş alanlarla kaplanır.
3. Bulanıklaştırma ve gri tonlama testleri hiyerarşinin gerçekten kurulup kurulmadığını gösterir; vurgunun çevresi değişken olduğunda, örneğin farklı tenlerin fotoğraflarında, sabit bir nötr çerçeve vurguyu her durumda aynı güçte tutar.

Kendini sına

1. (Kolay) Görsel hiyerarşi nedir?
2. (Kolay) Bulanıklaştırma testi nasıl yapılır?
3. (Orta) Her şey vurgulandığında ne olur?
4. (Orta) Yalıtım etkisi bir tasarımcı için neden önemlidir?
5. (Zor) Duncan ve Humphreys'in kuramı, nötr alanların vurguyu güçlendirmesini nasıl açıklar?
6. (Zor) Avatarların köşesindeki durum noktası neden bazı fotoğraflarda kaybolur ve bu nasıl çözülür?

Cevaplar

1. Bir tasarımdaki öğelerin önem sırasına göre algılanmasını sağlayan düzen; boyut, konum, açıklık, renk ve boşlukla kurulur («Hiyerarşi nedir?»).
2. Tasarımın görüntüsü harfler okunmaz hâle gelene kadar bulanıklaştırılır ve ilk göze çarpan öğenin sayfanın en önemli öğesi olup olmadığına bakılır; ardından aynı görüntü gri tonlamada da denenir («Bulanıklaştırma testi»).
3. Hiçbir şey vurgulanmaz: her öğeye ayrı ve doygun bir renk verildiğinde çevre çeşitlenir, vurgu artık çevresinden ayrılamaz ve göz nereye bakacağını bilemez («Her şey vurgulandığında ne olur?»).
4. Çevresinden belirgin biçimde farklı bir öğe daha kolay fark edilir ve daha iyi hatırlanır; bir sayfada tek bir farklı öğe akılda kalır, çok sayıda farklı öğe birbirini siler («Her şey vurgulandığında ne olur?»).
5. Kurama göre bir hedefi bulmak, çevredeki öğeler birbirine benzedikçe kolaylaşır; nötr alanlar renkçe türdeş bir çevre oluşturduğu için vurgu rengi bu çevreden kendiliğinden ayrılır («Nötr alanlar vurguyu taşır»).
6. Nokta doğrudan fotoğrafın üzerine düştüğünde çevresi her avatarda farklıdır; bazı tenlerde, giysilerde ya da arka planlarda yeşil nokta ayrılamaz. Noktanın çevresine zemin renginde ince bir halka koymak, çevresini sabitler ve her fotoğrafta aynı güçte görünmesini sağlar («Örnek — avatarın yanındaki durum noktası»).

Kaynaklar

• Duncan, J. ve Humphreys, G. W., «Visual search and stimulus similarity», Psychological Review 96(3): 433–458, 1989.
• von Restorff, H., «Über die Wirkung von Bereichsbildungen im Spurenfeld», Psychologische Forschung 18(1): 299–342, 1933.
• Treisman, A. M. ve Gelade, G., «A feature-integration theory of attention», Cognitive Psychology 12(1): 97–136, 1980.

Sonraki adım

GT-04 hiyerarşiyi tek bir sayfadan bütün bir markaya genişletiyor: bir markanın paletinin rakiplerle karşılaştırılarak nasıl kurulduğunu, sektörün alışılmış renk kodlarına uymanın ve onlardan ayrılmanın ne kazandırıp ne kaybettirdiğini ve paletin ekranla baskı arasında nasıl tutarlı kalacağını ele alıyor. GT-05 ise rafa iniyor: ambalajda rengin aroma ve çeşitleri nasıl kodladığını, karton, metal ve plastiğin aynı rengi nasıl değiştirdiğini ve mağaza ışığının ambalajı nasıl gösterdiğini anlatıyor.