Checkboxes vs Radio Buttons ve Dropdown

Checkboxlar ve Radio Butonlar ekran üzerinde çalışan uygulamar için vazgeçilmez kontrollerin başında gelir. Aklınıza gelebilecek her tür formda bu iki kontrolü mutlaka kullanıyoruz. Peki doğru kullanıyor muyuz?

Bu 3 kontrolün nerede nasıl kullanılması gerektiğini yaşadığım örneklerle vermek istiyorum. Bu şekilde doğru kullanım alanlarını netleştirmeye çalışacağım.

Bir siteye kayıt esnasında mail adresime site ile ilgili haberlerin gönderilmesi için onay isteyen bir formda:

Şeklinde bir bölümle karşılaştım. Burada yapılan kontrol kullanımı  ve kullanılabilirlik hataları:

#1: Her iki seçenek zıt anlam taşımalarına rağmen her ikisini de seçebiliyor olmam ki bunun nedeni radio buton kullanılması gerekirken checkbox kullanılması
#2: Soru cümlesi kökünü her iki seçenekte tekrar etmesi

Öte yandan “Site ile ilgili güncel bilgileri, duyuru ve haberlerin mail adresime gönderilmesini istiyorum.” cümlesinin tek başına sorulup, kullanıcı tercih ediyorsa Checkbox ile işaretleme yapması sağlanabilir. Ayrıca E-Commerce User Experience (Nielsen Norman Group Report Series) kitabında, checkbox’ların işaretsiz şekilde gelmesi, kullanıcının istediği seçeneği işaretlemesi gerektiği vurgulanmaktadır.

Hangisi ne zaman kullanılır

1984 yılında yayımlanan INSIDE MACHINTOSH standart dokümanında kontrollerin kullanım yerleri net olarak verilmiştir. w3C Web standartlarında da bu iki kontrol için aynı tanımlamaları kullanmıştır.

1. Radio Buttonlar, birbirleri ile farklı anlam ve içerikte olan ve kullanıcının tek bir seçim yapması gereken yerlerde kullanılırlar.Diğer bir deyişle, seçeneklerden ancak birinin seçilmesi gereken yerlerde kullanılırlar ve bir seçeneğin işaretlenmesi durumunda varsa daha önce yapılan seçim iptal olacaktır.Örneğin satın almak istediğiniz araba için Sedan veya Hatchback sorusu, bir araba hem sedan hem de hatchback olamayacağından (spor görünümlü sedan tasarım chevrolet cruise’u göz ardı ediyorum ), radio butonlar ile seçilmelidir.

2. CheckBoxlar, birden çok seçim yapılmasına olanak sağlarlar. Örneğin, alacağınız arabanın opsiyonel olan donanımlarını checkboxlar ile seçebilmelisiniz.

3. Tek başına CheckBox kullanımı ise bir seçeneği aktif hale getirip getirmemek şeklinde olmalıdır. “Kullanım şartlarını okudum ve kabul ediyorum” tekli checkbox’un kullanımına güzel bir örnek olacaktır.

işte bu 3 madde checkbox ve radiobutton kullanımının aslında ne kadar basit kurallara bağlı olduğunu gösteriyor.

Dikkat edelim

yukarıdaki 3 madde dışında, kullanım kolaylığı açısındandan da dikket etmemiz gereken ekstra durumları sıralamak gerekirse;

4.  Kontrolleri standart şekilleri ile kullanın. Kontrollerin görünümleri işletim sistemlerine bağlıdır ve kullanıcıları tarafından da görsel olarak benimsenmişlerdir. Ekstra olarak bu kontrolere şekil vermeniz kontrolün ve haliyle davranışın algısını zayıflatacaktır.

5. İlgili kontrolleri gruplayarak kullanıcının algısını kolaylaştırarak kullanımın kolay ve hızlı olmasını sağlayabilirsiniz.

6. Radiobutton listenizi karışıklıktan kaçınmak için dikey olarak kullanın. Yatayda kullanılan radio butonlar,  hangi seçeneğe ait oldukları algısını zorlaştıracaktır.

7. Soruları mutlaka anlaşılır şekilde ve pozitif cümleler olarak sorun.

8. Dropdown yerine mümkün olduğunca Radio Buton kullanın.

Dropdown listeler, tek bir seçim yapılması açısından radio butonlara benzeyebilir. Ancak seçeneklerin hızlı bir şekilde okunabilmesi, aralarında seçim ve karşılaştırma yapmanın kolaylığı açısından radio butonlar daha avantajlıdır. Öte yandan “ülke” seçimi için tüm ülkeleri radio buton ile vermek akıllıca değildir. Öncelikle hem liste çok uzundur, hem de kullanıcı yaşadığı ülkeyi zaten bildiğinden sorunun cevabı bellidir.

Özet olarak kullandığınız alanla da bağlantılı olarak, seçenek sayınız 10′dan az ise radio buton kullanmanız daha doğru olacaktır.

9. Radio butonlarda, check boxların aksine mutlaka seçilmiş bir seçenek olması gerekir.

10. Radio butonlar farklı anlamlı seçeneklerde kullanılacağından, seçeneklerin anlamlarının birbirlerinden farklı olduklarından ve birbirlerini içermediklerinden emin olmalısınınız. “Yaşadığınız yer” sorunun seçenekleri “Ankara, Türkiye” ve “İç anadolu, Türkiye” olmamalıdır.

11. Her iki kontrol içinde kullanıcının seçenek metnine tıkladığı zaman ilgili kontrolün seçilmesini sağlamalısınız. Bunun için ilgili kontrolü ve metnini <label> etiketi içine almanız yeterli olacaktır. Basit ama kullanım kolaylığını artıracak önemli bir detay. (6.maddede hem yatay kullanım hem de metin ilişkilendirilmemesi algı ve kullanım zorluğunu göstermektedir.)

12. Masaüstü uygulamarında klavye kısayolları eklemeniz kullanımı kolaylaştıracaktır. Örneğin, ALT+Seçenek numarası şeklinde bir kullanım, klavye ile hızlı işlem yapan kişiler için güzel bir detay olacaktır.

13. Bu kontrolleri bir formu göndermek, kayıt yapmak gibi eylemler için değil yalnızca seçim yapmak için kullanın.

Gözden kaçırdığım bölümler mutlaka vardır ancak bu 13 maddeye dikkat edilmesi en azından kullanılabilirlik açısından bir çok problemi engelleyecektir. Eksik olduğunu düşündüğünüz veya katılmadığınız yanlar için fikirlerinizi paylaşırsanız sevinirim.