Paprastas vartotojo sąsajos hackas, skirtas patobulinti „Onboarding UX“ [OCD]

UI maketuose ir eskizuose daroma prielaida, kad vartotojo duomenys jau yra. Pvz., Toliau pateiktame makete daroma prielaida, kad vartotojas turės kontaktus, su kuriais reikia bendrauti, pranešimus ir net pokalbių gijas.

Paprasta „Messenger“ sąsaja, sukurta naudojant šį nemokamą eskizų šaltinį

Bet niekada taip nėra, kai vartotojas pasirašo. Iš pradžių duomenų nėra, taigi tuščias kontaktų stulpelis ir tuščias pokalbių langas.

Blizgus vartotojo sąsajos dizainas leidžia lengvai vartoti informaciją ir nesusitelkia į tai, kaip tą informaciją sukurti.

Tai išmokau sunkiai, kai suvartojau tiek Dribbble, kiek galėjau suprojektuoti „b2b“ programos prietaisų skydelį. „Eskizas“ atrodė puikiai, tačiau mūsų klientai nesugebėjo rasti savo progos.

Dėl blogo UX padidėja įlaipinimo ir palaikymo išlaidos, tiesiogiai veikiančios pajamas. Taip pat blogai žiūrėti, kaip vartotojas stengiasi sunaudoti tobulą jūsų pikselių dizainą. Primena, kad nepavyko.

Esami sprendimai

Vienas iš sprendimų buvo įlaipinimas iš anksto naudojant skaidres, pavyzdžiui, sąsają. Panašu, kad tai yra programų mobiliesiems standartas.

„Slack“ skaidrių pagrindu įtaisytas UX

Skaidrių požiūrio problema yra konteksto trūkumas. Skaidrėse galite perteikti tik tiek (kiek vartotojui liko, yra kitas klausimas).

Tai puikiai tinka norint apžvelgti produktą, tačiau nelabai padeda paaiškinti, kaip produktas veikia. Mano naudojimo atveju tai buvo nesvarbi, nes produkto sudėtingumo nepavyko sumažinti iki kelių skaidrių.

Taip pat buvo patarimas, pagrįstas patarimais, kurie vartotojui padeda atlikti konkrečius veiksmus. Ši parinktis populiaresnė žiniatinklio programose. Yra daug gerų „javascript“ bibliotekų, kurios padės sukurti šiuos srautus.

Patarimas, pagrįstas įlaipinimo demonstracine versija, skirta introjs.com/

Kalbant apie patarimais pagrįstą sprendimą, aš juos erzinau ir beveik visada spustelėjau „praleisti vadovėlį“. Nors tokios didelės kompanijos kaip „Canva“ naudoja patarimą, pagrįstą įlaipinimu. Produktas, vadinamas „AppCues“, leidžia šiuos patarimus sukurti be kodų.

Taip pat egzistuoja švyturių stiliaus metodas, kai paprastai klaidingai suprantamos savybės ženklinamos žėrinčiais švyturėliais, teikiančiais reikiamą informaciją, kai (jei to reikia).

Tai yra labiausiai nepastebimas būdas. Skirtingai nuo patarimo, kuris nukreipia 17 žingsnių mokymo programą per gerklę ir dingsta, kai jums to iš tikrųjų reikia, šis viešosios interneto prieigos taškais pagrįstas požiūris suteikia informaciją, kai esate pasiruošę.

Verta paminėti, kad „Slack“ naudoja visas 3 formas. Nenuostabu, kad jų vartotojai laikosi. Tai taip pat kažkaip nurodo, kad išlaikymas yra proporcingas įlaipinimo lengvumui.

OKS, dar žinomas kaip „Onboarding“ centrinis dizainas

Man patinka daiktų įvardijimas. Vardai padeda realizuoti idėjas galvoje. Taigi vadinkime tai pagrindiniu dizainu.

Aš norėjau sprendimo, kuris:

  • Buvo aktuali kontekste
  • Nebuvo erzinantis (niekam nepatinka žengti 17 žingsnių, norint sužinoti, kaip veikia funkcija)
  • Yra nepastebimas (kaip ir švyturėliai)
  • Lengva vartoti (patarimus nėra lengva vartoti)

Rezultatas

Aš tiesiog pradėjau kurti būsenas. Pokalbių dizainas, kurį matėte pradėjęs skaityti šį straipsnį, gali būti trijų būsenų.

1 būsena: nėra kontaktų

2 būsena: kontaktų nėra, bet nėra pokalbių

3 būsena: Čia yra ir pokalbiai, ir kontaktai

Kiekvienos būsenos tikslas yra perkelti vartotoją į kitą būseną. Kai vartotojas pereina į 3 būseną, ji sėkmingai patenka į lėktuvą. Atsižvelgiant į pokalbio maketą, kiekvienos būsenos tikslas yra toks:

1 valstybės tikslas: pagrindinis vartotojas prideda kontaktą

Žemiau pateiktame makete yra tik vienas raginimas veikti - mėlynas pliuso mygtukas, kuris leidžia vartotojui pridėti naują kontaktą. Tiek grafika, tiek tekstas privers vartotoją atlikti šį veiksmą.

1 būsena - nurodykite vartotojui pridėti kontaktus (iliustruota „undraw.co“)

Pridėję kontaktą, galime pradėti antrą tikslą.

2 valstybės tikslas: Pagrindinis vartotojas pradeda pokalbį

Žemiau pateiktame makete yra grafinis pradmuo pokalbiui pradėti. Tai aiškiai apibūdina turimas funkcijas. Vėlgi, dabar yra tik vienas dalykas, kurį galite padaryti, t. Y. Išsiųsti pranešimą. Taip pat galite paskambinti šioje vartotojo sąsajoje, tačiau abu šie veiksmai atlieka tą patį tikslą. Jie nukreipia jūsų vartotoją į 3 veiksmą.

2 būsena - kontaktas pridėtas, pirmiausia pradėkite pokalbį

3 valstybės tikslas: Nėra, vartotojas yra lipamas ant lentos - visos žymės turėtų išnykti

Galiausiai, kai jūsų vartotojas kelis kartus pakartos procesą, jos vartotojo sąsaja pradės ieškoti taip, kaip mes iš pradžių ketinome.

3 būsena - vartotojas sėkmingai įlaipinamas

Šio požiūrio pranašumai

  • Palyginus su skaidrių požiūriu 1 žingsnyje, „Onboarding Centric Design“ (OCD) pateikia turinį dalimis. Informacija prieinama priimant sprendimus.
  • Šis metodas gali būti naudojamas tiek mobiliuosiuose, tiek staliniuose įrenginiuose. Ši vartotojo sąsaja yra paprasta, tačiau sudėtingos vartotojo sąsajos atveju galite naudoti OKS su „karstais“, kad padidintumėte CTA.
  • Šis požiūris visų pirma pagerina jūsų UX, priversdamas jus galvoti apie vartotojo kelionę.
  • Jei nutinka, kad rašote savo priekinius užrašus naudodami „React“, šis požiūris puikiai tinka jo komponentų architektūrai.

Taigi, kaip nykščio taisyklė:

Projektuokite valstybių maketus.
Kiekviena valstybė turi vieną tikslą - pereiti į kitą būseną.
Paskutinė būsena yra tada, kai jūsų vartotojas yra įlipamas.

Ačiū už skaitymą :)

Sveiki, jei jums patiko šis straipsnis ir norite jį nuolat atnaujinti, stebėkite mane: „Medium“, „Github“ ar „Twitter“

Aš palaikau silpną bendruomenę (nuo 2018 m. Spalio 6 d. Joje yra 18 narių), kurioje galite padėti kitiems arba gauti pagalbos, susijusios su „frontontend“, „backend“ ir apskritai plėtra. Čia galite prisijungti.