Benzerlik İlkesi: Arayüzde Neyi Gruplar, Neyi Gruplamaz

Benzerlik ilkesi kâğıt üzerinde basit: aynı görünen ögeler aynı gruba girer. Gerçek bir arayüzde uygulamaya kalkınca iki soru çıkıyor. Hangi görsel özellik grubu gerçekten taşıyor, ve o özellik sayfadaki başka bir gruplama sinyaliyle çakıştığında hangisi kazanıyor?

Yakınlıkla çakıştığında hangisi kazanır

Benzerlik ortak bir özellikle gruplar, yakınlık ise konumla. Bir sayfada ikisi aynı anda çalışır ve sık sık farklı şeyler söyler. Aynı kart içinde üç gri butonun yanına mavi bir buton koyduğunuzda kullanıcı dördünü birlikte görür, çünkü dar bir alanda yakınlık benzerliği bastırır.

Bunun pratik sonucu şu: benzerliğin asıl gücü uzakta. Gestalt kurallarının içinde yan yana olmayan ögeleri gruplayabilen tek şey o. Üstteki menüdeki bağlantıyla sayfa sonundaki bağlantının aynı grup olduğunu yalnızca ortak renk ya da ortak biçim söyleyebilir; aralarına hiçbir yakınlık ilişkisi kurulamaz. Yakın ögeleri boşlukla gruplayın, uzak ögeleri benzerlikle.

Renk tek taşıyıcı olduğunda

Renk en hızlı okunan benzerlik sinyali, bu yüzden de en çok suistimal edileni. Bir işlev için tek renk kuralı doğru: mavi tıklanabilirse, tıklanamayan hiçbir şey mavi olmasın. Ama grubu yalnızca renge yüklediğinizde grup tek bir koşulda tamamen kayboluyor, renk ayrımını görmeyen kullanıcıda.

Bunu kontrol etmenin en kısa yolu sayfanın ekran görüntüsünü gri tonlamaya çevirip bakmak. Grup hâlâ duruyorsa renk bir vurgu; dağılıyorsa renk tek taşıyıcıydı ve yanına ikinci bir kanal gerekiyor: altı çizgi, ikon, konum ya da biçim.

Aynı boyut mu, farklı boyut mu

Boyut üzerine verilen iki yaygın tavsiye aynı cümlede duramaz. "Aynı işlevdeki ögeleri aynı boyutta tut" ile "birincil çağrıyı büyük yap" çelişir, çünkü birincil ve ikincil buton tam olarak aynı işlev sınıfındadır: ikisi de buton. Tavsiyeyi harfi harfine uygularsanız ya hiyerarşiyi kaybedersiniz ya da kategoriyi.

Çelişki, boyuta iki iş birden yüklenmesinden çıkıyor. Boyut hiyerarşi taşır, kategori taşımaz. Kategoriyi biçim, tipografi ve renk taşır. Bu yüzden birincil butonu ikincilden ayırmak için onu büyütmek yerine dolgusunu ve kontrastını değiştirin; boyut ve köşe yarıçapı aynı kalsın, böylece ikisi hâlâ aynı aileden okunur.

Peki ya galeri ya da ürün ızgarası gibi gerçekten eşit öneme sahip ögeler? Orada eşit boyut doğru karar, zaten hiyerarşi kurmuyorsunuz.

Biçim ve tipografi ikinci kanal olarak

Biçim kaba bir ayrım aracı. Kullanıcı yuvarlak köşeli bir grubu köşeli bir gruptan ayırır, ama aynı ekranda üçten fazla biçim ailesini güvenilir biçimde ayırmaz. Tipografide durum daha net: her başlık düzeyi için tek stil, ve o stilin başka hiçbir yerde kullanılmaması.

Benzerlik aleyhinize çalıştığında

Gruplama istemsiz de olur. İçerik kartınız sayfadaki reklam alanıyla aynı genişlikte, aynı çerçeveli ve aynı yerde duruyorsa, kullanıcının öğrendiği reklam kaçınma davranışı sizin içeriğinizi de atlar. Burada hata reklamın yerinde değil, kartın reklama benzemesinde. Boyutu veya çerçeveyi bilinçli olarak kırmak bu yanlış grubu çözer.

Kodda karşılığı var mı

Bir gruplama iddiasının uygulamada tutup tutmayacağı, o benzerliğin nereden geldiğine bağlı. Benzerliği tek bir ortak sınıf ya da tasarım değişkeni üzerinden taşımayı, her bileşene ayrı stil yazıp gözle eşitlemekten çok daha güvenilir bulurum. İkinci yöntem ilk gün aynı görünür, ilk yeniden tasarımda ayrışır: biri güncellenir, diğeri atlanır ve kullanıcı iki ögeyi artık aynı grupta görmez.

İşe yarayan kontrol de bu: aynı grupta olduğunu söylediğiniz iki öge kodda hiçbir ortak sınıfı, değişkeni ya da bileşeni paylaşmıyorsa, o grup yalnızca tasarım dosyasında var.