Düzenlenebilir Input Alanları: Serbest Metin Ne Zaman İşe Yarar

Form tasarımında dönüp dolaşıp aynı tartışmaya geliniyor: kullanıcıya serbest metin mi verilmeli, hazır seçenek listesi mi? Serbest alan yazmayı hızlandırır, ama toplanan veriyi dağıtır ve faturayı forma değil arkadaki veritabanına çıkarır. Karar, o alanın cevabının kaç farklı biçimde yazılabileceğine bakılarak verilir.

Serbest alan neyi çözer

Adres, şikâyet metni, listedeki "diğer" seçeneğinin arkası. Bu üç yerde açılır liste kullanmak, kullanıcıyı kendi cevabını en yakın kutucuğa sıkıştırmaya zorlar. Adı harf harf seçtirmek uç bir örnek gibi duruyor, ama mahalle seçimini üç kademeli listeyle yaptıran kargo formları hâlâ ortalıkta ve kullanıcı kendi mahallesini listede bulamayınca formu orada bırakıyor.

Serbest metnin asıl işlevi hız değil, kapsama. Listeyi hazırlayan kişi bütün olası cevapları önceden bilemez.

Peki bu veri gerçekten zengin mi?

Serbest alanı savunurken sık kullanılan bir cümle var: "Böylece daha zengin veri topluyoruz." Bu cümle kendi kendini çürütüyor. Beş bin kişi il alanına serbest yazarsa elinizde İstanbul, istanbul, İST, Istanbul/Kadıköy ve baştaki boşluğuyla " İstanbul" birikir. İnsan gözü için hepsi aynı şehir, GROUP BY için beş ayrı değer.

Yani serbestlik veriyi zenginleştirmiyor, temizleme işini forma girmeden sonraya erteliyor. Rapor isteyen kişi geldiğinde o iş birinin önüne düşüyor, genelde de en pahalı anda.

Ayrım şurada netleşiyor: cevap kümesi kapalıysa (il, ülke, para birimi, kategori) seçim kutusu kullanın, çünkü o küme zaten belli ve serbest yazım sadece varyasyon üretir. Küme açıksa (adres satırı, açıklama, şikâyet) serbest bırakın, çünkü listeyi kapatma girişimi kullanıcının cevabını kırpar. Ara bir yol da var: serbest yazdırıp altında öneri göstermek, kullanıcı öneriye tıklarsa normalize değeri, tıklamazsa ham metni kaydetmek.

Genişlik bir vaattir

Input'un genişliği, kullanıcıya beklenen cevabın uzunluğunu söyler. Posta kodu için sayfa boyunca uzanan bir kutu koyarsanız kullanıcı bir an duraksar, oraya ne yazması gerektiğini yeniden düşünür. Açıklama alanı için tek satırlık dar bir kutu koyarsanız da uzun yazmayı caydırırsınız, sonra "kullanıcılar detay vermiyor" diye şikâyet edersiniz.

Aynı mantık kontrast için de geçerli. Giriş yapılacak bölge, çevresinden görünür biçimde ayrılmalı: koyu zeminde açık kutu ya da tersi, ve odaklanma durumu için ayrı bir görsel hal. Odak halini tarayıcının varsayılanından tamamen kaldırıp yerine bir şey koymayan tasarımlar, klavyeyle gezen kullanıcıyı formda kör bırakıyor.

Etiket yerinde dursun

Placeholder etiketin yerine geçmiyor. Kullanıcı yazmaya başladığı anda kayboluyor, alanın ne istediğini hatırlamak için yazdığını silmek gerekiyor. label ile for bağı kurulmamış bir alan ekran okuyucuda isimsiz kalır, dokunmatik ekranda da etiketine dokunulunca odaklanmaz.

Tarayıcının kendi otomatik doldurması için üçüncü parti kütüphane kurmayın. autocomplete="street-address", autocomplete="tel", autocomplete="postal-code" gibi doğru değeri yazmanız yeter, iş orada biter. Kullanıcının tarayıcısında zaten kayıtlı olan veriyi yeniden yazdırmak kimsenin işine yaramıyor.

Hata mesajı ne zaman görünmeli

Kullanıcı alanı doldururken değil, alandan ayrıldıktan sonra. E-posta alanına ilk harfi yazan kişiye "geçersiz e-posta" demek, henüz yapılmamış bir hatayı yüzüne vurmaktır. Ayrılışta doğrula, mesajı alanın hemen altına koy, ne yapılması gerektiğini yaz.

Ve düzeltmeyi kolaylaştırın. Çok adımlı formlarda kullanıcının önceki adıma dönüp girdiğini değiştirebilmesi, doğrulama kurallarını sıkılaştırmaktan daha çok işe yarıyor. Gönder butonuna basıldığında formun tamamının silinip baştan doldurtulduğu akışlar, o formu bir daha doldurmama sebebi.