Share
Progettare messaggi user-interface efficaci e amichevoli è una forma d'arte in sé. Mentre i progettisti dedicano molto tempo a creare la maggior parte dell'interfaccia utente principale, la progettazione dei messaggi può sembrare un ripensamento. Il feedback è in realtà la colla tra utente e interfaccia; senza di esso, gli utenti possono diventare confusi.
Prima di andare avanti, forse dovremmo dare un'occhiata agli esempi reali di messaggi di feedback dell'interfaccia utente:
Il messaggio di errore più comune che incontrerai è il messaggio 404 non trovato. Ciò accade quando un utente ha digitato accidentalmente l'URL sbagliato o l'URL precedente non è più accessibile.
I messaggi di inattività del sito Web si verificano quando il server si interrompe letteralmente, a volte in modo imprevisto:
Ci sono casi in cui è pianificato:
Questi messaggi sono progettati per notificare all'utente un risultato dopo aver eseguito un'azione:
In questo caso, Versions dice all'utente che il download è iniziato e può essere trovato nella cartella dei download:
Un messaggio in scatola top-of-site comune che ricorda agli utenti di verificare la loro e-mail:
Zootool utilizza un'intera pagina per dire all'utente di verificare le loro e-mail prima di consentire loro di continuare:
E questo ringrazia gli utenti per la verifica:
Anche i messaggi di modulo vengono regolarmente rilevati. Gli esempi più comuni si verificano durante la convalida, che si verifica quando un utente invia un modulo su cui uno script verifica se si sono verificati degli errori:
Ci può essere un uso creativo dei messaggi di moduli, che potrebbero non apparire necessariamente solo per errori. Potrebbero essere usati come una guida elegante che aiuta l'utente a compilare un modulo:
Questo è un esempio di un messaggio che appare dopo che un modulo è stato compilato con successo:
Le linee tra web e applicazioni native stanno diventando sempre più sfocate. Un sacco di applicazioni web sono progettate per comportarsi come un'applicazione nativa. Ad esempio, 750words.com ha un messaggio pop-up simile a una growl quando si utilizza una scorciatoia da tastiera per salvare una voce:
Puoi anche progettare i messaggi affinché appaiano in aree ben posizionate per incoraggiare gli utenti a compiere ulteriori azioni. Twitter.com informa gli utenti che hanno aggiornamenti:
Progettare messaggi per le interfacce mobili è un'altra sfida a causa del fattore small-form; i messaggi devono essere ovvi.
Di nuovo, se cronometrato bene, un messaggio può essere progettato per fungere da suggerimento:
Può anche essere utilizzato come forma di incoraggiamento per l'utente per il completamento di un compito:
Dobbiamo metterci nei panni dei nostri utenti. Cosa vuoi che provino quando visitano il tuo sito web o utilizzano la tua applicazione? Vorresti che si sentissero fidati di te e sarebbe un bonus in più se potessero sentirsi davvero felici mentre usano il tuo sito web. Se non ci sono abbastanza idee per progettare i tuoi messaggi, potrebbe causare molta frustrazione e delusione.
La maggior parte degli utenti visita un sito Web o utilizza un'applicazione per completare un obiettivo definito. Per saperne di più su un'azienda, per acquistare un prodotto, per eseguire un'attività utilizzando un'applicazione, ecc. Ad esempio, immagina te stesso come un utente che cerca di acquistare qualcosa su un sito web. Potete immaginare come si sentirebbe l'utente se non accadesse nulla dopo aver cliccato su "aggiungi al carrello"? Ci devono essere indicazioni appropriate che indicano dove un'azione è andata storta:
Un altro scenario potrebbe essere un utente che tenta di completare un'attività importante sul tuo sito web. Forse l'utente potrebbe provare a pagare l'affitto tramite un sito web finanziario online di cui si è responsabili. Potete immaginare la paura, la frustrazione e la preoccupazione se il sito Web smette di funzionare all'improvviso nel bel mezzo di una transazione finanziaria?
Il messaggio di errore sopra riportato non riesce a identificare l'origine dell'errore, potenzialmente frustrante per l'utente che sta tentando di completare una transazione.
Prendiamo in considerazione alcune buone pratiche in cui feedback e messaggi sono interessati.
Questo messaggio di Dealotto è una buona dimostrazione di essere semplice ma specifico:
Nessuno mancherà a questi errori di convalida in questo modulo di iscrizione su Vimeo:
37signals ha creato questo messaggio di lavagna vuota dall'aspetto artistico per dare agli utenti un'idea di cosa fare quando non hanno elementi:
Hai mai incontrato un'interfaccia che sta cercando di ottenere ogni centimetro della tua attenzione? Usa tutte le convenzioni UI disponibili, Windows modali, messaggistica in linea, messaggistica di prima pagina, per cercare di farti fare qualcosa.
Essere troppo ovvi o incessanti può portare all'effetto opposto; l'utente rinunciando all'interfaccia.
Questa finestra modale veniva visualizzata quando tentavi di leggere un articolo di Huffington Post per la prima volta. Potrebbe essere fonte di confusione per gli utenti che potrebbero aver pensato che Twitter fosse necessario per leggere l'articolo.
Quando si visualizza un messaggio, sia per un errore o una notifica, sarà sempre utile fornire ulteriori suggerimenti o aiuto all'utente. Ciò è particolarmente vero nel contesto degli errori del sito, molte volte sono inevitabili ma possiamo rendere l'esperienza il più indolore possibile.
Vimeo fornisce utili guide ad altre sezioni, complete di un link di aiuto in basso:
Piccole icone di aiuto all'interno del tuo modulo possono essere incredibilmente utili:
Questo aiuto tooltip va un po 'oltre, incluso un link su cui l'utente può fare clic per ottenere maggiori informazioni:
Invisionapp fornisce un suggerimento utile durante la visualizzazione dell'immagine di caricamento:
Progettare buoni messaggi di feedback è tutto sull'anticipazione. Ciò include l'anticipazione di:
Kicksend ha notato che alcuni dei loro utenti non stavano verificando le loro e-mail. Hanno analizzato i loro dati e hanno scoperto che stavano semplicemente digitando gli indirizzi email sbagliati per errori di battitura comuni. Quindi, hanno progettato un plugin jquery, mailcheck.js per verificare gli errori di battitura più comuni quando gli utenti compilano i loro indirizzi email. Con un semplice controllo, hanno ridotto il 50% delle email di verifica:
Fab.com ha anticipato che alcuni dei loro utenti avrebbero cancellato i loro account. Qui cercano di salvare una causa persa fornendo questo messaggio quando si tenta di cancellare un account:
A volte anticipare gli scenari può essere un salvataggi:
Oppure può essere utile recuperare una vendita potenzialmente persa:
Si tratta di piccoli dettagli. Questa schermata di accesso di Gmail anticipa che potresti aver dimenticato di aver cambiato la password:
Più ispirazione da Gmail; Sono sicuro che questo è stato utile per innumerevoli persone anticipando semplicemente un errore utente comune come dimenticare di allegare file:
Gli indicatori di avanzamento sono una forma importante di messaggistica dell'interfaccia utente. Foursquare ha progettato un messaggio sottile per informare gli utenti che stanno ottenendo la tua posizione e trovare luoghi interessanti durante il caricamento dei dati. Ciò realizza un duplice obiettivo.
.
TeuxDeux prevede che la sincronizzazione sia importante per un elenco di cose da fare e avvisa un utente che la connessione Internet viene persa con una notifica umoristica:
Ci sono un sacco di altri esempi su come anticipare e costruire "difese" per l'interfaccia utente.
Abbiamo già detto che è importante pensare a nome dell'utente. Ridurre al minimo la loro frustrazione è fondamentale e possiamo anche fare un ulteriore passo in avanti. Un sacco di utenti affrontano uno schermo per lunghe ore. Mostrando empatia o iniettando un po 'di umorismo, trasforma uno scenario frustrante o banale in uno potenzialmente divertente.
Questo robot rotto ti fa sorridere, giusto?
Per ulteriori buoni esempi per 404 pagine, puoi fare riferimento a questa raccolta Pinterest. A parte gli errori, anche le semplici notifiche possono farti sorridere durante una lunga giornata:
Molti di noi sono in lotta con la posta in arrivo zero, ma forse vale lo sforzo per Gmail:
Questo messaggio di Buffer usa un po 'di adulazione e umorismo per ottenere più iscrizioni:
Un altro messaggio di notifica che probabilmente porterà un sorriso in faccia attraverso il copywriting intelligente:
Questo eccellente mazzo di Aaron Walter, lead designer di Mailchimp è un buon primer su Emotional Design per quelli di voi interessati a saperne di più.
Spero che questo run-down sulla creazione di messaggi per l'interfaccia utente sia stato utile. Ho incluso risorse aggiuntive di seguito per ulteriori letture ed esplorazioni. Non c'è nero o bianco nella progettazione dei messaggi, piuttosto ci vuole molta empatia, esperienza e, naturalmente, feedback dagli utenti stessi.
Non abbiate paura di passare attraverso una serie di iterazioni per avere la giusta sensazione dei vostri messaggi. Chiedete alle persone di avere un feedback, iniziate a comunicare all'utente il messaggio desiderato e, se funziona, date un po 'di umorismo o di emozione per migliorare l'esperienza complessiva. Cerca sempre di essere utile!
Sentiti libero di lasciare domande nell'area dei commenti. Il feedback è sempre il benvenuto per aiutarci a scrivere articoli ancora migliori per voi su Webdesigntuts+.
Accentsconagua