Lihtne kasutajaliidese häkkimine, et parandada UX-sisestust [OCD]

UI maketid ja visandid eeldavad, et kasutajaandmed on juba olemas. Näiteks eeldab allolev makett, et kasutajal on kontaktid, kellega vestelda, teatised ja isegi vestlusniidid.

Selle tasuta visandiressursi abil loodud lihtne messenger

Kuid see pole kunagi juhul, kui kasutaja registreerub. Alguses pole andmeid, seega tühi kontaktide veerg ja tühi vestlusaken.

Läikiv UI kujundus hõlbustab teabe tarbimist ega keskendu sellele, kuidas seda teavet luua.

Õppisin seda rasket viisi, kui suutsin nii palju Dribbble'i kasutada, et saaksin b2b-rakenduse jaoks armatuurlaua kujundada. See nägi Sketchis suurepäraselt välja, kuid meie kliendid ei suutnud seda leida.

Halb UX suurendab pardalemineku ja tugiteenuste kulusid, mõjutades otseselt tulusid. Samuti on halb vaadata, kui kasutaja üritab teie pikslite täiuslikku kujundust tarbida. Tuletab teile meelde, et ebaõnnestusite.

Olemasolevad lahendused

Üheks lahenduseks oli sissesõidu algne kasutamine slaidide nagu liidese abil. See näib olevat mobiilirakenduste standard.

Slacki slaidipõhine sisseehitatud UX

Slaidipõhise lähenemise probleem on konteksti puudumine. Slaididel saate edastada ainult nii palju (see, kui palju kasutaja säilitab, on teine ​​küsimus).

See on suurepärane tootest ülevaate andmiseks, kuid pole toote toimimise selgitamisel eriti kasulik. Minu kasutuses ei olnud sellel tähtsust, kuna toote keerukust ei suudetud mõne slaidini keeta.

Seal oli ka näpunäidete põhine lahendus, mis juhendab kasutajat konkreetsete sammude kaudu. See valik on veebirakenduste seas populaarsem. Nende voogude üles ehitamiseks on palju häid javascripti teeke.

Tööriistavihje, mis põhineb introjs.com/boarding demo

Näpunäidete põhise lahenduse osas leidsin, et need on tüütud ja klõpsasin peaaegu alati nupul „Jäta õpetus vahele”. Kuigi sellised suured ettevõtted nagu Canva, kasutavad pardaleminekul põhinevat näpunäidet. Tootega AppCues saate need tööriistavihjed ilma koodita kujundada.

Samuti on olemas majaka stiilis lähenemisviis, kus tavaliselt valesti mõistetud funktsioonid märgistatakse hõõguvate majakatega, mis annavad vajaduse korral asjakohast teavet.

See on kõige märkamatu viis. Erinevalt näpunäitest, mis jätab 17-astmelise õpetuse kurgust alla ja kaob siis, kui seda tegelikult vaja on, pakub see levialapõhine lähenemisviis teavet, kui olete selleks valmis.

Väärib märkimist, et Slack kasutab kõiki kolme vormi. Pole ime, et nende kasutajad kleepuvad. Mis vihjab ka sellele, et kinnipidamine on otse proportsionaalne pardalemineku lihtsusega.

OCD ehk Onboarding-keskne disain

Mulle meeldib asju nimetada. Nimed aitavad mõtetes realiseeruda. Kutsugem siis seda Onboarding keskseks kujunduseks.

Tahtsin lahendust, mis:

  • Oli kontekstis asjakohane
  • Ei olnud tüütu (kellelegi ei meeldi, kui funktsioon töötab, 17 sammu teha)
  • On märkamatu (nagu majakad)
  • On lihtne tarbida (nõuandeid pole lihtne tarbida)

Tulemus

Hakkasin lihtsalt osariike kujundama. Vestluse kujundus, mida nägite selle artikli lugemise ajal, võib olla kolme olekuga.

1. olek: kontakte pole

2. olek: kontaktid on olemas, kuid vestlusi ei toimu

3. olek: kohal on nii vestlused kui ka kontaktid

Iga oleku eesmärk on viia kasutaja järgmisesse olekusse. Kui kasutaja on jõudnud seisundisse 3, on ta edukalt sissepääsuplatsil. Arvestades vestluse maketi, on iga oleku eesmärgid järgmised:

Riigi 1 eesmärk: peamiseks kasutajaks kontakti lisamine

Alloleval maketil on vaid üks üleskutse - sinine plussnupp, mis võimaldab kasutajal lisada uue kontakti. Nii graafika kui ka tekst aitavad kasutajal selle toimingu teha.

1. olek - kasutajate lisamine kontaktide lisamiseks (illustreerib undraw.co)

Kui kontakt on lisatud, saame alustada teist eesmärki.

Riigi 2 eesmärk: peaminister vestluse alustamiseks

Alloleval maketil on vestluse alustamiseks graafiline praimer. Selles kirjeldatakse selgelt saadaolevaid funktsioone. Jällegi on nüüd ainult üks asi, mida saate teha, st sõnumi saata. Selles kasutajaliideses saate ka helistada, kuid mõlemad toimingud teenivad sama eesmärki. Nad suunavad teie kasutaja sammu 3 juurde.

2. olek - kontakt on lisatud, vestluse alustamiseks peate alustama

Riigi 3 eesmärk: puudub, kasutaja on pardal - kõik näpunäited peaksid kaduma

Ja lõpuks, kui teie kasutaja on seda protsessi paar korda korranud, hakkab tema kasutajaliides otsima seda, mida me algselt kavandasime.

Olek 3 - kasutaja on edukalt pardal

Selle lähenemisviisi eelised

  • Võrreldes slaidide lähenemisviisiga 1. etapis, on Onboarding Centric Design (OCD) esitanud sisu tükkidena. Teave on kättesaadav otsuse tegemise hetkel.
  • Seda lähenemisviisi saab kasutada nii mobiilseadmetes kui ka lauaarvutites. See kasutajaliides on lihtne, kuid keeruka kasutajaliidese korral saate CTA-de tõstmiseks kasutada OCD-d koos levialadega.
  • See lähenemisviis parandab teie UX-i, sundides teid mõtlema kasutaja teekonnale.
  • Kui juhtub, et kirjutate oma esikülgi Reacti abil, sobib see lähenemisviis selle komponendi arhitektuuriga kenasti.

Nii et rusikareeglina:

Kujundage olekute maketid.
Igal osariigil on üks eesmärk - liikuda järgmisesse osariiki.
Viimane olek on siis, kui teie kasutaja on pardal.

Tänud lugemise eest :)

Tere, kui teile see artikkel meeldis ja soovite end pidevalt värskendada, siis jälgige mind saidil: Keskmine, Github või Twitter

Ma hallan lohakat kogukonda (kuhu on alates 6. oktoobrist 2018 kuulunud 18 liiget), kus saate aidata teisi või saada abi kasutajaliidese, taustaprogrammi ja üldise arengu osas. Sellega saab liituda siin.