Arayüz Kontrolleri: Hangi Eleman Nerede Kullanılır

Arayüz elemanlarının adını bilmek işin kolay kısmı; asıl soru, elinde üç seçenek varken radyo düğmesi mi açılır menü mü kullanacağın. Seçimi pratikte üç şey belirliyor: kaç seçenek var, seçim ne zaman geçerli olacak, kullanıcı ne kadar bekleyecek.

Seçenek sayısı kontrolü belirler

Radyo düğmesi tek seçim içindir ve bütün seçenekleri aynı anda gösterir. Onay kutusu çoklu seçim içindir. Açılır menü de tek seçim yapar, ama seçenekleri gizler. Aradaki fark göründüğünden büyük: radyo düğmesinde seçim tek tıklamadır, açılır menüde en az iki (aç, sonra seç) ve kullanıcı seçenekleri yan yana karşılaştıramaz, listeyi açıp aklında tutmak zorunda kalır.

Bu yüzden beş altı seçeneğe kadar görünür liste, üstünde açılır menü mantıklı. Yirmiyi geçtiğinde açılır menü de yetmez; ülke ya da şehir gibi alanlarda yazdıkça filtreleyen bir alan gerekir, çünkü kimse yetmiş satırı kaydırarak aramak istemez.

Açılır menü için söylenen "ekranı dar tutar" gerekçesi de her yerde geçerli değil. Mobilde yerel select tam ekran bir seçici açar, yani sayfada kazandığın yer seçim anında zaten geri gider. Kazanç, listenin uzun olduğu durumlarda gerçek; iki üç seçenekte yok. Bir ödeme formunda kargo tipini açılır menüden iki radyo düğmesine çevirdiğimizde o adımla ilgili destek sorularının kesildiğini gördüm.

Onay kutusu mu, anahtar mı

İkisi de açık/kapalı bir durumu taşır, farkları ne zaman geçerli olduklarıdır. Onay kutusu bir formun parçasıdır: kullanıcı işaretler, kaydete basınca durum değişir. Anahtar (switch) anında uygular, ayrı bir onay beklemez.

Bu ayrımın uygulama tarafında bedeli var. Anahtar koyduğun her yerde her hareket bir istek demektir; isteğin başarısız olma ihtimalini, kullanıcıya hata gösterimini ve düğmeyi eski konumuna geri almayı da yazman gerekir. Onay kutusunda bütün bu iş tek kaydetme isteğinde toplanır. Ekranda kaydet düğmesi varsa onay kutusu kullan, yoksa anahtar.

Bekleme süresi gösterge türünü belirler

Nielsen Norman Group'un uzun süredir tekrarladığı üç eşik burada işe yarar: 0,1 saniye anında algılanır, 1 saniyeye kadar kullanıcı düşünce akışını korur, 10 saniye dikkatin koptuğu sınırdır.

Pratik karşılığı şu. Bir saniyenin altındaki işlemlere gösterge koyma, ekranda bir anlığına görünüp kaybolan spinner işlemi hızlandırmaz, sadece titreşim yaratır. Bir ile on saniye arası belirsiz bir gösterge yeterli. On saniyeyi aşan işlemlerde sonsuz dönen spinner bilgi taşımaz: kullanıcı işin sürdüğünü görür ama ne kadar kaldığını bilmez, o yüzden yüzde, kalan süre ya da hangi adımda olunduğu yazılmalı.

Klavye, etiket, dokunma alanı

Kontrolü kendin çizmeye başladığın anda bedava gelen her şeyi kaybedersin. Yerel input ve select elemanları klavye gezinmesini, ekran okuyucu bildirimini, mobil seçiciyi ve odak halkasını hazır getirir. Aynı görünümü div ile kurduğunda rol tanımı, aria-checked durumu, ok tuşlarıyla gezinme ve odak yönetimi senin sorumluluğuna geçer. Görsel bir sebep yoksa bu takası yapma.

İki somut ölçüt: etiketi kontrole bağla, çünkü bağlı etiket ekran okuyucuya bilgi verdiği gibi tıklanabilir alanı da büyütür. Dokunma hedefi için WCAG 2.2 asgari 24x24 CSS pikseli ister; daha yüksek seviyede beklenen değer 44x44. Onay kutusunun kendisi 16 piksel olabilir, önemli olan tıklanabilir alanın büyüklüğü.

Varsayılanlar

• İki ile beş seçenek, tek seçim: radyo düğmesi.
• Çok sayıda seçenek, tek seçim: açılır menü; yirmiyi aşıyorsa aranabilir alan.
• Kaydet düğmesi olan formda açık/kapalı: onay kutusu. Ayarlar ekranında: anahtar.
• On saniyeyi aşabilen işlem: yüzdeli ya da adım gösteren ilerleme.