Jednostavan hack za korisničko sučelje za poboljšanje onboarding UX [OCD]

UI skice i skice pretpostavljaju da su korisnički podaci već prisutni. Na primjer, donji obrazac pretpostavlja da će korisnik imati kontakte s kojima će razgovarati, obavijesti, pa čak i teme za chat.

Jednostavan messenger ui izgrađen pomoću ovog besplatnog resursa skice

Ali to nikada nije slučaj kada se korisnik prijavi. U početku nema podataka, pa je prazan stupac s kontaktima i prazan prozor za chat.

Sjajni dizajn korisničkog sučelja olakšava konzumiranje podataka i ne usredotočuje se na to kako stvoriti te podatke.

To sam naučio na teži način kad sam natopio što više Dribbblea kako bih mogao dizajnirati nadzornu ploču za b2b aplikaciju. Izgledalo je sjajno na Sketch-u, ali naši kupci nisu uspjeli pronaći svoj put.

Loš UX povećava troškove ukrcavanja i troškova podrške, što izravno utječe na prihod. Također je loše gledati korisnika koji se trudi da pojede vaš piksel savršen dizajn. Podsjeća da niste uspjeli.

Postojeća rješenja

Jedno od rješenja bilo je postavljanje broda naprijed pomoću dijapozitiva poput sučelja. Čini se da je to standard za mobilne aplikacije.

Slobodno klizno UX na brodu

Problem s pristupom dijapozitivima je nedostatak konteksta. Na dijapozitivima možete prenijeti samo toliko stvari (koliko korisnik zadržava je drugačije pitanje).

Izvrsno je za pregled proizvoda, ali nije od velike pomoći u objašnjenju proizvoda. Za moj je slučaj bio irelevantan, jer se složenost proizvoda nije mogla svesti na nekoliko slajdova.

Postojalo je i alatno rješenje koje vodi korisnike kroz određene korake. Ova je opcija popularnija kod web aplikacija. Mnogo je dobrih javascript knjižnica koje će vam pomoći u izgradnji ovih tokova.

Opis zaslona temeljenog na ukrcavanju za mjesto introjs.com/

Što se tiče rješenja temeljenih na alatima, smatrao sam ih neugodnim i gotovo uvijek su kliknuli "vodič za preskakanje". Iako velike tvrtke poput Canva koriste tooltip temeljen na ukrcaju. Proizvod nazvan AppCues omogućuje vam da dizajnirate ove savjete bez koda, uredno.

Također postoji pristup stilu svjetionika, gdje su obično pogrešno shvaćene značajke označene užarenim svjetionicima, koji pružaju relevantne informacije kada je to potrebno (ako je potrebno).

To je najizgledniji način. Za razliku od savjeta koji gurne udžbenik u 17 koraka niz grlo i nestane kada vam zapravo zatreba, ovaj pristup temeljen na žarišnoj točki pruža informacije kada ste spremni.

Vrijedi spomenuti da Slack koristi sva tri oblika. Nije ni čudo što se njihovi korisnici drže. Što također nekako upućuje na činjenicu da je zadržavanje izravno proporcionalno jednostavnosti ukrcavanja.

OCD aka Onboard centralni dizajn

Volim imenovati stvari. Imena pomažu u ostvarivanju ideja u umu. Zato nazovimo ovaj središnji dizajn broda.

Želio sam rješenje koje:

  • Bilo je relevantno za kontekst
  • Nije bilo neugodno (nitko ne voli poduzeti 17 koraka kako bi naučio kako igra funkcionira)
  • Neupadljiv je (poput svjetionika)
  • Lako je konzumirati (savjete nije lako konzumirati)

Ishod

Jednostavno sam počeo dizajnirati države. Dizajn chata koji ste vidjeli dok ste počeli čitati ovaj članak može se oblikovati s tri stanja.

Stanje 1: Nema kontakata

Država 2: kontakti su prisutni, ali bez razgovora

3. stanje: Prisutni su i chatovi i kontakti

Cilj svake države je prelazak korisnika u sljedeće stanje. Kada je korisnik napredovao do stanja 3, uspješno se ukrcava. S obzirom na obrazac za chat, cilj svake države je sljedeći:

Cilj države 1: glavni korisnik za dodavanje kontakta

Sljedeći model ima samo jedan poziv na akciju, plavi gumb plus koji korisniku omogućuje dodavanje novog kontakta. Grafika i tekst nateraju korisnika da poduzme tu akciju.

Stanje 1 - Navedite korisnika za dodavanje kontakata (ilustracija undraw.co)

Nakon dodavanja kontakta možemo započeti drugi cilj.

Cilj države 2: Glavni korisnik da započne chat

Na slici ispod prikazan je grafički temelj za započinjanje chata. Izričito su ocrtane dostupne značajke. Opet, postoji samo jedna stvar koju sada možete učiniti, tj. Poslati poruku. U ovom korisničkom sučelju također možete uputiti poziv, ali obje ove radnje služe istoj svrsi. Oni prebacuju vašeg korisnika na korak 3.

2. država - kontakt je dodan, prvo započnite chat

Cilj države 3: Nijedan, korisnik je ukrcan - svi bi najave trebali nestati

I na kraju, kad je vaš korisnik ponovio postupak nekoliko puta, njezin će korisnički interfejs početi gledati onako kako smo prvotno namjeravali.

Stanje 3 - Korisnik se uspješno ukrcao

Prednosti ovog pristupa

  • U usporedbi s pristupom dijapozitiva u koraku 1, Onboarding Centric Design (OCD) prikazuje sadržaj u komadima. Informacije su dostupne u trenutku odlučivanja.
  • Ovaj se pristup može koristiti i na mobilnim i na desktop uređajima. Ovo je korisničko sučelje jednostavno, ali u slučaju složenog korisničkog sučelja, za povišenje CTA možete koristiti OCD s vrućim točkama.
  • Ovaj pristup poboljšava vaš UX na prvom mjestu, forsirajući vas da razmišljate u smislu korisnikovog puta.
  • Ako vam se slučajno pišu prednje stranice pomoću React-a, ovaj se pristup lijepo uklapa u njenu sastavničku arhitekturu.

Kao pravilo:

Dizajnirajte makete za države.
Svaka država ima jedan cilj - napredak u sljedeću državu.
Posljednje stanje je kada se vaš korisnik nalazi na brodu.

Hvala na čitanju :)

Pozdrav, ako vam se ovaj članak svidio i želite stalno ažurirati, pratite me na: Medium, Github ili Twitter

Ja vodim opuštenu zajednicu (koja ima 18 članova od 6. listopada 2018.) gdje možete pomoći drugima ili dobiti pomoć u vezi s prednjim granicama, dodatnim iskustvom i općenito razvojem. Možete mu se pridružiti ovdje.