Lekce 3 - Kroky pro vytvoření dobrého UX

V této lekci si představíme souhrn, co vše musíme udělat pro to, aby byl náš projekt po stránce UX vyladěný. Zaměříme se na základní kroky práce UX designéra od analýz, přes tvorbu, až po testování. Správné naplánování každého projektu je velmi důležitý faktor ovlivňující jeho chod i výsledek, včetně obchodního výnosu.

Základní kroky práce v oboru UX

Obor User Experience neboli zkráceně UX má své standardní postupy a posloupnosti, kterými bychom se měli řídit. V této lekci se dozvíme, co vše nás potká a na co nezapomenout, pokud dbáme na uživatelsky přívětivý design. Také nás provede přesnými kroky, jak si celou práci naplánovat.

Nejčastěji se s UX setkáme při tvorbě webu či aplikací, a proto i tento článek tak bude zaměřen.

Mezi základní kroky práce v oboru UX patří:

• analýza,
• tvorba,
• testování.

Než se pustíme do jednotlivých fází, je třeba si představit základní myšlenku, proč vlastně potřebujeme ve svém projektu UX.

Správné UX totiž udrží uživatelovu pozornost. Uživatel tedy zůstane na webu či bude používat naši aplikaci a to je náš cíl.

Ne nadarmo se v UX říká:

Dobrý design uživatel nevnímá, ale špatný nevystojí.

Pokud je uživatel nucen při prohlížení webu moc přemýšlet, jeho kroky nejsou plynule intuitivní nebo nemůže rychle najít to, proč tam přišel, je víc než nasnadě, že web velmi rychle opustí. Nezbytnou součástí je práce s emocemi uživatele a cílem je tedy vytvořit pro něj příjemný zážitek.

Analýza

Prvním krokem práce v oboru UX, kterým se budeme zabývat je analýza.

Vžijme se do uživatele

Na začátek je vhodné vžít se do pozice budoucího uživatele a představit si, co by mohl od webu očekávat, a kde by mohly nastat problémy, se kterými se může potkat. Abychom se mohli identifikovat s různými typy uživatelů, můžeme si vytvořit tzv. persony.

Persony jsou detailní smyšlené profily našich uživatelů, kteří by se v interakci s našimi stránkami či aplikací mohli vyskytnout a pro něž vytváříme náš projekt.

Persony nám lépe pomohou se identifikovat s různými přístupy a cíli, které mohou naši uživatelé mít.

Jak budou lidé web či aplikaci používat?

Uživatelé webu mají různé schopnosti i cíle a my musíme promyslet, jak asi budou web používat a kudy povede jejich cesta. Tato technika se nazývá user flows.

User flows jsou popisy cest uživatele krok po kroku po webové stránce či v aplikaci, která vedou k určitému cíli.

Při tvorbě uživatelsky přívětivého webu také musíme přihlédnout k tomu, že stránky budou navštěvovat dva typy zákazníků - noví uživatelé a opakovaní návštěvníci. Každý má od webu jiné požadavky:

• Nový uživatel - musí se snadno zorientovat a najít informaci, pro kterou přišel či učinit akci, kterou chtěl.
• Opakovaný návštěvník - ví přesně, co chce a musí se k tomu snadno dostat, bez zbytečných zavádějících cest.

Podobně můžeme mít různé typy opakujících se návštěvníků - někdo web sleduje pravidelně a touží pouze po nových informacích, jiný chce udělat vždy pouze stejnou akci. Musíme mít na paměti, že web musí být srozumitelný a uchopitelný pro různé typy uživatelů zároveň.

Jak najít data o reálných uživatelích?

Nejjednodušeji získáme data o uživatelích webových stránek. Každá webová stránka získává o svých uživatelích informace, které jí slouží k analytice. I když jsou data anonymizovaná, tak nám poskytují mnoho informací na to, abychom uživatele poznali. Díky IP adrese je stránka schopná zjistit přibližnou polohu, může získat informace o používaném prohlížeči, operačním systému počítače, ale i třeba o procesoru či obrazovce, ale i jiné demografické údaje a další.

Tyto informace o webu snadno zobrazíme, pokud je na stránkách nasazený jeden z nejznámějších analytických nástrojů od společnosti Google - Google Analytics. Jindy zase můžeme pomocí dalších programů sledovat kurzor myši a jeho cestu a výsledkem jsou třeba tzv. "heat mapy", tedy grafické znázornění, kde uživatel na webu trávil nejvíce času.

Zhodnoťme, kdo stojí proti nám

Další marketingovou technikou, kterou v UX využijeme je analýza konkurence. Abychom se dobře vymezili, musíme mít velmi dobré povědomí i o naší konkurenci. Je třeba vědět, jak je na tom z hlediska uživatelské přívětivosti.

Mezi konkurencí totiž můžeme vyniknout i s úplně stejnou službou či produktem, mnohdy i dražším tehdy, když k němu uživatele dovedeme velmi jednoduchou cestou a budeme cílit na jeho emoce správným způsobem. Konkurence může mít různě složité stránky či aplikace. My musíme každý jednotlivý projekt konkurence projít, zhodnotit ho z hlediska uživatelů a najít místa, co a kde udělat pro uživatele lépe.

Tvorba

Pokud jsme již dobře poznali našeho uživatele i naše obchodní prostředí, je čas pokročit k praktické části tvorby, která zabírá v UX projektech největší část času. Na co tedy ve svém projektu dbát a čeho se vyvarovat?

Jaké jsou technické požadavky dobrého UX?

Je důležité myslet nejen na líbivý design. K základním vlastnostem projektu s vypilovaným UX patří i rychlost webu, přehlednost a responzivní design. Dbáme na barevnost, správně strukturované menu, dobře postavené podstránky i srozumitelnou patičku.

Informace by měly být jasně podané, bez zbytečných omáček okolo. Text musí být řazen do jasných krátkých odstavců. Přímo do textu či mezi odstavce je vhodné umístit tzv. CTA.

"Call to action" (CTA) prvky jsou jasně viditelné výzvy k nějaké akci, často formou tlačítka, které uživatele navede k tomu, co chceme, aby udělal.

Je totiž důležité mít i na paměti, že nyní je člověk přehlcen informacemi a dochází k tzv. "slepotě". Dříve již byla definovaná tzv. "bannerová slepota", což znamenalo, že pokud je webová stránka přehlcena bannery s reklamou, uživatel je úplně ignoruje. Nyní již množství informací a jejich nepřehlednost došla tak daleko, že uživatel je schopný přehlédnout i některé prvky webu, pokud nejsou na správných místech, kde je očekává.

Takhle ne!

Čemu se konkrétně na webu určitě vyhnout:

• agresivní reklamě a všeobecně jejímu velkému počtu,
• množství pop-up oken,
• informacím, které nesouvisí s obsahem webu,
• složitému a nelogickému prolinkování,
• přílišnému množství nestrukturovaného textu,
• neaplikování responzivity.

Pokud víme, co od webu chceme a co na něm naopak nemá být, je čas k prvním náčrtům webu.

Jak web či aplikaci postavit

Co na webu chceme mít a jakým způsobem to prezentovat, jsme si utříbili díky předchozím krokům. Nyní je potřeba vytvořit tzv. informační neboli stromovou strukturu webu, která může mít podobu myšlenkové mapy či přímo strukturované navigace. Následně určíme samotné rozmístění prvků na stránce a jejich chování. K tomu nám slouží tzv. "wireframe".

Wireframe je polografický návrh, kde vidíme pomocí jednoduchých čtverců či jiných základních tvarů rozmístění obsahu.

Dříve se wireframy tvořily buď jen na papír nebo v programech k tomu nepřímo určených a zbytečně složitých, jako třeba Photoshop. Nyní již je mnoho vhodných nástrojů jako třeba Figma, Sketch, či Adobe XD.

Po vytvoření wireframu a jeho konzultaci s propojenými odborníky (grafik, programátor, SEO specialista atd.) se postoupí k tvorbě prototypu.

Prototyp je vylepšený a bohatší wireframe, který již prošel editací a doplněním všeho potřebného - má odpovídající barevnost, ikony, obrázky, texty, správně aplikované UX, ale i dynamické prvky či animace.

Prototyp se pak předkládá klientovi, aby se mohl vyjádřit již v procesu tvorby a nebudovalo se dále něco, s čím by zadavatel nesouhlasil. Jakmile v prototypu vše funguje a zadavatel je s prací spokojen, tak se podle prototypu vytvoří konečný výstup.

Ale to ještě není konec cesty UX. Než se projekt nasadí, je třeba ještě provést testování.

Testování

Před uvedením projektu do praxe je čas na neopomenutelnou součást celé práce a to testování. Vždy bychom v praxi měli ověřit závěry, podle kterých jsme designovali celý web. Velmi dobré je testovat už i v průběhu tvorby, například strukturu, wireframe a prototyp.

Kdo může testovat?

Na testování bychom měli mít skupinu alespoň 3 až 6 lidí, která odpovídá naší cílové skupině či jsou ji blízcí (nemusí být nutně našimi zákazníky). Taková skupina je schopna odhalit až 75 % zásadních problémů.

Jak se testuje

Uživatelské testování neboli testování použitelnosti je druh experimentu, kdy testera necháme procházet náš web či aplikaci, sledujeme jeho chování a hledáme možná úskalí, se kterými se může potkat. Toto testování nám pomůže odhalit například oblasti, kde se uživatel může ztrácet nebo zjistíme, že naše řešení nepokrývá všechny uživatelovy potřeby. Existují i speciální oční kamery a další sofistikované způsoby testování. O projektu můžeme s respondenty vést i rozhovory. Testovat můžeme více variant a vše pak porovnat (tzv. A/B testování).

Testování by nám tedy mělo přinést poznatky, kde a jak ještě své stránky či aplikaci před finálním vypuštěním projektu vylepšit.

Pokud projdeme všechny kroky tohoto procesu, máme před sebou velmi nadějný projekt, alespoň po stránce UX.

V příští lekci, Emoce a emoční design v UX, si představíme, jak velkou roli hrají emoce a emoční design v celém procesu UX.