Arayüz Tasarımında Yakınlık Prensibi ve Boşluk Oranı
Yakınlık prensibi genelde "ilgili öğeleri birbirine yakın tut" diye özetlenir. Bu haliyle uygulanabilir bir kural değil, çünkü yakınlık mutlak bir mesafe değil, oran. 16 piksellik bir boşluk tek başına hiçbir şey anlatmaz: çevresindeki boşluklardan küçük olduğu sürece grup kurar, onlarla eşitlendiği anda kurmaz.
Önce boşluk ölçeğini kur
Pratik kural şu: bir grubun içindeki boşluk, o grubu komşusundan ayıran boşluğun kabaca yarısından küçük olsun. Etiket ile giriş alanı arasında 8 piksel varsa, iki form alanı arasında en az 24 piksel olmalı. Oran bozulunca kullanıcı formu tek bir uzun liste olarak görür ve hangi etiketin hangi kutuya ait olduğunu okuyarak çıkarmak zorunda kalır.
Buradan çıkan somut sonuç, tasarım sisteminin boşluk ölçeğiyle ilgili. Tek bir spacing: 16px değeriyle gruplama ifade edilemez, çünkü gruplamayı kuran şey değerin kendisi değil, iki değer arasındaki fark. En az üç kademe gerekir:
- öğe içi (ikon ile metin, 4-8px)
- grup içi (etiket ile alan, 8-12px)
- gruplar arası (iki form bloğu, 24-32px)
Bir arayüzde her şey birbirine eşit uzaklıktaysa hiçbir şey gruplanmamıştır. Tek renkli duvara bakmak gibi bir şey.
Ayırıcı olarak boşluk mu, çizgi mi?
Grup ayrımı için çizgi ve kutu kullanmayı boşluk kullanmaktan daha kırılgan buluyorum. Çizgi sabit bir karar: bir kere koyduğunuzda, düzen mobilde tek sütuna indiğinde de orada durur ve genelde artık ayırmadığı bir şeyi ayırmaya çalışır. Boşluk ise oranını taşır; sütun sayısı değişse bile grup içi ile gruplar arası fark korunduğu sürece algı bozulmaz.
Uygulama tarafında da fark var. Bir kutu ayrımı için genelde fazladan sarmalayıcı bir eleman, kenarlık, köşe yarıçapı ve bazen gölge tanımlarsınız. Aynı işi margin ölçeğindeki tek bir kademeyle yaparsınız. Sonradan ayrımı sıkılaştırmak istediğinizde de değiştirilecek tek bir değer olur.
Çizginin haklı olduğu yer, boşluğun yetmediği yer: tablo satırları, uzun ayarlar listesi, dikey alanın kısıtlı olduğu yoğun panolar. Oraya da her satır arasına değil, mantıksal blokların arasına konur.
Mobilde yakınlık ile dokunma hedefi çatışır
Bu çatışma çoğu yakınlık anlatısında atlanıyor. Bir yandan ilgili öğeleri yaklaştırmanız söyleniyor, öbür yandan dokunmatik kılavuzları hedefler arasında yeterli mesafe istiyor. İkisi doğrudan ters yönde çeker.
Çözüm boşluğu büyütmek değil, dokunma alanını büyütmek. 24 piksellik bir ikona her yönden 10 piksel iç boşluk verirseniz hedef 44 piksele çıkar, ama görsel olarak ikon aynı yerde durur ve komşusuyla ilişkisi bozulmaz. Görünen kutuyu büyütmek istemediğiniz durumlarda hedefi bir ::after katmanıyla negatif inset vererek görünür sınırın dışına taşırsınız. Böylece yakınlık algısı görsel katmanda, erişilebilirlik ise etkileşim katmanında çözülür.
Sık görülen yanlış çözüm, mobilde tüm boşlukları orantılı biçimde büyütmek. O zaman gruplar da birbirinden uzaklaşır ve kazandığınız dokunma konforunu gruplama netliğinden ödersiniz.
Araştırma ne diyor, ne demiyor
Palmer ve Beck'in algısal gruplama çalışmaları, birbirine yakın duran benzer öğelerin bütün olarak algılandığını gösteriyor. Gösterdiği bu kadar. Yakınlığın dönüşüm oranını şu kadar artırdığı türünden iddialar bu literatürden çıkmaz, bunlar arayüzün geri kalanına, trafiğin niteliğine ve ölçüm kurgusuna bağlıdır.
Kendi arayüzünüzde etkiyi görmek isterseniz bakılacak yer dönüşüm değil, form davranışı: alan başına düzeltme sayısı, yanlış alana yazıp geri dönme, ilk odaklanmaya kadar geçen süre. Bunlar zaten topladığınız olaylardan çıkarılabilir ve boşluk ölçeğini değiştirdiğinizde ilk kıpırdayan sayılar bunlar olur.
Kaynaklar