Form Düzeninde Boşluk: Gruplamayı Kuran Şey Orandır

Form tasarımında boşluk eklemek tek başına işe yaramaz, çünkü algıyı belirleyen şey boşluğun miktarı değil oranı. Bir grubun içindeki alanlar, gruplar arasındaki mesafeden belirgin biçimde daha yakın durmuyorsa kullanıcı hangi alanın hangisiyle ilişkili olduğunu okuyup çıkarmak zorunda kalır. Formu "sadeleştirmek" için bütün aralıkları eşit şekilde büyütmek de aynı yere varır: ferah ama gruplanmamış bir liste.

Yakınlık bir oran kuralıdır

Göz, birbirine yakın duran öğeleri tek küme olarak alır. Gestalt yaklaşımının yakınlık ilkesi bunu söyler ve form düzeninde doğrudan uygulanabilir hali şu: ilişkili alanları yakın, ilişkisiz olanları uzak tut.

Pratikte bu, iki ayrı aralık tanımlamak demek. Grup içi aralık, örneğin ad ve soyad kutuları arasındaki mesafe. Grup arası aralık ise kişisel bilgiler bloğu ile iletişim bilgileri bloğu arasındaki mesafe. İkincisi birincisinin en az üç katı olmadıkça gruplama hissedilmez; 8 piksele karşı 24 piksel iyi bir başlangıç, 16 piksele karşı 20 piksel ise hiçbir şey anlatmaz çünkü fark gözün ayırt ettiği eşiğin altında kalır.

Kural ters yönde de geçerli. Formun tamamına boşluk eklemek gruplamayı güçlendirmez, yalnızca sayfayı uzatır.

Etiket üstte, ama hangi kutuya ait?

Etiketin ilgili alanın üzerinde durması göz hareketini kısaltır, bu doğru. Ne var ki dikey bir yığında etiket iki kutunun arasında kalır: üstündeki alanın da altındaki alanın da komşusudur. Aralıklar eşitse yakınlık ilkesi burada hiçbir şey söylemez, kullanıcı etiketi okuyup hangi kutuya baktığını tahmin eder.

Boşluğu tek tek öğelere değil, grubu saran kaba ver. Etiketle kutusu arasına 4 piksel, kutuyla sonraki etiket arasına 20 piksel koyduğunda ilişki kendiliğinden görünür:

.field { margin-bottom: 20px; } .field label { display: block; margin-bottom: 4px; } .fieldgroup + .fieldgroup { margin-top: 32px; }

Üç satır. Form kütüphanesi kurmaya ya da hazır bileşen setine geçmeye gerek yok; çoğu arayüzde bozuk olan şey bu oranın hiç kurulmamış olması, eksik olan araç değil.

Placeholder etiket yerine geçmez

Etiketi kutunun içine placeholder olarak yazmak dikey alan kazandırır, karşılığında etiketi yok eder. Kullanıcı yazmaya başladığı anda alanın ne istediğini söyleyen metin kaybolur, form doldurulduktan sonra da kontrol edilemez hale gelir. Ekran okuyucu tarafında da güvenilmez bir çözüm, placeholder metni etiket olarak okunmayabilir.

Uzun formu bölmek ne zaman gerçekten gerekir

Alan sayısı arttığında ilk akla gelen çözüm formu adımlara ayırmak oluyor. Oysa adımlara ayırmak toplam alan sayısını azaltmaz, yalnızca bir ekranda görüneni azaltır. Karşılığında her adım bir sayfa geçişi, bir ara kayıt ve geri dönüldüğünde korunması gereken bir durum demek; uygulama tarafındaki maliyeti görünenden yüksek.

Formu asıl zorlaştıran uzunluk değil, yapısızlık. Yirmi alanlı bir form dört başlıklı gruba bölündüğünde tek sayfada da rahat doldurulur. Adımlandırma, alanlar arasında gerçek bir sıra bağımlılığı olduğunda anlamlı: ödeme adımının kargo seçimine bağlı olması gibi. Sırf görsel ferahlık için yapıldığında kullanıcıya ilerleme hissi değil, kaç adım kaldığı kaygısı verir.

Mobilde oranı korumanın yolu

Dar ekranda dikey alan pahalı, ilk tepki de bütün aralıkları küçültmek oluyor. Bu oranı bozar. Dokunma hedefleri 44 piksel civarında kalmak zorunda olduğu için kutular küçülmez, küçülen tek şey gruplar arası boşluk olur ve bloklar birbirine yapışır.

Boşluk azaldığında yakınlığı taşıyan sinyali değiştir. Grup başlığı, ince bir ayırıcı çizgi ya da yarım ton farklı bir arka plan, 32 pikselin işini 12 pikselle yapar. Masaüstünde yalnızca boşlukla kurduğun hiyerarşiyi mobilde başka bir araçla yeniden kurman gerekir, aynı değerleri küçültmek yetmez.