Checkbox
Checkbox (Onay kutuları), birbirini hariç tutan seçimler için değil, birden çok seçenek için kullanılır. Her checkbox, listedeki diğer “checkbox“lardan bağımsız olarak çalışır, bu nedenle ek bir kutunun işaretlenmesi diğer seçimleri etkilemez.
Checkbox Nerelerde Kullanılır?
- Formlarda kullanılır.
- Bir sayfadaki, bir menüdeki veya bir bileşendeki verileri filtrelemek için kullanılır. Veri tablosunda toplu düzenleme amacıyla “checkbox“lar bulunur.
- Bir web sitesi kullanım şartları ve koşulları belirtilirken, “checkbox“ı işaretleyip işaretlememeniz onay verme ya da vermeme göstergesidir.
- Alt seçimli listelerde kullanılır. Tüm liste öğelerinin toplu seçimini yapmak için bir üst checkbox öğesi kullanılabilir. Veya ayrı ayrı seçimler yapılabilir.
Not:
Bir kullanıcı listeden yalnızca bir seçeneği seçebiliyorsa, checkbox yerine radio button kullanılmalıdır. Checkbox kullanıcının bir sette birden fazla öğe seçmesine izin verirken radio button kullanıcının yalnızca bir seçeneği seçmesine izin verir.
Checkbox Anatomisi
1) Grup etiketi : Aşağıda neyin seçilmesi gerektiğini belirtir.
2) Checkbox girişi: Uygun durumu gösteren bir checkbox girişi. Varsayılan olarak seçili değildir.
3) Checkbox etiketi: Seçmek veya seçimini kaldırmak istediğiniz bilgileri açıklar.
Checkbox Hizalama
- Checkbox etiketi, checkbox girişlerinin sağında hizalanır.
- Checkbox, dikey ya da yatay yerleştirilebilir. Daha kolay okunabilmesi için dikey yerleştirme daha uygundur.
- Checkbox etiketleri, mümkün olduğunca kısa tutulmalıdır. Ancak zorunlu durumlarda, uzun bir metin kullanılacaksa ikinci satıra geçilebilir. İkinci satırı geçildiğinde metin, “checkbox”ın altına kaydırılmalıdır.
- Bir checkbox ile bir sonraki bileşenin arasında en az 32 px mesafe olması daha pozitif kullanıcı deneyimine yöneliktir.
Radio Button
Bir gruptan yalnızca bir seçime izin verilen kullanım durumlarında “radio button” kullanılır. Birbirini dışlayan iki veya daha fazla seçenek listesi olduğunda ve kullanıcının tam olarak bir seçenek seçmesi gerektiğinde kullanılır. Başka bir deyişle, seçilmemiş bir radyo butonuna tıklamak, listede daha önce seçilmiş olan diğer butonların seçimini kaldıracaktır.
Radio Button Kullanımı
- Kullanıcı için daha fazla netlik sağlamak amacıyla başlık kullanılabilir.
- Radio button kümesinde, default bir seçeneğin seçili olması gerekir.
- Açık ve kısa bir etiket (label) kullanılmalıdır. Etiketler, “radio button”ın sağında yer alır. Etiketlerde cümle stilinde büyük harf (cümleyi başlatan ilk kelimenin ilk harfi büyük harf olacak şekilde) kullanılmalıdır. Etiketler en fazla 3 kelime olmalıdır.
Toggle
“Toggle“, iki olası durum arasında hızla geçiş yapmak için kullanılan bir kontroldür. Toggle, yalnızca kullanıcı “anahtarı döndürdükten” hemen sonra gerçekleşen bu ikili eylemler için kullanılır. Genellikle “açma / kapama” anahtarları için kullanılırlar.
Sistem ayarlarını ve tercihlerini değiştirmek için kullanılan en uygun yöntemdir. Mobil cihazlarda ayarları değiştirmek için daha çok tercih edilir, çünkü iki radio button’a kıyasla daha az yer kaplar.
“Toggle” kullanımında, default bir seçeneğin (açık veya kapalı gibi) seçili olması gerekir.
Net ve kısa etiketler kullanılmalıdır. Etiketler en fazla 3 kelime olmalıdır. Etiketlerde fiil kullanmak yerine isim veya sıfat kullanılması tercih edilir.
Kullanıcılar toggle ile etkileşime girdiğinde, yeni bir durum uygulamak için “Kaydet” veya “Onayla” gibi butonlara tıklamalarına gerek olmamalıdır. Aynı nedenden ötürü, diğer form alanlarının mevcut olduğu uzun formlarda toggle kullanmaktan kaçınmak daha iyidir ve değişikliklerin gerçekleşmesi için kullanıcının Gönder butonu ile etkileşime girmesi gerekir. Bu durumda, toggle yerine tek bir checkbox kullanmak daha idealdir.
