Ciele
- Vytvoriť návrh interakcie používateľa pre svoje individuálne zadanie.
- Naučiť sa vytvárať obrazovky a prechody medzi obrazovkami v nástroji Figma.
Úvod
Na návrh interakcie používateľa s naším budúcim používateľským rozhraním použijeme diagram postupností obrazoviek (anglicky nazývaný aj UX Wireframe Flowchart (UXWF) alebo Screen Sequence Diagram). Využíva sa pri návrhu interakcie pre konkrétny prototyp na návrh toho, ako majú za sebou nasledovať jednotlivé obrazovky a aké akcie ich menia.
Na obrázku môžete vidieť rôzne stupne dizajnovania návrhu interakcie (Flow) od najmenšej po najvyššiu detailnosť:
Preštudujte si článok User flow is the new wireframe o rôznych stupňoch návrhu interakcie, obrazoviek a prototypov. Na tomto cvičení budeme vytvárať Wireflow diagram (UXWF) a User Flow diagram.
Postup
Krok 1
UXWF sa tvorí za účelom identifikovania hlavných obrazoviek, ktoré bude používateľské rozhranie obsahovať a akcií v nich, ktoré menia zobrazenie, teda návrhu interakcie. Príklad jednoduchého UXWF môžete vidieť na obrázkoch.
Poznámka
UXWF nemusí obsahovať detaily o obshau obrazoviek, no je vhodné ich aspoň schematicky naznačiť, aby bolo jasné, ktorá akcia spôsobila danú zmenu v zobrazení.
Úloha 1.1
Za účelom tvorby budúceho prototypu načrtnite jednoduchý Flow diagram interakcie používateľa pre vaše individuálne zadanie. Jednoduchý znamená, že diagram nemusí obsahovať detaily obrazoviek, no musí obsahovať ich názvy a názvy akcií, ktoré spôsobujú prechody medzi nimi. Na tvorbu rýchlych Flow diagramov môžete použiť aj nástroj Wireflow.
Krok 2
Na základe UXWF vytvoreného v predošlom kroku teraz vytvoríme User Flow diagram na úrovni prototypu priamo v nástroji Figma.
Úloha 2.1
Pripravte obrazovky vášho budúceho prototypu v nástroji Figma. Môžete využiť niektoré z nižšie opísaných postupov.
Odporúčame vytvoriť komponenty pre prvky rozhrania, ktoré sa opakujú, a tiež štýly definujúce predvolený vzhľad viacerých prvkov. Komponenty potom vkladáme do rozhrania podobne, ako na obrázku:
Osvedčené postupy:
- V celom prototype sa snažte dodržiavať preddefinované farby, štýly, fonty atď. Pokiaľ potrebujete zmeniť niektorú z preddefinovaných vlastností, urobte to globálne, aby ste dodržali konzistentnosť rozhrania.
- Ak potrebujete použiť zložitejšiu animáciu, použite gif obrázok (napr. loader).
- Ak chcete vyskúšať viaceré verzie tej istej obrazovky alebo pohľadu, karty, nakopírujte si pôvodnú verziu a pracujte v nej, aby ste sa vedeli v prípade potreby neskôr vrátiť k predošlej verzii, prípadne aby ste vedeli porovnať rozdiely. V praxi je to veľmi výhodné aj za účelom predvedenia rôznych verzií nadriadenému, alebo zákazníkovi.
- Šírky a výšky obrazoviek sa snažte dodržiavať v celom projekte, aby bolo rozhranie jednotné. Ak vytvárate iba časti obrazoviek, ponechajte zodpovedajúci rozmer podľa hlavnej obrazovky. Pre zobrazenie rozsiahlejšieho, myšou rolovateľného obsahu, iba jedhodnucho "natiahnite" obrazovku na jej spodnej strane.
- Ak potrebujete niektoré časti (napr. menu) pevne ukotviť počas rolovania obrazovky myšou, využite možnosť
Fix position when scrollingv častiConstraints.
Krok 3
Úloha 3.1
Vytvorte prechody medzi obrazovkami a vytvorte tak funkčný prototyp. Môžete sa riadiť postupom opísaným nižšie.
Kliknite na tlačidlo, po ktorom sa má vykonať prechod na inú obrazovku (v našom príklade to bude tlačidlo Continue). V pravom paneli sa prepnite na záložku Prototype. V časti Interaction vyberte akciu On click, akciu nastavte na Navigate to.
Continue
V ďalšom rozbaľovacom zozname vyberte nákres (obrazovku), na ktorú sa má navigovať po kliknutí tlačidla. V prototype sa zobrazí šípka prechodu medzi obrazovkami (angl. screen transition).
Po prepnutí naspäť na záložku Design sa všetky prechody medzi obrazovkami skryjú. Pre ich opätovné zobrazenie sa môžete kedykoľvek prepnúť naspäť na záložku Prototype.
Poznámka
Ak chcete nastaviť štartovaciu obrazovku prototypu, prepnite sa do prototypovacieho módu, kliknite na prázdnu sivú plochu mimo nákresov a v časti Starting Frame vyberte zodpovedajúcu obrazovku.
Poznámka
Ak chcete prekryť iba časť obrazovky, využite možnosť Open overlay a nastavte pozíciu prekrytia.
Úloha 3.2
Pohrajte sa s vlastnosťami jednotlivých obrazovkových prechodov v záložke Prototype, naučte sa ich používať.
Úloha 3.3
Zobrazte si vytvorený prototyp vo webovom prehliadači kliknutím na tlačidlo Present v pravej hornej časti obrazovky.
Poznámka
Pre účely odovzdávky nastavte zobrazenie prispôsobené na šírku. Ak prototypujete mobilnú aplikáciu, tento krok samozrejme vynechajte. Bežiaci prototyp v tomto stave vyzdieľate skopírovaním odkazu z prehliadača.
Zdroje
- Prednáška 4
- JustInMind: Tips and tricks for making a UX flowchart, 2018
- Alexander Handley: User flow is the new wireframe, 2018