Ciele
- Vytvoriť ručne kreslený papierový prototyp.
- Prepojiť stavy rozhrania podľa pripravených scenárov.
- Navrhnúť dve alternatívy dôležitej interakcie.
- Dokončiť prvú odovzdávku zadania.
Úvod
Na základe scenárov vytvoríte prvý prototyp ručne na papieri. Povinným výstupom je jeden prepojený diagram postupnosti obrazoviek alebo stavov, ktorý zachytáva interakciu a zmeny rozhrania bez vizuálneho detailu.
V počiatočných fázach dizajnu, v ktorých sa práve nachádzame, sa využívajú nákresy obrazoviek s nízkou vernosťou (Low Fidelity), teda schématické nákresy bez podrobných detailov. Proces ich vytvárania sa zvykne nazývať aj wireframing a jednotlivé nákresy sa nazývajú wireframes.
Na obrázku sú rôzne stupne návrhu interakcie od nízkej po vysokú vernosť.
Postup
Krok 1: Príprava prototypu
Úloha 1.1
Pripravte si hlavný scenár a relevantný problémový scenár z minulého cvičenia. Označte kroky, ktoré musia byť v prototype viditeľné.
Úloha 1.2
Pripravte si samostatné papiere alebo papierové kartičky pre jednotlivé stavy rozhrania. Každý stav označte názvom alebo číslom kroku scenára.
Krok 2: Kreslenie stavov
Úloha 2.1
Ručne nakreslite jednotlivé stavy rozhrania. Použite jednoduché tvary, textové zástupné symboly a minimum farieb. Jasne označte prvky, s ktorými môže používateľ interagovať. Môžete si pripraviť aj menšie časti rozhrania, ktoré budete počas budúceho testovania meniť na papierovej obrazovke.
Poznámka
Nehodnotí sa kvalita kresby ani vizuálne spracovanie. Náčrt musí byť čitateľný a dostatočný na prejdenie scenára. Nie je stanovený minimálny počet obrazoviek.
Úloha 2.2
Ku každému náčrtu doplňte príbeh používateľa (napr. PP01), číslo kroku scenára a podľa potreby stručnú poznámku.
Krok 3: Dve alternatívy interakcie
Úloha 3.1
Vyberte jednu dôležitú alebo neistú interakciu a nakreslite dve odlišné riešenia. Pri oboch uveďte:
- čo zostáva rovnaké,
- v čom sa riešenia líšia,
- výhodu a riziko každého riešenia.
Vyberte riešenie, s ktorým budete pokračovať, a stručne zdôvodnite výber pomocou zistení z výskumu a scenára.
Poznámka
Alternatívy nemajú byť iba dve vizuálne úpravy tej istej obrazovky. Musia predstavovať odlišný spôsob vykonania interakcie alebo usporiadania krokov.
Krok 4: Prepojenie prototypu
Pri vetvení postupnosti môžete vychádzať z mapovania scenára (1:08) z predchádzajúceho cvičenia.
Úloha 4.1
Rozložte kartičky podľa scenára a pomocou šípok vyznačte:
- akciu používateľa,
- nasledujúci stav,
- vetvenie pre problémový scenár,
- návrat alebo opravu, ak je relevantná.
Krok 5: Prenesenie do FigJam
Úloha 5.1
Papierové náčrty odfotografujte pri dobrom osvetlení. Fotografie orežte tak, aby boli čitateľné, a vložte ich do novej sekcie FigJam s názvom „Papierový prototyp“.
Vo FigJam môžete fotografie vložiť pretiahnutím súborov na plochu alebo cez nástroj Place image. Následne:
- usporiadajte fotografie podľa scenára,
- prepojte ich pomocou
Connector, - k šípkam doplňte akcie používateľa,
- pridajte odkazy na príslušné kroky scenára,
- označte hlavný scenár, problémový scenár a obe alternatívy.
Fotografie náčrtov a ich prepojenia tvoria jeden odovzdávaný výstup. Samostatná sada fotografií bez vyznačených akcií a prechodov sa nepovažuje za dokončený papierový prototyp.
Upozornenie
Digitálne prekreslený alebo vygenerovaný návrh nenahrádza požadovaný ručne kreslený papierový prototyp.
Krok 6: Kontrola prototypu
Úloha 6.1
Prejdite prototyp krok po kroku a skontrolujte, či:
- umožňuje dokončiť hlavný scenár,
- obsahuje relevantný problémový stav,
- pri každej akcii poskytuje zrozumiteľnú spätnú väzbu,
- používa konzistentné pojmy identifikované počas analýzy,
- obsahuje dve alternatívy vybranej interakcie,
- sú všetky fotografie a odkazy čitateľné,
- obsahuje deklaráciu použitia generatívnej AI podľa pravidiel predmetu.
Môžete pri tom spolupracovať so spolužiakmi z minulého cvičenia.
Krok 7: Odovzdávka č. 1
Úloha 7.1
Usporiadajte odovzdávané časti vo FigJam a jasne ich označte. Skontrolujte zdieľanie projektu a platnosť odkazov. Následne odovzdajte prvú časť zadania podľa pokynov.
Zdroje
- Prednáška 4
- JustInMind: Tips and tricks for making a UX flowchart, 2018
- Alexander Handley: User flow is the new wireframe, 2018