Kısaca: İyi bir buton ne yapacağını söyleyen bir metne, belirgin bir görünüme ve parmakla rahat basılabilecek bir alana sahiptir: WCAG 2.2’ye göre en az 24 × 24 piksel, rahat kullanım için 44–48 piksel. İyi bir form ise az alan, tek sütun, alanın dışında her zaman görünen etiketler ve sorunu çözmeyi anlatan hata mesajları demektir. Placeholder metni etiketin yerine kullanılmamalıdır.
Kısa cevap
Butonlar ve formlar, bir web sitesinin ziyaretçiyi müşteriye çevirdiği yerlerdir: teklif formu, iletişim formu, sepete ekle butonu. Burada yapılan küçük hatalar doğrudan kayıp iş demektir. Bu yazıda buton ve form tasarımının temel kurallarını, araştırmalara ve erişilebilirlik standartlarına dayanarak anlatıyorum.
İyi bir buton nasıl tasarlanır?
1. Buton gibi görünsün
Kullanıcı bir öğenin tıklanabilir olduğunu düşünmeden anlamalı. Dolgu rengi, belirgin kenarlar ve yeterli iç boşluk bunu sağlar. Düz metin gibi görünen “butonlar” ve buton gibi görünen ama tıklanamayan kutular, kullanıcıyı yanıltır.
2. Ne yapacağını söylesin
“Gönder”, “Tamam”, “Tıklayın” yerine eylemi anlatan metinler kullanın: “Teklif isteyin”, “Sepete ekle”, “Ücretsiz analizi başlat”. Kullanıcı butona basmadan ne olacağını bilmeli.
3. Birincil ve ikincil buton ayrımı
Bir ekranda yalnızca bir ana eylem öne çıkmalı. Birincil buton dolgulu ve vurgu renginde, ikincil butonlar (örneğin “Vazgeç”) kenarlıklı ya da metin biçiminde olmalı. Aynı ağırlıkta iki buton, kullanıcıyı kararsız bırakır. Bu, görsel hiyerarşinin butonlara uygulanmış hâlidir.
4. Yeterli dokunma alanı
WCAG 2.2, tıklanabilir hedeflerin en az 24 × 24 CSS pikseli olmasını (ya da çevresinde yeterli boşluk bulunmasını) AA seviyesinde zorunlu tutar; AAA seviyesi 44 × 44 pikseli önerir (W3C). Apple 44 punto, Google’ın Material Design sistemi 48dp öneriyor. Pratikte butonlarınızı en az 44 piksel yüksekliğinde tasarlamak hepsini karşılar. Küçük bir ikon butonu kullanıyorsanız, ikonu büyütmek yerine çevresine iç boşluk ekleyerek tıklanabilir alanı genişletin.
5. Durumları tasarlayın
| Durum | Ne zaman? | Görünüm |
|---|---|---|
| Normal | Varsayılan | Tam renk, net metin |
| Üzerine gelme (hover) | Fare üstündeyken | Hafif koyulaşma ya da gölge |
| Odak (focus) | Klavyeyle seçildiğinde | Belirgin çerçeve; asla tamamen kaldırmayın |
| Basılı (active) | Tıklama anında | Hafif içe basma hissi |
| Devre dışı (disabled) | Eylem şu an mümkün değilken | Soluk; neden devre dışı olduğu açıklanmalı |
| Yükleniyor | İşlem sürerken | Dönen ikon ya da metin; tekrar tıklamayı engeller |
Odak çerçevesini “çirkin” bulduğu için CSS’te kaldırmak çok yaygın bir hatadır; klavyeyle gezinen kullanıcılar bu çerçeve olmadan nerede olduklarını göremez. Erişilebilirliğin temellerini web erişilebilirliği yazısında anlattım.
İyi bir form nasıl tasarlanır?
1. Alan sayısını azaltın
Her ek alan, formun yarıda bırakılma ihtimalini artırır. Her alan için “Bu bilgi olmadan işi yapamaz mıyım?” diye sorun. Bir teklif formu için çoğu zaman ad, iletişim bilgisi ve kısa bir açıklama yeterlidir; gerisi ilk görüşmede konuşulabilir.
2. Tek sütun kullanın
Alanları yan yana dizmek ekranda yer kazandırır, ama gözün zikzak çizmesine ve bazı alanların atlanmasına yol açar. NN/g de formlarda alanların tek sütunda, yukarıdan aşağıya dizilmesini öneriyor (NN/g). İstisna, mantıksal olarak birlikte okunan kısa alanlardır (örneğin şehir ve posta kodu).
3. Etiketler alanın dışında ve her zaman görünür olsun
Alanın içindeki soluk metin (placeholder), kullanıcı yazmaya başladığında kaybolur. Sonuçta kullanıcı alanın ne istediğini hatırlayamaz, formu göndermeden önce kontrol edemez ve hataları düzeltmekte zorlanır. NN/g bu yüzden placeholder’ın etiket yerine kullanılmasını açıkça zararlı buluyor (NN/g). Erişilebilirlik açısından da önemli: WebAIM’in 2026 raporuna göre en popüler bir milyon ana sayfanın %51’inde etiketsiz form alanı var.
4. Doğru klavyeyi açın
HTML’de alan türlerini doğru seçmek mobil kullanıcıya büyük kolaylık sağlar: type="email" @ işaretli klavyeyi, type="tel" rakam klavyesini açar. autocomplete özelliği ise tarayıcının ad, adres ve telefon gibi bilgileri otomatik doldurmasını sağlar.
5. Hata mesajları sorunu çözdürsün
- Hatayı ilgili alanın hemen yanında gösterin, sadece formun en üstünde değil.
- Yalnızca kırmızı renge güvenmeyin; metin ve ikonla da belirtin.
- Ne olduğunu ve nasıl düzeltileceğini söyleyin: “Geçersiz giriş” yerine “Telefon numarası 10 haneli olmalı, örneğin 0532 123 45 67”.
- Kullanıcının girdiği bilgiyi silmeyin; hata sonrası form boşalmamalı.
- Alanı terk ettiği anda doğrulama yapın; ama kullanıcı yazarken her harfte hata göstermeyin.
6. Zorunlu ve isteğe bağlı alanları belirtin
Alanların çoğu zorunluysa isteğe bağlı olanları “(isteğe bağlı)” diye işaretlemek, her zorunlu alana yıldız koymaktan daha anlaşılırdır.
7. Gönderimden sonra ne olacağını söyleyin
Form gönderildikten sonra kullanıcıya bir teşekkür ve sonraki adımı gösterin: “Talebiniz alındı. 24 saat içinde size dönüş yapacağız.” Sessizce yenilenen bir sayfa, kullanıcının formu ikinci kez göndermesine yol açar.
Kontrol listesi
- Her ekranda tek bir birincil buton var mı?
- Buton metinleri eylemi anlatıyor mu?
- Tıklanabilir alanlar en az 44 piksel mi?
- Odak çerçevesi görünüyor mu?
- Her alanın görünür bir etiketi var mı?
- Hata mesajları alanın yanında ve çözüm odaklı mı?
- Form telefonda tek elle doldurulabiliyor mu?
Sık sorulan sorular
Buton rengi dönüşüm oranını artırır mı?
“Kırmızı buton yeşilden iyi dönüşür” gibi genellemeler yanıltıcıdır. Önemli olan butonun sayfadaki diğer öğelerden ayrışması ve metninin net olmasıdır. Sitenizin renkleri arasında en çok kontrast yaratan vurgu rengini seçin.
Yüzen etiket (floating label) kullanabilir miyim?
Etiketin alan seçilince yukarı kaydığı bu desen, placeholder’dan iyidir; ama küçük ve soluk etiket metni okunabilirliği düşürebilir. Basit ve her zaman görünen bir etiket hâlâ en güvenli seçimdir.
Formda CAPTCHA kullanmalı mıyım?
Kullanıcıya bulmaca çözdüren CAPTCHA’lar formu zorlaştırır ve erişilebilirlik sorunları yaratır. Gizli alan (honeypot) ya da görünmez doğrulama yapan çözümler, kullanıcıyı yormadan spamı büyük ölçüde engeller.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır.
