Proiectarea formelor UX

1) Principii

1. Mai întâi sarcina, apoi câmpurile. Formularele sunt o continuare a scriptului utilizatorului, nu o listă de baze de date.
2. Un ecran este un singur scop. Eliminați orice care nu finalizează sarcina.
3. Să nu pierzi niciodată date. Autosave, restaura draft, reluări în condiții de siguranță.
4. Arată "cum să. "Reguli și exemple de pre-eroare; validați cu atenție.
5. Disponibilitate implicită. Etichete, focalizare, contrast, navigare la tastatură.
6. Viteză previzibilă. Primul răspuns ≤ 100 ms, trimiterea cu statut explicit și progres.

2) Arhitectura informațiilor de formă

Scopul → pași → câmpuri. Începeți cu rezultatul (de exemplu, „plăți”) și selectați setul minim de câmpuri.
Gruparea după înțeles: "Date cu caracter personal", "Plată", "Confirmare. "Fiecare grup ≤ 6 câmpuri.
Dezvăluire progresivă: afișați câmpuri suplimentare după condiție (comutare/selecție țară).
Ordinea câmpurilor este ca în capul utilizatorului: de la bine-cunoscut la complex.

3) Aspect și grilă

O coloană pentru mobil și majoritatea sarcinilor este mai rapidă în ordinea look-ului și a filelor.
Două coloane sunt adecvate pentru câmpurile interconectate scurte (data/ora, numele/prenumele).
Înălțimea liniei este de 40-48 px, distanța dintre câmpuri este de 8-12 px (legate )/16-24 px (grupuri).
Alinierea etichetei în partea de sus a câmpului; în dreapta - nu se utilizează pentru forme înguste.

4) Etichete, înlocuitori, ajutoare

Eticheta este obligatorie. Înlocuitorul este un exemplu, nu un înlocuitor.
Plasați textul ajutător sub câmp: reguli, format, trimitere la un exemplu.
Câmpurile opționale includ „(opțional)” în loc de „” pe câmpurile obligatorii.

Exemplu:

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) Pași și progres

Formulare multi-pas (ASC/plăți): 3-5 pași, progres clar „Pasul 2 din 4”.
Salvați pașii finalizați; Permite să se întoarcă fără pierderi de date.
Butoane de navigare: „Înapoi”, „Următoarea”, finala „Confirmă” - întotdeauna într-un singur loc.

6) Controlul intrărilor

Tastaturi și atribute: „tip”, „inputmode”, „autocomplete” pentru tipul de date.
Utilizați ușor măștile de intrare (telefon, IBAN, PAN, dată), stocați valorile normalizate.
Nu rupe autocomplete: correct' autocomplete = "dat-name" | "cc-number" | "one-time-code" ", etc.
Suma presetări/comenzi rapide: „+ 50/+ 100/All” lângă câmpul suma.

Tabelul atributelor (abbr.):

Câmp	tip	inputmode	completare automată
Email	e-mail	e-mail	e-mail
Telefonul	tel	tel	tel
Suma	text	zecimale	off
PAN	text	numeric	cc-număr
CVC	parola	numeric	cc-csc
Data cardului	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Validare și erori

Strategie: înainte de a intra (ajutor), în timpul (solicitări soft), după (pe blur/trimite).
Controale asincrone (unicitatea login, limite, risc) - cu un debit de 250-400 ms.
Text de eroare: provoca → cum să se stabilească → alternativă.
Panoul sumar de mai sus formularul pentru mai multe erori + se concentreze la prima eroare.
Idempotency-Key pentru acțiuni critice (bid/pay) și retribuții sigure.

8) Butoane și supunere

CTA primar este evidențiat în culoare/dimensiune, disponibil de Enter.
„Ocupat” stat și faceți clic pe blocul de încercare din nou; în întârziere> 3-5 s - „Așteptând confirmarea”....
După succes - stare explicită (toast/ready screen) + ce se întâmplă în continuare.

9) Disponibilitate (A11y)

Link-uri corecte 'etichetă → intrare', erori prin 'aria-descrise', critic - 'rol = „alertă”'.
Vizibil „: focus-vizibil”, ordinea Filă corespunde vizual.
Contrast text/pictogramă ≥ AA; sensul nu este doar culoare.
Suportul „Preferă mișcarea redusă”: animații minime.
Pentru grupurile de butoane radio - 'fieldset/legend', pentru solicitări - 'rol = „stare”'.

10) Localizare și formate internaționale

Date/valute/numere - locale la intrare, stocare - unități ISO/minore.
Permite pentru diferite alfabete în nume/adrese; nu limitați cratimele/apostrofurile.
Păstrați telefonul în E.164; țara selectată explicit sau din „+ CC” la inserare.

11) Performanță și stabilitate

Primul răspuns vizual ≤ 100 ms; verificări asincrone - nu blocați ecranul.
Schelet în loc de un spinner „agățat”, fixați înălțimi, evitați CLS.
Virtualizarea listelor lungi (ex. țări/bănci).
Animaţi numai 'transformare/opacitate', fără blur/umbre în vrac.

12) Securitate și confidențialitate

Nu înregistrați PAN/CVC/Pașaport; nu trimiteți la RUM/consolă.
Mascați câmpurile sensibile, nu le salvați în autosave.
Nu dezvăluiți dacă există contul: „Dacă e-mailul este înregistrat, vom trimite un e-mail”.
Depozitare - minim necesar; arată de ce este necesar KYC.

13) Tipic modele de scenariu

13. 1 Plata/depozit

Câmp de sumă cu presetări, valută specificată explicit.
PAN cu mască moale, verificare Luhn; CVC este ascuns; data 'LL/YY' cu auto - '/'.
Text despre comisioane/termene limită în apropiere, nu în tooltip.

13. 2 Retragere

Suma pașilor → Metoda → confirmare

Progress și „De obicei până la N minute/ore” (fără promisiuni dure).
Variante de metodă pe țări; limitarea avertismentelor.

13. 3 KYC

Încărcător de fișiere pas cu pas: cerințe de format/greutate, previzualizare, confidențialitate.
Verificați datele și canalul de stare (e-mail/notificare).

13. 4 Limite și joc responsabil

Unități clare (zi/săptămână/lună), pre-setări, confirmarea modificărilor, „Va intra în vigoare în”....

14) Antipattern

Înlocuitor în loc de etichetă.
Erori „per caracter” fără debunking.
Resetează formularul de eroare.
Instrucțiunea critică este ascunsă numai în vârful instrumentului.
Măști dure care interzic caracterele valide/inserarea.
Blocați întreaga pagină pentru a valida un singur câmp.
Trimiteți fără a fi explicit ocupat/progress.

15) Fragmente de implementare

Rezumatul erorilor + focus pe primul număr

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

Buton cu ocupat instant și idempotență

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');
}
});

Cadrul HTML al grupului de butoane radio disponibile

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) Proiectarea tokenurilor sistemului (exemplu)

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
}
}

Presetări CSS

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) Măsurători și experimente

Rata de finalizare, timp-la-complet, Rata de eroare de câmp.
Încercați din nou Rata de succes, proporția de forme aruncate, adâncimea pas.
CTR de sugestii/exemple, proporția de autocomplete.
A/B: ordinea câmpului, presetările sumei, textele de eroare, împărțirea în pași.

18) Lista de verificare QA

Semnificație și flux

Câmpurile corespund țintei; nu în plus.
Grupurile sunt logice; maxim 6 câmpuri pe grup.

Intrare

Corectați „tipul/inputmode/autocomplete”.
Măștile sunt moi, inserția nu se rupe, careta este previzibilă.

Validare

Ajutor înainte de intrare; erori privind estomparea/trimiterea; debuns 250-400 ms.
Panou de sinteză pentru mai multe erori; concentrează-te la primul.

Disponibilitate

Etichetele sunt legate; contrast ≥ AA; „: focus-vizibil” vizibil.
Navigare pe tastatură; grupuri de radio cu „fieldset/legendă”.

Performanță

Primul răspuns ≤ 100 ms; nu „agățat” spinners.
Nici un CLS; listele lungi sunt virtualizate.

Securitate

Nu există jurnale de câmp sensibile; PAN/CVC nu este în autosave.

Idempotența și retragerile sigure sunt incluse.

19) Specificul iGaming

Pariuri: câmp de sumă + presetări, „ocupat” instant, confirmare optimistă cu posibilitatea de anulare (dacă reglementările permit).

Plăți/retrageri: taxe explicite și termene limită în apropierea câmpurilor, nu doar în sfaturi; Limitele de verificare și starea KYC

Turnee: o formă de înregistrare cu un set minim de date, reguli și casete de selectare convenite fără „modele întunecate”.
Joc responsabil: forme de stabilire a limitelor la intervale clare și previzualizarea rezultatului („Limita zilnică va fi de 2.000 de ₴ de mâine”).

Scurt rezumat

O formă bună este un obiectiv clar, un set minim de câmpuri, reguli clare înainte de o eroare, răspuns instantaneu și date salvate. Proiectați structura din script, respectați accesibilitatea și localizați, includeți retraiele sigure și idempotența. Acesta este modul în care formele se simt rapid și de încredere - în special în scenariile critice iGaming.