Come progettare messaggi di errore che riducano la frustrazione
Come progettare gli stati di errore in cui le persone possono recuperare da: posizionamento, tempistica, formulazione, preservazione dell'input, accessibilità e movimento, sulla base della ricerca sull'usabilità.
Punto chiave
Un buon messaggio di errore è visibile e posizionato accanto al problema, scritto in un linguaggio semplice, dice come risolverlo, mantiene ciò che la persona ha già digitato e non la incolpa mai. Mostralo quando la persona ha finito di compilare un campo o lo ha inviato, non mentre sta ancora digitando, e assicurati che gli screen reader lo annuncino.
Le linee guida
Nielsen Norman Group riassume i messaggi di errore efficaci come altamente visibili, costruttivi e rispettosi dello sforzo dell'utente. In pratica ciò significa:
- Posiziona il messaggio accanto al campo o all'elemento che presenta il problema.
- Utilizza un linguaggio semplice e specifico: "Questo numero è corto di una cifra", non "Inserimento non valido".
- Offri una soluzione: quale formato è previsto, cosa provare dopo.
- Conserva ciò che le persone hanno digitato in modo che possano modificarlo invece di ricominciare da capo.
- Non colpevolizzare: evitare parole come non valido, illegale o sbagliato.
Tempistica
Mostrare un errore prima che qualcuno abbia finito è uno degli errori più comuni. NN/g definisce gli errori prematuri un modello ostile, come la valutazione di un test prima che lo studente abbia finito. Convalida un campo quando la persona lo lascia o invia il modulo, quindi aggiorna il messaggio in tempo reale mentre lo corregge.
Errori che non riguardano i moduli
Per errori di sistema come un salvataggio non riuscito o una connessione persa, spiega cosa è successo, cosa è stato mantenuto e cosa può fare la persona: riprovare, lavorare offline o contattare l'assistenza. Evitare i codici di errore da soli; se ne hai bisogno come supporto, mostralo insieme a una spiegazione umana.
Accessibilità
Non fare affidamento solo sul rosso: aggiungi un'icona e un testo. Collega il messaggio al relativo campo in modo che gli screen reader lo leggano insieme al campo e spostino l'attenzione sul primo errore o su un riepilogo degli errori dopo un invio non riuscito.
Movimento negli stati di errore
Una breve scossa o un cambio di colore possono attirare l'attenzione sul campo con il problema, ma sii breve, non ripeterlo a ogni pressione di un tasto e sostituisci il movimento con un cambio di colore o icona quando è attivo il movimento ridotto. Il messaggio in sé conta più dell'animazione.
Principi chiave da ricordare
- Posiziona gli errori accanto al problema, in parole povere, con una soluzione
- Conserva ciò che le persone hanno digitato
- Convalida dopo che un campo è stato completato, non durante la digitazione
- Non fare mai affidamento solo sul colore; connettere messaggi per lettori di schermo
- Mantenere il movimento dell'errore breve e rispettare il movimento ridotto
Domande frequenti
Fonti
- Error-Message Guidelines — Nielsen Norman Group
- Indicators, Validations, and Notifications — Nielsen Norman Group