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

Když jsem na jednom ze srazů Frontendisti.cz povídal o tom, jak v GoodData spolupracujeme s vývojáři, na jeden snímek reagoval jeden z účastníků tak, že podobný diagram nikdy od designéra neviděl.

Ukazoval jsem na něm tzv. formal process flow diagram (vývojáři jej určitě znají). Který popisoval a definoval fungování jedné z připravovaných GoodData aplikací.

Běžně podobné diagramy při návrhu používám. Protože díky nim mohu poměrně snadno rozmyslet, ucelit a navrhnout jak samotné flow, tak i interakce, stavy, atp. A ve výsledku tak připravit detailní a ucelený 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í.

Příklad „zamotaného“ diagramu, ze kterého nelze snadno vyčíst, jak má řešení vlastně fungovat.
Příklad „zamotaného“ diagramu, ze kterého nelze snadno vyčíst, jak má řešení vlastně fungovat. A jak jej budou lidé používat.

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.

Příklad interakce s produktem
Interakce s produktem je mnohem komplexnější než jen pouhé klikání. Je to i o tom, jak lidé čtou a „vyhodnocují“ různé informace, pohybují s myší, atp.

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.

Jeden úkol, jedna cesta. Jak lidé dosájnout toho, co potřebují
Jeden úkol, jedna cesta. Jak lidé dosájnout toho, co potřebují (tzv. flow).

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.

Skicováním se snažím prozkoumat různé nápady na řešení.
Skicováním se snažím prozkoumat různé nápady na řešení. Mně osobně to stačí hodně koncepčně.

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.
Příklad flow pro nahrávání obrázků
Příklad flow pro nahrávání obrázků. Lidé někde začnou, potřebují udělat konkrétní akce a skončí s určitým výsledkem.

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).

Jakým způsobem může člověk s aplikací interagovat
Jakým způsobem může člověk s aplikací interagovat?

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).

Pro různé stavy typicky volím rozhodovací způsob
Pro různé stavy typicky volím rozhodovací způsob. Aby bylo zřejmé, kdy daná situace může nastat.

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.

Příklad uceleného flow pro nahrávání obrázků na web
Příklad uceleného flow pro nahrávání obrázků na web.

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á.

Jednotlivé kroky se snažím zasadit do toho správného kontextu
Jednotlivé kroky se snažím zasadit do toho správného kontextu.

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.


Sdílejte článek



Michal Maňák

Jmenuji se Michal Maňák, jsem Interaction Designer a Digital Product Designer.

Pracuji ve společnosti LMC.