Messaggi di errore: esempi, best practice e errori comuni

I messaggi di errore innescano il cortisolo, un noto biomarcatore di stress psicologico. L'accumulo di cortisolo può trasformarsi in ansia e, alla fine, indurre l'utente a rinunciare.

A volte, il danno non è solo la conversione persa. Trasforma anche qualcuno in un detrattore attivo per il tuo marchio. Investire in una migliore esperienza utente tende a funzionare a breve termine (aumento del tasso di conversione) ea lungo termine (maggiore fidelizzazione, fedeltà alla marca, passaparola, ecc.).

Mentre i messaggi di errore sembrano un argomento secco rispetto all'ottimizzazione della proposta di valore o alla gamification, puoi migliorare notevolmente la tua esperienza utente semplicemente evitando alcuni errori comuni.

Case study: progettazione di un messaggio di errore scadente

Hai mai prenotato un volo con Spirit Airlines? Non è la migliore esperienza del cliente (per dirla alla leggera). Mi ha scaldato il cuore notare che anche i loro messaggi di errore erano scadenti.

Ho iniziato incasinando tutto sul modulo di registrazione:

Uh oh, non li ho informati che ero un "Mr." Beh, l'ho risolto, ma poi sono stato informato che avevo un altro errore:

Email non valida? Buona chiamata. Ho dimenticato il ".com". Questa è una soluzione rapida, ma …

Cos'è questo? Ho anche avuto un errore di battitura nella mia e-mail corrispondente. Vorrei che mi avessero informato di ciò quando stavo risolvendo la mia prima email.

Beh, a quanto pare, qualcuno si è già registrato con la mia e-mail. Immagino che andrebbe bene, ma vorrei che mi avessero dato un'opzione di "recupero password" in tal caso era la mia email. Oh, e forse avrebbero potuto conservare le password che ho cercato di inserire nei campi sottostanti. Dannazione.

Non tutte le forme sono così brutte, ma molte hanno gli stessi errori comuni. Evitali e sarai in vantaggio su gran parte della concorrenza.

4 errori comuni con messaggi di errore

1. Ambiguità

I tuoi messaggi di errore dovrebbero definire chiaramente il problema. Hai mai ricevuto un messaggio come il seguente?

Perché? Cosa diavolo faccio adesso?

Di seguito, Bitly ha cercato di essere "conversazionale" ma non è riuscito a darmi dettagli. Cosa non va? Nome utente? Parola d'ordine? Tutti e due? Chissà. Anche "No" sembra condiscendente, quasi deridendo il mio errore.

Questo è comune. Un modulo dovrebbe chiaramente delimitare i tuoi errori e dirti cosa fare, come fa Meetup:

La linea di fondo è "non far pensare i tuoi utenti". Fai sapere loro esattamente dove si trovava l'errore, perché è successo e cosa fare al riguardo. Migliora la tua chiarezza.

2. Condiscendere la lingua / incolpare l'utente

Non spaventare l'utente nel pensare che il problema sia peggiore di quello che è. Non farli sentire stupidi, neanche. Non è colpa loro.

Come diceva Usabilla,

È anche importante essere umili, ammettere di aver commesso un errore se lo hai fatto. Tuttavia, anche se si tratta di un errore dell'utente di cui ci stiamo occupando, NON incolpare MAI l'utente.

Hanno anche fornito un esempio iperbolico:

UX Movement mette in guardia dall'uso di parole negative: "le parole negative possono far sentire gli utenti come se avessero fatto un errore enorme, portandoli a pensare che la situazione sia peggiore di quanto non sia"

Offrono alcune parole per evitare:

3. Cattivo posizionamento dei messaggi di errore

UX Movement ne parla nel loro articolo su come rendere i messaggi di errore più rassicuranti:

I riepiloghi degli errori aumentano la gravità degli errori quando sono raggruppati in un lungo elenco puntato. Quando la maggior parte degli utenti vede così tanti errori contemporaneamente, probabilmente si arrenderanno e dimenticheranno di risolverli.

Cosa c'è di più intimidatorio che vedere qualcosa del genere dopo aver premuto "Invia"?

Mi piace la convalida in linea per risolvere questo. Ottieni un feedback immediato, il che è ottimo per l'apprendimento (più sulla convalida in linea in seguito).

Se non prevedi di utilizzare la convalida in linea, chiarisci dove si è verificato l'errore. Il posizionamento dei messaggi di errore è importante ma raramente considerato. Ecco come Usabilla lo ha scritto:

Infine, il posizionamento dei messaggi di errore è fondamentale. Tutto ciò si riduce a una buona pratica di progettazione dell'esperienza utente. Il posizionamento logico non solo consente di risparmiare ulteriori dettagli sulla situazione, ma consente anche all'utente di vedere rapidamente dove stanno andando storto e – di nuovo quella parola – recuperare!

Il seguente esempio è meglio che posizionarlo tutto in alto, ma è ancora ambiguo (ad esempio, "il nome non può essere vuoto" è tra il nome e il cognome):

Gli utenti devono sapere dove si è verificato l'errore. Come Hazel Bolton di Formisimo notato, Netflix visualizza messaggi di errore sopra il modulo e sottolinea solo il campo di errore in arancione. Come ha detto, "l'errore potrebbe essere perso o i campi difficili da individuare".

Material Design ha della documentazione su questo.

4. Aspettative poco chiare

Questo errore è così comune e così importante da correggere. Anche se hai un bel messaggio di scuse, mettilo nel posto giusto e chiarisci cosa è andato storto, farai comunque arrabbiare gli utenti se non è chiaro cosa dovrebbero fare dopo.

Molti messaggi di errore non forniscono un solido passo successivo. Prendi l'esempio da Spirit Airlines. Potrebbero darmi alcune opzioni come "Ripristino account" o "Hai un account? Accedi qui. "

Invece, hanno appena detto che la mia e-mail era già stata registrata.

Un'opzione migliore viene da Wells Fargo (sorprendentemente):

Un messaggio di errore superiore istruisce l'utente su come risolverlo. Guarda come MailChimp suggerisce una soluzione al problema:

Ancora meglio, se non sei flessibile con il formato di alcuni dati, come numeri di telefono e codici postali (che dovresti essere), è bello far sapere agli utenti cosa aspettarsi in anticipo. Per farlo, puoi scrivere un po 'di microcopia.

Utilizzare la microcopia per prevenire errori

Microcopy è definito come "i piccoli frammenti di testo / copia che aiutano a istruire e alleviare le preoccupazioni dei tuoi utenti". Può aiutare a prevenire errori di modulo prima che si verifichino.

Ad esempio, Joshua Porter ha notato che ha ricevuto un sacco di errori di modulo nella pagina "inserisci i dati di fatturazione". Quindi, ha aggiunto un po 'di copia per ricordare agli utenti di inserire l'indirizzo di fatturazione associato alla loro carta di credito. Gli errori sono scomparsi, "risparmiando così tempo di supporto e aumentando le entrate per la conversione migliorata".

Di recente abbiamo sperimentato un altro esempio in cui la microcopia avrebbe potuto aiutare. Peep stava cercando di compilare un modulo sul sito Web di una sede per ottenere un preventivo per un evento.

Tuttavia, ricevette un grosso messaggio rosso che diceva: "Si è verificato un problema con la tua richiesta" nella parte superiore della pagina, un messaggio afflitto da ambiguità.

L'errore? Era entrato in una serie di ospiti (scelta razionale, visto che è difficile indicare un numero esatto di ospiti), ma il modulo ha accettato un solo numero. Ovviamente, non lo hanno menzionato prima che colpisse "invia".

La microcopia che diceva agli utenti di inserire un singolo numero avrebbe potuto aiutare. (Sebbene, con questo esempio, la loro forma abbia problemi più grandi di una mancanza di microcopia).

Best practice per i messaggi di errore

I messaggi di errore buoni e quelli cattivi comportano un comportamento degli utenti molto diverso. Leggi questo aneddoto di UX pro Jennifer Aldrich:

Jennifer Aldrich:

“Un giorno avevo due utenti seduti uno accanto all'altro in un laboratorio, uno dei quali stava lavorando in un programma di terze parti e un altro nel nostro prodotto. Si sono verificati errori simultaneamente. Il prodotto di terze parti mostrava una gigantesca X rossa, con la parola ERRORE in maiuscolo e una pila di pazzi script sotto di essa. L'utente sussultò, chiuse il browser e si girò sulla sedia come se lo schermo avesse tentato di morderlo.

L'utente che ha ricevuto l'errore nel nostro prodotto ha letto un messaggio simile a “Qualcosa di strano è appena successo da parte nostra, mi dispiace per quello. Aggiorna lo schermo e riprova. ”Il codice di errore era elencato in un piccolo testo sotto il messaggio, oltre a un'opzione di espansione per consentire alle persone di visualizzare i dettagli dell'errore se lo desideravano.

Mi sorrise e disse: "Oh ragazzo, sei nei guai ora!" E rinfrescò il suo schermo e continuò il montaggio ".

Anche se non posso dirti esattamente quale testo, posizionamento, colore, tempistica, ecc. Funzioneranno sul tuo sito, posso dirti alcuni punti fondamentali di progettazione e le migliori pratiche. Quindi, puoi immergerti in alcune ricerche sull'usabilità, formulare analisi e test per capire cosa funziona meglio.

NN / g ha offerto le seguenti migliori pratiche per i messaggi di errore circa due decenni fa. Continuano a sostenere:

• Visibile e molto evidente, sia in termini del messaggio stesso sia in che modo indica quale elemento di dialogo gli utenti devono riparare.
• Conserva il più possibile il lavoro dell'utente. Consenti agli utenti di correggere gli errori modificando la loro azione originale invece di dover ripetere tutto da capo. Ad esempio, nel presentare i risultati della ricerca, mostra una casella di ricerca con i termini della query originale dell'utente per facilitare le revisioni. Se non viene trovato alcun risultato, consenti agli utenti di cercare un ambito più ampio con un solo clic.
• Ridurre il lavoro di correzione dell'errore. Se possibile, indovina l'azione corretta e consenti agli utenti di selezionarla da un piccolo elenco di correzioni. Ad esempio, invece di dire semplicemente "città e codice postale non corrispondono", consente agli utenti di fare clic su un pulsante per la città che corrisponde al codice postale inserito.

Le 4 H di messaggi di errore

UXmas ha un framework utile per i messaggi di errore che hanno soprannominato "le 4 H". I messaggi di errore devono essere:

1. Umano;
2. Utile;
3. Umoristico;
4. Umile.

1. Umano

UXMas afferma che la regola numero uno "è assicurarsi che i tuoi messaggi di errore sembrino come se fossero stati scritti per gli umani". In altre parole, non farlo ::

Sembra che sia stato scritto da un robot.

Inoltre, evita il gergo e il discorso tecnico / nerd (a meno che non sia il tuo pubblico, immagino). Ecco come appare:

2. Utile

Secondo UXmas, tre fattori contribuiscono a rendere utile un messaggio di errore:

• È visibile?
• Spiega chiaramente cosa è andato storto?
• Aiuta l'utente a recuperare?

Ne abbiamo parlato sopra. Posiziona i tuoi messaggi di errore in modo intuitivo. Renderli rossi e chiaramente visibili. Spiega il problema. Offri una soluzione.

3. Divertente

UXmas afferma che "mantenere il tono leggero può aiutare a mantenere l'utente dalla parte, soprattutto se questo si adatta al tono del tuo marchio".

Tuttavia, l'umorismo è contestuale. Potrebbe frustrarli se fai luce sui loro errori. Potrebbe funzionare bene. Una pagina 404 è un ottimo posto per aggiungere un po 'di umorismo spensierato (e un reindirizzamento strategico):

Yahoo ha un fantastico esempio di umorismo nella sua forma di convalida:

4. Umile

Questo è facile: non dare la colpa all'utente. Ne abbiamo già parlato sopra. Prendere la colpa. Scusati e offri una soluzione.

Che dire della convalida in linea?

La convalida in linea è un ottimo modo per trovare, avvisare e correggere errori in tempo reale. Invece di aspettare fino a quando non premi "Invia" per scoprire un errore, lo scopri subito.

Ecco un esempio di convalida in linea:

La ricerca sulla validazione in linea è solida. Luke Wroblewski ha testato la validazione in linea (nel 2009) a fronte di un controllo (validazione post-invio). Sebbene l'esempio fosse piccolo, ha trovato i seguenti risultati con la versione incorporata:

• Aumento del 22% delle percentuali di successo;
• Diminuzione del 22% degli errori commessi;
• Aumento del 31% del grado di soddisfazione;
• Riduzione del 42% dei tempi di completamento;
• Riduzione del 47% del numero di fissazioni oculari.

Non male. Cerca la convalida in linea per i tuoi moduli. Un buon esempio di convalida in linea è Booking.com:

Come tenere traccia degli errori del modulo

È bello implementare le migliori pratiche, ma è ancora più bello capire dove le persone cadono nel tuo modulo specifico. Come lo facciamo? Bene, dobbiamo impostare un modo per misurare analisi dei moduli, messaggi di errore, abbandoni e completamenti.

Se stai utilizzando uno strumento come Formisimo, è relativamente semplice, dai un'occhiata al rapporto Campi più corretti:

È possibile utilizzare le correzioni medie per avvio modulo come base. L'obiettivo, ovviamente, è ridurre il numero di correzioni su un campo modulo (e quindi ridurre l'attrito):

Tracciamento in Google Analytics

Tim Leighton-Boyce da CXFocus ha parlato di uno dei suoi rapporti Google Analytics preferiti in un post sul blog CXL qualche tempo fa:

Tim Leighton-Boyce:

“Uno dei miei rapporti preferiti quando si cercano opportunità è un rapporto standard che la maggior parte delle persone ignora: il Conversioni> Obiettivi> Percorso obiettivo inverso.

Lo uso per la segnalazione degli errori.

Ciò richiede la possibilità di configurare un obiettivo per errori, che non è sempre possibile su un sito. Ma SE puoi impostare un obiettivo del genere, allora il percorso inverso diventa molto potente.

Il percorso di obiettivo inverso funziona davvero bene in situazioni in cui non è possibile prevedere quali sono i passaggi che portano all'obiettivo, a differenza di una canalizzazione di pagamento. In effetti, i passaggi che portano all'obiettivo in questo caso d'uso sono esattamente ciò che stiamo cercando di scoprire.

Puoi anche impostare script per tenere traccia degli errori JavaScript nella tua pagina, che puoi inviare a Eventi personalizzati in Google Analytics. Search Engine Watch ha spiegato come impostare eventi personalizzati per tenere traccia degli errori dei moduli:

"Impiega una serie di eventi personalizzati nel tuo modulo con ogni evento che rappresenta un campo in quel modulo. La tua categoria dovrebbe definire quale modulo segnala errori; la tua azione dovrebbe definire ogni campo del modulo; e la tua etichetta può essere dinamica, inserendo sia una descrizione della regola di convalida che ha innescato l'errore sia il valore immesso che ha infranto la regola, separati da una pipe (ovvero, "|"). Questo potrebbe richiedere assistenza per gli sviluppatori.

Una volta impostato, è possibile immergersi in un report personalizzato che quantifica e stratifica gli errori più critici nei moduli. A quel punto, è possibile valutare le cause alla radice degli errori controllando i valori immessi dagli utenti. Infine, dovresti rilassare la tua logica di convalida o includere un testo di aiuto migliore per ridurre al minimo il numero di errori che ostacolano le tue attività di conversione più importanti. "

Più recentemente, Phil Pearce ha condiviso un metodo per tenere traccia delle interazioni tra i moduli come parte di un micro imbuto, utilizzando Google Analytics o Google Tag Manager.

Conclusione

Progettare messaggi di errore significa limitare la frustrazione che gli utenti provano con il tuo modulo. Se sono troppo stressati – si accumula troppo cortisolo – rischi di lasciarli andare per guardare Netflix o qualcosa del genere. Ci sono troppe cose migliori da fare che affrontare una forma scadente, complessa e condiscendente.

Quindi, sì, fai tu stesso la ricerca dell'usabilità, ma inizia con queste best practice per i messaggi di errore:

• Non dare la colpa all'utente.
• Scrivi come un essere umano, non un robot.
• Assicurarsi che gli errori siano chiari e che i messaggi siano posizionati in modo intuitivo.
• Assicurati che gli utenti sappiano come correggere tali errori.
• Non elencare tutti gli errori nella parte superiore della pagina. La convalida in linea è una buona soluzione.

Fonte immagine caratteristica