Ortak Bölge İlkesi: Sınır Çizmenin Gruplamaya Etkisi

Ortak bölge tek cümleyle özetlenir: aynı sınırın ya da aynı zeminin içinde kalan öğeler bir grup olarak okunur. Kart tasarımı, yan paneller ve bölümlenmiş formlar bu ilkenin üstünde duruyor. İlginç olan ilkenin ne yaptığı değil, diğer gruplama ipuçlarını nasıl bastırdığı.

Ortak bölge, yakınlığı ezer

Gruplama ipuçları eşit güçte değil. Birbirine yapışık duran iki öğenin arasından bir çerçeve geçirin, yakınlık çalışmayı bırakır ve o iki öğe ayrı gruplara düşer. Tersi de geçerli: aralarında bolca boşluk olan öğeleri aynı kartın içine alın, mesafeye rağmen tek bir bütün olarak okunurlar. Sınır mesafeye üstün gelir.

Bunun pratik sonucu çoğu arayüzde gözden kaçıyor. Aynı sayfada bazı grupları kartla, bazılarını yalnızca boşlukla kurarsanız kartlar öne çıkar ve boşlukla kurduğunuz grup görünmez olur. Kullanıcı orada bir gruplama olduğunu fark etmez bile. İki yöntemi yan yana kullandığınız anda zayıf olanı feda etmiş olursunuz; bir sayfada gruplama dili tek olmalı.

Sınır mı, boşluk mu

Karar tek soruya bakar: bu grubun hemen dışında, onunla karışabilecek benzer bir şey var mı? Tekrar eden öğeler söz konusuysa, yani ürün listesi, kayıt satırları, yan yana duran kartlar, sınır işe yarar çünkü nerede bittiğini göstermesi gerekir. Sayfada tek başına duran bir bölüm için sınır fazladan gürültüdür, boşluk zaten yeter.

Çerçeve, arka plan rengi ve gölge aynı işi görür ama bedelleri farklı. Gölge öğeyi zeminden koparır ve katman hissi verir; bu yüzden açılan menü, kalıcı olmayan panel, sürüklenen kart için doğru araçtır. Sayfaya yerleşik, hareket etmeyecek bir içerik bloğunu gölgeyle ayırmak ise yanlış bir vaat taşır (son yıllarda her kartın altına gölge koymak yaygınlaştı, gereksiz buluyorum).

Kurduğunuz grubun kodda karşılığı var mı

Görsel sınır CSS'te bir satır. Erişilebilirlik ağacında karşılığı yoksa, kurduğunuz grup sadece ekranı görebilen kullanıcı için vardır. Ekran okuyucu çerçeve görmez, yapı okur.

Grubu saran öğe anlamlı bir etiket taşısın: yinelenen ve kendi başına anlamlı içerik blokları için article, sayfanın kendi başlığı olan bölümleri için section, birlikte doldurulacak form alanları için fieldset ve legend. Bir form bölümünü yalnızca arka plan rengiyle ayırmak klavyeyle gezen kullanıcı için hiçbir şey ifade etmez; alandan alana geçerken grubun adını duymaz, dolayısıyla sizin kurduğunuz o mantıksal bütün onun için hiç var olmaz.

Kural basit: görsel olarak kurduğunuz her grubun işaretlemede bir karşılığı olmalı. Karşılığı yoksa ya gruplama gereksizdir ya işaretleme eksiktir. İkisi de birkaç satırlık iş.

Rengin tek başına yetmediği yer

Bölgeleri sadece arka plan rengiyle ayırmak, renk ayrımı zayıf kullanıcılarda çöker. İki zemin arasındaki kontrast farkı düşükse ayrım hiç görülmez, kart da kart olmaktan çıkar. Rengi tek ipucu olarak bırakmayın: ince bir kenarlık, belirgin bir iç boşluk ya da grubun kendi başlığı, rengin yanında ikinci bir işaret olarak durur ve renk düştüğünde gruplama ayakta kalır.

Aşırıya kaçmanın maliyeti

Her öğeyi kutulamak gruplama bilgisini yok eder. Sayfada her şey bir kartın içindeyse hiçbir kart öne çıkmaz, kullanıcı da sayfanın ana akışını kaybeder. Vurgu, çevresinde vurgulanmamış alan bulunduğu sürece vurgudur.

Mobilde fatura daha sert geliyor. Kenarlık ve iç boşluk, zaten dar olan satır uzunluğundan pay alır; iki yanı otuzar piksel boşlukla sarılmış bir kartta uzun metin belirgin biçimde daha çok satıra yayılır ve okuma yavaşlar. Küçük ekranda gruplamayı taşıması gereken şey kutu değil, başlık ve aralarındaki dikey boşluktur.

Ölçü şu: bir sınırı kaldırdığınızda sayfanın anlamı değişmiyorsa o sınır gereksizdir. Kaldırın.