Form Tasarımı Best Practices: Kullanıcı Dostu Form Oluşturma Rehberi

Seviye: Başlangıç - Orta Kategori: UX Design Son güncelleme: Ocak 2025

---

Giriş

Formlar her yerde: kayıt, login, checkout, iletişim, arama, ayarlar. Dijital ürünlerin en temel etkileşim noktası.

Ama formlar aynı zamanda en çok terk edilen noktalar. Çok uzun form? Terk. Anlaşılmaz hata mesajı? Terk. Mobilde zor kullanım? Terk.

İyi form tasarımı = dönüşüm. Kötü form tasarımı = kayıp kullanıcı, kayıp gelir.

Form tasarımı basit görünür ama detaylar kritik: Label pozisyonu, placeholder kullanımı, validation zamanlaması, hata mesajı tonu... Her biri dönüşümü etkiler.

Bu yazıda form tasarımının tüm detaylarını, best practice'leri ve sık yapılan hataları öğreneceksin.

---

Form Anatomisi

Bir formun temel bileşenleri:

1. Label

Input'un ne istediğini belirten metin.

Best practices:

• Her input'un label'ı olmalı
• Kısa ve net ("Email" değil "Email Adresi")
• Başlık formatı (Title Case veya Sentence case, tutarlı)

2. Input Field

Kullanıcının veri girdiği alan.

Türleri:

• Text input
• Password
• Email
• Number
• Tel
• Date
• Textarea
• Select/Dropdown
• Checkbox/Radio
• File upload

3. Placeholder

Input içinde görünen ipucu metni.

Best practices:

• Label yerine kullanma
• Örnek format göster ("ornek@email.com")
• Açık gri renk (ama okunabilir)

4. Helper Text

Label altında veya input altında ek açıklama.

Kullanım:

• Format gereksinimleri ("En az 8 karakter")
• Ek bilgi ("Bu bilgi paylaşılmaz")

5. Validation Message

Hata veya başarı durumu bildirimi.

6. Required Indicator

Zorunlu alan işareti (* veya "Zorunlu" etiketi).

---

Label Tasarımı

Pozisyon: Üstte mi, Yanda mı?

Önerilen: Üstte label (top-aligned)

[COMPARISON] ❌ Kaçınılması gereken: Floating label (accessibility sorunları) ✅ Önerilen: Label üstte, her zaman görünür [/COMPARISON]

Floating Labels

Popüler ama sorunlu:

Problemler:

• Yazarken label küçülür, okunması zor
• Screen reader sorunları
• Placeholder ile karışır
• Helper text ile çakışır

Kullanacaksan:

• Kontrast yeterli olmalı (küçük halde de)
• Aria-label ekle
• Çok kısa formlarda düşün

Label Metni

• Kısa tut
• Jargondan kaçın
• Tutarlı format

---

Placeholder Kullanımı

Placeholder ≠ Label

Doğru Placeholder Kullanımı

İyi kullanım:

• Örnek format: "ornek@email.com"
• Beklenen değer: "İstanbul"
• İpucu: "Arama yapın..."

Kötü kullanım:

• Label yerine: "Email Adresi"
• Talimat: "Email adresinizi girin"

Placeholder Styling

• Açık gri renk (#9CA3AF gibi)
• Ama yeterli kontrast (WCAG 4.5:1 zor ama 3:1 hedefle)
• İtalik kullanma (okunabilirliği azaltır)

---

Input Tasarımı

Boyut

Minimum touch target: 44x44px (Apple), 48x48px (Google)

Önerilen input height: 40-48px

Padding: 12-16px horizontal

Border ve Arka Plan

Önerilen: Border style, net görünürlük

Focus State

Focus state çok önemli (klavye navigasyonu, erişilebilirlik).

Best practices:

• Belirgin border rengi değişimi
• Outline veya shadow ekleme
• Sadece renk değişimi yetmez (renk körü kullanıcılar)

Default: border-color: #D1D5DB
Focus: border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2)

Input Türleri (HTML5)

Doğru input type kullan:

---

Input State'leri

Her input için tüm state'ler:

1. Default (Empty)

Boş, etkileşim yok.

2. Focus

Kullanıcı tıkladı/tab'ladı.

• Border rengi değişir
• Shadow eklenir

3. Filled

Değer girilmiş.

• Default'tan farklı görünebilir (opsiyonel)

4. Disabled

Etkileşim kapalı.

• Soluk görünüm (opacity: 0.5)
• Cursor: not-allowed
• Neden disabled olduğunu açıkla (mümkünse)

5. Read-only

Görüntülenebilir ama düzenlenemez.

• Disabled'dan farklı (seçilebilir, kopyalanabilir)

6. Error

Validation hatası.

• Kırmızı border
• Hata mesajı
• İkon (opsiyonel)

7. Success

Validation başarılı (opsiyonel).

• Yeşil border veya tik ikonu
• Pozitif feedback

8. Loading

Async validation sırasında.

• Spinner ikonu

---

Validation

Validation Zamanlaması

Önerilen: On blur (alan terk edildiğinde) + On submit kombinasyonu

Inline Validation

Pozitif Validation

Sadece hata değil, başarı da göster:

• ✓ Yeşil tik ikonu
• "Kullanılabilir kullanıcı adı" mesajı

---

Hata Mesajları

İyi Hata Mesajı Özellikleri

1. Spesifik: Ne yanlış olduğunu söyle
2. Yapıcı: Nasıl düzeltileceğini söyle
3. İnsan dilinde: Teknik jargon yok
4. Kibar: Suçlayıcı değil

Hata Mesajı Örnekleri

Hata Mesajı Konumu

• Input'un hemen altında
• Kırmızı renk
• Hata ikonu (opsiyonel)
• Input border'ı da kırmızı

Toplu Hata Gösterimi

Uzun formlarda:

• Form başında özet liste
• Her alanda inline hata
• Hatalı alana scroll/focus

---

Zorunlu Alanlar

İşaretleme Yöntemleri

1. Asterisk (*): En yaygın
2. "Zorunlu" yazısı: Daha net
3. Opsiyonel olanları işaretle: Az zorunlu varsa

Best Practice

[COMPARISON] Çok zorunlu alan varsa: Opsiyonelleri işaretle "(Opsiyonel)" Az zorunlu alan varsa: Zorunluları işaretle "*" [/COMPARISON]

Açıklama Ekle

Form başında: "* ile işaretli alanlar zorunludur"

---

Form Layout

Tek Kolon

[COMPARISON] ✅ Önerilen: Tek kolon layout

• Tarama kolay
• Mobil uyumlu
• Net sıra [/COMPARISON]

Çok Kolon

Sadece mantıksal olarak ilişkili alanlar için:

• Ad + Soyad (yan yana olabilir)
• Şehir + İlçe + Posta kodu

Gruplama

İlişkili alanları grupla:

• Kişisel bilgiler
• Adres bilgileri
• Ödeme bilgileri

Visual separator: Başlık, çizgi veya boşluk

Adım Adım (Multi-step)

Uzun formları adımlara böl:

• Her adımda 3-5 alan
• Progress indicator
• Geri gitme imkanı
• Veri kaybetmeme

---

Spesifik Input Türleri

Password

• Show/hide toggle
• Strength indicator (opsiyonel)
• Gereksinim listesi göster
• Caps lock uyarısı

Tarih

• Native date picker (type="date")
• Veya özel date picker
• Format açıkça belirt (GG/AA/YYYY)
• Geçersiz tarih engelle

Telefon

• Ülke kodu seçimi
• Format maskesi (5XX XXX XX XX)
• Sadece rakam kabul et

Adres

• Autocomplete kullan (Google Places vb.)
• Ülke → Şehir → İlçe sırası
• Posta kodu validation

Dosya Yükleme

• Kabul edilen formatları belirt
• Maksimum boyut göster
• Drag & drop desteği
• Yükleme progress'i
• Preview (görsel için)

---

Select ve Dropdown

Native vs Custom

Ne Zaman Dropdown?

• 5+ seçenek varsa dropdown
• 2-4 seçenek varsa radio button düşün
• Çok fazla seçenek (50+) varsa autocomplete

Dropdown Best Practices

• Default seçenek: "Seçiniz..." (zorunluysa)
• Alfabetik veya mantıksal sıralama
• Arama/filtre (çok seçenek varsa)
• Seçili değeri net göster

---

Checkbox ve Radio

Checkbox

Birden fazla seçilebilir.

Best practices:

• Label tıklanabilir olmalı
• Minimum 44px touch target
• Indeterminate state (gerekirse)

Radio Button

Tek seçim.

Best practices:

• Grupla, fieldset kullan
• Default seçili olabilir
• Dikey liste önerilir

Toggle/Switch

On/off durumları için.

Kullanım:

• Anlık efekt olan ayarlar
• Boolean değerler
• Checkbox yerine kullanılabilir

---

Buton Tasarımı

Submit Butonu

• Net aksiyon metni ("Kayıt Ol", "Gönder")
• Primary style (dolgu rengi)
• Form sonunda, sağda veya ortalı
• Loading state
• Disabled state (form geçersizse)

Buton Metni

İkincil Aksiyonlar

• "İptal" veya "Temizle"
• Secondary style (outline)
• Submit'ten az belirgin

---

Erişilebilirlik

Label Association

Her input'un programatik label'ı olmalı:

Email

Hata Bildirimi

• aria-invalid="true" hata durumunda
• aria-describedby ile hata mesajını bağla
• Focus'u hatalı alana taşı

Klavye Navigasyonu

• Tab sırası mantıklı
• Enter ile submit
• Escape ile iptal (modal'da)

Screen Reader

• Fieldset ve legend kullan (gruplar için)
• Required alanları belirt
• Dinamik mesajları announce et

---

Dönüşüm Optimizasyonu

Alan Sayısını Azalt

Her ek alan dönüşümü düşürür.

Soru: Bu bilgi gerçekten şimdi gerekli mi?

Progress Göster

Uzun formlarda:

• Adım sayısı
• Progress bar
• "2 dakika sürer" gibi tahmin

Güven Sinyalleri

• SSL/güvenlik rozeti
• Gizlilik bildirimi
• Müşteri yorumları (checkout'ta)

Autofill Desteği

Doğru autocomplete attribute'ları:

---

Mobil Form Tasarımı

Touch Target

Minimum 44x44px, ideal 48x48px.

Klavye

Doğru input type = doğru klavye.

Tek Kolon

Mobilde her zaman tek kolon.

Sticky Submit

Uzun formlarda submit butonu sticky/fixed olabilir.

Autofocus

İlk input'a otomatik focus (dikkatli kullan, accessibility).

---

---

---

İlgili İçerikler

Önceki: Onboarding UX Tasarımı

Sonraki: Error State Tasarımı (yakında)

İlgili konular:

• UX Writing Temelleri
• Accessibility Temelleri
• Micro-interactions Tasarımı

İlgili Roadmap: UI Designer Roadmap → Component Design

---

Kaynaklar

Derinleşmek istersen:

• Form Design Patterns - Adam Silver (Kitap, kapsamlı)
• Web Form Design - Luke Wroblewski (Klasik kaynak)
• Form Design - NNGroup (İngilizce)
• Baymard Institute - Form Usability (İngilizce, araştırma bazlı)