Yakınlık İlkesi: Arayüzde Boşlukla Gruplamak
Yakınlık ilkesi tek cümleye sığar: yakın duran şeyler birlikte okunur. Zor olan kuralı bilmek değil, arayüz boyunca tutarlı uygulamak. Aşağıda gruplamanın pratikte nerede bozulduğu ve düzenin doğru olup olmadığını nasıl kontrol edeceğiniz var.
Ölçüt mutlak boşluk değil, oran
"Gruplar arasında yeterli boşluk bırakın" tavsiyesi tek başına iş görmez, çünkü göz mutlak piksele bakmaz, komşu boşlukları birbiriyle karşılaştırır. Bir grubun iç boşluğu dış boşluğundan belirgin biçimde küçükse grup oluşur. İkisini birlikte büyütürseniz hiçbir şey değişmez, sayfa yalnızca uzar. Kabaca ikiye bir fark ayrımı hissettirmeye yetiyor, oran ona yaklaştıkça sınırlar bulanıklaşıyor.
Aralıkları genelde tek bir ölçekle çözerim: bileşen içi 8, grup içi 16, gruplar arası 32, bölümler arası 64. Ara değer uydurmak zorunda kaldığım yerde sorun boşlukta değil, hiyerarşinin kendisinde çıkıyor.
Etiket hangi alana ait
Dikey formlarda en sık rastlanan hata şu: etiket ile kendi alanı arasındaki boşluk, alan ile bir sonraki etiket arasındakiyle eşit. Kullanıcı etiketi çoğu zaman doğru alana bağlar, ama bunu okuyarak değil deneyerek yapar. Etiketi alanına yapıştırın, boşluğu alanın altına verin. Tek satırlık bir düzeltmenin form hatalarında bu kadar karşılığı olan başka örneği az.
Uzun formu parçalamak
On iki alanlı bir form tek blok halinde caydırıcıdır. Kişisel bilgiler, adres, ödeme diye üçe ayrıldığında alan sayısı değişmez, ama kullanıcı her adımda dört alana bakar. Parçalama doldurulacak şeyi değil, bir anda karar verilecek şeyi azaltır.
Kutu çizmeden önce boşlukla deneyin. Çerçeve, gölge ve arka plan rengi gruplamayı güçlendirmez, görsel gürültüyü artırır; boşluğun yetmediği yerde bir alt başlık genelde işi bitirir.
Mobilde gruplama nasıl kayboluyor
Masaüstünde gruplamanın önemli bir kısmını sütunlar taşır. İki kutu yan yana durduğu için ilişkili görünür, aradaki dikey boşluk hiç konuşulmamıştır bile. Düzen tek sütuna düştüğünde o bilgi kaybolur ve geriye yalnızca dikey boşluk kalır. Grid'i tek sütuna indiren medya sorgusunda satır boşluğunu tek bir değere sabitlerseniz bütün ilişkiler eşitlenir: her şey aynı uzaklıkta, yani hiçbir şey gruplu değil.
Mobil düzeni masaüstünün küçültülmüş hali saymayın. Grup içi ve gruplar arası dikey boşluğu ayrı tanımlayın, sonra telefonda bir kez gerçekten kaydırarak bakın.
Yakınlık işlevi de söyler
Kaydet, İptal ve Yazdır'ı yan yana koymak üçünü aynı aileden gösterir. Oysa biri veriyi yazar, biri işlemi geri alır, üçüncüsü o anki görevle çoğu zaman ilgisizdir. İleri ile Geri'yi bitişik koymak ise doğru, ikisi aynı akışın iki yönü. Butonları göründükleri yere göre değil, kullanıcının onları hangi anda düşündüğüne göre gruplayın.
Kontrolün ucuz yolu
Ekranın görüntüsünü alıp bulanıklaştırın. Metin okunmaz hale geldiğinde geriye kalan lekeler sizin gerçek gruplarınızdır. Beklediğinizden fazla ya da az leke görüyorsanız düzen boşluk seviyesinde bozuktur, renk veya tipografi ile kurtarmaya çalışmak zaman kaybı.
İkinci kontrol daha da basit: geliştirici araçlarında iki komşu boşluğu ölçün. Aralarında belirgin fark yoksa o iki grup kullanıcı için zaten tek gruptur, siz onları tasarım dosyasında ayrı düşünüyor olsanız da.