Gestalt prensipleri: arayüzde 7 gestalt ilkesi

Kısaca

Bir ekrana baktığınızda öğeleri tek tek saymazsınız. Göz önce grupları görür: bu üç alan bir form, şu iki buton aynı işe ait. Gestalt prensipleri bu gruplamanın kurallarını anlatır.

Fikir Gestalt psikolojisinden gelir. Laws of UX'e göre bu psikologlar, zihnin gördüğü şeyde belli kurallara göre örüntü aramaya doğuştan yatkın olduğunu savundu.

Wikipedia'nın maddesine göre Max Wertheimer'ın yasaları zamanla “Gestalt gruplama yasaları” diye anıldı. Maddeye göre Irvin Rock ile Steve Palmer ise “gruplama ilkeleri” adını daha uygun buluyor. Bu sayfada ikisini aynı anlamda kullanıyorum.

Tasarımcı için pratik sonuç şu: kullanıcı ilişkiyi metinden önce görselden okur. Yanlış gruplanmış bir ekran, doğru yazılmış etiketlere rağmen yanlış anlaşılır.

Kökeni: yanıp sönen ışıklar

Laws of UX, hikâyeyi psikolog Max Wertheimer'ın 1910'daki bir gözlemine bağlar. Wertheimer bir hemzemin geçitte yanıp sönen ışıkları izliyordu.

Ampuller yalnızca sırayla yanıp sönüyordu. Ama göz, tek bir ışığın hareket ettiğini görüyordu. Sinema tabelalarında çerçeve boyunca dolaşıyor gibi görünen ışık da aynı etkidir.

Bu gözlem, nesneleri nasıl algıladığımızı anlatan ilkelere yol açtı. Laws of UX, bu ilkelerin tasarımcıların grafik olarak yaptığı neredeyse her işin merkezinde durduğunu yazar.

Benim için bu hikâyenin dersi basit. Kullanıcı, ekranda algıladığı şeye göre davranır. Tasarımcının işi, algılanan yapıyla gerçek yapıyı aynı hale getirmektir.

Canlı demo: her ilkeyi bir ayarla deneyin

Bir ilke seçin, sonra altındaki ayarı değiştirin. Yakınlıkta kaydırıcıyı sağa çekin ve etiketin hangi alana ait göründüğüne bakın.

Gestalt deneme alanı

Bu demo JavaScript ile çalışır. Kapalıysa aşağıdaki yedi ilkenin arayüz örneklerine bakın.

Yedi ilkenin her biri için tek bir ayar var. Örnek ekranları ve metinleri ben hazırladım, bir araştırmanın sonucu değiller. Önizleme ekran okuyuculardan gizli; her değişiklik altındaki kutuda yazıyla anlatılır.

Yakınlık kaydırıcısı 20 pikseli geçtiğinde etiket üstteki alana kayar. Formlarda en sık gördüğüm hata tam olarak budur: etiketin altındaki boşluk, alanlar arasındaki boşluktan büyük.

7 gestalt ilkesi ve arayüz örnekleri

Kaynaklar ilkeleri farklı sayar. Laws of UX gruplama ilkelerini beş kategoride toplar: yakınlık, benzerlik, süreklilik, kapalılık ve bağlantılılık. Ben arayüz incelemesinde en çok işe yarayan yedisini seçtim.

1. Yakınlık

Birbirine yakın duran öğeler aynı grubun parçası gibi algılanır. Örnek: form etiketini kendi alanının hemen üstüne koyun, bir sonraki etiket ile arasında daha geniş boşluk bırakın.

2. Benzerlik

Renk, biçim ya da boyut gibi bir görsel özelliği paylaşan öğeler, birbirine benzemeyenlerden daha ilişkili görünür. Örnek: bağlantı rengini yalnızca tıklanan öğelerde kullanın, ana butonu ikincil butonlardan farklı renk yapın.

Harley'ye göre ortak renk, biçim gibi diğer özelliklerden daha çok göze çarpar. Bu yüzden yanlış yerde kullanılan renk de grup kurar. Harley'nin bir örneğinde butonla aynı renkteki süs ikonu, butonla tek grup gibi görünür ve tıklanabilir sanılabilir.

3. Ortak bölge

Çerçeve ya da arka planla sınırlanmış bir alanın içindeki öğeler bir grup olarak algılanır. Örnek: ürün listesinde görseli, adı ve puanı bir kartın içine alın.

Harley'nin örneklerinden biri bir tarif uygulamasının eski sürümü. Düzensiz boşluklar yüzünden hangi puanın hangi tarife ait olduğu zor seçiliyordu. Her tarif bir karta alınınca karışıklık bitti.

4. Kapalılık

Zihin eksik bir şekli tamamlar ve kenarlardaki boşlukları görmezden gelir. Örnek: yatay kaydırılan bir listede son kartı ekranın kenarında kesik bırakın, kullanıcı devamı olduğunu anlar.

Tersini de sık görürüm. Kartlar ekrana tam sığınca liste bitmiş gibi durur ve kaydırılabildiği gözden kaçar. Bence kesik kart, sayfa noktalarından daha güçlü bir ipucudur.

5. Süreklilik

Göz, belirli bir yönü izleyen çizgileri keskin ve ani yön değiştiren çizgilere tercih eder. Örnek: ödeme akışındaki adım göstergesini tek bir çizgi üzerine dizin.

Ben aynı ilkeyi hizalamada da kullanırım. Sol kenarı aynı hizada duran etiketler ve alanlar, göze bir sütun gibi görünür. Tek bir alan içeri ya da dışarı kaydığında göz orada takılır.

6. Şekil-zemin

Göz, bir şekli arka planından ayırır. Wikipedia'nın örneğinde basılı kâğıttaki siyah yazılar şekil, beyaz kâğıt zemindir. Arayüz örneği: açılan pencerenin arkasındaki sayfayı karartın, pencere şekil olsun, sayfa zemin.

Maddenin bir başka örneği Danimarkalı psikolog Edgar Rubin'in vazo çizimidir. Aynı çizimde ya siyah zemin önünde beyaz bir vazo ya da karşılıklı iki koyu yüz görürsünüz.

7. Ortak kader

Aynı yönde, aynı hızla hareket eden öğeler tek bir birim gibi algılanır. Wikipedia'daki örnek bir kuş sürüsüdür. Arayüzdeki örnek: birden çok dosya seçilip sürüklendiğinde seçilenler birlikte hareket etsin.

Yedili listeme girmeyen iki yasa daha var, Laws of UX ikisine de ayrı sayfa ayırır. Prägnanz yasası, insanların belirsiz ya da karmaşık bir görüntüyü mümkün olan en basit biçimde yorumladığını söyler. Tekdüze bağlantılılık yasası ise görsel olarak bağlanan öğelerin bağlantısızlara göre daha ilişkili göründüğünü anlatır.

İlkeler çatışınca hangisi kazanır?

Bir ekranda birden çok ilke aynı anda çalışır ve bazen birbirine ters düşer. Nielsen Norman Group'tan Aurora Harley'nin makalelerine göre yakınlık, renk ya da biçim benzerliğinin önüne geçebilir.

Ortak bölge daha da güçlüdür. Harley'nin örneğinde yakınlığın grupladığı iki nokta, araya giren çerçevelerle birbirinden ayrılır. Demodaki yemek kartları da bunu gösterir.

Yine de Harley ilk adım olarak boşluğu önerir. Gereksiz çerçeveler tasarımı kalabalıklaştırır. Gerekmeyen tam genişlikte renkli bantlar da sayfanın bittiği izlenimini verip kaydırmayı durdurabilir.

Benim sıram da böyle. Önce boşlukla gruplarım. Boşluk yetmiyorsa ya da ekranda yer yoksa çerçeve ya da arka plan eklerim.

Formlarda gestalt ilkeleri

Gestalt ilkelerinin en çok fark yarattığını gördüğüm yer formlar. Harley'ye göre on iki alan tek blokta göz korkutur, aynı alanlar anlamlı üç gruba bölününce yönetilebilir görünür. Bu, Miller yasasındaki öbekleme fikrinin görsel karşılığıdır.

Butonlarda da aynı kural geçerli. Harley'nin bir form örneğinde Ekle butonu İleri, Taslak olarak kaydet ve İptal butonlarının arasında kalıyor. Geri ve İleri gibi ilişkili butonlar yan yana durmalı. İlgisiz olanları ise ayırın.

Benzerlik tarafında Harley'nin uyarısı şu: bütün butonlar aynı renkteyse kullanıcı hangisinin ana eylem olduğunu ayırt edemez. Gönder butonu İptal ile aynı görünüyorsa kaybolur.

Duyarlı tasarımda gruplar ekran boyutuyla değişebilir. Masaüstünde yan yana duran iki bağlantı, mobilde alt alta dizilince birbirinden uzaklaşabilir. Her kırılma noktasında grupları yeniden kontrol edin. Ayrıntılar form tasarımı sayfasında.

Benim notum

Bir ekranı incelerken metni okumadan önce gözlerimi kısarım. Bulanık görüntüde hangi grupları gördüğüme bakarım. Gördüğüm gruplar ürünün gerçek yapısıyla örtüşmüyorsa sorun oradadır.

Bulduğum sorunların çoğu boşluk ya da renkten çıkar. Etiketi yanlış alana yaslayan boşluğu demoda gördünüz. Renk tarafında en yaygını, bağlantı renginin tıklanmayan başlıklarda da kullanılmasıdır.

Bunları kalıcı olarak çözmenin yolu, boşluk ve rengi tasarım sisteminde kural haline getirmektir. Kendi ürününüzde bu kontrolü yaptırmak isterseniz UX Audit sayfasına bakın.

İlgili sayfalar

Gestalt ilkeleri neyin birbirine ait göründüğünü anlatır. Kullanıcının bir hedefe ne kadar sürede ulaştığını ise Fitts yasası anlatır. Aklında ne kadar bilgi tutabildiği, yukarıda andığım Miller yasasının konusu.

Bir öğenin tıklanabilir görünüp görünmediği affordance ve işaretçi konusudur. Bu konu benzerlik ilkesine yakındır, çünkü bağlantı rengi de bir işaretçidir. Diğer yasalar UX yasaları listesinde.