6. diel - User Flow v UX – Mapovanie cesty zákazníka

V predchádzajúcej lekcii, {previos}, sme sa zaoberali formulári. Ukázali sme si niekoľko pravidiel a postupov ako zabezpečiť, aby boli naše formuláre užívateľsky prívetivé.

V tejto lekcii si ukážeme, ako pripraviť tzv. User Flow – cesty zákazníka webom za určitým cieľom a prečo ich potrebujeme.

User Flow – mapovanie cesty zákazníka

Keď pripravujeme webové stránky či aplikácie, potrebujeme ich designovať tak, aby boli pre užívateľov jasné a užívateľ ľahko dosiahol cieľ, aký má, keď na stránky prichádza. Našim účelom je, aby prešiel stránkami či aplikáciou jednoducho, rýchlo a bez zbytočných zádrhelov.

Často sa pri tvorbe stránok táto metóda neaplikuje. Programátor vytvorí stránky podľa obsahu, prelinkuje odkazy a je hotovo. Na takýchto stránkach ale často môže dochádzok k odlivu užívateľov z toho dôvodu, že nemôžu nájsť, čo potrebujú alebo je cesta k cieľu príliš zložitá. Preto prichádza na rad tzv. User Flow alebo mapovanie cesty zákazníka, aby sa užívateľovi jeho cesta po webe či v aplikácii spríjemnila. Ideálne je, ak je metóda User Flow zahrnutá už v samotnej tvorbe projektu.

User Flow (inak nazývané aj user journey, užívateľský scenár, cesta zákazníka) je cesta človeka po webovej stránke alebo v aplikácii, ktorá vedie k určitému cieľu alebo splneniu úlohy. Väčšinou graficky stvárnená nadväzujúcimi obrazovkami jednotlivých stránok od začiatku po cieľ.

Kedy User Flow použiť

Na User Flow musíme myslieť už v návrhu projektu. Býva ďalším krokom po vytvorení wireframu a obsahu. S ohľadom na zámer projektu je potom čas na vytvorenie návrhu nadväzujúcich krokov, ktoré užívateľ musí prejsť, aby uspokojil svoje potreby či ciele. Zameriame sa teda na celú cestu od vstupného bodu až po cieľ. Je dôležité myslieť na to, že vstupným bodom pre určitú činnosť môžu byť rôzne stránky, nie je to vždy homepage. Rovnako je dôležité myslieť na to, že cieľov budeme mať v projekte určite viac.

Aké otázky si treba zodpovedať na začiatku plánovania User Flow

Teraz sa pozrieme na to, aké otázky si treba zodpovedať na začiatku plánovania User Flow:

• Akú cestu používateľa si chceme konkrétne znázorniť? Alebo budeme mapovať celé používanie webu alebo aplikácie?

Potom pre každú cestu si zodpovieme nasledujúce:

• Čo je cieľom používateľa, ku ktorému speje?
• Kde konkrétne môže začať s danou úlohou?
• Vedie jeho cesta cez homepage alebo je možné, aby na landing page prišiel napríklad z vyhľadávania či reklamy? Premyslieť musíme všetky varianty, väčšinou ich býva viac.

Landing page je vstupná stránka, na ktorú používateľ príde s nejakým cieľom z iného webu (odkazu, reklám či vyhľadávača), na ktorú nás chce tvorca webu cieľovej landing page smerovať. Slovensky sa používa aj obrat cieľová stránka. Táto stránka má väčšinou obsah, ktorý vedie k nejakej konverznej akcii (kúpa, registrácia, objednávka atď.).

• Aké kroky má používateľ urobiť a z akého dôvodu ? Je potrebné počet týchto krokov eliminovať na nevyhnutné - čím menej, tým lepšie.
• Aké rozhodnutie bude užívateľ na svojej ceste musieť urobiť?
• Aké podmienky musí používateľ spĺňať?
• Aké varianty ciest môžu nastať? Sú všetky zrozumiteľné a nezavádzajúce?

.<>

Tieto otázky nám pomôžu zamyslieť sa nad celou cestou používateľa. Po ich zodpovedaní si môžeme začať vytvárať grafické cesty tak, aby bolo vidieť, kde všade sa môžu používatelia vo všetkých variantoch ciest vyskytnúť.

Možnosti vizualizácie User Flow

Pokiaľ už máme naplánované, aké všetky cesty chceme mapovať a kam všade môže náš užívateľ zavítať, je na mieste začať s plánovaním ciest. Cestu užívateľa si môžeme vizualizovať dvoma spôsobmi – tzv. Task Flow a Screen Flow.

Task Flow

Taks Flow je diagram, ktorý znázorňuje cestu užívateľa nejakou úlohou. Môže to byť odoslanie objednávky či registrácia, ale aj odoslanie kontaktného formulára. Naším cieľom je zamyslieť sa, ako to používateľ potrebuje urobiť, aby dospel do svojho cieľa. Ide o jednoduchšie zobrazenie ako Screen Flow. V podstate ide o lineárnu cestu bez ďalších odbočiek. Štandardné User Flow ale využíva skôr druhú metódu výstupu, a to Screen Flow.

Príklad:

Cieľ: Užívateľ chce doplniť informácie o svojich koníčkoch do profilovej stránky webu.

Užívateľ ide na domovskú stránku, kde sa prihlási. → Na svojej profilovej stránke ide do Nastavenia, kde vyhľadá záložku Koníčky. → Doplní potrebné informácie a uloží ich.

Screen Flow

Screen Flow priamo vizualizuje všetky stavy webovej stránky či aplikácie pomocou prepojených obrazov obrazoviek (teraz zobrazované hlavne ako náhľady responzívneho zobrazenia na mobilných zariadeniach). Ide o zobrazenie toho, ako presne budú ľudia interagovať s prvkami na stránke, ako ich budú ovládať a kam ich akcie povedú ďalej. Diagram môže ukazovať buď jednu cestu k zvolenému cieľu, alebo popisuje vetvenie možností pri rozhodovaní na jednom diagrame.

Príklad:

Cieľ: Užívateľ chce za pomoci aplikácie na posielanie správ poslať správu svojmu kontaktu, ktorého nemá v uložených konverzáciách, ktoré sa zobrazujú hneď po načítaní aplikácie.

Užívateľ vyhľadá aplikáciu a spustí ju kliknutím na jej ikonu. → Kliknite na ikonu zoznamu priateľov pod hlavnou obrazovkou. → Rozbalí sa mu zoznam priateľov, z ktorého si vyberie a klikne na meno dotyčného. → Otvorí sa okno na písanie správ. → Užívateľ začne písať do prázdneho poľa na písanie správ a po napísaní správy klikne na ikonu odoslať. → Správa sa zobrazí na hlavnej obrazovke konverzácie spolu s ikonou odosielateľa a časovým údajom odoslania.

Teraz je čas uchopiť myšlienky prakticky a začať vizualizovať.

Vizualizácia

Na prvé náčrty nám môže stačiť iba ceruzka aj papier. V tejto fáze si ešte ladíme priechod webom a snažíme sa vytriediť všetky zbytočné kroky a zákernosti, s ktorými by sa používateľ mohol stretnúť. Pre prezentáciu je však potrebné už vziať do rúk program na grafické znázornenie. Niektoré z nich si tu predstavíme.

Programy pre tvorbu User Flow

Aby sme si uľahčili prácu pri navrhovaní nielen User Flow, hodí sa nám napríklad niektorý z nasledujúcich programov:

• Sketch - ide o program, ktorý je už nejaký piatok k dispozícii a nemusí už úplne stačiť, býva však obľúbený. Svojím rozhraním sa podobá Adobe Illustratoru. Poslúži nám pre jednoduchú úpravu vektorových súborov a prototypovania aplikácií, chýbajú však varianty animácií.
• Adobe XD – je veľmi rýchlo sa rozvíjajúci program, ale často sa tak mení aj jeho rozhranie. Je však výhodou pre tých, ktorí pracujú s inými programami Adobe, pretože je vzájomne kompatibilný. Na ovládanie je ale zložitejšia ako Sketch, dobre sa zorientujú tí, čo pracujú s Adobe Illustratorom či Photoshopom
• InVision Studio – vyhráva v možnostiach práce s animáciou a časovou osou. Je zadarmo.
• Figma - ide o cloud-based kolaboračný nástroj, ktorý funguje v reálnom čase, takže na projekte môže súčasne pracovať niekoľko ľudí (teda až 100). Figma sa veľmi rýchlo vyvíja, a čo ešte nemá priamo integrované dopĺňa nespočetné množstvo pluginov. Je ideálny aj na wireframy, prototypy aj persony. A hlavne, Figma sa dá dobre využívať aj vo free režime.

Akonáhle máme User Flow graficky vizualizovaný a nezabudli sme na žiadnu z variant užívateľských ciest, môžeme najlepšie prejsť k ich otestovaniu. Až to potvrdí správnosť našich návrhov či nám odhalí prípadné problémy.

V ďalšej lekcii, UX: Navigačné menu , si povieme niekoľko tipov na tvorbu navigačných menu a zmienime si dôležité faktory, ktoré treba brať do úvahy pri tvorbe navigácie.