Listbox mu Dropdown mu? Seçim Kontrolünü Neye Göre Belirlemeli

Listbox ile dropdown arasındaki seçim genelde estetik meselesi sanılır, değildir. İkisi arasındaki tek gerçek fark seçeneklerin kaçının aynı anda görünür olduğudur ve bu fark, kullanıcının karar süresini doğrudan belirler. Karar kuralı da bu yüzden basit: kaç seçenek var, kaç tanesi seçilecek.

Fark görünürlükte, isimde değil

Dropdown kapalıyken sıfır seçenek gösterir, açıldığında hepsini gösterir. Listbox açılmayı beklemeden bir kısmını gösterir. Kullanıcı açısından bu, karşılaştırma yapabilmek demek. Seçenekler birbirinin alternatifiyse ve kullanıcı aralarında tartacaksa, tartacağı şeyleri aynı anda görmesi gerekir.

Buradaki yaygın yanılgı da şu: listbox'ın "hepsini gösterdiği" söylenir. Göstermez. Görünür yükseklik kaç satırsa o kadarını gösterir. Kırk seçenekli, sekiz satır yüksekliğindeki bir listbox seçeneklerin yüzde seksenini yine gizler; dropdown'a üstünlüğü sekiz satırla sınırlıdır. Yani "çok seçenek varsa listbox kullanın" tavsiyesi belli bir noktadan sonra kendi kendini yer.

Seçenek sayısına göre karar

• 2-4 seçenek: Radio button. Tek seçim için dropdown kullanmak burada gereksiz bir tıklama ekler.
• 5-15 seçenek: Tek seçimse dropdown, karşılaştırma gerekiyorsa listbox.
• 15-40 seçenek: Listbox, ama gruplandırılmış ve mantıklı sıralanmış olmak şartıyla.
• 40'tan fazla: İkisi de yanlış cevap. Yazarak filtreleyen bir alan (autocomplete) kurun. Ülke, şehir, banka, ürün kodu listelerinde kullanıcı zaten aradığının adını biliyor, ona listeyi taratmak yerine yazdırın.

Sıralama tek başına bir kontrolden daha çok iş görür. En sık seçilen üç öğeyi başa alıp kalanı alfabetik dizmek, seçim süresini kontrol tipini değiştirmekten daha fazla kısaltır.

Çoklu seçimde ctrl tuşu bir tuzaktır

Klasik çoklu seçim listbox'ında kullanıcı Ctrl ya da Cmd tuşunu basılı tutarak seçim yapar. Bu davranış öğrenilmiş değil, öğretilmiş bir davranıştır ve öğretilmediği her yerde başarısız olur. Tuşa basmayı unutan kullanıcı yeni öğeyi seçerken önceki on iki seçimini tek tıkla siler, üstelik bunun olduğunu genelde formu gönderdikten sonra anlar.

Çoklu seçim gerekiyorsa checkbox'lı liste kullanın. Seçim durumu görünür olur, geri alınabilir olur, ekran okuyucu her satırın durumunu ayrı ayrı okur. Çiftli listbox (soldaki mevcut, sağdaki seçilenler) yalnızca sıralamanın kendisi anlamlıysa, yani kullanıcı hem neyi seçtiğini hem hangi sırada olduğunu belirliyorsa değer taşır. Rapor kolonları ya da menü sırası düzenlemek buna örnek. Bunun dışında iki kutulu yapı, checkbox listesinin pahalı bir taklidi olur.

Hazır bileşene gitmeden önce

Tek seçimli bir dropdown için üçüncü parti bir bileşen kütüphanesi kurmak neredeyse her zaman zarardır. Native select elemanı klavye ile harf yazarak atlamayı, mobilde platformun kendi seçicisini, ekran okuyucu uyumunu ve form doğrulamasını kutudan çıkar çıkmaz getirir. Bunların hepsini özel bileşende yeniden yazmak gerekir ve genelde yarısı eksik yazılır. Kütüphaneye ancak arama, gruplama veya çoklu etiket gibi native'in gerçekten karşılamadığı bir ihtiyaç varsa geçin; görünüm uyuşmazlığı için geçmeyin, onu birkaç satır CSS çözer.

Mobil ve erişilebilirlik

Mobilde native dropdown işletim sisteminin kendi tam ekran seçicisine dönüşür, dolayısıyla dar ekranda çok satırlı listbox'tan daha rahat çalışır. Buna karşılık uzun listelerde o seçicide de kaydırma sorunu geri gelir, yani karar yine seçenek sayısına bağlanır.

Erişilebilirlik tarafında sabit birkaç kural var: her kontrolün programatik olarak bağlı bir etiketi olmalı, klavye ile ulaşılabilmeli, seçim değiştiğinde bunun ekran okuyucuya bildirilmesi gerekir. Özel bileşen kullanıyorsanız role ve aria-selected değerlerini elle yönetmek zorundasınız; bunlar unutulduğunda arayüz görünüşte çalışır ama ekran okuyucuda tamamen sessiz kalır.