Dropdown Menü Tasarımı: Ne Zaman İşe Yarar, Ne Zaman Yavaşlatır

Dropdown menü, seçenekleri saklayarak ekran alanı kazandırır. Sakladığı şey kullanıcının aradığı şeyse bu kazanç değil, gecikme. Ayrım aslında basit: seçenek sayısı azsa ve kullanıcı ne seçeceğini önceden bilmiyorsa dropdown iyi çalışır, cevabı zaten biliyorsa yazmak her zaman daha hızlıdır.

Dropdown'ı hak eden yerler

Dört tipik kullanım var: komut menüleri, alt kategorilere açılan navigasyon, formlarda standart veri girişi, renk ya da beden gibi özellik seçimleri. Ortak noktaları, seçeneklerin sonlu olması ve kullanıcının listeyi görmeden ne seçeceğini bilmemesi. Bu iki koşuldan biri yoksa bileşeni sorgula.

Yazmak seçmekten hızlıysa dropdown koyma

Doğum tarihi, il, ülke. Kullanıcı bu bilgiyi biliyor; seçtirmek onu üç ayrı açılır listede gezdirmek demek. Metin kutusu koy, girdiyi doğrulamayla kontrol et. Otomatik tamamlamalı tek alan hem daha hızlıdır hem mobilde daha az hata üretir.

Gün ve ay için dropdown kullanmanın savunulabilir tek gerekçesi biçim belirsizliğidir: 03/04 kimine mart kimine nisan gelir. Bunu da alanın yanına biçim etiketi koyarak çözersin, üç listeye bölmeye gerek yok.

Pasif seçenek ile kısa liste çelişir

İki yaygın tavsiye aynı anda geçerli olamaz. Biri, seçilemeyen maddeleri listeden çıkarma, gri göster der. Diğeri, listeyi kısa tut der. Gri maddeleri tuttuğun anda liste uzar ve tarama süresi artar.

Ayrım şurada: seçeneğin kapalı olması kullanıcının bir eylemine bağlıysa göster, çünkü orada bilgi var. Stokta olmayan beden, üyelikle açılan plan, tarih seçilince aktifleşen saat. Kullanıcının hiçbir koşulda erişemeyeceği seçenekse kaldır, listede tutmak sadece gürültü. Pasif bıraktığın her maddenin yanına kısa bir sebep yaz; sebepsiz gri madde soru üretir, cevap vermez.

Birbirini tetikleyen menüler

Bir dropdown'ın içeriği başka bir dropdown'ın seçimiyle değişiyorsa, kullanıcı ikinciyi açtığında listenin neden farklı olduğunu anlamaz. Kaçınamıyorsan ikinci alanı ilk seçim yapılana kadar pasif tut ve etiketinde hangi seçime bağlı olduğunu belirt.

Klavye erişimi ve özel bileşenin faturası

Önce yerleşik <select> ile dene. Klavye gezinmesini, harfe basınca ilgili seçeneğe atlamayı, mobilde işletim sisteminin kendi seçicisini ve ekran okuyucu desteğini hazır alırsın. Kendi div tabanlı bileşenini yazdığın anda bunların hepsi senin sorumluluğuna geçer: aria-expanded durumunu güncellemek, ok tuşlarıyla odak yönetimi, Escape ile kapatma, dışarı tıklamayı yakalama, yazarak arama. Görsel olarak ne kazandığını bu listeyi doğru uygulamanın maliyetiyle karşılaştır.

Bazen gerekiyor tabii; ikonlu, iki satırlı ya da arama kutulu bir seçici yerleşik etiketle çıkmaz. O durumda menüyü baştan sona faresiz gez ve öyle teslim et.

Ana navigasyonu dropdown'a gömme

Masaüstünde ana kategorileri yalnızca açılır menünün içinde göstermek siteyi keşfedilemez yapar; kullanıcı üzerine gelmediği menünün içinde ne olduğunu bilmez. Ana bağlantılar görünür kalsın, dropdown alt kırılımları taşısın.

Menü açıkken hangi başlığın altında olduğu da görünmeye devam etmeli. Açılan panel kendi tetikleyicisini örtüyorsa kullanıcı bağlamı kaybeder ve yanlış kategoride seçim yapar. Uzun listeler için tek çare kategorilere ayırmak değil, listenin başına arama alanı koymak da çoğu zaman daha hızlı sonuç verir.