Formlar kullanıcı ile sistem arasindaki en kritik etkileşim noktalarindan biridir. Kayıt, odeme, arama ve ayar ekranlarinda doldurma suresi, hata orani ve tamamlama orani dogrudan is metriklerine yansir. Iyi form UX, alan sayisini minimize eder, net geri bildirim verir ve validasyonu kullanıcıyı yormadan uygular.
Alan tasarımı ve bilgi mimarisi
Her alan gercekten gerekli mi sorusuyla baslanir. Opsiyonel alanlari azaltmak tamamlama oranini artirir. Ilgili alanlar gruplanir; uzun formlar adimlara (wizard) bolunur. Ilerleme gostergesi kullanıcıya ne kadar kaldigini soyler.
- Tek sütun layout: Goz takibi daha kolay, mobil uyumlu.
- Inline etiketler: Placeholder yerine her zaman görünür label.
- Akilli varsayilanlar: Ulke kodu, tarih formati locale'e gore.
- Progressive disclosure: Gelismis seçenekler baslangicta gizli.
Şifre alaninda goster/gizle toggle ve güç gostergesi kullanılır. E-posta alaninda tek alan yeterli; e-posta tekrar alani gereksiz surtunme yaratir. Telefon numarasi ulke secici ile formatlanir.
Validasyon zamanlamasi
Anlik (on input) validasyon dikkat dagitici olabilir; blur (alandan çıkış) genelde daha iyi deneyim sunar. Submit sonrasi tüm hatalarin listelenmesi zorunludur. Ilk hataya focus ve scroll yapilir.
Async validasyon (kullanıcı adi musait mi) debounce ile geciktirilir; 500ms tipik degerdir. Yukleniyor gostergesi kullanıcıya işlem devam ediyor mesaji verir. Cift submit onleme: buton disable ve idempotency key.
function validateEmail(value) {
if (!value) return 'E-posta zorunludur.';
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
return 'Gecerli bir e-posta adresi girin.';
return null;
}Istemci ve sunucu validasyonu
Istemci validasyonu hızlı geri bildirim icin; sunucu validasyonu güvenlik icin zorunludur. Istemci kurallari asla güvenilir kabul edilmez. Sunucu hata mesajlari alan bazinda donmeli; generic 400 yetersizdir.
Zod, Yup veya Valibot ile schema tanimlanir; ayni schema istemci ve sunucuda paylasilabilir (tRPC, React Hook Form + zodResolver). Tip güvenliği ve tutarlı mesajlar sağlanır.
const schema = z.object({
email: z.string().email('Gecerli e-posta girin'),
age: z.number().min(18, '18 yasindan buyuk olmalisiniz'),
});Hata mesaji yazimi
Hata mesajlari spesifik ve çözüm odaklı olmali. 'Gecersiz giriş' yerine 'Şifre en az 8 karakter ve bir rakam icermelidir.' Kullanıcıyı suclamayan ton tercih edilir. Birden fazla hata varsa öncelik sırası: zorunlu alanlar once.
Başarılı alanlar yesil tik ile onaylanabilir ancak dikkatli kullanılmalı; erken başarı gostergesi kullanıcıyı yaniltabilir. Hata ozeti form ustunde role="alert" ile duyurulur.
Erisilebilir form UX
Label-input iliskisi for/id ile kurulur. Hata aria-describedby ile baglanir. Klavye ile tüm alanlar ve submit erisilebilir. Autocomplete attribute'lari doğru degerlerle doldurulur (email, name, street-address) tarayici otomatik doldurmayi iyilestirir.
Mobil form deneyimi
Input type ve inputmode doğru secilir: type="email", type="tel", inputmode="numeric". Büyük touch target (min 44px). Submit butonu klavye acikken görünür kalacak şekilde konumlanir. iOS zoom onleme icin font-size en az 16px.
Adres ve odeme formlarinda Apple Pay / Google Pay gibi express checkout alan doldurmayi azaltir. Kamera ile kart okuma ve QR tarama entegrasyonu mobilde surtunmeyi dusurur.
Güvenlik ve gizlilik
CSRF token formlarda veya SameSite cookie ile korunur. Rate limiting brute force onler. Hassas alanlar loglanmaz. Şifre alaninda paste engellenmemeli (şifre yoneticileri icin). CAPTCHA yalnizca supheli trafikte gosterilir; her zaman CAPTCHA tamamlama oranini dusurur.
Metrikler ve A/B test
Form analytics: alan bazinda drop-off, ortalama doldurma suresi, hata frekansi, submit başarı orani. Hotjar veya FullStory ile session replay sorunlu alanlari gösterir. A/B test ile label metni, buton rengi veya adim sayisi karsilastirilir.
- Form abandonment rate izle.
- Time to complete olc.
- Validation error rate alan bazinda raporla.
- Successful submission conversion funnel'da takip et.
Karmaşık senaryolar
Çoklu dosya yükleme: drag-drop, ilerleme cubugu, boyut ve tip kisitlamasi net belirtilir. Dinamik alan listesi (yolcu ekle) ekle/sil butonlari erisilebilir etiket tasir. Kosullu alanlar (ulke secimine gore il) aninda gosterilir; gizlenen alan degerleri temizlenir.
Autosave taslak kaydeder; kullanıcı kayıp endisesi azalir. Conflict resolution iki sekmede duzenlemede gerekir. Offline form queue service worker ile senkronize edilebilir.
Kutuphane seçimi
React Hook Form performans icin uncontrolled model kullanır; Formik daha controlled. Native HTML5 constraint validation basit formlar icin yeterli olabilir. Framework agnostic kutuphaneler (Felte, TanStack Form) yeni projelerde degerlendirilir.
Sunucu hata yönetimi
500 hatalarinda kullanıcıya veri kaybi olmadigini gosterin; retry secenegi sunun. Network timeout ayri mesajla belirtilir. Optimistic UI dikkatli: başarısız submit'te rollback ve açık ozur mesaji.
Form UX ve validasyon birlikte dusunuldugunde kullanıcı guveni ve is hedefleri hizalanir. Az alan, net mesaj, erken ve gec validasyon dengesi, erisilebilir markup ve ölçülebilir metrikler sürdürülebilir form kalitesinin temelidir.
Odeme ve hassas formlar
PCI DSS kapsamında kart numarasi kendi sunucunuzdan gecmemeli; Stripe Elements veya benzeri iframe tabanli alanlar kullanılır. Hata mesajlari kart numarasinin hangi hanesinin yanlış oldugunu soylememeli (güvenlik). 3D Secure adiminda net yonlendirme ve geri donus mesaji kullanıcıyı kaybetmez.
Adres dogrulama API'si (Google Places, Loqate) yazim hatasini azaltir ancak manuel duzenlemeye izin vermelidir. Otomatik doldurma sonrasi alanlar hala duzenlenebilir olmali; aksi halde yanlış adres kilitlenir.
Wizard ve cok adimli formlar
Her adimda kaydet ve devam et; geri donuste veri korunur. Adim basligi ve kisa açıklama kullanıcıya bağlam verir. Zorunlu olmayan adimlar atlanabilir olmali. Son özet ekraninda tüm girilen degerler duzenlenebilir linklerle sunulur.
- Adim 1: Hesap bilgileri (e-posta, şifre).
- Adim 2: Profil detaylari (opsiyonel alanlar).
- Adim 3: Tercihler ve onay kutulari.
- Adim 4: Özet ve submit.
Uluslararasi formlar
Posta kodu, telefon ve vergi numarasi ulkeye gore degisir; dinamik schema veya bolgesel form sablonlari kullanılır. Tarih girişi ISO backend'e normalize edilir; kullanıcıya locale formatinda gosterilir. IBAN ve VAT validasyonu ulke kurallarina gore ayri fonksiyonlarla yapilir.
Test ve kalite guvencesi
Form birim testleri: schema validasyon, hata mesaji metinleri, submit handler mock. E2E test (Playwright, Cypress): happy path, validation failure, network error retry. Görsel regresyon kritik checkout akisinda calistirilir.
Fake door test ile yeni alan ihtiyaci olculur: alan gosterilip doldurulursa talep vardir. Form simplification sürekli iyileştirme dongusunun parcasidir; her ceyrek analytics review ile alan cikarilir veya birlestirilir.
Anti-kaliplar
Form tasarımında kacinilmasi gereken davranislar ekip icinde paylasilan bir liste ile belgelenir. Bu liste code review sirasinda referans alinir ve yeni uyelerin hizla adapte olmasini sağlar.
- Reset on error: Hata sonrasi tüm formu temizlemek.
- Generic errors: 'Bir hata olustu' without detail.
- Disabled submit without explanation: Neden tiklanamiyor belirsiz.
- Captcha everywhere: Gereksiz surtunme.
- Sync long operations: Submit sirasinda UI donmasi.
Loading state submit butonunda spinner ve disabled ile gosterilir. Double-click korumasi 300ms debounce veya isSubmitting flag ile uygulanir. Başarılı submit sonrasi net confirmation ve devam yonlendirmesi kullanıcıyı sistemde tutar. Form state URL query parametreleri ile paylasilabilir; destek ekipleri kullanıcının kaldigi adimi gorebilir. Bos form submit denemelerinde alan bazli hata listesi üretmek kullanıcıya net yol haritasi sunar.
