Gestalt Benzerlik Yasası: Ne Zaman İşe Yarar, Ne Zaman Ters Teper

Aynı renkteki üç kutu, aralarında hiçbir çizgi olmasa bile tek bir grup gibi okunur. Gestalt benzerlik yasasının anlattığı şey budur ve arayüz tasarımında en sık yanlış uygulanan kural da odur, çünkü çalışması için paylaşılan özelliğin sayfada seyrek olması gerekir. Her şeyin mavi olduğu bir sayfada mavi hiçbir şeyi gruplamaz.

Kural ne yapıyor

Wertheimer'in 1923'te derlediği gruplama yasalarından biri. Göz, şekil, renk, boyut, yön ya da tipografi gibi ortak bir özelliği paylaşan ögeleri tek küme sayar. Bunun tasarımdaki değeri şu: gruplama işini bedavaya yapar. Çerçeve çizmeden, ayırıcı koymadan, başlık atmadan aynı işi gören ögeleri birbirine bağlayabilirsiniz.

Bir ürün listesindeki kartların hepsinin aynı köşe yuvarlaklığına ve aynı gölgeye sahip olması, kullanıcıya "bunlar aynı türden şeyler, aynı şekilde tıklanır" der. Form alanlarında aynı yükseklik ve aynı kenarlık, doldurulacak yerlerin haritasını tek bakışta çıkarır.

Yakınlıkla çakışırsa yakınlık kazanır

İki gruplama ipucu ters yöne çektiğinde konum genellikle rengi yener. Fiyat tablosunda aynı yeşile boyanmış iki hücre, farklı sütunlarda duruyorlarsa kimse onları birlikte okumaz. Sütun sınırı daha güçlü bir sinyaldir.

Pratik karşılığı: boşluk düzenini önce çözün, rengi sonra. Benzerlikle kurmaya çalıştığınız grup, yerleşimin kurduğu grupla yarışıyorsa kaybedersiniz. Aynı kategoriye ait olduğunu göstermek istediğiniz ögeleri önce hizalayın, sonra ortak bir görsel özellik verin. Tersi sırayla çalışmaz.

Gücü seyrekliğinden geliyor

Burası çoğu tavsiye listesinin atladığı yer. Benzerlik bir gruplama ipucu olabiliyorsa, o özelliği taşımayan ögeler de var demektir. Sayfadaki bütün ögeler aynı özelliği paylaştığı anda o özellik hiçbir ayrım üretmez.

"Butonlarınızı marka renginizle vurgulayın" tavsiyesi bu yüzden ölçek büyüdükçe ters çalışır. Bir ekranda tek vurgulu buton varsa gözü o çeker. On tane varsa sıfır tane var demektir; kullanıcı hangisinin ana eylem olduğunu artık başka bir ipucundan, boyuttan ya da konumdan çıkarmak zorunda kalır. Aynı mekanizma kalın yazı için de geçerli. Bir paragrafta üç ayrı kelime kalınsa, kalınlık artık bir şey söylemiyordur.

Vurgu bütçesi diye düşünmek işe yarıyor. Sayfada kaç farklı görsel stil varsa, kullanıcı o kadar eşleme öğrenmek zorunda. Üç stil öğrenilir, sekiz stil gürültüdür.

Link ile butonun ortak rengi

İki yaygın tavsiye tek sayfada çakışıyor: bağlantılar mavi ve altı çizili olsun, birincil eylem butonu da marka mavisi olsun. Benzerlik yasası ikisini aynı kümeye koyar. Gövde metnindeki mavi kelime ile sağ üstteki mavi buton kullanıcının kafasında aynı davranış vaadini taşımaya başlar, sonra biri sayfayı değiştirip diğeri kayıt oluşturunca güven bozulur.

Bu ikisinin en fazla bir ortak özelliği olsun. Renk aynıysa şekil ayrışsın: link düz metin ve alt çizgi, buton dolgu ve iç boşluk. Şekil benziyorsa renk ayrışsın. İkisinin de aynı anda benzemesi, kullanıcının tıklamadan önce tahmin yürütmesi demek.

Kasıtlı sapma

Benzerlik kurmanın asıl amacı, ondan saptığınızda bir şey söyleyebilmek. Tekdüze bir kart ızgarasında farklı arka plana sahip tek kart, hiçbir ok işareti gerektirmeden öne çıkar. Ama sapmanın anlamı olmalı: silme eylemi kırmızıysa kırmızı yalnızca yıkıcı işlemlerde kullanılmalı, dekorasyon olarak değil.

Sayfa başına bir kasıtlı sapma çoğu durumda yeterli. İkincisi eklendiğinde ikisi birbirini gruplamaya başlar ve vurgu olmaktan çıkıp yeni bir kategoriye dönüşür.

Tek ipucuna yaslanmayın

Rengi ayrımın tek taşıyıcısı yapan tasarım, renk körlüğü olan kullanıcıda tamamen çöker. Grubu renkle kuruyorsanız şekil, konum ya da etiket biçiminde ikinci bir ipucu ekleyin. Aynısı ekran okuyucular için de geçerli: görsel gruplama DOM'da karşılığı yoksa vardır sayılmaz, kartların sırası ve başlık düzeyleri gözün gördüğü düzenle uyuşmalı.

Benzerlik yasası bir üslup tercihi değil, algının nasıl çalıştığına dair bir tespit. Onu görmezden gelen tasarım yine gruplar üretir, sadece sizin istediğiniz grupları değil.