Nodo UX Framework

Notas del editor

1. Proč jsem vytvořil Nodo UX?
2. Kdysi jsem začínal jako grafik ve firmě o 3 lidech. Měli jsme řadu špatných návyků, které jsme se postupem času naučili odstranit. Pro mě byl nejhorším zlozvykem samotný proces tvorby webu. Popovídali jsme si s klientem a jen co se za ním zavřely dveře, začal jsem kreslit to, co mi během schůzky vytanulo na mysli.
3. Brzy nám došlo, že výsledek by mohl být mnohem lepší (rozuměj nikoli hezčí, ale smysluplnější), kdybychom náš proces obohatili o prvky, které nám umožní lépe chápat svět, pro který chceme stránky navrhnout.
4. Začal jsem se tedy zajímat o další disciplíny webdesignu.
5. Odpovědí byly tuny informací, článků, ebooků, knih, blogů, videí a návodů, jak proces zlepšit. Před námi stála celá armáda odborníků a osobností a jejich metody, nástroje a postupy. Nějaký čas nám trvalo, než jsme všechny vyzkoušeli a ověřili si, co pro nás funguje a co ne.
6. Výsledkem byl sice proces, který byl podstatně sofistikovanější než na počátku, ale stále neměl pevný řád a jasný rámec. Pokaždé jsme k projektu přistupovali trochu jinak. A tady vznikla myšlenka vytvořit systém, který by celý proces definoval.
7. Nyní se dostaneme k tomu, jakým způsobem jsem svůj framework navrhl.
8. Nejprve jsem si udělal pořádek v procesu. V první fázi se snažím poznat klienta a jeho svět. V druhé si pak povídáme o jeho projektu – tedy co chce s námi řešit, jakým zůsobem a kdo bude výsldek nakonec používat. Poté zkoumáme okolí projektu – lidi, trh, konkurenci. Následně navrhujeme, co budou stránky obsahovat, poté určujeme priority jednotlivých částí obsahu, abychom jej mohli převést v layout a nakonec pro navržený layout vytváříme vzhled, tedy grafiku. V každém bodě používám nějakou metod či nástroj. A právě ty se později staly obsahem frameworku.
9. Důležité bylo rozhodnutí, že celý framework bude na papíře. Je to jednoduché – řeším jím tu část procesu, při které buď něco vymýšlím (obsah, wireframe) nebo někomu naslouchám (klient, cílovka). V obou případech je technologie na škodu – omezuje, rozptyluje, brání spontánnosti.
10. Nakonec jsem se musel rozhodnout, které konkrétní metody a techniky použiji během jednotlivých fází procesu tvorby webu. Někde jsem čerpal od zkušenějších (začněte s proč, lean canvas, persony, wireframe) a někde jsem šel vlastní cestou, která se mi v minulosti vyplatila (proces vytváření obsahové koncepce).
11. Konečně se dostáváme k tomu, co nakonec z mé snahy vzešlo.
12. Pár týdnů jsem ladil papírové šablony a když jsem byl s nimi dostatečně spokojený na to, abych je vyzkoušel v praxi, zbývalo jen jediné – dát tomu nějaké jméno.
13. Framework jsem pojmenoval Nodo ze dvou důvodů. Jednak jsem v té době žral knížku Presentation Zen od Garra Reynoldse, který často odkazoval na prvky z japonské kultury, které mohou designery dodnes inspirovat, a jednak jsem chtěl do názvu propasovat základní vlastnost frameworku – jeho soustředěnost na jednotlivé fáze procesu návrhu webu. Slovíčko soustředění má v japonštině ekvivalent Nodo, a tak bylo rozhodnuto.
14. Nyní si projdeme jednotlivé listy frameworku. Bude se vám k tomu hodit lepší náhled než je na slidech, stáhněte si proto framework v PDF - http://bit.ly/1vga9ZD
15. První list se věnuje našemu klientovi. Obsahuje pouze 4 otázky, ale ve skutečnosti jde do hloubky. Začínáme s otázkou Co a pro koho. Každý klient obvykle dobře ví, co nabízí, horší už to bývá s otázkou pro koho. Dost často slýchám odpověď “v podstatě si to může koupit každý”. No jo, ale kdo to potřebuje? To už asi každý nebude… Následuje otázka Jak – jak produkt či služba funguje, co ji charakterizuje, jak ji nabízí? A nakonec nejtěžší otázka Proč – proč děláte to, co děláte? Proč vyrábíte zrovna tento produkt a ne jiný? Odpovědí nikdy nemůže být “za účelem zisku” – z tohoto důvodu můžeme dělat jakoukoli jinou práci (a dokonce výnosnější), takže jaká je motivace našeho klienta? Když dostaneme hodnotné odpovědi na všechny 4 otázky, budeme našemu klientovi mnohem lépe rozumět. A to se bude později velmi hodit.
16. Druhý list řeší samotný projekt. Stránka vychází z nástroje lean canvas, který slouží k rychlému zhodnocení byznys nápadu. Na myšlenku využít tento nástroj pro rozhovor s klientem o jeho plánech mě přivedl Tomáš Ludvík (díky Tome) a skvěle se mi to osvědčilo. Stránka je rozdělena do menších částí - každá se věnuje důležitému tématu, které by se mělo na začátku projektu probrat, aby později nedocházelo k překvapením a nedorozuměním. Stránka pomáhá vést rozhovor s klientem smysluplným směrem, nenechá nás zapomenout na nic důležitého. Navíc jsem zjistil, že docela dobře může posloužit k odhadnutí našeho klienta – jak moc dobře má svůj byznys promyšlený. Pokud se na začátku zeptám, jestli by mi mohl svůj byznys představit a za půl hodiny mám papír vyplněný, má klient v hlavě vše dobře srovnané. Pokud se po dvou minutách musím začít na jendotlivé věci ptát a klient u nich odpovědi v podstatě na místě vymýšlí, je to varovný signál pro budoucí spolupráci. Vzhledem k malému prostoru doporučuji tuto stránku vytsiknout buď víckrát nebo na větší formát.
17. Třetí list je šablona pro vytvoření persony. Zde se předpokládá, že si nejdříve promluvíme s lidmi, kteří zapadají do cílových skupin našeho projektu, podíváme se na současné výstupy z google analytics – prostě si uděláme rešerši, na základě které můžeme naše poznatky syntetizovat ve fiktivní zástupce našich návštěvníků. Tuto šablonu budu v budoucnu ještě upravovat. Po diskuzi s Adamem Fendrychem jsem dospěl k závěru, že bude lepší persony navrhovat ne podle demografických vlastností, ale podle potřeb, se kterými na web přicházejí.
18. Čtvrtý list řeší konkrétní akce našich person, které chtějí provést, aby dosáhly svého cíle. Najít nějakou informaci, ověřit nějaký údaj, srovnat nějaké parametry, vložit do košíku, zrušit předchozí akci, sdílet informace s dalšími lidmi, vytisknout si nalezené informace, atd. Jde o akce, pro které bychom měli na stránkách mít připravenou odpovídající reakci (informaci či funkci). Když mám seznam hotový (pro každou personu), připíšu k nim do pravého sloupce “tagy”, kterými je na stránce v budoucnu seskupím do logických bloků. Takovým tagem může být hlavička, patička, úvodník, článek, sekce FAQ, blok “Proč nakoupit u nás” apod. Jedna akce může být zařazena do více skupin. To znamená, že na webu se objeví víckrát. Je důležité nepracovat v tomto kroku pouze s personami, ale také například s výstupy z google analytics, analýzy klíčových slov apod.
19. Na pátém listu pracuji s daty z předchozího kroku, pouze přesně opačně. Do jednotlivých bloků vypíšu jako nadpisy nejprve všechny tagy. Pokud jich je 10, budu mít 10 čtverečků s nadpisy dle tagů. Následně do těchto pojmenovaných bloků vypíšu vždy ty akce, které jsou daným nadpisem otagované. Pokud jsem měl například u 5 akcí tag “Ůvodník”, pak blok s nadpisem úvodník bude obsahovatseznam 5 akcí. Výsledkem je pro mě přehled obsahu našeho webu, rozdělený do logických bloků, přičemž každý blok řeší nějakou potřebu definovanou různými souvisejícími akcemi našeho návštěvníka. Například v našem úvodníku chce na první pohled pochopit smysl naší stránky (nadpis), zjistit, jaká firma ji provozuje (logo), zjistit, co web obsahuje (navigace) a co po něm chce (tlačítko či CTA). Slova v závorkách jsou naše reakce na očekávání návštěvníka.
20. Šestý list opět navazuje na předchozí krok. Naše bloky nyní rozdělíme do jednotlivých stránek. Na levé straně nám tak vznikne základní struktura stránek (informační architektura, chcete-li) a na pravé navrhujeme obsah těchto stránek podle informačních bloků, které jsme navrhli v předchozím kroku. Důležité je zde seřadit tyto bloky dle jejich priority či návaznosti. To nám později pomůže při navrhování layout stránek. Opět bychom zde měli zároveň pracovat s výstupy analýzy klíčových slov a dalšími, které máme k dispozici a které neřešíme na papíře.
21. V posledním kroku kreslíme jednotlivé bloky a stránky. Díky předchozím krokům víme, jaké stránky navrhujeme, jak jsou rozdělené do bloků a co konkrétně tyto bloky obsahují. Nyní musíme vyřešit jejich rozmístění v layoutu stránky. Jinými slovy kreslíme wireframe. Postupuji obvykle tak, že kreslím jednotlivé bloky a ty pak skládám do stránek. Jak jdou bloky za sebou se dozvím z minulého kroku. Šablona nás mimo jiné navádí k tomu, abychom kreslili nejprve pro mobilní zařízení a poté postupně návrh rozšiřovali.
22. A co pak? Pak už přichází ke slovu technologie a papírový framework končí. Wireframe překreslíme pomocí nějakého nástroje (balsamiq, uxpin, axure – dle libosti), dokončíme obsah a přidáme interaktivitu. Testujeme, ladíme a pokračujeme k realizaci. Pak zase testujeme a postupně vylepšujeme výsledek k dokonalosti.
23. Pokud si chcete framework vyzkoušet sami, stáhněte si jej z tohoto dokazu - http://bit.ly/1vga9ZD. Budu rád za zpětnou vazbu. Brzy přidám ještě odkaz na vyplněný framework, ze kterého bude lépe pochopitelné to, co jsem na jednotlivých listech popisoval.