Jak pomocí diagramů rozmýšlím návrh řešení

Je to o cestě k cíli

Poprvé jsem se s flow diagramy setkal v době, kdy jsem se učil programování. Běžně se totiž používají pro návrh funkční architektury. (I já jsem je pro tento účel používal.)

Nejsem zrovna příznivcem komplikovaností. Například v podobě „zamotaných“ diagramů, ve kterých vše souvisí se vším. A i když to skvěle ilustruje funkční propojení a celky, z mého pohledu není vidět to nejdůležitější – jak lidé dosáhnou toho, co potřebují.

S podobnými diagramy jsem ale také párkrát experimentoval. Ale nikdy to příliš dobře nedopadlo. Například:

• Jsem se po nějaké době začal v diagramu ztrácet a chápat jednotlivé vazby.
• Lidé měli problém pochopit, jak bude vlastně produkt fungovat.

Pro mě je při návrhu řešení důležité rozmyslet, jak lidé dosáhnou svého cíle. Tedy způsob, kterým je design k jejich cíli dovede. (Zamyslel jsem se o tom například v článku Používejte příběhy v designu.)

Ať už v případě řešení mluvíme o webu, aplikaci nebo čemkoliv jiném, stále je to o tom, že cesta k takovému cíli musí být co nejjednodušší. Například:

• Na webu by se lidé měli snadno dostat ke konkrétnímu obsahu.
• V aplikaci by lidé měli snadno vytvořit vizualizaci, nový článek, zadat potřebné údaje, atp.

A právě tuto cestu je potřeba definovat a promyslet. S čím flow diagram opravdu pomůže.

Zároveň je potřeba si uvědomit, že člověk s produktem určitým způsobem interaguje. A dwsigner by měl interakce pro dané flow promyslet a vhodně navrhnout.

Bohužel hodně designérů přemýšlí ve formě stránek a určitém rozložení prvků. Jenže interakce s produktem není o stránkách nebo o tom, kam člověk klikne. Je to celkově o tom, jak daný člověk používá. Například, že:

• Čte popisky (nebo obsah).
• Přemýšlí a „vyhodnocuje“ konkrétní informace.
• Kliká a posouvá stránky.
• Interaguje i s dalšími prvky, které nemusí být nutně součástí produktu. Například, diskutuje s kolegou, používá zároveň další produkt, atp.

A tak podobně. Z mého pohledu jsou totiž stránky a obrazovky pouze konkrétní reprezentační forma pro ovládání digitálních produktů.

Z toho důvodu rozděluji diagram na jednotlivé cesty (nebo spíš tzv. tasks). Kterými člověk musí projít, aby dosáhl čeho potřebuje.

Vytvořím tak nejen přehlednou a jasnou cestu. Ale také si ujasním a určím konkrétní priority v rámci řešení. Například:

• Význam a důležitost jednotlivých prvků, se kterými budou lidé interagovat.
• Vstupní body (tzv. touch points), díky kterému mohou lidé danou cestou projít.
• Potřeby visuální hierarchie a informací.

A tak podobně.

Je pravda, že pokud lidé nemají s podobnými diagramy žádnou zkušenost, příliš jim nerozumí a neumí se v nich orientovat. Z mého pohledu není vůbec těžké se je naučit používat. Podle mě je to pro design velice užitečný nástroj.

Rozkrýváme stavy a interakce

Vždy dělám vše pro to, abych vymyslel co nejjednodušší způsob interakce. Často se přistihnu jak přemýšlím nad tím, jak to udělat tak, aby lidé mohli produkt používat co nejméně. A ideálně vůbec.

Před konkrétním návrhem si vždy položím několik otázek. Například:

Co je startovním bodem a co má být výsledkem?
Jaké kroky jsou nezbytné, aby člověk mohl vůbec začít a skončit?

A když mám konkrétní odpovědi a nějaké nápady, začnu myšlenkám dávat jasnou formu. K čemuž využívám právě zmiňované diagramy a jejich „zaběhnuté“ konvence a pravidla (například viz Flowcharts Symbols Defined).

Začnu tak v podstatě definovat, jak budou lidé produkt používat. A jak by měl právě produkt z pohledu člověka fungovat. Tedy skutečně vytvářet design produktu.

Zkusme si to představit na příkladu jednoduchého scénáře:

„Chci kamarádům poslat fotografii vyfocenou na společné akci.“

V následujících pár bodech se pokusím rozvést, proč a jak dané flow stavím.

Definice cesty a kroků

Člověk vždy musí někde začít a skončit s tím, co potřeboval. Pro mě to jsou z pohledu designu ty nejdůležitější části. Lidé totiž musí snadno najít a využít způsob, jakým dosáhnout kýženého výsledku. A skutečně jej dosáhnout.

Pomocí definice vstupních a výstupních bodů si pro dané flow vytvořím funkční základ. A vymýšlím, jak jej zasadit do správného kontextu.

Abych byl vůbec schopen začít, musím mít ale dostatek informací. Například potřeby lidí a jejich cíle, atp. S čímž mi pomůže například:

• Prototypování,
• User research.

Získám tak inspiraci a představu o tom, co lidé potřebují.

Pro náš příklad bychom mohli zjistit spoustu zajímavých informací, například:

• Lidé potřebují obrázek před odesláním upravit. Například jej zmenšit, oříznout, atp.
• Chtějí jej sdílet pouze konkrétním lidem. Například pomocí emailu, sociálních sítí, atp.

Což bude mít na podobu a správnost řešení vliv.

A pokud bychom flow rozdělili do jednotlivých úkolu, budeme mít tři části, kterými budou lidé procházet:

1. Nahrát obrázek,
2. Upravit obrázek,
3. Sdílet obrázek.

Jednotlivé úkoly typicky promýšlím odděleně. Hlavně pokud jsou trochu komplikovanější. A pokud mám například více variant a možností, snažím se je propojit a najít ten nejlepší způsob.

Mně osobně se takto mnohem lépe přemýšlí. Mohu se soustředit na samotný úkol. A různé možnosti a souvislosti. (I když asi vždy podvědomě přemýšlím v rámci daného celku.)

Tímto způsobem si vytvořím funkční základ pro řešení. A začnu přemýšlet nad jednotlivými kroky a interakcemi. Například:

• Co se stane v dalším kroku a co danému kroku předcházelo.
• S čím a jak budou lidé interagovat. A proč.

Právě interakce je v daném flow velice důležitá. A proto se na ní v dalších krocích zaměřím.

Interakce

Základ pro flow již mám vytvořený. Začnu tedy promýšlet jednotlivé kroky, kterými budou lide procházet. A s čím budou lidé interagovat. Například:

• Jaké informace budou lidé číst.
• S jakými elementy budou pracovat, například scrollování, klikání, atp.
• Které informace potřebují v rámci kroků, abychom nepřetěžovali krátkodobou paměť.

Flow rozdělím do jednotlivých kroků. A doplním je o informace o interakci. Nebo je doplním formou popisků a symbolů k jednotlivým funkčním krokům (k čemuž jsem se inspiroval od Petra Štědrého).

To mi pomáhá si ujasnit, co je důležité a na co je potřeba se zaměřit. Například, že člověk:

• Musí v daném kroku najít položku, se kterou chce pracovat.
• S danou položkou začne nějak pracovat (například kliknutím), aby se dostal dál.
• Bude potřebovat snadno najít konkrétní položku.

A tak podobně.

Díky tomu si lépe uvědomím skutečnosti, které s danou interakcí souvisí. A které musím vzít v potaz. Například:

• Omezení a možnosti lidské percepce,
• Pravidla typu Fitt’s Law,
• Možnosti lidské paměti.

Vytvořím si tak i seznam konkrétních hypotéz. Na které se pomocí testování použitelnosti snažím získat odpověď.

Z mého pohledu je důležité tyto aspekty rozmyslet. Protože si ujasníme například vizuální priority, formu zobrazení konkrétních informací, affordances, atd.

Poznámka: pokud bychom podobné mapování interakcí dovedli skutečně až do finále, mohli bychom využít metodu Keystroke-level Modeling a flow optimalizovat.

Co když … aneb další stavy (situace)

Lidé mohou při práci s digitálním produktem dospět do stavu, který není zrovna ten ideální. Například:

• Může dojít k nějaké systémové nebo uživatelské chybě.
• Budou muset počkat na další krok. Například při nahrávání informací nebo souborů.

A tak podobně.

Z mého pohledu by měl být návrh řešení ve výsledku promýšlen a navržen do posledního detailu. A měl by počítat se všemi stavy.

Proto do flows takové stavy zahrnuji a snažím se pro ně najít co nejlepší řešení. Aby se lidé dokázali s danou situací co nejlépe vypořádat (například když nastane nějaká chyba).

V případě již alespoň částečně připraveného diagramu se také s určitým odstupem zamyslím nad podle mě klíčovými body, například:

• Které kroky jsou nezbytné a které je možné vynechat?
• Nezapomněl jsem na některý ze stavů nebo kroků?
• Jsou jednotlivé kroky opravdu logicky za sebou?

Typicky si flow vytisku na papír a odpovídám si na otázky typu:

• Co lidé potřebují?
• Co se může stát, když …?
• Jsou interakce přímočaré a odpovídají možnostem člověka?

Diagram tak mohu ještě upravit. A v podstatě mám jasnou představu a ukázku toho, jak by měl produkt fungovat a jak jej budou lidé používat.

Využiji toho totiž v jednom z posledních kroků, ve kterém dávám řešení konkrétní podobu.

Detailní rozpracování

Pro takto vytvořené flow v podstatě zbývá jestě poslední krok – dát řešení konkrétní formu v kontextu produktu.

Proto opětovně přemýšlím nad vytvořeným flow a jednotlivými kroky. A snažím se je spojit v rámci stránky (obrazovky). Aby byla interakce jednodušší a souvislá.

Osobně se rozhoduji podle několika faktorů. Například:

• Které informace a kroky spolu úzce souvisí.
• Zda jsou kroky součástí daného tasku.
• Zda je nutné vyčkávat na konec určité operace.

A tak podobně.

Ve finále tak mám jasnou koncepci pro řešení v rámci digitálního produktu. A už mi jen zbývá návrh ověřit. A pokud bude potřeba, tak iterativně zlepšovat.

Navrhujte přímočaré produkty

Ať už navrhujeme jakékoliv řešení (nejen weby nebo aplikace), vždy bychom měli mít jasno, jak s ním budou lidé pracovat. A připravit jim co nejsnazší způsob.

Není to jen o návrhu a spojování stránek. Ale o tom, dovést lidi co nejrychleji k bodu, kvůli kterému přišli a kvůli čemu produkt používají.

Mně osobně flow diagramy pomáhají promyslet řešení opravdu do detailu. Protože se díky nim mohu na návrh podívat trochu s „odstupem“. A často tak zjednodušit některá místa, stavy a interakce.

Vždy mi to ve výsledku ušetřilo čas při iterování návrhu, diskuzích s programátory a Product Managerem. A také mi to pomohlo zůstat nohama na zemi v tom, co dělám. A držet se toho, jak by měl pro lidi co nejlépe fungovat.