UI Form Tasarımı: Doldurma Oranını Değiştiren Kararlar
Form, bir sitede ziyaretçiden ilk kez bir şey istediğiniz yerdir; bu yüzden en pahalı ekrandır. Alan sayısı, doğrulamanın zamanlaması ve mobilde doğru klavyenin açılması, formun rengi ya da gölgesinden çok daha fazla iş görür. Aşağıdaki kararların hepsi ölçülebilir, hepsi de tasarım aşamasında bir kez verilip sonra unutuluyor.
Alan sayısı, tasarımdan önce gelen karar
Bir formdaki her alan doldurma oranından bir şey götürür. O yüzden ilk iş renk seçmek değil, listeyi kısaltmaktır: her alanın karşısına o veriyi bugün ne için kullandığınızı yazın. Cevabı "ileride lazım olur" olan alanı silin. Bir projede kayıt formundaki zorunlu telefon alanını kaldırmıştık, destek kutusuna düşen "kayıt olamıyorum" mesajları o hafta kesildi.
Kalan alanları da ikiye ayırın: kayıt anında gereken bilgi, ve sonradan profil ekranında istenebilecek bilgi. İkinci grubu forma değil, kullanıcının ürünle ilk temasından sonrasına bırakın.
Tek sütun, ve çok adımlının gerçek maliyeti
Alanları tek sütunda, yukarıdan aşağı sıralayın. İki sütunlu düzende göz zıplar, kullanıcı alan atlar, atladığını da genelde hata mesajıyla öğrenir.
Çok adımlı formlara gelince, sık verilen "uzun formu adımlara böl, tamamlanma artar" tavsiyesi olduğu gibi doğru değil. Bölmek alan sayısını azaltmaz, sadece gizler; buna karşılık her adım geçişi yeni bir terk noktası açar. Adımlara bölmek, alanlar gerçekten farklı zihinsel kümelere ayrılıyorsa işe yarar: adres bilgisi ayrı, ödeme bilgisi ayrı. Aynı türden on beş alanı beşerli üç ekrana dağıtmak ise sadece üç kez "devam"a bastırır.
Doğrulama: ne zaman, nerede
Her tuş vuruşunda doğrulama yapan form, kullanıcı e-postasının ilk harfini yazar yazmaz "geçersiz e-posta" der. Doğru zamanlama alandan çıkışta doğrulamaktır. Hatayı da alanın hemen altında, kırmızı bir çerçeveyle değil okunur bir cümleyle gösterin. Şifre gibi kural listesi olan alanlarda kuralı baştan yazın, kullanıcı deneme yanılmayla bulmasın.
İstemci tarafındaki doğrulama tamamen bir deneyim iyileştirmesidir. Aynı kontrolü sunucuda yeniden yazacaksınız, çünkü isteğin gerçekten sizin formunuzdan geldiğine dair hiçbir garanti yok. İkisini tek bir kural tanımından üretmek, iki yerde birbirinden bağımsız sürüklenen regex'lerle uğraşmaktan ucuza gelir.
Mobilde iş klavyede biter
Mobil formun büyük kısmı görsel değil, girdi tipiyle ilgilidir. type="email", inputmode="numeric", autocomplete="one-time-code" gibi tek satırlık ekler kullanıcıya doğru klavyeyi ve kayıtlı bilgisini getirir. Bunları atlayıp "mobil uyumlu" demek, yalnızca alanların ekrana sığdığını söylemektir.
Dokunma hedeflerini parmakla rahat seçilecek boyutta tutun, aralarındaki boşluğu yanlış alana basılmayacak kadar açın. Tarih için üç ayrı açılır menü kurmak yerine cihazın kendi tarih seçicisini kullanın.
Güvenlikte görünen taraf ve gerçek taraf
Kullanıcıya bakan tarafta iş basit: verinin ne için toplandığını tek cümleyle söyleyin ve onay kutusunu önceden işaretlemeyin. Teknik tarafta captcha ilk çözüm değildir. Gizli bir tuzak alan, gönderim hızı sınırı ve sunucu tarafı doğrulama, otomatik gönderimlerin çoğunu kullanıcıya hiçbir bulmaca çözdürmeden eler. Captcha'yı bunlar yetmediğinde ekleyin, başlangıç noktası olarak değil.
Ölçmediğiniz yeri düzeltemezsiniz
Formun hangi alanında kaybettiğinizi tahmin etmeyin. Alan bazında odaklanma, terk ve hata olaylarını kaydedin. Hangi alanın kaç kez hata verdiği ve hangi adımda kaç kişinin geri döndüğü, aylarca sürebilecek bir tasarım tartışmasını birkaç dakikada bitirir. A/B testi de ancak bu veri varken anlamlı; yoksa iki tahmin arasında seçim yapıyorsunuz demektir.
Kaynak