UX Formlarını Tasarlama

1) İlkeler

1. Önce görev, sonra tarlalar. Formlar, kullanıcı betiğinin bir devamıdır, veritabanlarının bir listesi değildir.
2. Bir ekran bir hedeftir. Görevi tamamlamayan her şeyi kaldırın.
3. Asla veri kaybetmeyin. Otomatik kaydetme, taslağı geri yükleme, güvenli tekrarlar.
4. Göster "nasıl yapılır. "Hata öncesi kurallar ve örnekler; Dikkatlice onaylayın.
5. Varsayılan kullanılabilirlik. Etiketler, odak, kontrast, klavye navigasyonu.
6. Tahmin edilebilir hız. İlk yanıt 100 ms ≤, açık bir durum ve ilerleme ile gönderilir.

2) Form bilgi mimarisi

Amaç - adımlar - alanlar. Sonuçla başlayın (örneğin, "ödeme") ve minimum alan kümesini seçin.
Anlamlarına göre gruplama: "Kişisel veriler", "Ödeme", "Onay. "Her grubun 6 alanı ≤.
Aşamalı açıklama: koşula göre ek alanları göster (geçiş/ülke seçimi).
Alanların sırası kullanıcının kafasında gibidir: iyi bilinenden komplekse.

3) Düzen ve ızgara

Mobil ve çoğu görev için bir sütun, görünüm ve sekme sıralamasında daha hızlıdır.
Birbirine bağlı kısa alanlar için iki sütun uygundur (tarih/saat, ad/soyadı).
Çizginin yüksekliği 40-48 px, alanlar arasındaki mesafe 8-12 px (ilgili )/16-24 px (gruplar).
Alanın üst kısmında etiket hizalama; sağda - dar formlar için kullanmayın.

4) Etiketler, yer tutucular, yardımcılar

Etiket zorunludur. Yer tutucu bir örnektir, yedek değil.
Yardımcı metni alanın altına yerleştirin: kurallar, biçim, bir örneğe başvuru.
İsteğe bağlı alanlar, gerekli alanlarda "" yerine "(isteğe bağlı)" içerir.

Örnek:

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) Adımlar ve ilerleme

Çok Adımlı Formlar (ASC/Ödemeler): 3-5 adım, net ilerleme "Adım 2/4".
Tamamlanan adımları kaydedin; Veri kaybı olmadan geri dönmek için izin verin.
Gezinme düğmeleri: "Geri", "Sonraki", son "Onayla" - her zaman tek bir yerde.

6) Giriş kontrolü

Klavyeler ve nitelikler: Veri türü için 'type', 'inputmode', 'autocomplete'.
Giriş maskelerini yumuşak bir şekilde kullanın (telefon, IBAN, PAN, tarih), normalleştirilmiş değerleri saklayın.
Otomatik tamamlamayı bozmayın: doğru 'autocomplete = "given-name" | "cc-number" |'tek seferlik kod "vb.
Miktar hazır ayarları/kısayolları: Miktar alanının yanındaki "+ 50/+ 100/All".

Nitelik tablosu (abbr.):

Alan	yazı	inputmode	otomatik tamamlama
E-posta	e-posta	e-posta	e-posta
Telefon	tel	tel	tel
Toplam	metin	ondalık	Kapalı
PAN	metin	sayısal	cc-numarası
CVC	parola	sayısal	cc-csc
Kart tarihi	metin	sayısal	cc-exp
OTP	metin	sayısal	Bir kerelik kod

7) Doğrulama ve hatalar

Strateji: girmeden önce (yardımcı), sırasında (soft prompts), sonra (on blur/submit).
Asenkron kontroller (girişin benzersizliği, limitler, risk) - 250-400 ms'lik bir borç ile.
Hata metni: neden - nasıl düzeltilir - alternatif.
Birkaç hata için formun üzerindeki özet paneli + ilk hataya odaklanın.
Kritik eylemler (teklif/ödeme) ve güvenli geri ödemeler için Idempotency-Key.

8) Düğmeler ve gönderme

Birincil CTA, Enter tarafından kullanılabilen renk/boyutta vurgulanır.
'Meşgul' durumu ve yeniden deneme bloğunu tıklayın; Gecikmede> 3-5 s - "Onay bekleniyor"....
Başarıdan sonra - açık durum (tost/hazır ekran) + sonra ne olur.

9) Kullanılabilirlik (A11y)

Doğru bağlantılar 'label - input', 'aria-describedby' aracılığıyla hatalar, critical - 'role =' alert '.
Görünür ': odak-görünür', Sekme sırası görsele karşılık gelir.
Metin/simge kontrastı ≥ AA; Anlam sadece renk değildir.
'Prefers-reduced-motion' desteği: minimum animasyonlar.
Radyo düğme grupları için - 'fieldset/legend', istemler için - 'role =' status '.

10) Yerelleştirme ve uluslararası formatlar

Tarihler/para birimleri/sayılar - girişte yerel, depolama - ISO/küçük birimler.
Adlarda/adreslerde farklı alfabelere izin verin; tireleri/kesme işaretlerini sınırlamayın.
Telefonu E.164 tutun; Ülke açıkça veya ekleme sırasında '+ CC'den seçildi.

11) Performans ve istikrar

İlk görsel yanıt 100 ms ≤; Eşzamansız kontroller - ekranı kilitlemeyin.
"Asılı'bir spinner yerine iskelet, yükseklikleri sabitleyin, CLS'den kaçının.
Uzun listeleri sanallaştırma (örn. Ülkeler/bankalar).
Yalnızca 'transform/opacity' animasyon uygulayın, toplu bulanıklık/gölgeler yok.

12) Güvenlik ve gizlilik

PAN/CVC/Passport'u kaydetmeyin; RUM/konsola göndermeyin.
Hassas alanları maskeleyin, otomatik kaydetmeye kaydetmeyin.
Hesabın olup olmadığını açıklamayın: "E-posta kayıtlıysa, bir e-posta göndereceğiz".
Depolama - minimum gerekli; KYC'nin neden gerekli olduğunu gösterin.

13) Tipik Senaryo Desenleri

13. 1 Ödeme/depozito

Hazır ayarlarla miktar alanı, açıkça belirtilen para birimi.
Yumuşak maske ile PAN, Luhn kontrol; CVC gizlidir; Otomatik'/'ile 'MM/YY' tarihi.
Yakınlardaki komisyonlar/son tarihler hakkında metin, ipucu değil.

13. 2 Çekilme

Adımlar Miktar - Yöntem - Onay

İlerleme ve "Genellikle N dakikaya/saate kadar" (zor sözler yok).
Ülkeye göre yöntem çeşitleri; Uyarıları sınırlayın.

13. 3 KYC

Adım adım dosya yükleyici: biçim/ağırlık gereksinimleri, önizleme, gizlilik.
Tarihleri ve durum kanalını kontrol edin (posta/bildirim).

13. 4 Sınırlar ve sorumlu oyun

Açık birimler (gün/hafta/ay), ön ayarlar, değişikliklerin onaylanması, "Yürürlüğe girecek"....

14) Antipatterns

Etiket yerine yer tutucu.
Hata ayıklama olmadan "karakter başına" hatalar.
Hata üzerine formu sıfırlar.
Kritik talimat yalnızca araç ipucunda gizlidir.
Geçerli karakterleri/eklemeyi yasaklayan sabit maskeler.
Tek bir alanı doğrulamak için tüm sayfayı kilitleyin.
Açık meşgul/ilerleme olmadan gönderin.

15) Uygulama parçacıkları

Hataların özeti + ilk sayıya odaklanma

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

Anlık meşgul ve idempotency ile düğme

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

kullanılabilir radyo düğmesi grubunun HTML çerçevesi

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) Tasarım sistemi belirteçleri (örnek)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSS hazır ayarları

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) Metrikler ve deneyler

Tamamlama Oranı, Tamamlama Süresi, Alana Göre Hata Oranı.
Yeniden Deneme Başarı Oranı, atılan formların oranı, adım derinliği.
İpuçlarının/örneklerin TO'su, otomatik tamamlamaların oranı.
A/B: alan sırası, miktar hazır ayarları, hata metinleri, adımlara bölme.

18) KG kontrol listesi

Anlam ve akış

Alanlar hedefe karşılık gelir; Ekstra yok.
Gruplar mantıklıdır; Grup başına en fazla 6 alan.

Giriş

Doğru 'type/inputmode/autocomplete'.
Maskeler yumuşak, insert kırılmaz, caret tahmin edilebilir.

Doğrulama

Girişten önce yardımcı; bulanıklaştırma/gönderme hataları; 250-400 ms debouns.
Birden fazla hata için özet paneli; İlkine odaklan.

Kullanılabilirlik

Etiketler bağlantılıdır; AA ≥ kontrast; ': odak-görünür' görünür.
Klavye navigasyon; 'fieldset/legend' radyo grupları.

Performans

İlk yanıt ≤ 100 ms; "asılı" iplikçiler yok.
CLS yok; Uzun listeler sanallaştırılır.

Güvenlik

Hassas alan günlükleri yok; PAN/CVC otomatik kaydetmede değil.
Idempotency ve güvenli geri çekilmeler dahildir.

19) iGaming'in özellikleri

Bahisler: miktar alanı + ön ayarlar, anında 'meşgul', geri alma olasılığı ile iyimser onay (yönetmelikler izin veriyorsa).

Ödemeler/para çekme: Sadece ipuçlarında değil, alanlara yakın açık ücretler ve son tarihler; Limitleri ve KYC durumunu kontrol edin

Turnuvalar: Minimum veri seti, kurallar ve "karanlık kalıplar" olmadan kabul edilen onay kutuları içeren bir kayıt şekli.
Sorumlu oyun: net aralıklarla limitler belirleme ve sonucu önizleme biçimleri ("Günlük limitiniz yarından itibaren 2.000 ₴ olacaktır").

Kısa Özet

İyi bir form açık bir hedef, minimum alan kümesi, hatadan önce açık kurallar, anında yanıt ve kaydedilmiş verilerdir. Yapıyı komut dosyasından tasarlayın, erişilebilirliğe ve yerellere saygı gösterin, güvenli retrays ve idempotence içerir. Bu, formların hızlı ve güvenilir hissetme şeklidir - özellikle kritik iGaming senaryolarında.