Un semplice trucco dell'interfaccia utente per migliorare Onboarding UX [OCD]

I mockup e gli schizzi dell'interfaccia utente presuppongono che i dati dell'utente siano già presenti. Ad esempio, il modello di seguito presuppone che l'utente disponga di contatti con cui chattare, notifiche e persino thread di chat.

Semplice messenger creato usando questa risorsa di sketch gratuita

Ma questo non è mai il caso quando un utente si iscrive. All'inizio non ci sono dati, quindi una colonna di contatti vuota e una finestra di chat vuota.

Il design lucido dell'interfaccia utente semplifica il consumo delle informazioni e non si concentra su come crearle.

L'ho imparato nel modo più duro quando ho assorbito il più possibile di Dribbble per progettare una dashboard per un'applicazione b2b. Sembrava fantastico su Sketch, ma i nostri clienti non erano in grado di farsi strada.

Bad UX aumenta i costi di onboarding e di supporto, influendo direttamente sulle entrate. È anche brutto guardare un utente che fatica a consumare il tuo design perfetto dei pixel. Ti ricorda che hai fallito.

Soluzioni esistenti

Una soluzione era quella di avere un onboarding iniziale usando diapositive come l'interfaccia. Questo sembra essere lo standard per le app mobili.

UX onboarding basato su slide di Slack

Il problema con l'approccio delle diapositive è la mancanza di contesto. Puoi trasmettere solo così tanto sulle diapositive (quanto l'utente conserva è una domanda diversa).

È ottimo per fornire una panoramica del prodotto, ma non è molto utile per spiegare come funziona il prodotto. Era irrilevante per il mio caso d'uso, poiché la complessità del prodotto non poteva essere ridotta a poche diapositive.

C'era anche una soluzione basata su tooltip che accompagna l'utente attraverso passaggi specifici. Questa opzione è più popolare tra le app Web. Esistono molte buone librerie javascript per aiutarti a creare questi flussi.

Demo on-boarding basata su tooltip per introjs.com/

Per quanto riguarda una soluzione basata su tooltip, li ho trovati fastidiosi e quasi sempre ho cliccato su "salta tutorial". Anche se le grandi aziende come Canva usano tooltip basato sull'imbarco. Un prodotto chiamato AppCues ti consente di progettare questi suggerimenti senza codice, pulito.

Esiste anche un approccio in stile beacon, in cui le caratteristiche comunemente incomprese sono etichettate con beacon luminosi, che forniscono informazioni pertinenti quando (se) sono necessarie.

Questo è il modo più discreto. A differenza del tooltip che ti mette in pratica un tutorial di 17 passaggi e svanisce quando ne hai effettivamente bisogno, questo approccio basato su hotspot fornisce informazioni quando sei pronto.

Vale la pena ricordare che Slack utilizza tutte e 3 le forme. Non c'è da stupirsi che i loro utenti si attacchino. Il che suggerisce in qualche modo che la conservazione è direttamente proporzionale alla facilità di imbarco.

OCD aka Design incentrato sull'onboarding

Mi piace nominare le cose. I nomi aiutano a materializzare le idee nella mente. Quindi chiamiamo questo design incentrato sull'onboarding.

Volevo una soluzione che:

  • Era rilevante per il contesto
  • Non era fastidioso (a nessuno piace fare 17 passi per imparare come funziona una funzione)
  • È discreto (come i beacon)
  • È facile da consumare (i suggerimenti non sono facili da consumare)

Risultato

Ho semplicemente iniziato a progettare stati. Il design della chat che hai visto mentre hai iniziato a leggere questo articolo può essere progettato con tre stati.

Stato 1: nessun contatto presente

Stato 2: contatti presenti, ma nessuna chat

Stato 3: sono presenti sia chat che contatti

L'obiettivo di ogni stato è di far avanzare l'utente allo stato successivo. Quando l'utente è passato allo stato 3, è correttamente inserita a bordo. Considerando il modello di chat, l'obiettivo per ogni stato è il seguente:

Obiettivo dello stato 1: Utente principale per aggiungere un contatto

Il mockup di seguito ha solo un invito all'azione, il pulsante blu più che consente all'utente di aggiungere un nuovo contatto. Sia la grafica che il testo consentono all'utente di eseguire tale azione.

Stato 1: adescare l'utente per aggiungere contatti (illustrazione di undraw.co)

Una volta aggiunto un contatto, possiamo iniziare il secondo obiettivo.

Obiettivo dello stato 2: utente Prime per avviare una chat

Il mockup mostrato di seguito ha un primer grafico per iniziare una chat. Descrive esplicitamente le funzionalità disponibili. Ancora una volta, c'è solo una cosa che puoi fare ora, ovvero inviare un messaggio. Puoi anche effettuare una chiamata in questa UI, ma entrambe queste azioni hanno lo stesso scopo. Portano l'utente al passaggio 3.

Stato 2 - Contatto aggiunto, prime per iniziare una chat

Obiettivo dello stato 3: nessuno, l'utente è a bordo - tutti gli spunti dovrebbero svanire

E infine, quando il tuo utente ha ripetuto il processo alcune volte, la sua interfaccia utente inizierà ad apparire come inizialmente previsto.

Stato 3: l'utente è correttamente imbarcato

Vantaggi di questo approccio

  • Rispetto all'approccio delle diapositive nel passaggio 1, Onboarding Centric Design (OCD) presenta il contenuto in blocchi. Le informazioni sono disponibili al momento del processo decisionale.
  • Questo approccio può essere utilizzato su dispositivi mobili e desktop. Questa interfaccia utente è semplice, ma nel caso di un'interfaccia utente complessa, è possibile utilizzare OCD con hotspot per elevare i CTA.
  • Questo approccio migliora innanzitutto la tua UX, costringendoti a pensare in termini di percorso dell'utente.
  • Se ti capita di scrivere i tuoi frontend usando React, questo approccio si adatta perfettamente alla sua architettura componente.

Quindi, come regola generale:

Modelli di progettazione per stati.
Ogni stato ha un obiettivo: passare allo stato successivo.
L'ultimo stato è quando l'utente è a bordo.

Grazie per aver letto :)

Ciao, se ti è piaciuto questo articolo e vuoi essere aggiornato, seguimi su: Medium, Github o Twitter

Gestisco una comunità slack (che ha 18 membri al 6 ottobre 2018) in cui puoi aiutare gli altri o ricevere aiuto per quanto riguarda frontend, backend e sviluppo in generale. Puoi unirti qui.