Un simplu UI hack pentru a îmbunătăți Onboarding UX [OCD]

Modelele și schițele din UI presupun că datele utilizatorului sunt deja prezente. De exemplu, modelul de mai jos presupune că utilizatorul va avea contacte cu care vor putea vorbi, notificări și chiar fire de chat.

Messenger simplu ui construit folosind această resursă de schiță gratuită

Dar nu este niciodată cazul când un utilizator se înscrie. La început, nu există date, deci o coloană de contacte goale și o fereastră de chat goală.

Designul UI strălucitor facilitează consumarea informațiilor și nu se concentrează asupra modului de creare a informațiilor respective.

Am învățat acest lucru în mod dificil când am înmuiat cât mai mult din Dribbble am putut proiecta un tablou de bord pentru o aplicație b2b. Sketch părea grozav, dar clienții noștri nu au reușit să-și găsească drum.

Bad UX crește costurile de îmbarcare și suport, afectând direct veniturile. De asemenea, se simte rău să urmărești un utilizator care se luptă să-ți consume designul perfect de pixeli. Îți amintește că ai eșuat.

Soluții existente

O soluție a fost aceea de a avea un avans la bord folosind diapozitive precum interfața. Acesta pare a fi standardul pentru aplicațiile mobile.

UX-ul de încărcare bazat pe diapozitive Slack

Problema abordării diapozitive este lipsa contextului. Puteți transmite doar atât de multe pe diapozitive (cât de mult păstrează utilizatorul este o altă întrebare).

Este excelent pentru a oferi o imagine de ansamblu asupra produsului, dar nu este foarte util în a explica modul în care funcționează produsul. A fost irelevant pentru cazul meu de utilizare, deoarece complexitatea produsului nu a putut fi redusă până la câteva diapozitive.

A existat, de asemenea, o soluție bazată pe tipul de instrumente care parcurge utilizatorul prin pași specifici. Această opțiune este mai populară pentru aplicațiile web. Există multe biblioteci javascript bune care vă ajută să creați aceste fluxuri.

Tip de instrument bazat pe demo-ul de îmbarcare pentru introjs.com/

În ceea ce privește soluția bazată pe un set de instrumente, le-am găsit enervante și aproape întotdeauna a dat clic pe „sărit tutorial”. Deși companiile mari precum Canva folosesc sfaturi de instrumente bazate pe îmbarcare. Un produs numit AppCues vă permite să proiectați aceste sugestii fără cod, corect.

Există, de asemenea, o abordare în stilul balizelor, în care caracteristicile frecvent înțelese sunt etichetate cu balize strălucitoare, care furnizează informații relevante atunci când (dacă) este nevoie.

Acesta este modul cel mai discret. Spre deosebire de indicatorul de instrumente care îți aruncă un tutorial de 17 pași în jos pe gât și dispare atunci când ai nevoie de el, această abordare bazată pe hotspot oferă informații când ești gata.

De menționat că Slack folosește toate cele 3 forme. Nu e de mirare că utilizatorii lor se lipesc. Ceea ce sugerează cumva și faptul că reținerea este direct proporțională cu ușurința la îmbarcare.

OCD, de asemenea, designul centrat la bord

Îmi place să numesc lucruri. Numele ajută la concretizarea ideilor în minte. Deci, să numim acest design centrat la bord.

Am vrut o soluție care:

  • A fost relevant pentru context
  • Nu a fost enervant (nimănui nu-i place să facă 17 pași pentru a afla cum funcționează o caracteristică)
  • Este discret (ca balizele)
  • Este ușor de consumat (scrierile cu instrumente nu sunt ușor de consumat)

Rezultat

Pur și simplu am început să proiectez state. Designul de chat pe care l-ați văzut în timp ce ați început să citiți acest articol poate fi proiectat cu trei stări.

Starea 1: Nu există contacte

Starea 2: Contacte prezente, dar fără chat-uri

Starea 3: Atât chaturile, cât și contactele sunt prezente

Scopul fiecărui stat este de a progresa utilizatorul la următoarea stare. Când utilizatorul a trecut la starea 3, ea este îmbarcată cu succes. Având în vedere modelul chatului, obiectivul pentru fiecare stat este următorul:

Obiectivul statului 1: Utilizatorul principal pentru a adăuga un contact

Modelul de mai jos are doar un singur apel la acțiune, butonul albastru plus care permite utilizatorului să adauge un nou contact. Graficul și textul amintesc atât utilizatorul pentru a lua această acțiune.

Statul 1 - Introduceți utilizatorul pentru a adăuga contacte (ilustrare de undraw.co)

Odată adăugat un contact, putem începe cel de-al doilea obiectiv.

Obiectivul statului 2: Utilizator principal pentru a începe o discuție

Mockup-ul de mai jos arată are un primer grafic pentru a începe o chat. Prezintă în mod explicit caracteristicile disponibile. Din nou, puteți face un singur lucru acum, adică trimiteți un mesaj. Puteți face un apel și în această interfață de utilizator, dar ambele acțiuni servesc același scop. Își duc utilizatorul la pasul 3.

State 2 - Contact adăugat, primește pentru a începe o discuție

Obiectivul statului 3: Niciunul, utilizatorul este îmbarcat - toate indiciile ar trebui să dispară

Și în final, când utilizatorul dvs. a repetat procesul de câteva ori, UI-ul va începe să caute modul în care ne-am propus inițial.

Starea 3 - Utilizatorul este îmbarcat cu succes

Beneficiile acestei abordări

  • În comparație cu abordarea diapozitivelor din pasul 1, Onboarding Centric Design (OCD) prezintă conținutul în bucăți. Informațiile sunt disponibile la momentul luării deciziilor.
  • Această abordare poate fi utilizată atât pe dispozitive mobile cât și pe desktop. Această interfață de utilizator este simplă, dar în cazul unei interfețe de utilizator complexe, puteți utiliza TOC cu hotspot-uri pentru a crește CTA.
  • Această abordare îmbunătățește în primul rând UX-ul dvs., forțându-vă să vă gândiți în ceea ce privește călătoria utilizatorului.
  • Dacă se întâmplă să vă scrieți frontendele folosind React, această abordare se potrivește perfect arhitecturii sale componente.

Deci, de regulă:

Proiectare machete pentru state.
Fiecare stat are un singur obiectiv - progresul către statul următor.
Ultima stare este când utilizatorul dvs. este la bord.

Multumesc pentru citit :)

Bună, dacă v-a plăcut acest articol și doriți să vă actualizați, urmați-mă pe: Medium, Github sau Twitter

Conduc o comunitate slack (care are 18 membri începând cu 6 octombrie 2018) unde puteți ajuta pe alții sau puteți primi ajutor cu privire la frontend, backend și dezvoltare în general. Vă puteți alătura aici.