Web Formlarında Kullanılabilirlik: Önce Neyi Düzeltmeli?
Form, arayüzün kullanıcıdan bir şey istediği tek yer. Bu yüzden de terk oranının en net okunduğu yer. Aşağıdakiler, etkisi görece kolay ölçülebilen ve uygulaması çoğunlukla birkaç satırlık öznitelik işi olan düzeltmeler; sırayla ilerlemek, formu baştan tasarlamaktan daha çok kazandırıyor.
Alan sayısı, geri kalan her şeyden önce gelir
Bir formda yapabileceğiniz en büyük iyileştirme, alan silmek. Her alan hem doldurma süresine hem de terk etme ihtimaline ekleniyor, üstelik topladığınız verinin çoğu kimse tarafından okunmuyor. Pratik bir test: her alan için "bu veriyi kim, hangi kararda kullanıyor" sorusunu sorun. Cevabı olmayan alan formdan çıkar.
Zorunlu ile isteğe bağlıyı ayırt etmek de aynı hesaba giriyor. Formun neredeyse tamamı zorunluysa yıldız işaretlerini tek tek koymak yerine yalnızca isteğe bağlı olanları işaretlemek daha okunur bir sonuç veriyor.
Etiket ekranda kalmalı
Yer tutucu (placeholder) metnin sorunu estetik değil, zamanlama. Kullanıcı alana odaklandığı anda, yani metne asıl ihtiyaç duyduğu anda kayboluyor. Formun yarısını doldurup başa dönen biri, hangi kutuya ne yazdığını artık göremez. Ekran okuyucuların placeholder'ı ele alışı da tarayıcıdan tarayıcıya değişiyor.
Kalıcı etiketi alanın üstüne koyun, label etiketini for ile alana bağlayın. Bu bağ, tıklama alanını da büyüttüğü için mobilde ayrıca işe yarıyor. Format kuralı varsa (parola uzunluğu, telefon biçimi) kuralı alanın yanında, doğrulamadan önce yazın. Kullanıcı kuralı tahmin etmek zorunda kalmasın.
Doğru giriş tipi, doğru klavye
Mobilde açılan klavye, alanın tipiyle belirleniyor ve burada sık bir hata var: telefon alanına type="number" vermek. Sayı alanı artı ve boşluk gibi karakterleri kabul etmediği gibi, bazı tarayıcılarda kaydırma tekerleğiyle değerin değişmesine de yol açar. Telefon için type="tel", sayısal kod için inputmode="numeric" doğru karşılıklar.
Seçim alanlarında da benzer bir eşik var. Beş altı seçeneğe kadar radyo butonu, hepsi ekranda görüneceği için açılır menüden hızlı. Onlarca seçenekte, örneğin ülke listesinde, aranabilir bir menü şart.
Formun en ucuz kazancı: autocomplete
Kullanılabilirlik yazılarının çoğunun atladığı yer burası. Tarayıcı ve işletim sistemi, kullanıcının adını, adresini, e-postasını ve kart bilgisini zaten tutuyor; bunu forma aktarabilmesi için tek gereken doğru autocomplete değeri: given-name, email, postal-code, cc-number gibi. Yazılması birkaç dakika süren, on alanlık bir formu üç dokunuşa indirebilen bir düzenleme. Alan adlarını field_1, input2 diye üreten form eklentileri bu eşleşmeyi bozduğu için, otomatik doldurma çoğu sitede kullanıcı hatası yüzünden değil, işaretleme yüzünden çalışmıyor.
Hata mesajı: nerede, ne zaman, nasıl
Hatayı alanın yanında gösterin, formun tepesindeki toplu uyarı kutusu kullanıcıyı hatalı alanı aramaya zorlar. Mesaj neyin yanlış olduğunu değil, ne yapılması gerektiğini söylesin: "Geçersiz tarih" yerine "Tarihi 12.05.2026 biçiminde yazın".
Renk tek başına yeterli bir işaret değil. Kırmızı çerçeve, renk körlüğü olan kullanıcıda ve düşük kontrastlı ekranda kayboluyor; yanına metin, ikon ve aria-describedby bağlantısı gerekiyor. Doğrulamanın zamanlaması da ayrı bir konu: alan terk edildiğinde (blur) doğrulamak makul, her tuş vuruşunda doğrulayıp kullanıcı daha e-postasının yarısını yazmadan onu uyarmak ise kullanışlıdan çok sinir bozucu (bu kalıbı fazla agresif buluyorum).
Uzun formu bölerken
Adımlara bölmek uzun formu kısaltmaz, yalnızca algılanan yükü düşürür. İşe yaraması için iki şart var: kullanıcı kaçıncı adımda olduğunu görmeli ve geri dönüp önceki adımı düzenleyebilmeli. Kayıt tutulmuyorsa, yani sekme kapandığında girilen her şey uçuyorsa, bölmek durumu iyileştirmek yerine kötüleştiriyor.
Son adımda toplanan hassas veri varsa, o verinin niçin istendiğini formun içinde tek cümleyle söyleyin. Ayrı bir gizlilik sayfasına atılan bağlantıyı kimse o anda açmıyor.