Karşılaştırma Tablosu Tasarımı: Neyi Gösterir, Neyi Silmeli

Karşılaştırma tablosu, kullanıcının kafasındaki soru "hangisi" olduğunda işe yarar. "Bu ürün ne işe yarıyor" diye soran birine tablo göstermek, cevabı yirmi hücreye dağıtmak demektir. Aşağıdaki her şey bu ayrımın üstüne kurulu: tabloyu güzelleştirmeden önce, tablonun gerçekten fark gösterip göstermediğine bakmak gerekiyor.

Tablo bir fark aracıdır, tanıtım aracı değil

Karşılaştırma tablolarının dönüşümü artırdığı sık söylenir. Doğrusu şu: tablo, kararsızlığı olan kullanıcıyı hızlandırır; henüz seçenekleri tanımayan kullanıcıyı ise yavaşlatır. İkinci grup tabloya baktığında ne aradığını bilmediği için satırları tek tek okur, okuduğunun ağırlığını kestiremez ve çoğu zaman sayfadan çıkar. Aynı sayfada iki işi birden yapmaya kalkan tablolar bu yüzden ikisini de yapamaz.

Pratik ayrım basit. Kullanıcı ürün ailesini biliyor ve aralarında seçim yapıyorsa tablo kur. Ürünü ilk kez görüyorsa önce ne olduğunu anlat, tabloyu kararın hemen öncesine koy.

Ayırt etmeyen satır, tablonun asıl yüküdür

Tablo tasarımında en çok atlanan iş satırların ayıklanmasıdır. Üç paketi on iki özellik üzerinden karşılaştıran bir tabloda otuz altı hücre vardır. Bu satırların yedisinde her üç pakette de aynı değer yazıyorsa, kullanıcı otuz altı hücre tarayıp yalnızca on beşinden karar veriyor demektir. Kalan yirmi bir hücre kararı taşımaz, sadece göz yorar.

Bir fiyat tablosunda tam bunu yaşadım: aynı olan satırları çıkarınca tablo dokuz satırdan dörde indi ve mobilde tek ekrana sığdı. Ortak özellikleri silmek zorunda da değilsin, tablonun altına "her pakette var" başlıklı düz bir liste olarak koy. Karar veren alan sadece farkı gösterir, ortak olanlar güven verici bir dipnot olarak kalır.

Sütun tarafında da benzer bir sınır var. Yan yana beşten fazla seçenek koyduğunda kullanıcı artık karşılaştırma yapmıyor, eleme yapıyor. Elemeyi zaten tablodan önce filtreyle yaptırmak daha ucuz.

Statik mi dinamik mi

Statik tablo, seçenek sayısı sabit ve azsa doğru tercihtir. İçeriği sen belirlersin, kimse yanlış kombinasyonu ekrana getiremez, bakım maliyeti tek bir şablondur.

Dinamik tablo, yani kullanıcının kendi seçtiği ürünleri yan yana getirmesi, çok geniş kataloglarda anlamlı. Ama sık atlanan bir maliyeti var: seçenek yükünü ortadan kaldırmaz, kullanıcının önüne bir adım öne taşır. Kırk üründen üçünü seçmek, üç ürünü karşılaştırmaktan daha zor bir karardır. Dinamik tabloyu iyi hale getiren şey karşılaştırma ekranı değil, ondan önceki filtre ve öneri katmanıdır. Katalog sayfasında ürünlerin yanına konan seçim kutusu, kullanıcı zaten iki ürün arasında gidip geliyorsa işe yarar; kırk ürünün hepsine bakmak zorunda kalıyorsa yaramaz.

Mobilde kart görünümü ve bozulan semantik

Dar ekranda tabloyu kart görünümüne çevirmek yaygın çözüm. Burada teknik bir tuzak var. CSS ile table, tr ve td elemanlarına display: block verirsen görüntü düzelir ama tarayıcı o elemanları artık tablo olarak sunmaz; ekran okuyucu kullanan biri için satır ve sütun ilişkisi kaybolur, hücreler arka arkaya okunan bağımsız metinlere dönüşür. Değeri hangi ürüne ve hangi özelliğe ait olduğunu anlamanın yolu kalmaz.

İki çıkış yolu var. Ya display değiştirmek yerine tabloyu yatay kaydırılabilir bir kapsayıcıya alırsın ve th hücrelerini yapışkan yaparsın; ya da gerçekten kart görünümüne geçip her karta ürün adını başlık olarak, her satıra özellik adını görünür etiket olarak yazarsın. İkinci yolda ARIA rolleriyle tablo semantiğini geri kurmaya çalışmak yerine yapıyı listeye çevirmek daha sağlam sonuç verir, çünkü rol ekleyerek onarılan tablolarda hücre başlık eşleşmesi çoğu ekran okuyucuda yarım çalışır.

Kalan işler standart ama ihmal ediliyor: tabloya caption yaz, sütun ve satır başlıklarına scope ver, "var" ve "yok" bilgisini yalnız renkle veya yalnız ikonla anlatma. Yeşil tik ile gri çarpı arasındaki farkı ayırt edemeyen kullanıcı için hücrenin metin karşılığı da bulunmalı.

Ölçmek, ama neyi

Tablo tasarımını A/B testiyle iyileştirmek mantıklı; testin ne ölçtüğüne dikkat etmek gerekiyor. Bir sütunu "en çok tercih edilen" diye vurguladığında o pakete tıklama sayısı neredeyse her zaman artar. Bu, tablonun daha iyi anlaşıldığını göstermez, yalnızca yönlendirmenin çalıştığını gösterir. İade oranı, paket değiştirme talebi ve destek kaydı gibi karar sonrası veriye bakmadan bu artışı başarı saymam.

Tablonun anlaşılırlığını ölçmek istiyorsan daha ucuz bir yöntem var: beş kişiye tabloyu gösterip "bu iki paket arasındaki fark nedir" diye sor. Cevap gelene kadar geçen süre ve yanlış cevap sayısı, dönüşüm grafiğinden çok daha net konuşur.