Jednoduchý hack UI na zlepšenie Onboarding UX [OCD]

Makety a náčrty používateľského rozhrania predpokladajú, že už sú k dispozícii údaje používateľa. Napríklad maketa uvedená nižšie predpokladá, že používateľ bude mať kontakty, s ktorými bude chatovať, upozornenia a dokonca aj vlákna rozhovoru.

Jednoduchý messenger ui postavený pomocou tohto bezplatného zdroja skici

To sa však nikdy nestane, keď sa používateľ zaregistruje. Na začiatku neexistujú žiadne údaje, takže prázdny stĺpec kontaktov a prázdne okno rozhovoru.

Lesklý dizajn používateľského rozhrania uľahčuje prijímanie informácií a nezameriava sa na to, ako tieto informácie vytvoriť.

Naučil som sa to tvrdo, keď som nasiakol toľko Dribbble, že som mohol navrhnúť prístrojovú dosku pre aplikáciu b2b. Na aplikácii Sketch to vyzeralo skvele, ale naši zákazníci sa nedokázali presadiť.

Bad UX zvyšuje náklady na palubu a podporu, čo má priamy vplyv na príjmy. Je tiež zlé pozerať sa na používateľa, ktorý sa snaží spotrebovať dokonalý dizajn svojich pixelov. Pripomína vám, že ste zlyhali.

Existujúce riešenia

Jedným z riešení bolo mať vopred zabudovanú palubnú dosku s použitím snímok, ako je rozhranie. Toto sa javí ako štandard pre mobilné aplikácie.

Palubné UX spoločnosti Slack na snímke

Problém s prístupom k snímkam je nedostatok kontextu. Na diapozitívoch môžete vyjadriť iba toľko informácií (koľko si užívateľ ponecháva, je iná otázka).

Je to skvelé pre poskytnutie prehľadu o produkte, ale nie veľmi užitočné pri vysvetľovaní toho, ako produkt funguje. Pre môj prípad použitia to nebolo relevantné, pretože zložitosť produktu sa nedala variť až na niekoľko podložných sklíčok.

K dispozícii bolo aj riešenie založené na popise, ktoré používateľa prevedie konkrétnymi krokmi. Táto možnosť je obľúbenejšia vo webových aplikáciách. Existuje veľa dobrých knižníc javascript, ktoré vám pomôžu zostaviť tieto toky.

Popis založený na zabudovanom demonštrácii pre introjs.com/

Pokiaľ ide o riešenie založené na popise, zistil som, že sú nepríjemné, a takmer vždy som klikol na „skokový návod“. Aj keď veľké spoločnosti ako Canva používajú popis založený na palubnej doske. Produkt s názvom AppCues vám umožňuje navrhnúť tieto popisy bez kódu.

Existuje aj prístup majákového štýlu, kde sú často nepochopené prvky označené žeravými majákmi, ktoré v prípade potreby poskytujú relevantné informácie.

Toto je najviac nenápadný spôsob. Na rozdiel od popisu, ktorý strčí 17-krokový tutoriál do krku a zmizne, keď ho skutočne potrebujete, tento prístup založený na prístupových miestach poskytuje informácie, keď ste pripravení.

Za zmienku stojí, že Slack používa všetky tieto 3 formuláre. Niet divu, že sa ich používatelia držia. To tiež nejako naznačuje, že zadržiavanie je priamo úmerné ľahkému nástupu do lietadla.

OCD aka Onboarding centrický dizajn

Páči sa mi pomenovanie vecí. Mená pomáhajú zhmotniť myšlienky v mysli. Nazvime to tento centricky zameraný dizajn.

Chcel som riešenie, ktoré:

  • Bol relevantný pre kontext
  • Nebol nepríjemný (nikto nemá rád 17 krokov, aby zistil, ako funkcia funguje)
  • Je nenápadný (ako majáky)
  • Ľahko sa konzumuje (popisky sa nedajú ľahko konzumovať)

výsledok

Jednoducho som začal navrhovať štáty. Dizajn chatu, ktorý ste videli pri čítaní tohto článku, môže byť navrhnutý s tromi stavmi.

Stav 1: Nie sú prítomné žiadne kontakty

Stav 2: Kontakty sú prítomné, ale nie sú v chate

Stav 3: Sú prítomné rozhovory aj kontakty

Cieľom každého štátu je posunúť používateľa do nasledujúceho stavu. Keď používateľ prejde do stavu 3, je úspešne nalodená. Vzhľadom na maketu chatu sú ciele pre každý štát tieto:

Cieľ č. 1: Hlavný používateľ na pridanie kontaktu

Maketa uvedená nižšie má iba jednu výzvu na akciu, modré tlačidlo plus, ktoré umožňuje používateľovi pridať nový kontakt. Grafika aj text sú pre používateľa prvoradé, aby vykonal túto akciu.

Stav 1 - Pripravte používateľa na pridanie kontaktov (obrázok: undraw.co)

Po pridaní kontaktu môžeme začať s druhým cieľom.

Cieľ č. 2: Hlavný používateľ na začatie rozhovoru

Maketa uvedená nižšie obsahuje grafický základný materiál na začatie rozhovoru. Výslovne popisuje dostupné funkcie. Teraz môžete urobiť iba jednu vec, t. J. Poslať správu. V tomto používateľskom rozhraní môžete tiež volať, ale obe tieto akcie slúžia na rovnaký účel. Berú vášho používateľa na krok 3.

Stav 2 - kontakt bol pridaný, pripravte sa na rozhovor

Cieľ 3: Žiadne, používateľ je na palube - všetky narážky by mali zmiznúť

A konečne, keď váš používateľ niekoľkokrát zopakoval proces, jej používateľské rozhranie začne hľadať spôsob, ako sme pôvodne zamýšľali.

Stav 3 - Používateľ je úspešne nalodený

Výhody tohto prístupu

  • V porovnaní s prístupom k snímkam v kroku 1 predstavuje program Onboarding Centric Design (OCD) obsah v kúskoch. Informácie sú k dispozícii v momente rozhodovania.
  • Tento prístup sa dá použiť na mobilných aj stolných zariadeniach. Toto používateľské rozhranie je jednoduché, ale v prípade zložitého používateľského rozhrania môžete na zvýšenie CTA použiť OCD s aktívnymi bodmi.
  • Tento prístup zlepšuje vaše UX predovšetkým tým, že vás núti premýšľať o ceste používateľa.
  • Ak náhodou píšete svoje rozhrania pomocou nástroja React, tento prístup úhľadne zapadá do architektúry komponentov.

Takže spravidla:

Návrh makiet pre štáty.
Každý štát má jeden cieľ - postup do ďalšieho stavu.
Posledný stav je, keď je váš užívateľ na palube.

Vďaka za prečítanie :)

Ahoj, ak sa vám tento článok páčil a chcete ho priebežne aktualizovať, sledujte ma na: Medium, Github alebo Twitter

Prevádzkujem nepokojnú komunitu (ktorá má od 6. októbra 2018 18 členov), kde môžete pomáhať ostatným alebo prijímať pomoc týkajúcu sa frontendu, backendu a rozvoja všeobecne. Môžete sa k nemu pripojiť tu.