UX Metoda userflow

Userflow, aneb řešení problému?

Co je userflow? Cesta za pochopením klientova vesmíru? Načančaný pojem západních velko firem, nebo běžná praxe? Jedná se prostě o sled kroků, které uživatel absolvuje, při interakci s konkrétním řešením, problémem, systémem, nebo čímkoliv jiným. Tento sled kroků je klíčem pro naší práci. Klient je našim chlebodárcem a právě pro něj systém vytváříme v možnostech našeho vlastního frameworku. Tato metoda userflow nám umožňuje vidět klientův požadavek. Né se o něm jenom bavit, ale prožít ho, vyzkoušet a poznat. UX Researcher, ani designer nemůžou pracovat bez takové vizualizace. Protože právě ta umožní vzniku dalších konkrétních návrhů. Může ale také sloužit jako identifikace problémů, jako postup při optimalizaci řešení, či při personalizaci našeho produktu pro klienta.

Dobrá, ale co to je technicky?

Technicky se jedná o stylizovaný nákres, či diagram složený z vizuálně předem definovaných útvarů, jenž reprezentují akce, procesy, reakce, které vedou od definování problému až k řešení. Musíme si tedy jasně definovat základní pravidla pro vytváření takových nákresů. Jejich sjednocením bude pak snažší přijímat zadání od širokého spektra klientů, kteří s naší firmou spolupracují. Pro celou metodiku naleznete šablony v kapitole Workshop. Nicméně je dobré si projít i zbytek těchto informací. Při vytváření userflow diagramů bychom měli dodržovat několik zásad:

Identifikace problému: Prvním krokem je určení cíle, kterých chceme daným diagramem řešit. Může to být například konkrétní funkce, bug, problém, nebo i celý formulář. Velikost a propracování daného nákresu je neomezená, čím více ale zmapujeme uživatelskou flow, tím lépe se bude s návrhy pracovat.
Start a cíl: Každá cesta někde začíná. A cílem je právě úspěšné řešení klientova problému. Takové dva body se většinou označí barevným kroužkem. A mezi nimi právě vzniká flow. Geometrické útvary mají samozřejmě své popisky.
Určení interakčních bodů: Identifikujte přesně ty části ve kterých klient musí s řešením interreagovat. Je zvyklý klikat tam, nebo jinam? Kolik kroků musí provést, aby vyřešil svůj problém? Je zvyklý hledat určité elementy v konkrétních místech? Interakční body mohou symbolizovat celé stránky, nebo jen konkrétní widgety, či dokonče tlačítka. Opět platí, že čím víc dokážeme návrh specifikovat, tím spíše dojde UX Designer k pochopení při realizaci wireframů. Userflow může tedy být klidně i jednoduchým nákresem stránky. Klidně i s tlačítky na správných místech. Opět, ale nechceme všechny tlačit do práce navíc a stačí nám i pouhé tlačítka s popisky. Interakční body oznařujeme typicky obdelníkem, podobně jako znáte tlačítka.
Akce a reakce: Interakční body často vyžadují akci. Tlačítko se musí zmáčknout, aby člověk mohl ve flow pokračovat. A to přirozeně vyvolává reakce. Ve většině případů očekávané, ale někdy je potřeba také zachytit co se stane, když systém narazí na problém. Taková interakce se musí také správně zachytit. Typicky barevnou pikou, která značí reakční body. Představme si to jednoduše. Zmáčkneme na obdelníček s otázkou “Přihlášení” po zadání údajů. Jaké jsou pikové reakce? A) Správné heslo a pokračování do dalšího bloku. Nebo b) Špatné heslo a řešení dalšího problému.
Vodítka: Možná Vás také napadá, že potřebné geometrické tvary, je potřeba propojit. To můžeme dělat pomocí klasických šipek v toku flow. Pokud tok něco naruší, například chybné heslo, jako v našem příkladu, tak využijeme například šipku s šafrovaným táhlem, abychom odlišili přirozený tok.

To je vše?

Jak vidíte, nejedná se o složitý proces. Máme kolečka, obdelníčky, piky a čárky. To je naprostý základ. Návrh se dá samozřejmě ještě rozšířit, jak jsme si zmiňovali. Ideální stav je hybridní návrh mezi popsaný userflow diagramem a počátečním wireframem. Zkušenější researcher může například odlišit okno dané aplikace, či widgetu jinou barvou a zaoblením obdelníku a tlačítka napříkad přímo vnořit přímo do nich jinou barvou. Ne všech případech je to ale možné a leckdy ani sám klient nemusí vědět, jak má dané řešení vypadat, nebo třeba hledá změnu a neví přesně kde a v čem. Userflow však není o tom nastavit ideální řešení. Pořád hledáme jenom ten způsob myšlení, tok klienta.

Jak tohle všechno řešit?

Naštěstí jednoduše! Máme totiž Figma Jam. Ideální program, který umožní vytvářet šablony, filtrovat, uspořádávat do složek a mnoho dalších užitečných funkcí pro naše prostředí. A co je na tom nejlepší? Celkové ovládání jsou prakticky 3 tlačítka. Tento program nám tedy značně zjednodušil práci a navíc umožnil vytvořit dostatečné šablony jak pro userflow diagramy, tak i pro záznamové archy interview, či pro tvoření person. Pro celou tvorbu navíc na šabloně najdete i legendu s doporučením a vysvětlením všech tvarů. Pro šablonu, či jiné konzultace kontaktujte UX oddělení.

Userflow a persony

V kapitole o Personách jsme mluvili o využití co nejvtětšího spectra klientů. I zde platí, že pro každého z nich vytváříme individuální ux workflow diagram.