Preprost kramp uporabniški vmesnik za izboljšanje vgrajenega UX-a [OCD]

Načrti uporabniškega vmesnika in skice predvidevajo, da so podatki uporabnikov že prisotni. Spodnji model na primer predvideva, da bo imel uporabnik stike za klepet, obvestila in celo teme za klepet.

Preprost uporabniški program za sporočanje, zgrajen s pomočjo tega brezplačnega vira za skico

Vendar to nikoli ne pride, ko se uporabnik prijavi. Na začetku ni podatkov, torej prazen stolpec s stiki in prazno okno za klepet.

Svetleč dizajn uporabniškega vmesnika olajša porabo informacij in se ne osredotoča na to, kako jih ustvariti.

Tega sem se naučil, ko sem namočil toliko Dribbble, da sem lahko oblikoval nadzorno ploščo za b2b aplikacijo. Na Sketchu je bilo videti čudovito, vendar naše stranke niso mogle najti poti.

Slab UX povečuje stroške vkrcanja in podpore, kar neposredno vpliva na prihodke. Slabo je tudi gledati uporabnika, ki se trudi, da bi porabil vaš popoln dizajn pikslov. Spominja vas, da niste uspeli.

Obstoječe rešitve

Ena od rešitev je bila, da se vkrcavanje vnaprej uporablja s pomočjo diapozitivov, kot je vmesnik. Zdi se, da je to standard za mobilne aplikacije.

UX-ov na vozilu, ki temelji na drsnikih

Problem pri diapozitivu je pomanjkanje konteksta. Na diapozitivih lahko prenesete le toliko (koliko uporabnika zadrži, je drugo vprašanje).

Odličen je za pregled izdelka, ni pa zelo koristen pri razlagi, kako izdelek deluje. Za mojo uporabo je bilo to nepomembno, saj kompleksnosti izdelka ni bilo mogoče zmanjšati na nekaj diapozitivov.

Obstajala je tudi rešitev na osnovi orodja, ki uporabnika sprehodi po določenih korakih. Ta možnost je bolj priljubljena pri spletnih aplikacijah. Obstaja veliko dobrih knjižnic javascripta, ki vam pomagajo pri gradnji teh tokov.

Opis orodja, ki temelji na demonstracijskem vmesniku za introjs.com/

Kar se tiče rešitve, ki temelji na orodju, se mi zdijo moteče in skoraj vedno so kliknili »vadnica za preskok«. Čeprav velika podjetja, kot je Canva, uporabljajo orodje na osnovi vkrcanja. Izdelek z imenom AppCues vam omogoča, da oblikujete te namigi brez kode.

Obstaja tudi pristop v slogu lučk, kjer so ponavadi napačno razumljene funkcije označene z žarečimi svetilniki, ki zagotavljajo ustrezne informacije, kadar (če) potrebujejo.

To je najbolj nevsiljiv način. Za razliko od orodja, ki vam potisne 17-koračno vadbo po grlu in izgine, ko ga dejansko potrebujete, ta pristop, ki temelji na vroči točki, zagotavlja informacije, ko ste pripravljeni.

Omeniti velja, da Slack uporablja vse tri oblike. Nič čudnega, da se njihovi uporabniki držijo. Kar tudi nekako namiguje na dejstvo, da je zadrževanje neposredno sorazmerno z lahkoto vkrcanja.

OCD aka Onboarding centric design

Všeč mi je poimenovanje stvari. Imena pomagajo uresničiti ideje v glavi. Torej, pokličimo to osredotočeno oblikovanje na krovu.

Hotel sem rešitev, ki:

  • Bilo je pomembno glede na kontekst
  • Ni bilo nadležno (nihče ne mara narediti 17 korakov, da bi se naučil, kako deluje funkcija)
  • Je nevsiljiv (kot svetilniki)
  • Je enostaven za uživanje (navodila za uporabo ni enostavno)

Izid

Preprosto sem začel oblikovati države. Dizajn klepeta, ki ste ga videli med branjem tega članka, je lahko zasnovan s tremi stanji.

Stanje 1: Stikov ni

Stanje 2: Stiki so prisotni, vendar klepetov ni

Stanje 3: Prisotni so tako klepeti kot stiki

Cilj vsake države je napredovanje uporabnika v naslednje stanje. Ko je uporabnik napredoval v stanje 3, je uspešno vkrcan. Cilj vsake države je glede na model za klepet naslednje:

1. cilj države: Glavni uporabnik za dodajanje stika

Spodnji model ima samo en poziv k akciji, modri gumb plus, ki uporabniku omogoča dodajanje novega stika. Grafika in besedilo sta uporabnika ključnega pomena za to.

Stanje 1 - Navedite uporabnika za dodajanje stikov (ilustracija undraw.co)

Ko je dodan stik, lahko začnemo z drugim ciljem.

Cilj države 2: Glavni uporabnik za začetek klepeta

Spodnja slika prikazuje grafični osnovni premaz za začetek klepeta. Izrecno navaja funkcije, ki so na voljo. Spet obstaja samo ena stvar, ki jo lahko storite zdaj, to je pošiljanje sporočila. V tem uporabniškem vmesniku lahko tudi pokličete, vendar obe dejanji služita istemu namenu. Uporabnika bodo popeljali v 3. korak.

Stanje 2 - Kontakt je dodan, primeren za začetek klepeta

Cilj države 3: Brez, uporabnik je na krovu - vsi nakazili bi morali izginiti

In končno, ko bo vaš uporabnik postopek nekajkrat ponovil, bo njen uporabniški vmesnik začel iskati tako, kot smo prvotno nameravali.

Stanje 3 - Uporabnik je uspešno vkrcan

Prednosti tega pristopa

  • V primerjavi s pristopom diapozitivov v 1. koraku Onboarding Centric Design (OCD) predstavlja vsebino v koščkih. Informacije so na voljo na mestu odločanja.
  • Ta pristop je mogoče uporabiti tako na mobilnih kot namiznih napravah. Ta uporabniški vmesnik je preprost, vendar lahko v primeru zapletenega uporabniškega vmesnika uporabite OCD z žariščnimi točkami, da povečate CTA.
  • Ta pristop izboljša vaš UX na prvem mestu, tako da vas prisili, da razmišljate o uporabnikovi poti.
  • Če slučajno pišete svoje fronte s pomočjo React, se ta pristop lepo ujema s svojo komponento arhitekture.

Torej kot pravilo:

Oblikujte makete za države.
Vsaka država ima en cilj - napredek v naslednjo državo.
Zadnje stanje je, ko je vaš uporabnik na krovu.

Hvala za branje :)

Živjo, če vam je bil ta članek všeč in želite stalno posodabljati, mi sledite na: Medium, Github ali Twitter

Vodim skupnost, ki ima ohlapnost (šteje 18 članov od 6. oktobra 2018), kjer lahko pomagate drugim ali prejmete pomoč v zvezi s sočeljem, zaledjem in razvojem na splošno. Tu se lahko pridružite.