Yksinkertainen käyttöliittymä hakkeri parantaa Onboarding UX -sovellusta [OCD]

Käyttöliittymämalleissa ja luonnoksissa oletetaan, että käyttäjätiedot ovat jo olemassa. Esimerkiksi alla oleva malli olettaa, että käyttäjällä on yhteyshenkilöitä, joiden kanssa keskustella, ilmoituksia ja jopa chat-ketjuja.

Tämän ilmaisen luonnosresurssin avulla rakennettu yksinkertainen Messenger-käyttöliittymä

Mutta näin ei ole koskaan, kun käyttäjä kirjautuu sisään. Alussa tietoja ei ole, joten tyhjä yhteyshenkilösarake ja tyhjä chat-ikkuna.

Kiiltävä käyttöliittymäsuunnittelu helpottaa tiedon kuluttamista eikä keskity tiedon luomisen tapaan.

Olen oppinut tämän vaikean tavan, kun imein niin paljon Dribbblea, että pystyin suunnittelemaan kojelaudan b2b-sovellukselle. Se näytti hyvältä Sketchiltä, ​​mutta asiakkaamme eivät löytäneet tiensä läpi.

Huono UX kasvattaa koneeseen nousemisen ja tukikustannuksia vaikuttaen suoraan tuloihin. On myös huono katsella, kun käyttäjä yrittää kuluttaa pikselisi täydellistä suunnitteluasi. Muistuttaa, että epäonnistit.

Olemassa olevat ratkaisut

Yksi ratkaisu oli saada etukäteen ajoneuvoon pääsy käyttäen dioja kuten käyttöliittymää. Tämä näyttää olevan mobiilisovellusten standardi.

Slackin liukupohjainen sisäänpääsyn UX

Diaesitysmenetelmän ongelma on kontekstin puute. Voit välittää dioissa vain niin paljon (kuinka suuri käyttäjän säilytys on toinen kysymys).

Se on hieno, kun antaa yleiskuvan tuotteesta, mutta ei kovin hyödyllisesti tuotteen toiminnan selittämisessä. Sillä ei ollut merkitystä käyttötapauksessani, koska tuotteen monimutkaisuutta ei voitu keittää muutamiin dioihin.

Oli myös työkaluvihjepohjainen ratkaisu, joka ohjaa käyttäjää tiettyjen vaiheiden läpi. Tämä vaihtoehto on suosittu verkko-sovelluksissa. On monia hyviä javascript-kirjastoja, jotka auttavat sinua rakentamaan nämä virrat.

Työkaluvihje, joka perustuu introjs.com: n lennolle pääsyn esittelyyn

Työkaluvihjeisiin perustuvan ratkaisun kohdalla löysin ne ärsyttäviksi ja napsautin melkein aina ”ohita opetusohjelma”. Vaikka Canvan kaltaiset suuret yritykset käyttävät työkaluvihjeitä, jotka perustuvat lennolle. AppCues-nimisen tuotteen avulla voit suunnitella nämä työkaluvihjeet ilman koodia, siistiä.

On olemassa myös majakkatyylinen lähestymistapa, jossa yleisesti väärin ymmärretyt ominaisuudet on merkitty hehkuvailla majakoilla, jotka antavat tarvittavaa tietoa tarvittaessa (jos).

Tämä on huomaamattomin tapa. Toisin kuin työkaluvihje, joka ajaa 17-vaiheisen opetusohjelman kurkkuun ja katoaa, kun todella tarvitset sitä, tämä hotspot-pohjainen lähestymistapa tarjoaa tietoja, kun olet valmis.

On syytä mainita, että Slack käyttää kaikkia kolmea lomaketta. Ei ihme, että niiden käyttäjät pitävät kiinni. Mikä viittaa myös jotenkin siihen tosiseikkaan, että pidättäminen on suoraan verrannollinen alukseen nousun helpottamiseen.

OCD eli aluksella keskeinen suunnittelu

Tykkään nimetä asioita. Nimet auttavat toteuttamaan ideoita mielessä. Joten kutsutaan tätä Onboarding-keskittymistä.

Halusin ratkaisun, joka:

  • Oli merkityksellinen tilanteessa
  • Ei ollut ärsyttävää (kukaan ei halua ottaa 17 askelta oppiaksesi, kuinka ominaisuus toimii)
  • On huomaamaton (kuten majakat)
  • On helppo kuluttaa (työkaluvihjeitä ei ole helppo kuluttaa)

Tulokset

Aloitin yksinkertaisesti valtioiden suunnittelun. Tämän artikkelin lukemisen aikana nähmäsi chat-suunnittelussa voidaan suunnitella kolme tilaa.

Tila 1: Kontakteja ei ole

Tila 2: Yhteystiedot ovat läsnä, mutta ei keskusteluja

Tila 3: Sekä chatit että yhteyshenkilöt ovat läsnä

Kunkin tilan tavoitteena on viedä käyttäjä seuraavaan tilaan. Kun käyttäjä on edennyt tilaan 3, hän on onnistuneesti noussut sisään. Kun otetaan huomioon chat-malli, kunkin tilan tavoitteet ovat seuraavat:

Valtion tavoite 1: Pääkäyttäjä lisätä kontaktin

Alla olevassa mallinnuksessa on vain yksi toimintakehotus, sininen plus-painike, jonka avulla käyttäjä voi lisätä uuden yhteystiedon. Grafiikka ja teksti molemmat käyttäjää käyttävät kyseisen toimenpiteen toteuttamisessa.

Tila 1 - Päätä käyttäjä, jotta voit lisätä yhteystietoja (kuva undraw.co)

Kun yhteyshenkilö on lisätty, voimme aloittaa toisen tavoitteen.

Valtion tavoite 2: Pääkäyttäjä keskustelun aloittamiseksi

Alla olevassa mallinnuksessa on graafinen pohja chatin aloittamiseksi. Siinä hahmotellaan selvästi käytettävissä olevat ominaisuudet. Jälleen kerran on vain yksi asia, jonka voit tehdä nyt, eli lähettää viestin. Voit soittaa puhelun myös tässä käyttöliittymässä, mutta molemmat nämä toiminnot palvelevat samaa tarkoitusta. He vievät käyttäjän vaiheeseen 3.

Tila 2 - Yhteys lisätty, ensisijainen keskustelun aloittamiseksi

Valtion 3 tavoite: Ei mitään, käyttäjä on noussut kyytiin - kaikkien vihkojen tulisi katoavat

Ja lopuksi, kun käyttäjä on toistanut prosessin muutaman kerran, hänen käyttöliittymänsä alkaa etsiä tavasta, jonka alun perin tarkoitimme.

Tila 3 - käyttäjä on menestyksekkäästi noudettu

Tämän lähestymistavan edut

  • Verrattuna diojen lähestymistapaan vaiheessa 1, Onboarding Centric Design (OCD) esittää sisällön paloina. Tiedot ovat saatavilla päätöksentekopisteessä.
  • Tätä lähestymistapaa voidaan käyttää sekä mobiililaitteissa että pöytätietokoneissa. Tämä käyttöliittymä on yksinkertainen, mutta jos kyseessä on monimutkainen käyttöliittymä, voit käyttää OCD-yhteyspistettä nostamalla CTA: ita.
  • Tämä lähestymistapa parantaa ensin UX: tä, pakottaen sinut ajattelemaan käyttäjän matkaa.
  • Jos satut kirjoittamaan etusivusi Reaktin avulla, tämä lähestymistapa sopii hyvin komponenttiarkkitehtuuriinsa.

Joten nyrkkisääntönä:

Suunnittele mallit valtioille.
Jokaisella valtiolla on yksi tavoite - eteneminen seuraavaan tilaan.
Viimeinen tila on, kun käyttäjän on nousussa.

Kiitos lukemisesta :)

Hei, jos pidit tästä artikkelista ja haluat pitää ajan tasalla, seuraa minua: Medium, Github tai Twitter

Minulla on löysä yhteisö (jolla on 18 jäsentä 6. lokakuuta 2018 alkaen), jossa voit auttaa toisia tai saada apua käyttöliittymästä, taustajärjestelmästä ja kehityksestä yleensä. Voit liittyä siihen täällä.