Kolay Doldurulan Form Tasarlamak: Alan, Etiket, Doğrulama ve Hata

İyi form neyi ölçer

Form, ürünle kullanıcı arasındaki en dar geçittir: kayıt, ödeme, başvuru, talep, hepsi bir formdan geçer. Bu yüzden form tasarımının başarısı güzel görünmesiyle değil, doğru bilginin eksiksiz ve en az sürtünmeyle toplanmasıyla ölçülür. Üç şeye bakılır: kullanıcı formu bitiriyor mu, girilen veri doğru mu, kullanıcı süreçte takılıp yardım arıyor mu.

Forma iş akışı gözüyle bakmak işe yarar. Kullanıcının kafasında bir hedef var (hesap açmak, sipariş vermek) ve her alan bu hedefe giden yolda bir engeldir. Tasarımcının işi engelleri azaltmak, kalanları da anlaşılır kılmaktır. Alan sayısı kadar, alanın ne istediğinin açıklığı da terk etme kararını etkiler.

Başlamadan önce formun tek cümlelik amacını yazın: "Bu form, kullanıcının şu işi bitirmesini sağlar." Bu cümleye hizmet etmeyen her alan, adayı çıkarılacaklar listesine girer.

Her alanın bir gerekçesi olmalı

Alan envanteri çıkarın: formdaki her alanı bir tabloya yazın ve karşısına şu soruları ekleyin. Bu bilgi olmadan işlem tamamlanabilir mi? Bilgiyi başka bir yerden (hesap, önceki sipariş, tarayıcı) alabilir miyiz? Bilgiyi şimdi mi yoksa sonra mı istemek gerekir? Cevapları "hayır, evet, sonra" olan alanlar formdan çıkar ya da ertelenir.

İsteğe bağlı alanlar da maliyetlidir; çünkü kullanıcı her alanı okur ve doldurup doldurmayacağına karar verir. Gerçekten isteğe bağlı olanları işaretleyin, zorunluları değil. Çoğu alan zorunluysa "isteğe bağlı" etiketi daha az gürültü üretir.

İlgili alanları gruplayın: adres bilgileri bir arada, kişi bilgileri bir arada. Uzun formları adımlara bölmek mümkündür, ancak adım sayısı arttıkça kullanıcıya nerede olduğunu gösteren bir ilerleme göstergesi şarttır. Bölme kararı alan sayısına değil, mantıksal bütünlüğe göre verilir.

Sıralama da bir tasarım kararıdır: kolay ve tanıdık alanlar önce, hassas olanlar (telefon, kimlik benzeri bilgiler) sona yakın gelir. Hassas bir bilgi isteniyorsa yanına neden istendiğini açıklayan kısa bir not koymak güveni artırır.

Etiket, ipucu ve yerleşim

Etiket alanın üstünde, her zaman görünür olmalıdır. Placeholder (alanın içindeki silik örnek metin) etiketin yerini tutmaz: kullanıcı yazmaya başladığı anda kaybolur, kullanıcı ne yazdığını hatırlayamaz, yardımcı teknolojiler de bunu etiket olarak güvenle okumaz. Placeholder yalnızca format örneği için kullanılır (ör. bir tarih biçimi) ve etiketin yerine geçmez.

İpucu metni, alanın altında ya da etiketin yanında yer alır ve kullanıcı hataya düşmeden önce okunabilir olmalıdır. Hata sonrasında açıklama vermek yerine, baştan beklenen biçimi söylemek çok daha ucuzdur.

Tek sütunlu dikey yerleşim, çoğu form için en az hataya yol açan düzendir; göz tek bir hat boyunca iner, alanların sırası belirsizleşmez. Yan yana alanlar yalnızca zihinsel olarak tek birimse (ad ve soyad, ay ve yıl gibi) anlamlıdır.

Alan genişliği beklenen girdiyle uyumlu olmalıdır. Posta kodu için geniş bir kutu, kullanıcıya "burada uzun bir şey yazılacak" der; yanlış bir ipucudur. Birincil eylem düğmesi belirgin, ikincil eylem (vazgeç, temizle) görsel olarak geri planda olmalı; yıkıcı ve geri alınamaz eylemler birincil düğmeye yakın durmamalıdır.

Doğrulama ne zaman devreye girer

Doğrulamanın zamanlaması, içeriği kadar önemlidir. Kullanıcı daha yazarken kırmızı hata görürse rahatsız olur; hataları ancak gönderimde toplu görürse de hangi alana döneceğini arar. Dengeli yaklaşım, hatayı alandan çıkıldığı anda göstermek ve kullanıcı düzeltmeye başladığında hatayı hemen temizlemektir.

Gönderimde hâlâ hata varsa, odak ilk hatalı alana taşınır ve sayfanın üstünde kısa bir özet verilir; özetteki her madde ilgili alana bağlanır. Hata yalnızca renkle belirtilmemeli; simge ve metin de bulunmalıdır, çünkü renk körlüğü olan kullanıcılar kırmızıyı ayırt edemeyebilir.

Sunucu tarafı doğrulama her zaman gereklidir; tarayıcıdaki kontroller kullanıcıya kolaylık sağlar, güvenlik sağlamaz. Sunucudan dönen hataların da alan düzeyinde, aynı dille gösterilmesi gerekir.

Geri bildirimin yararlı olduğu yerde anlık denetim ekleyin: kullanıcı adı müsait mi, şifre gereksinimleri karşılandı mı. Her alanda anlık denetim ise gürültüye dönüşür.

Hata mesajı yazmak

İyi bir hata mesajı şunu söyler: ne oldu, neden oldu, nasıl düzeltilir. "Geçersiz giriş" bunların hiçbirini söylemez. Mesaj kullanıcıyı suçlamamalı, teknik jargon ve kod içermemeli, alanın hemen yanında durmalıdır.

Örneğin e-posta alanında "Hatalı biçim" yazmak yerine, ne beklendiğini göstermek daha yardımcıdır: "E-posta adresinde @ işareti eksik görünüyor, örnek: [email protected]". Telefon için de benzer şekilde, kabul edilen biçimi ve kullanıcının serbest yazabileceğini belirtmek, biçim ayıklama yükünü kullanıcıdan alır.

Mümkün olduğunda kullanıcıdan biçim istemek yerine girdiyi esnek karşılayıp kendiniz normalize edin: boşluk, tire ve parantezleri sistem temizleyebilir. Her biçim hatası, kullanıcının yapması gereken fazladan bir iştir.

Başarı durumunu da unutmayın. Gönderim sonrası ne olacağını (onay e-postası, inceleme süreci, sonraki adım) söyleyen net bir geri bildirim, kullanıcının aynı formu yeniden göndermesini önler.

Mobil, otomatik doldurma ve erişilebilirlik

Mobilde form doldurmak masaüstünden daha zahmetlidir. Alan türüne uygun klavye açmak (e-posta için @ işaretli, telefon için sayısal) bu zahmeti azaltır. Bunun için girdi türünü doğru işaretlemek yeterlidir. Tarayıcının otomatik doldurma desteğinden yararlanmak için alanlara uygun autocomplete değerleri verilir; kullanıcı adresini ve kart bilgisini yeniden yazmak zorunda kalmaz.

Dokunma hedefleri parmakla rahat seçilebilecek büyüklükte olmalı, alanlar arasında yanlış dokunmayı önleyecek boşluk bırakılmalıdır. Tarih ve seçim alanlarında platformun yerel bileşenleri çoğunlukla özel yapılmış bileşenlerden daha öngörülebilirdir.

Erişilebilirlik temel bir gerekliliktir: her alan bir etiketle programatik olarak ilişkilendirilmeli, hata mesajı alanla bağlanmalı, tüm form klavyeyle (sekme sırasıyla) kullanılabilmelidir. Odak göstergesi görünür kalır. Bu işler form ilk yazılırken yapılırsa ucuzdur, sonradan eklenirse pahalıdır.

Sık yapılan hatalar ve testi

Sık görülen hatalar: gereksiz alanlar, etiket yerine placeholder, gönderimde silinen girdiler (hata sonrası form boşalır), yalnızca renkle belirtilen hatalar, belirsiz düğme metinleri ("Gönder" yerine eylemi anlatan "Başvuruyu tamamla") ve doğrulama kurallarını baştan söylememek.

Form tasarımını gerçek kullanıcıyla test edin. Kullanıcıdan formu sesli düşünerek doldurmasını isteyin; takıldığı alanlar, tereddüt ettiği etiketler ve hata sonrası davranışı gözleyin. Analitikte alan bazlı terk ve düzeltme sayısı, hangi alanın sorun çıkardığını gösterir.

Küçük değişiklikleri A/B testiyle sınayın, ancak önce kullanılabilirlik sorunlarını yakalayıp düzeltin; test, gözlemin yerine geçmez. Neden bu kadar önemli olduğuna dair iş etkisi için ilgili blog yazısı daha fazla bağlam sunar.

Mindset programlarında nerede çalışılır

Form tasarımı, UX/UI eğitimlerinde UI Tasarım Temelleri ve Kullanılabilirlik ile Erişilebilirlik başlıklarının kesiştiği yerde çalışılır. Ürün tasarımcısı, ön yüz geliştiriciyle çalışan UX tasarımcısı ya da kayıt ve ödeme akışlarından sorumlu ürün yöneticisi için, form gibi sıradan görünen bir bileşenin dönüşüm ve veri kalitesi üzerindeki etkisini görmek ve gerçek kullanıcı testiyle sınamak hedeflenir.