Lansman Sayfasında Seçim Kutuları ve Toggle Butonlarının Tasarımı
Kısa Cevap
Seçim kutuları ve toggle butonları, kullanıcılara hızlı kararlar verme imkanı sunan ara yüz öğeleridir. Lansman sayfanızda bu öğeleri doğru tasarladığınızda, ziyaretçiler tercihlerini net bir şekilde ifade edebilir, dönüşüm oranınız artar ve kullanıcı memnuniyeti yükselir. Önemli olan şey, bu öğelerin amacına uygun, erişilebilir ve sayfanın gernel akışıyla uyumlu olmasıdır.
Seçim Kutuları ve Toggle Butonları Arasındaki Fark
Başlangıçta bu iki öğeyi karıştırdığımı itiraf etmeliyim. Lansman sayfamızdaki ilk tasarım denemelerinde, hangi durumda hangisini kullanacağımı tam olarak bilmiyordum. Ancak zamanla aradaki farkı öğrendim.
Seçim kutuları (checkbox), birden fazla seçeneğin aynı anda seçilebileceği durumlardadır. Örneğin bekleme listesi forma katıldığında "E-posta bildirimleri almak istiyorum" ve "SMS bildirimleri almak istiyorum" gibi seçeneklerde checkbox kullanırsınız. Kullanıcı ikisini de, birini veya hiçbirini seçebilir.
Toggle butonlar ise iki durumdan birinin seçilmesi gereken yerlerdedir. Açık-kapalı, evet-hayır, aktif-pasif gibi. Lansman gün planınızda "Canlı yayın yapılacak mı?" sorusunun yanında toggle buton koymak mantıklıdır çünkü sadece iki seçenek vardır.
Lansman Sayfanızda Nerede Kullanmalı?
Bekleme listesi oluşturken, sıklıkla seçim kutuları gerekir. Örneğin:
- İlgili olduğu ürün kategorileri (birden fazla seçebilir)
- Almak istediği haber türleri
- Erken kullanıcı testine katılmak isteyip istemediği
- Gizlilik ve hizmet şartlarını kabul ettiği
Toggle butonlar daha az sık kullanılır, ancak tercih yönetim panellerinde faydalıdır:
- Bildirim tercihlerinde (etkin/devre dışı)
- Hesap gizlilik ayarlarında
- Özellikleri karşılaştırma sayfasında (özellik mevcut/yok)
Tasarım Prensipleri: Kontrastı Doğru Kullanmak
Lansman sayfamızı ilk tasarladığımızda, seçim kutuları sayfanın geri kalanıyla o kadar uyumlu idi ki, bazı kullanıcılar onları fark etmedi. Işık renk kontrastını artırdıktan sonra, form tamamlama oranımız yüzde 15 arttı.
Seçim kutularının ve toggle butonların:
- Seçili ve seçili olmayan durumları açık şekilde farklanmalıdır
- Sayfanın ana renginden ayrı bir renk alması iyidir
- Hover durumunda (farenin üzerine geldiğinde) görsel geri bildirim vermelidir
- Odak durumunda (Tab tuşuyla seçildiğinde) belirgin bir border veya gölge olmalıdır
Etiketler ve Açıklama Metinleri Çok Önemli
Seçim kutusu veya toggle butonunun yanında yazan metin, kullanıcının ne seçtiğini anladığından emin olması için kritiktir. Kullanıcı "Pazarlama e-postalarını almak istiyorum" metnini okuyamıyorsa, o kutunun seçilmesi bir anlam ifade etmez.
Deneyimlerim göstermiştir ki:
- Etiketler kısa ve net olmalıdır (5-10 kelime ideal)
- Teknik jargon kullanmayın; sıradan dil kullanın
- Etiket, kutunun etrafında clickable bir alan olmalıdır (sadece kutu değil)
- Gerekirse, etiketin altına açıklayıcı küçük bir metin ekleyin
Mobil Cihazlarda Ergonomi
Lansmanımızın erişim istatistiklerine bakınca, ziyaretçilerin yüzde 70'i mobil cihazdan geliyor. Bu da seçim kutuları ve toggle butonların telefonda rahat kullanılabilir olması gerektiği anlamına geliyor.
Mobil tasarımda:
- Seçim kutuları ve toggle butonları en az 44x44 piksel olmalıdır (parmakla rahat tutabileceği boyut)
- Elementi ve etiketini birlikte bir alana yerleştirin
- Mesafeleri geniş tutun; öğeler birbirine değmemelidir
- Toggle butonları açık-kapalı yazısıyla birlikte gösterilebilir
Erişilebilirlik: Hiç Kimseyi Geride Bırakmamak
Ekran okuyucu kullanan kullanıcılar, seçim kutularının ve toggle butonların semantik HTML ile işaretlenmesi gerekiyor. "label" etiketi, input elemanlarıyla ilişkilendirilirse, ekran okuyucu kullanıcı her şeyi doğru şekilde anlayabilir.
Ayrıca, klavye navigasyonu da hayati önem taşıyor. Tab tuşuyla formu dolaşabilen bir kullanıcı, her öğeyi seçip Space tuşuyla işaretleyebilmelidir.
Sık Sorulan Sorular
Toggle buton mu, yoksa iki seçeneğe sahip radio button mu kullanmalıyım?
İkisi de başında aynı görevi yapar ama, ikiden fazla seçenek yoksa toggle buton daha modern ve kullanıcı dostu görünür. Üç veya daha fazla seçenek varsa (örneğin "Hafta içi", "Hafta sonu", "Her gün"), radio butonlar daha mantıklıdır.
Seçim kutusu etiketini nereye yazmalıyım? Soluna mı, sağına mı?
İngilizce yazılan sitelerde etiketi sağında görmek yaygındır. Türkçe sayfamızda da bu standardi koruduk, ancak mobilde işlevselliği de düşünün. Çok uzun etiketler kutudan sonraki satıra geçerse, hizalama bozulabilir.
Başlangıçta seçili mi, yoksa seçilmemiş mi gösterilmeli?
Kullanıcıyı yanılmaya zorlamak istemiyorsanız, başlangıçta hiçbirini seçili göstermemelisiniz. İstisna: GDPR gibi yasal gereklilikler varsa (örneğin "Hizmet şartlarını kabul ediyorum"), o zaman seçilmemiş başlaması zorunludur.
Renkler seçim kutuları ve toggle butonlarda önemli mi?
Çok önemli. Yeşili "seçili", gri veya kırmızıyı "seçili değil" olarak tutarlı tutarsanız, kullanıcılar hiç düşünmeden anlayabilir. Ancak renk körü kullanıcılar için sadece renge güvenmeyin; şekil veya simgelerle de fark oluşturun.