Script UX e standard di interfaccia

1) Principi

Chiarezza prima della bellezza. Il significato e l'azione sono evidenti in 1-2 secondi.
Un obiettivo sullo schermo. Tutto il resto è secondario o nascosto.
Sequenza. Stesse pattern = stesse aspettative.
Disponibilità predefinita. Contrasto, trucco, tastiera, voce.
Contestualità. Gli indizi e i testi sono esattamente dove servono.
Localizzazione-first. Lunghezze di righe, formati, cultura - inizialmente nel design.
Reversibilità. Qualsiasi azione rischiosa può essere annullata o confermata.
Misurazione. Ogni regola è con una metrica (conversione del passo, tempo, errori).

2) Griglia, rientro e ritmo

Griglia: passo 4/8 pt; colonne: 12 (desktop), 6 (tablet), 4 (mobile).
Rientri interni dei componenti: multipli 4; esterni - 8/ 12/16/24.
Ritmo verticale: intestazione sottotitolo Contenuto azione (CTA).
Bordi e divisori a costi contenuti; preferire l'aria e la gerarchia tipografica.

3) Tipografia

Scala di 12/14/ (body 16).
Altezza riga: 1. 4–1. 6 per il testo, 1. 2–1. 3 per i titoli.
Lunghezza riga: 45-75 caratteri (desktop), 35-55 (mobile).
Selezione: grassa per accenti significativi; caps - solo nelle etichette.
Leggibilità ad alta voce, i testi devono suonare naturalmente.

4) Colore e contrasto

Semantica: 'success/info/warning/errore/neutral'.
Contrasto: minimo WCAG 2. 1 AA (testo/sfondo) 4. 5:1; Grande ≥ 3:1).
Il colore è l'unico segnale. Aggiungi un'icona/testo/modulo.
Anello attivo: sempre visibile (non disattivato nel CSS).

5) Navigazione e architettura delle informazioni

Il percorso dell'utente è: "Dove sono? Cosa c'è qui? E poi?" È ovvio.
Gerarchia del menu: ≤ 2 livelli nella navigazione principale.
Briciole di pane per sezioni profonde.
Ricerca: disponibile globalmente su directory complesse tasto caldo «/».
Stati di navigazione - La scheda/pagina attiva è evidenziata con token.

6) Componenti e pattern

Utilizziamo i componenti del sistema di progettazione (senza «autolavaggio»).
Un primary-CTA sullo schermo; gli altri sono secondary/tertiary.
Gli stati default/hover/focus/active/disabled/loading sono obbligatori per ogni interazione.
Stati vuoti: contesto + valore + CTA (+ link secondario).
Alert generali: una pagina-alert sullo schermo + suggerimenti inline locali.

7) Moduli, convalida e errori

L'etichetta è obbligatoria. Placeholder è un esempio di formato, non di sostituzione.
Inline-validazione su blur, errori summit su sottomit.
Messaggio di errore: cosa non è + come correggere + vincolo/formato.
Scroll automatico e fuoco al primo errore; 'aria-invalid', 'aria-describedby'.
Maschere e formati: suggeriscono, ma non interrompono l'input (può essere un pist).
Salvezza dati: Non perdiamo nulla durante il riavvio/errore.

8) Stati e fidback

Il successo è un brindisi di 2-4 c, un tono neutro-positivo, CTA «che poi».
Info/notice: striscione morbido/tultipo, non blocca il flusso.
Warning/Errore/Critical: gerarchia visiva/semantica; critici - Modalka/banner con azione esplicita.

Caricamento: skeleton> spinner; Valutazione del tempo di attesa> 3 secondi

9) Contenuti e microcopy

La regola delle tre risposte è che cosa sta succedendo, perché cosa fare.
CTA - Verbo azione + oggetto (Salva modifiche, Convalida).
Numeri/date/valute: formati locali.
Tono: amichevole; sotto stress (pagamento/sicurezza) - neutrale.

10) Disponibilità (A11y)

Navigazione completa dalla tastiera ordine logico delle tabelle.
Ruoli e aria- per interazioni, regioni lave per toast/states.
Contrasti, anelli di fuoco, dimensioni interattive 44 x 44 px.
Alternative di testo a icone/immagini; tabelle con «th »/« scope».
Controlli automatici (linter/scanner) + script manuali dello screener.

11) Localizzazione e internazionalizzazione

Tutte le righe sono in chiave i18n con contesto.
Prova di lingue lunghe (DE/TR), modalità RTL.
Numeri/valute/tempi - Strumenti di formattazione.
Tone-map: formalità/emozioni di script (onboording/pagamenti/sicurezza).

12) Conformità e adattabilità

Breakpoint: 360 / 768 / 1024/1280 +.
Mobile-first: percorso critico disponibile con una mano, CTA nella zona del pollice.
Gesti e tastiere: i gesti sono duplicati da pulsanti; sul desktop - hotkei.
Densità: su desktop - aria, su mobile - risparmio verticale senza compromettere la cliccabilità.

13) Tema oscuro

Il contrasto WCAG viene mantenuto; evitare «nero puro» per lo sfondo (grigio scuro).
Luci/ombre - indebolite; l'anello di fuoco è a contrasto.
Illustrazioni e loghi con versioni invertite.
Criteri di transizione: mantieni la selezione utente (system/light/dark).

14) Animazioni e movimento

Durata: 120-200 ms (piccole), 200-300 mc (transizioni).
Le funzioni di accelerazione sono naturali (cubic-bezier con leggero rallentamento).
Le animazioni non devono bloccare il flusso e compromettere la leggibilità.
Rispetta «preferers-reduced-motion».

15) Performance

LCP ≤ 2. 5 c, TTI/TBT nell'area verde; Codice spliting scaricamento dei media pigro.
Virtualizzazione di elenchi lunghi Cache dei dati.
Skeleton per la percezione della velocità; minimizzare il layout «junk».

16) Sicurezza e privacy in UI

Spiegazioni chiare dei motivi delle richieste (fotocamera, KYC, geo).
Tempi/commissioni/limiti trasparenti; senza «istantaneamente» se ci sono ritardi.
Dati sensibili - occultamento, esplicitamente «mostra/nasconde».
Conferme per azioni irreversibili; Registro azioni/notifiche di accesso.

17) Metriche di qualità UX

Conversione del passo e tempo fino al completamento.
Errore rate per campi/passi e Time-to-Fix.
CTR CTA e ripetibilità degli script.
Drop-off dopo l'errore/dopo il caricamento> N secondi.
Richieste di supporto per argomenti (prima/dopo le modifiche).
A11y difetti di rilascio (obiettivo 0 critici).

18) Assegno fogli

Schermata prima del lancio

• Un obiettivo principale e uno primary-CTA.
• La navigazione e lo stato «dove sono» sono evidenti.
• I contenuti sono brevi: 1-2 offerte per blocco.
• Stati: loading/empty/errore/success sono coperti.
• A11y - Contrasto AA, il focus è visibile, 'aria'sulle interazioni.
• Localizzazione: lunghezze di righe/formati/RTL verificate.
• Performance: nessun blocco «pesante» è necessario.

Modulo prima del lancio

• Le etichette e gli esempi di formati sono presenti.
• Inline-validazione + summit su sottomit.
• Scroll al primo errore, attivo nel campo.
• Messaggi: cosa/come/perché; Nessun codice 500/400 per l'utente.
• I dati non vengono persi in caso di errore/riavvio.

19) Anti-pattern

«OK» come CTA sui passi del senso.
Playsholder invece dell'etichetta.
Il colore è l'unico segnale di stato.
Spinner senza tempo e senza alternative.
Finestre modali senza focus trap e chiusura ESC.
Mescolare stili/icone, duplicare i componenti fuori dal sistema di progettazione.
Umorismo/emoji in scenari critici (pagamento/sicurezza).

20) Esempi di prima/dopo

Errore modulo

Fino a: «Errore 400»

Dopo: "Formato data non valido. Usate il DD. MM. GGG"

Stato vuoto

Fino alle: «Qui è vuoto»

Dopo: "Ci sarà una cronologia delle operazioni dopo il primo rimpatrio. [Ricarica il conto] '

Messaggio di successo

Fino alle: «Pronto»

Dopo: "Pagamento accettato. Saldo aggiornato. [Guarda la cronologia] '

Navigazione

Prima di: non è chiaro dove sia l'utente

Dopo: scheda attiva + briciole di pane + titolo di pagina esplicito

21) Modelli per la gelosia

Ossatura dello schermo

Il titolo una breve descrizione del contenuto/elenco di Fidback/Stato dell'azione.

Ossatura modulo

Il titolo Suggerimento campo (etichetta + helper + errore) di CTA le attività secondarie della nota (commissione/data).

Modello microcopy

Titolo (opz.)

1-2 frasi: contesto + passo successivo

Azione CTA + oggetto

Lente secondaria: aiuto/regole

22) Processi e mantenimento degli standard

Definition of Done (UX) - Layout + testo + stato + A11y + i18n + metriche.
La voce UX in PR è un foglio di assegno delle sezioni 18-21.
Documentazione: ogni file aggiunge/aggiorna l'hyde in wiki/Storybook.
Controllo ogni trimestre: contenuti, A11y, performance, consistenza.

Scorciatoie totali

Un obiettivo, un CTA principale.
Stati e fidback sono stati progettati in anticipo.
A11y e localizzazione da zero, non «dopo».
Meno colori, più semantica e ritmo.
Misurare conversione, errori, tempo, conversione.
Tutto attraverso il design, le stesse regole le stesse aspettative di un UX prevedibile.

Posso completare questo hyde con i modelli pronti per i vostri scenari chiave (registrazione/CUS, deposito/ritiro, bonus/tornei) e raccogliere gli assegni sotto il vostro processo di gelosia.