Una guida completa al design delle notifiche

I messaggi periferici nei prodotti digitali, noti collettivamente come notifiche, non dovrebbero mai danneggiare l'esperienza dell'utente. Al contrario, devono contribuire a un'esperienza che aiuti le persone a raggiungere un obiettivo. Affrontare la progettazione delle notifiche nelle prime fasi del processo di progettazione del prodotto produrrà risultati migliori.

Immagina un gruppo di architetti che progetta una casa a tre piani, lavorando sui progetti per mesi. È impressionante! È bellissimo! Ma proprio mentre si avvicinano alla fine del diagramma, uno di loro esclama: " Aspetta! Come vanno le persone dal primo al terzo piano? ” Si sono dimenticati della scala!

Allo stesso modo, i designer di prodotti tendono a pensare a piccoli ma critici miglioramenti dell'esperienza utente per ultimi. Come per gli stati vuoti, i progettisti sono inclini a lasciare la progettazione delle notifiche (avvisi, messaggi di errore, conferme, annunci e riconoscimenti) fino alla fine. Il problema può venire improvvisamente alla luce quando uno sviluppatore chiede: " Come gestiamo gli errori? Poiché si tratta di un ripensamento, questo approccio di virata produce spesso "frankendesign" sciatti, che danneggiano l'UX.

Per evitare tale scenario, è meglio utilizzare un approccio integrato alla progettazione delle notifiche per migliorare le esperienze degli utenti . Anche se i progettisti potrebbero non avere tutte le informazioni a portata di mano, la progettazione di un framework di notifiche completo durante il ciclo di vita della progettazione del prodotto aiuterà a preparare il prodotto per casi d'uso imprevisti.

Quando si intraprende la progettazione delle notifiche, il principio di progettazione essenziale da tenere a mente è che devono aiutare (non impedire) alle persone di svolgere compiti . È fondamentale testare in anticipo i prototipi dei prodotti e mappare i casi d'uso in cui la messaggistica periferica sarebbe utile nell'assistere le interazioni . Tuttavia, il modo migliore per comunicare con gli utenti varia e dipende da diversi fattori chiave:

• Il tipo di informazioni comunicate
• L'urgenza dell'informazione, se deve essere vista immediatamente
• Se è richiesta un'azione dell'utente come risultato delle informazioni

A parte quale sarà lo stile e il comportamento delle notifiche, il loro tono deve essere stabilito dalla copia UX. Tutta la copia delle notifiche deve essere chiara, concisa e utile. Un sistema di notifica ben progettato è anche progettato pensando all'accessibilità e ha la flessibilità per adattarsi a lingue diverse.

La terminologia utilizzata per le notifiche tende ad essere simile, ma varia leggermente da team a team e da progetto a progetto. Spetta al progettista determinare la terminologia del framework di notifica, ciò che viene chiamato cosa, nonché sincronizzare tutti sulla logica del loro utilizzo: cosa, dove e come .

Migliore usabilità grazie a un migliore design delle notifiche

Le notifiche svolgono una funzione essenziale nell'usabilità del prodotto. " Visibilità dello stato del sistema " è il numero uno nell'elenco delle "10 euristiche di usabilità per la progettazione dell'interfaccia utente" del Nielsen Norman Group. La norma prevede che “ il sistema dovrebbe tenere sempre informati gli utenti su ciò che sta accadendo, attraverso un adeguato feedback entro un tempo ragionevole. "

Un sistema di notifica fa così tanto parte dell'esperienza utente di un prodotto digitale che senza di esso il prodotto sembrerebbe come se qualcosa fosse stato tralasciato. Se non c'è "visibilità dello stato del sistema" e feedback, è come guidare un'auto senza cruscotto.

Il cruscotto di un'auto è pieno di indicatori, icone e luci progettate per fornire visibilità nel sistema operativo dell'auto e garantire un'operatività sicura e affidabile. Quando guidiamo, un gruppo di letture e notifiche sulla temperatura del motore, lo stato della batteria, la pressione dell'olio, le luci, i freni, gli airbag e così via ci tengono informati. Quando vogliamo fare una svolta, c'è una luce lampeggiante per l'indicatore di direzione, insieme a un clic, che ci fornisce entrambi un feedback. Abbiamo anche un indicatore del serbatoio del carburante che indica quando il serbatoio del carburante è basso.

Funziona allo stesso modo con un prodotto digitale. La visibilità dello stato del sistema e del feedback è fondamentale quando si tratta di usabilità e l'usabilità è alla base di ottime esperienze utente.

Stabilire un utile quadro di notifica

Per progettare bene un framework di notifica, può essere utile pensare alle notifiche in termini di "potenza del segnale". Quali messaggi periferici richiedono più o meno attenzione? Ad esempio, le interazioni che potrebbero essere potenzialmente distruttive necessitano di notifiche "più forti" e le interazioni non distruttive necessitano di notifiche "più silenziose".

Inviare alle persone la giusta quantità di notifiche è un atto di equilibrio e esagerare è irto di rischi; il prodotto potrebbe ricevere molti feedback negativi o, nel peggiore dei casi, alienare le persone nella misura in cui lo abbandoneranno. I designer, quindi, devono considerare attentamente l'UX e inviare messaggi solo con uno scopo ben definito. È anche una buona idea offrire agli utenti la flessibilità di disattivare tutte, o almeno alcune delle notifiche.

L'approccio iniziale alla progettazione delle notifiche richiede una classificazione su tre livelli: alto, medio e basso , ovvero "livelli di gravità". Successivamente, i tipi di notifica devono essere ulteriormente definiti da attributi specifici su questi tre livelli, siano essi avvisi, avvisi, conferme, errori, messaggi di successo o indicatori di stato.

Una volta identificati gli attributi di notifica, è il momento di creare una tassonomia delle varie notifiche che andranno a comporre il framework. Quello che segue non è in alcun modo un elenco esaustivo: i tipi di notifiche differiranno in base al prodotto, ai casi d'uso e ad altre variabili. ( Nota : come accennato, diversi team utilizzano una varietà di terminologie. Ad esempio, chiamiamo "conferma" una notifica che richiede l'approvazione dell'utente per procedere con un'interazione distruttiva. Alcuni team potrebbero utilizzare "conferma" come termine per un messaggio di successo.)

Alta attenzione

• Avvisi (richiede attenzione immediata)
• Errori (richiesta azione immediata)
• Eccezioni (anomalie di sistema, qualcosa non ha funzionato)
• Conferme (azioni potenzialmente distruttive che richiedono la conferma dell'utente per procedere)

Media attenzione

• Avvertenze (nessuna azione immediata richiesta)
• Ringraziamenti (feedback sulle azioni dell'utente)
• Messaggi di successo

Bassa attenzione

• Messaggi informativi (ovvero notifiche passive, qualcosa è pronto per la visualizzazione)
• Badge (tipicamente sulle icone, a significare qualcosa di nuovo dall'ultima interazione)
• Indicatori di stato (feedback di sistema)

Progettare una grande esperienza di notifica

Per progettare un prodotto con un'ottima UX, i designer devono fare un elenco di tutti i casi d'uso in cui le notifiche possono essere utili. Si consiglia di eseguire questo processo in collaborazione con uno sviluppatore poiché nella maggior parte dei casi può essere imparziale e in grado di aiutare a risolvere i casi limite che il progettista potrebbe non aver considerato.

I progettisti dovrebbero anche prendere nota di tutte le interazioni durante i test degli utenti in cui le notifiche possono fornire valore per migliorare l'esperienza utente.

Una volta armato con l'elenco, il passaggio successivo consiste nel classificare le notifiche in base al livello di attenzione e agli attributi desiderati. Anche in questo caso, poiché le notifiche non dovrebbero essere invadenti , è necessario farlo con attenzione. Alcune delle domande da porre durante questo processo sono:

• Cosa attiverebbe la notifica?
• Che tipo di feedback viene comunicato?
• Dove dovrebbe apparire la notifica e come?
• Quale notifica richiederebbe un'interazione immediata?
• La notifica è persistente o non persistente?

Successivamente, la codifica a colori e le icone devono essere determinate e inserite in un sistema di progettazione (o guida di stile). Durante questo processo, i progettisti devono considerare ogni istanza in cui viene visualizzata una notifica e assicurarsi che venga visualizzata correttamente su tutti gli sfondi.

Anche il posizionamento delle notifiche è fondamentale. A rischio di affermare l'ovvio, per evitare di oscurare l'interfaccia, le notifiche dovrebbero apparire in alto o in basso o vicino agli angoli dell'interfaccia utente. Inoltre, se il design è reattivo, i designer devono testare l'aspetto delle notifiche con varie finestre. È particolarmente importante quando i messaggi di errore possono essere visualizzati con moduli mobili reattivi.

Progettare un framework di notifica non è facile. È necessario considerare molti piccoli dettagli che si verificano in diversi scenari. Oltre all'accessibilità e alla leggibilità, è necessario tenere presente la localizzazione futura. Un sistema di notifica che sembra perfetto in inglese può crollare completamente se utilizzato su una piattaforma tedesca o giapponese.

Ulteriori domande da porsi quando si tratta di definire il comportamento delle notifiche :

• Se un avviso o un avviso deve essere persistente, in che modo i progettisti garantiscono che le persone abbiano ancora accesso ad essi dopo che si sono allontanati dalla schermata iniziale?
• È necessario incorporare un'icona di avviso con un badge in cui sia possibile visualizzare un archivio di notifiche?
• Se una notifica non è persistente, quanto tempo prima che scompaia e dovrebbe esserci un'opzione per ignorarla prima che svanisca?

Per le app mobili, non solo le notifiche in-app, ma anche le notifiche push (a livello di sistema, esterne all'app) devono essere progettate meticolosamente. Si tratta principalmente di interruzioni, quindi è fondamentale esaminare la copia della notifica e come e quando chiedere il permesso per inviarle. Usati troppo, possono scoraggiare le persone dall'utilizzare l'app. Troppe notifiche non essenziali possono frustrare gli utenti che potrebbero quindi silenziare le notifiche o interrompere del tutto l'utilizzo dell'app.

I designer dovrebbero anche prendere in considerazione le notifiche utilizzabili che consentono alle persone di essere produttive senza aprire un'app. Consentire agli utenti di svolgere piccole attività senza entrare in un'app può essere un potente strumento per migliorare l'esperienza utente.

Per le notifiche push mobili, la best practice UX è ritardare le notifiche di qualsiasi tipo (chiedere l'accesso alla posizione di una persona, inviare notifiche push e così via) fino a quando le persone non hanno avuto la possibilità di esplorare un po' l'app.

Procedure consigliate per la notifica per un'esperienza utente eccezionale

L'osservanza delle seguenti migliori pratiche garantirà che le persone percepiscano le notifiche come un valore, non come interruzioni, migliorando così l'esperienza dell'utente. Prima di progettare un sistema di notifiche e inserirle in un sistema di progettazione, considera queste best practices fondamentali:

• Classifica le notifiche in base ai tre livelli di attenzione discussi in precedenza. Quindi, definire la tassonomia delle varie forme di notifica all'interno di questi tre livelli.
• Quando si crea una guida di stile per il sistema di notifica, specificare la lunghezza massima dei caratteri per la notifica in tutte le lingue in cui verrà rilasciata.
• Prestare particolare attenzione all'adattabilità e alla flessibilità per adattarsi a diversi tipi di contenuto e lunghezze di testo.
• Crea una combinazione di colori coerente per i tre livelli di attenzione e un'iconografia coerente.
• Crea notifiche concise e di facile lettura che forniscono informazioni utili.
• Valuta attentamente cosa inviare e quando inviare. Sui dispositivi mobili, ritarda l'invio delle notifiche sulle app appena scaricate per evitare di alienare le persone. Esaminare attentamente il contesto e i casi d'uso.
• Err per mostrare un minor numero di notifiche, siano esse avvisi o avvisi o altri aggiornamenti dello stato di attenzione da alta a media. Invece, inseriscili in un elenco a cui le persone possono accedere quando vogliono vederli (indicato da un'icona badge nell'interfaccia utente).
• Prendi in considerazione un sistema con un'opzione per contrassegnare le notifiche "non mostrare più".
• Riconoscimenti non persistenti come "snack bar" dovrebbero scomparire dallo schermo dopo un minimo di quattro secondi e un massimo di otto secondi, con un'opzione per eliminarlo prima e "annullare" se appropriato.
• Per le notifiche ad alto livello di attenzione sui dispositivi mobili, prendi in considerazione il feedback sonoro e tattile quando possibile.
• Garantire un contrasto adeguato sulle notifiche per la leggibilità e tra lo sfondo su cui vengono visualizzate le notifiche. Tieni presente che con design fluidi e reattivi, lo sfondo potrebbe spostarsi sotto la notifica.

Migliori pratiche per i messaggi di errore

• I messaggi di errore devono essere semplici e diretti, preferibilmente utilizzabili, scritti in un linguaggio facile da leggere e veloce da comprendere.
• Evita codici e abbreviazioni oscuri come "il successo della risposta ricevuta è falso. "
• Fornire descrizioni concise e chiare del problema invece di " si è verificato un errore. "
• Evita di incolpare le persone o di dire loro che hanno fatto qualcosa di sbagliato, ad esempio dicendo che si trattava di un " comando illegale". "
• Fornisci messaggi di errore costruttivi contestuali in modo che le persone possano risolvere il problema.
• Evita di indicare un errore semplicemente trasformando il campo in rosso. Non lo rende accessibile alle persone con disabilità. È sempre meglio includere altri segnali visivi che il daltonico può vedere.
• Utilizza la convalida in linea per i campi di input sui moduli.
• I messaggi di errore non dovrebbero scomparire finché le persone non hanno risolto il problema.

Sommario

Le notifiche contribuiscono a creare un'esperienza che aiuta le persone a raggiungere un obiettivo e dovrebbero essere trattate come qualsiasi altro componente di un prodotto digitale. Tuttavia, le notifiche possono tagliare in entrambi i modi. Se gestiti bene, possono aumentare l'esperienza utente e favorire il coinvolgimento, ma se eseguiti male, rischiano di diventare un fastidio. Trovare il giusto equilibrio è fondamentale.

Le notifiche non devono essere trattate come un ripensamento. Per eseguirli correttamente, i progettisti devono affrontare i casi d'uso in anticipo, definire le varie forme durante il ciclo di vita della progettazione del prodotto e testarle ampiamente.

Un breve riepilogo sul modo corretto di progettare le notifiche:

• Avvia la progettazione delle notifiche in anticipo, non come un ripensamento.
• Classifica le notifiche in base ai tre livelli di attenzione: alto, medio e basso.
• Codifica colore, assegna icone e determina i posizionamenti.
• Classificali per tipo: persistenti o non persistenti, pop-up, banner, finestra di dialogo, ecc.
• Incorporali in un sistema di progettazione.

Comprendere quando e come utilizzare le notifiche è essenziale per fornire un'ottima usabilità e creare coerenza nella messaggistica del prodotto. Valutando attentamente la messaggistica periferica che deve essere mostrata al momento giusto, i designer possono aumentare l'efficienza di un prodotto e migliorarne la UX.

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• Come lavorare da remoto quando conta di più
• Come effettuare facilmente la transizione al lavoro a distanza
• Best practice ed errori per la progettazione di app mobili
• La guida definitiva alla progettazione di siti Web di e-commerce
• Il crash della chat: quando un chatbot fallisce