Arayüz tasarımında kullanıcıyı binlerce seçenekle baş başa bırakmak yerine, ona net ve kesin bir yol sunmanız gerektiğinde imdadınıza Radio Button (Radyo Butonu) yetişir. İsmini eski model radyolardaki fiziksel tuşlardan alan bu bileşen, bir düğmeye basıldığında diğerinin otomatik olarak atması mantığıyla çalışır. Yani kural basittir: Birçok seçenek, tek bir kazanan.

İşte modern dijital dünyada seçimin netliğini sağlayan Radio Button bileşenine dair her şey!

Radio Button Nedir? Kesin Kararların Mimarı

Radio Button, kullanıcının önceden tanımlanmış bir listeden yalnızca tek bir seçeneği belirlemesine olanak tanıyan bir arayüz öğesidir. Genellikle bir grup halinde bulunurlar ve bu grup içinde aynı anda sadece bir buton aktif olabilir.

Onu “Checklist” (Onay Kutusu) bileşeninden ayıran en kritik fark karşılıklı dışlama (mutually exclusive) ilkesidir. Checkbox’ta birden fazla kutuyu işaretleyebilirken, Radio Button dünyasında sadakat esastır; birini seçtiğinizde diğeri devre dışı kalır.

Radio Button Ne Zaman Kullanılır? (Ve Ne Zaman Kaçınılır?)

Bu bileşeni kullanmak, kullanıcıya “Burada sadece bir doğru var” demenin en şık yoludur.

İdeal Senaryolar (Ne Zaman Kullanmalı?)

• Birbirini Dışlayan Seçenekler: Kullanıcının aynı anda iki farklı durumda olamayacağı senaryolar (Örn: Ödeme yöntemi olarak ya Kredi Kartı ya da Havale seçimi).
• Net ve Anlaşılır Seçenekler: Her seçeneğin ne anlama geldiği açık ve etiketler için yeterli alanın olduğu durumlar.
• Görünürlük İhtiyacı: Tüm seçeneklerin aynı anda ekranda görünmesini, kullanıcının neyi seçmediğini de bilmesini istediğinizde.

Riskli Senaryolar (Ne Zaman Kaçınmalı?)

• İkili Seçimler (Binary): Sadece “Açık/Kapalı” gibi iki seçenek varsa, bir Switch veya Checkbox kullanmak daha pratiktir.
• Çok Fazla Seçenek: Eğer 5-6’dan fazla seçeneğiniz varsa, ekranı kalabalıklaştırmamak için bir Dropdown (Açılır Menü) kullanmak yer tasarrufu sağlar.
• Bağımlı Seçimler: Diğer tercihlere göre değişen karmaşık ayarlar için farklı giriş yöntemleri düşünülmelidir.

Tasarımın Anatomisi ve Kritik Varyasyonlar

Mobbin üzerindeki 1.800’den fazla gerçek dünya örneği, Radio Button tasarımının iki temel parçadan oluştuğunu gösteriyor:

1. Konteyner (Dış Halka): Seçimin sınırlarını belirleyen çember.
2. İkon Dolgusu (İç Nokta): Seçilen seçeneği belirten görsel işaret.

Tasarım Çeşitleri:

• Dolu Noktalı Modeller: Bazı nadir tasarımlarda, seçilen butonun içi tamamen renkli bir daire ile doldurulur.
• Checkmark (Onay İşareti) İkonu: Kullanıcıya “Seçimin onaylandı” mesajını daha güçlü vermek için iç noktada klasik bir onay işareti kullanılabilir.

Kullanım Alanları: Dijital Yolculuğun Durakları

Radio Buttonlar, kullanıcı deneyiminin (UX) kalbinde yer alan üç ana alanda karşımıza çıkar:

1. Form Girişleri

Kayıt formlarında cinsiyet seçimi veya bir abonelik planı (Temel, Standart, Premium) belirleme aşamalarında kullanıcıyı tek bir seçeneğe yönlendirmek için mükemmeldir.

2. Filtreleme ve Sıralama

E-ticaret sitelerinde ürünleri “Fiyata Göre (Artan)”, “Yeniliğe Göre” veya “Puana Göre” sıralarken Radio Buttonlar kullanılır; çünkü bir liste aynı anda iki farklı mantıkla sıralanamaz.

3. Ayarlar ve Tercihler

Mobil uygulamalarda dil seçimi veya tema (Aydınlık/Karanlık Mod) tercihi gibi sistem ayarlarında netlik sağlar.

Karıştırılan Bileşenler: Radio Button vs. Checkbox

Tasarımda en sık yapılan hata, bu iki bileşeni birbirinin yerine kullanmaktır.

• Şekil Farkı: Radio Button her zaman yuvarlaktır. Checkbox ise genellikle karedir.
• Mantık Farkı: Radio Button “Yalnızca Bir” (Single Select) seçimi zorunlu kılarken, Checkbox “Birden Fazla” (Multi Select) seçime izin verir.

Özetle: Radio Button, arayüzünüzün “karar verici” mekanizmasıdır. Eğer kullanıcınızın aklını karıştırmadan, net bir tercih yapmasını istiyorsanız, bu küçük dairelerin gücünden yararlanın!