Kart Bileşenleri: Nerede İşe Yarar, Nerede Liste Daha İyidir

Kart, bir başlığı, görseli ve kısa özeti sınırları belli bir kutuda toplayan arayüz desenidir. İçeriği gruplamakta ve tıklamaya yönlendirmekte iyi çalışır, karşılaştırmada ise açıkça kötüdür. Kartı liste ve grid karşısında ne zaman seçeceğiniz, sayfanın kullanıcıya gezinme mi yoksa seçim mi yaptırdığına bağlı.

Kart aslında neyi çözüyor

Kartın gücü iki yerden geliyor. Birincisi ortak bölgeler ilkesi: bir sınırın içine alınan öğeler, aralarındaki mesafeye bakılmaksızın tek bir bütün olarak algılanıyor. Kenarlık, farklı zemin rengi ve gölge, yakınlıkla kurulamayan gruplamayı kurar. Başlık, görsel, etiket ve buton böylece tek bir nesne gibi okunur.

İkincisi bilgi kokusu. Kart, tam metni değil, kullanıcının bir sonraki adımı seçmesine yetecek kadarını gösterir. Özet iyi seçilmişse kullanıcı yanlış sayfaya girip geri dönmez. Kartın tıklama oranını artırması buradan gelir, gölgesinden değil.

Kart heterojen içerikte de rahat çalışır. Biri görselli, diğeri üç satırlık metin, üçüncüsü bir grafik olan öğeleri aynı akışta yan yana koymak listede zordur, kartla doğaldır.

Kartın bedeli karşılaştırmadır

Bir kart, aynı bilgiyi taşıyan liste satırının birkaç katı dikey alan kaplar. Ekrana sığan öğe sayısı düşer, kullanıcı kaydırmak zorunda kalır ve kaydırdığı anda karşılaştırma çalışma belleğine devrolur. Fiyatı üç kart önce görülen ürünle kıyaslamak, hatırlamayı gerektirir; hatırlamak da yanılır.

İkinci sorun hizalama. Listede fiyat her satırda aynı sütunda durur, göz tek bir dikey çizgi boyunca tarar. Kart düzeninde aynı alan her kartta farklı yükseklikte biter, çünkü üstündeki başlık bir ya da iki satır olabiliyor. Karşılaştırma tek boyutlu bir taramadan iki boyutlu bir arayışa dönüşür. Kart ızgarasında "en ucuzu bul" görevi bu yüzden yavaşlar.

Kural basit: kullanıcı öğeler arasında seçim yapacaksa liste ya da tablo, öğelerin içine girecekse kart.

Yapı	Nerede	Güçlü yanı	Zayıf yanı
Liste	Fiyat ve özellik kıyaslaması, sıralanabilir sonuçlar	Sütun hizası sayesinde hızlı tarama	Görsel ağırlıklı içerikte zayıf
Grid	Aynı tipte, görselin belirleyici olduğu öğeler	Yoğunluk ve düzen	Metinsel detay taşımaz
Kart	Karışık tipte içerik, akış ve gösterge panoları	Gruplama ve zengin özet	Düşük yoğunluk, zor karşılaştırma

Emlak örneği neden yanıltıcı

Kart anlatılırken en sık verilen örnek emlak ilanlarıdır ve tam da karşılaştırma yapılan bir ekrandır. Kullanıcı metrekare, fiyat ve konumu yan yana koymaya çalışır; kart bunu zorlaştırır. İyi emlak arayüzleri bu yüzden kartı ilk keşif için tutar, sonra sıralanabilir bir liste ya da karşılaştırma tablosu açar. Kartı seçim ekranına koyup üstüne "karşılaştır" butonu eklemek, deseni kendi eksikliğini kapatmak için yamamaktır.

Kartı kurarken

Görsel hiyerarşi kartın içinde tek bir odak noktası olacak şekilde kurulur: başlık ya da görsel, ikisi birden değil. Boşluk, kenarlığın işini yarı yarıya devralır; sıkışık bir kartta kenarlık kalınlaştırmak sorunu çözmez.

Sabit yükseklik ve üç noktayla kırpma yerine içeriğe göre esneyen kartı tercih ederim: kırpma noktası yazı tipine ve dile göre kayıyor, Türkçe metinde kelimeler uzun olduğu için başlık çoğu zaman anlamını kaybettiği yerden kesiliyor.

Erişilebilirlik tarafında kartın tamamını tek bir bağlantıyla sarmayı, başlığı bağlantı yapıp tıklama alanını kartın kalanına genişletmekten daha zayıf buluyorum. İlkinde ekran okuyucu kartın bütün metnini bağlantı adı olarak okur, bağlantı listesi kullanılamaz hâle gelir; ikincisinde bağlantı adı başlıktır, fare kullanıcısı yine kartın her yerine basabilir. Fark birkaç satır CSS, kazanç kalıcı.

Kart bir varsayılan değil, karar. Ekranda kullanıcı gezinip keşfediyorsa kart doğru araçtır; karar verip seçiyorsa kartı bırakın, satırlara dönün.