Konu Başlıkları
Yükleniyor...

Yakınlık, Bağlılık ve Devamlılık: Gestalt İlkelerinin Arayüzdeki Karşılığı

Gestalt İlkeleri Arayüzde Nasıl Çalışır, Nerede Çalışmaz?

Gestalt ilkeleri, tasarım yazılarında en çok alıntılanan ama ekranda en az kontrol edilen kurallar arasında. Yakınlık, birleşik bağlılık ve devamlılık üçlüsü özellikle böyle: tanımını herkes biliyor, uygulaması çoğu arayüzde yarım kalıyor. Asıl soru bu ilkelerin ne anlama geldiği değil, çakıştıklarında hangisinin diğerinin önüne geçtiği.

Yakınlık: boşluk mutlak değil, oran

Yakınlık ilkesinin arayüzdeki karşılığı boşluktur. Ama boşluk tek başına bir şey söylemez; bir grubun içindeki mesafe, o grubu komşusundan ayıran mesafeden belirgin biçimde küçük olduğu sürece gruplama okunur. İkisi birbirine yaklaştığında ilke sessizce devre dışı kalır ve kimse fark etmez, çünkü ekranda bozuk görünen bir şey yoktur, sadece tarama biraz yavaşlar.

Bunun en sık kırıldığı yer başlıklar. Tarayıcı varsayılanlarında h2 etiketinin üst ve alt dış boşluğu aynı değerdedir (Chrome'da her ikisi de 0.83em). Başlık böylece bir önceki paragrafla bir sonraki paragrafın tam ortasında asılı kalır; hangi bloğa ait olduğunu okuyucu bağlamdan çıkarmak zorundadır. Çözüm tek satır: alt boşluğu küçült, üsttekini büyüt.

Aynı hata form alanlarında etiket ile giriş kutusu arasında tekrar eder. Etiket kendi kutusuna, alanlar arası boşluktan daha yakın durmuyorsa kullanıcı yukarıdaki etiketi aşağıdaki alanla eşleştirebilir. Uzun formlarda bunun bedeli yanlış doldurulmuş bir alan ve geri dönen bir hata mesajıdır.

Ürün kartı örneği

E-ticarette görsel, başlık ve fiyat üçlüsü klasik bir yakınlık testidir. Fiyat başlığa, başlık görsele yapışıksa kart bir bütün olarak okunur. Kart içi boşluklar kartlar arası boşlukla eşitlendiği anda ise liste, birbirine karışan bir alan yığınına döner.

Birleşik bağlılık: çerçeve kazanır, bedelini ödersin

Kaynakların çoğu bu ilkeyi "yakınlıktan da benzerlikten de güçlü" diye geçer. Doğru, ama bu sonucun çıktığı deneyler boş bir düzlemde birkaç daire ve birkaç çizgiyle yapılıyor. Orada çerçevenin rakibi yok.

Gerçek bir ekranda ise çoktan sekiz tane çerçeve var: kart kenarlıkları, input outline'ları, tablo çizgileri, uyarı kutuları. Her çerçeve "bunlar birbirine ait" iddiasında bulunur ve iddia sayısı arttıkça hiçbiri okunmaz olur. İlkenin güçlü olması, onu bedavaya kullanabileceğin anlamına gelmiyor; tersine, pahalı olduğu için idareli harcanması gerekiyor.

Bir grubu görünür kılmak için doğrudan çerçeve eklemem. Önce iki blok arasındaki boşluğu iki katına çıkarırım, yetmezse hafif bir arka plan tonu denerim, kenarlık en son gelir. Bu sıralamanın pratik sebebi şu: boşluk ve arka plan başka bileşenlerle rekabet etmez, kenarlık eder.

Çerçevenin gerçekten kazandığı bir durum var: gruplanacak öğeler fiziksel olarak birbirinden uzak durmak zorundaysa. Bir tablo satırındaki ilgili hücreler ya da geniş ekranda iki sütuna dağılmış bir ayar bloğu, boşlukla toparlanamaz. Orada bağlantı çizgisi ya da ortak arka plan tek çözümdür.

Devamlılık: göz çizgiyi takip eder, kutuyu değil

Devamlılığın arayüzdeki asıl karşılığı ok işaretleri değil, hizalamadır. Sol kenarları aynı eksende duran alanlar tek bir akış olarak okunur; göz o hayali dikey çizgiden aşağı iner. Formu "daha derli toplu görünsün" diye iki sütuna böldüğünde bu çizgi kırılır ve kullanıcı her satırda gözünü yeniden konumlandırır.

İlerleme çubukları da bu ilkeye yaslanır, ancak burada tasarım kararının bir de arka uç tarafı var. Çubuk beş adım gösteriyorsa süreç gerçekten beş adım olmalı. Sunucu tarafında bazı adımlar koşullu atlanıyorsa, kullanıcı ikinci adımdan dördüncüye sıçradığında çubuk artık yönlendirmiyor, yanıltıyor. Adım sayısını arayüzde sabit yazmak yerine sürecin kendi durumundan üretmek, sonradan tutarsızlığı kovalamaktan ucuza gelir.

Üçü çakıştığında hangisi?

Pratikte sıra şöyle işliyor: boşluk her zaman ilk araçtır, çünkü hiçbir görsel gürültü üretmez. Hizalama ikinci sıradadır, sayfanın taranma yönünü o kurar. Çerçeve ve renkli arka plan en sona kalır, sadece ilk ikisinin çözemediği durumlar için.

Bu sıralamayı bozan yerleri bulmak da kolay: bir bileşene kenarlık eklendiği anda "bunu boşlukla halledebilir miydim" diye sor. Cevap çoğu zaman evet çıkar. Gestalt ilkelerini bilmek zaten bir arayüzü iyileştirmiyor; hangisinin ne zaman fazla kullanıldığını görmek iyileştiriyor.