Progettazione di moduli UX

1) Principi

1. Prima l'attività, poi i campi. Moduli - Continua lo script personalizzato, non l'elenco dei database.
2. Uno schermo è un solo obiettivo. Rimuovere tutto ciò che non porta al completamento dell'attività.
3. Non perdete mai i dati. Correzione automatica, ripristino bozza, ripetizioni sicure.
4. Fatemi vedere la cosa giusta. Regole e esempi prima dell'errore; Valuti con cura.
5. Disponibilità predefinita. Etichette, trucco, contrasto, navigazione a tastiera.
6. Velocità prevedibile. La prima risposta è 100 ms, invio con stato e progresso evidenti.

2) Architettura informativa del modulo

L'obiettivo è di i passi del campo. Iniziare con il risultato (ad esempio, pagamento dei fondi) e selezionare un set minimo di campi.
Raggruppamento per «Dati personali», «Pagamento», «Conferma». Ogni gruppo ha ≤ sei campi.
Espansione progressiva: mostra i campi aggiuntivi in base alla condizione (toggle/selezione paese).
L'ordine dei campi è come nella testa di un utente, da famoso a complesso.

3) Layout e griglia

Una colonna per il mobile e la maggior parte delle attività è più veloce per lo sguardo e l'ordine.
Le due colonne sono appropriate per i campi interconnessi brevi (data/ora, nome/cognome).
Altezza della riga 40-48 px, distanza tra i campi 8-12 px (collegati )/16-24 px (gruppi).
Allineamento delle etichette sopra il campo a destra: non utilizzare moduli stretti.

4) Etichette, playsholder, helpers

L'etichetta è obbligatoria. Il playsholder è un esempio, non un sostituto.
Posizionare il testo sotto il campo Regole, Formato, Riferimento all'esempio.
Contrassegnare i campi opzionali con "(facoltativo)" anziché ".

Esempio:

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) Passi e progressi

Moduli multi-aga (CUS/pagamenti): 3-5 passi, progresso esplicito Passo 2 su 4.
Salvare i passaggi completati; Permettetemi di tornare senza perdita di dati.
I pulsanti di navigazione «Indietro», «Avanti», «Conferma» finale sono sempre nella stessa posizione.

6) Controllo dell'immissione

Tastiere e attributi: «type», «inputmode», «autocomplete» sotto il tipo di dati.
Usa le maschere di input in modo morbido (telefono, BAN, PAN, data) e memorizza i valori normalizzati.
Non interrompere automaticamente: corretti "autocomplete =" given-name "|" cc-number "|" one-time-code ", ecc.
Prelievi di somma/shortcat: + 50/+ 100/Tutto vicino al campo di importo.

Tabella attributi (sock):

Campo	type	inputmode	autocomplete
Email	email	email	email
Telefono	tel	tel	tel
Importo	text	decimal	off
PAN	text	numeric	cc-number
CVC	password	numeric	cc-csc
Data della mappa	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Convalida e errori

Strategia: prima di immettere (helper), durante (morbidi suggerimenti), dopo (blur/submit).
Controlli asincroni (unicità logina, limiti, rischio) - con debount 250-400 ms.
Il testo degli errori è il motivo per cui è possibile correggere l'alternativa.
Riquadro sommario sopra il modulo per più errori + attivare il primo errore.
Idempotency-Key per azioni critiche (tasso/pagamento) e retrai sicuri.

8) Pulsanti e invio

La CTA principale è evidenziata con il colore/dimensione disponibile in Invio.
«Busy» è il blocco e il blocco della ripetizione del click; in ritardo> 3-5 c - «In attesa di conferma»....
Dopo il successo, lo stato esplicito (toast/schermata Fine) + cosa succederà dopo.

9) Disponibilità (A11y)

Legami corretti dì label «, errori attraverso» aria-describedby «, critici -» role = «alert».
Visibile'focus-visual ', l'ordine di Taib corrisponde a quello visivo.
Contrasto testo/icone AA; Non è solo il colore.
Supporto dì prefers-reduced-motion ": almeno animazioni.
Per i gruppi radiofonici, "fieldset/legend", per i suggerimenti, "rolle =" status ".

10) Localizzazione e formati internazionali

Le date/valute/numeri sono locali durante l'immissione, il deposito è ISO/unità minori.
Ammettere alfabeti diversi in nomi/indirizzi; non limitare i difetti/apostrofi.
Il telefono è memorizzato in E.164; il paese viene scelto esplicitamente o da «+ CC» al momento dell'inserimento.

11) Performance e stabilità

La prima risposta visiva è 100 ms; controlli asincroni - non bloccano lo schermo.
Skeleton invece di spinner «appeso», fissa le altezze, evita il CLS.
Virtualizzare elenchi lunghi (ad esempio paesi/banche).
Animare solo 'form/opacity', senza blur/ombre di massa.

12) Sicurezza e privacy

Non logifichi PAN/CVC/passaporto; Non inviare a RUM/Console.
Mascherare i campi sensibili senza salvarli in un set automatico.
Non rivelare se esiste un account: «Se l'email è registrato, invieremo un messaggio».
Storage: minimo necessario Mostra a cosa serve KYC.

13) Pattern per tipologia di script

13. 1 Pagamento/deposito

Campo della somma con preavviso, valuta chiaramente specificata.
PAN con maschera morbida, controllo Luhn; CVC nascosto; data "MM/YY" con "/" automatico ".
Testo sulle commissioni/scadenze accanto, non su tooltip.

13. 2 Prelievi

Passaggi: «Somma Metodo Conferma».
Progressi e «Solitamente fino a N minuti/ore» (senza promesse dure).
Opzioni di metodo per paese; avvisi sui limiti.

13. 3 KYC

Caricatore di file passo passo: requisiti di formato/peso, anteprima, privacy.
Data di verifica e canale di stato (posta/notifica).

13. 4 Limiti e gioco responsabile

Unità comprensibili (al giorno/settimana/mese), preordini, conferma delle modifiche, «Entrerà in vigore attraverso»....

14) Antipattern

Placeholder invece dell'etichetta.
Errori per ogni carattere senza debount.
Ripristina il modulo in caso di errore.
L'istruzione critica è nascosta solo in tooltip.
Maschere rigide che impediscono i caratteri/incolla validi.
Blocca l'intera pagina per controllare un campo.
Invio senza netti progressi.

15) Snippet di implementazione

Riepilogo degli errori + attivare il primo problema

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

Pulsante con idoneità ed istantanea

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

L'ossatura HTML di un gruppo di finestre 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) Token di progettazione (esempio)

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 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) Metriche ed esperimenti

Completamento Rate, Time-to-Complete, Errore Rate sui campi.
Retry Success Rate, percentuale di moduli abbandonati, profondità del passo.
CTR suggerimenti/esempi, percentuale di completamento automatico.
A/B: ordine dei campi, preavviso degli importi, testo degli errori, suddivisione in passaggi.

18) Lista assegni QA

Senso e flusso

I campi corrispondono allo scopo; Non c'è niente di superfluo.
I gruppi sono logici; Massimo margini per gruppo.

Immissione

Corretti «type/inputmode/autocomplete».
Le maschere sono morbide, l'inserimento non si rompe, caret è prevedibile.

Convalida

Helper prima dell'immissione errori su blur/sottomit; Debouns 250-400 mc.
Pannello sommario per errori multipli Il trucco per la prima.

Disponibilità

Etichette collegate; il contrasto dell'AA; 'focus-visibile'è visibile.
Navigazione dalla tastiera radiogruppo con'fieldset/legend '.

Performance

La prima risposta è 100 ms; Non ci sono spinners appesi.
Nessun CLS; elenchi lunghi virtualizzati.

Protezione

Nessun campo sensibile PAN/CVC non è in serie automatica.
Idempotenza e retrai sicuri inclusi.

19) Specificità del iGaming

Scommesse: campo di importo + preset, istantane'busy ', istantanea', conferma ottimistica con la possibilità di undo (se il regolamento lo consente).
Pagamenti/conclusioni: commissioni esplicite e scadenze vicino ai campi, non solo nei suggerimenti; Verifica dei limiti e dello stato di KYC.
Tornei: modulo di registrazione con set di dati minimi, regole e checkbox accettabili senza «pattern scuri».
Gioco responsabile: moduli per l'impostazione dei limiti a intervalli chiari e per il risultato («Il tuo limite diurno sarà di 2.000 ₴ da domani»).

Breve riepilogo

Una buona forma è un obiettivo chiaro, un set minimo di campi, regole comprensibili prima dell'errore, risposta immediata e dati salvati. Progettate una struttura da script, rispettate la disponibilità e le localizzazioni, includete i retrai sicuri e l'idipotenza. Le forme si sentono così veloci e affidabili, soprattutto negli scenari critici.