2. diel - Kroky pre vytvorenie dobrého UX

V tejto lekcii si predstavíme súhrn, čo všetko musíme urobiť na to, aby bol náš projekt po stránke UX vyladený. Zameriame sa na základné kroky práce UX designera od analýz, cez tvorbu, až po testovanie. Správne naplánovanie každého projektu je veľmi dôležitý faktor ovplyvňujúci jeho chod aj výsledok, vrátane obchodného výnosu.

Základné kroky práce v odbore UX

Odbor User Experience čiže skrátene UX má svoje štandardné postupy a postupnosti, ktorými by sme sa mali riadiť. V tejto lekcii sa dozvieme, čo všetko nás stretne a na čo nezabudnúť, pokiaľ dbáme na užívateľsky prívetivý dizajn. Tiež nás prevedie presnými krokmi, ako si celú prácu naplánovať.

Najčastejšie sa s UX stretneme pri tvorbe webu či aplikácií, a preto aj tento článok tak bude zameraný.

Medzi základné kroky práce v odbore UX patria:

• analýza,
• tvorba,
• testovanie.

Než sa pustíme do jednotlivých fáz, treba si predstaviť základnú myšlienku, prečo vlastne potrebujeme vo svojom projekte UX.

Správne UX totiž udrží používateľovu pozornosť. Užívateľ teda zostane na webe alebo bude používať našu aplikáciu a to je náš cieľ.

Nie nadarmo sa v UX hovorí:

Dobrý dizajn používateľ nevníma, ale zlý nevystojí.

Ak je používateľ nútený pri prezeraní webu veľmi premýšľať, jeho kroky nie sú plynule intuitívne alebo nemôže rýchlo nájsť to, prečo tam prišiel, je viac ako zrejmé, že web veľmi rýchlo opustí. Nevyhnutnou súčasťou je práca s emóciami používateľa a cieľom je teda vytvoriť pre neho príjemný zážitok.

Analýza

Prvým krokom práce v odbore UX, ktorým sa budeme zaoberať je analýza.

Vžime sa do užívateľa

Na začiatok je vhodné vžiť sa do pozície budúceho používateľa a predstaviť si, čo by mohol od webu očakávať, a kde by mohli nastať problémy, s ktorými sa môže stretnúť. Aby sme sa mohli identifikovať s rôznymi typmi užívateľov, môžeme si vytvoriť tzv. persony.

Persony sú detailné vymyslené profily našich používateľov, ktorí by sa v interakcii s našimi stránkami či aplikáciami mohli vyskytnúť a pre ktorých vytvárame náš projekt.

Persony nám lepšie pomôžu sa identifikovať s rôznymi prístupmi a cieľmi, ktoré môžu naši používatelia mať.

Ako budú ľudia web alebo aplikáciu používať?

Používatelia webu majú rôzne schopnosti aj ciele a my musíme premyslieť, ako asi budú web používať a kadiaľ povedie ich cesta. Táto technika sa nazýva user flows.

User flows sú popisy ciest užívateľa krok po kroku po webovej stránke alebo v aplikácii, ktoré vedú k určitému cieľu.

Pri tvorbe užívateľsky prívetivého webu tiež musíme prihliadnuť na to, že stránky budú navštevovať dva typy zákazníkov - noví používatelia a opakovaní návštevníci. Každý má od webu iné požiadavky:

• Nový používateľ - musí sa ľahko zorientovať a nájsť informáciu, pre ktorú prišiel či urobiť akciu, ktorú chcel.
• Opakovaný návštevník - vie presne, čo chce a musí sa k tomu ľahko dostať, bez zbytočných zavádzajúcich ciest.

Podobne môžeme mať rôzne typy opakujúcich sa návštevníkov – niekto web sleduje pravidelne a túži iba po nových informáciách, iný chce urobiť vždy iba rovnakú akciu. Musíme mať na pamäti, že web musí byť zrozumiteľný a uchopiteľný pre rôzne typy používateľov zároveň.

Ako nájsť údaje o reálnych používateľoch?

Najjednoduchšie získame údaje o používateľoch webových stránok. Každá webová stránka získava o svojich používateľoch informácie, ktoré jej slúžia k analytike. Aj keď sú dáta anonymizované, tak nám poskytujú mnoho informácií na to, aby sme používateľa spoznali. Vďaka IP adrese je stránka schopná zistiť približnú polohu, môže získať informácie o používanom prehliadači, operačnom systéme počítača, ale aj napríklad o procesore či obrazovke, ale aj iné demografické údaje a ďalšie.

Tieto informácie o webe ľahko zobrazíme, ak je na stránkach nasadený jeden z najznámejších analytických nástrojov od spoločnosti Google - Google Analytics. Inokedy zase môžeme pomocou ďalších programov sledovať kurzor myši a jeho cestu a výsledkom sú napríklad tzv. "heat mapy", teda grafické znázornenie, kde užívateľ na webe trávil najviac času.

Zhodnoťme, kto stojí proti nám

Ďalšou marketingovou technikou, ktorú v UX využijeme je analýza konkurencie. Aby sme sa dobre vymedzili, musíme mať veľmi dobré povedomie aj o našej konkurencii. Je potrebné vedieť, ako je na tom z hľadiska užívateľskej prívetivosti.

Medzi konkurenciou totiž môžeme vyniknúť aj s úplne rovnakou službou či produktom, často aj drahším vtedy, keď k nemu užívateľa dovedieme veľmi jednoduchou cestou a budeme cieliť na jeho emócie správnym spôsobom. Konkurencia môže mať rôzne zložité stránky alebo aplikácie. My musíme každý jednotlivý projekt konkurencie prejsť, zhodnotiť ho z hľadiska užívateľov a nájsť miesta, čo a kde urobiť pre užívateľov lepšie.

Tvorba

Pokiaľ sme už dobre spoznali nášho užívateľa aj naše obchodné prostredie, je čas pokročiť k praktickej časti tvorby, ktorá zaberá v UX projektoch najväčšiu časť času. Na čo teda vo svojom projekte dbať a čoho sa vyvarovať?

Aké sú technické požiadavky dobrého UX?

Je dôležité myslieť nielen na pekný design. K základným vlastnostiam projektu s vypilovaným UX patrí aj rýchlosť webu, prehľadnosť a responzívny dizajn. Dbáme na farebnosť, správne štruktúrované menu, dobre postavené podstránky aj zrozumiteľnú pätičku.

Informácie by mali byť jasne podané, bez zbytočných omáčok okolo. Text musí byť zaradený do jasných krátkych odsekov. Priamo do textu či medzi odsekmi je vhodné umiestniť tzv. CTA.

"Call to action" (CTA) prvky sú jasne viditeľné výzvy k nejakej akcii, často formou tlačidla, ktoré používateľa navedie k tomu, čo chceme, aby urobil.

Je totiž dôležité mať aj na pamäti, že teraz je človek prehltený informáciami a dochádza k tzv. "slepote". Predtým už bola definovaná tzv. "bannerová slepota", čo znamenalo, že pokiaľ je webová stránka prehltená bannermi s reklamou, používateľ ich úplne ignoruje. Teraz už množstvo informácií a ich neprehľadnosť došla tak ďaleko, že používateľ je schopný prehliadnuť aj niektoré prvky webu, pokiaľ nie sú na správnych miestach, kde ich očakáva.

Takto nie!

Čomu sa konkrétne na webe určite vyhnúť:

• agresívnej reklame a všeobecne jej veľkému počtu,
• množstvo pop-up okien,
• informáciám, ktoré nesúvisia s obsahom webu,
• zložitému a nelogickému prelinkovaniu,
• prílišnému množstvu neštruktúrovaného textu,
• neaplikovanie responzivity.

Pokiaľ vieme, čo od webu chceme a čo na ňom naopak nemá byť, je čas k prvým náčrtom webu.

Ako web či aplikáciu postaviť

Čo na webe chceme mať a akým spôsobom to prezentovať, sme si utriebili vďaka predchádzajúcim krokom. Teraz je potrebné vytvoriť tzv. informačnú alebo stromovú štruktúru webu, ktorá môže mať podobu myšlienkovej mapy či priamo štruktúrovanej navigácie. Následne určíme samotné rozmiestnenie prvkov na stránke a ich správanie. K tomu nám slúži tzv. „ wireframe “.

Wireframe je polografický návrh, kde vidíme pomocou jednoduchých štvorcov alebo iných základných tvarov rozmiestnenia obsahu.

Predtým sa wireframy tvorili buď len na papier alebo v programoch na to nepriamo určených a zbytočne zložitých, ako napríklad Photoshop. Teraz už je mnoho vhodných nástrojov ako napríklad Figma, Sketch, či Adobe XD.

Po vytvorení wireframu a jeho konzultácii s prepojenými odborníkmi (grafik, programátor, SEO špecialista atď.) sa postúpi k tvorbe prototypu.

Prototyp je vylepšený a bohatší wireframe, ktorý už prešiel editáciou a doplnením všetkého potrebného – má zodpovedajúcu farebnosť, ikony, obrázky, texty, správne aplikované UX, ale aj dynamické prvky či animácie.

Prototyp sa potom predkladá klientovi, aby sa mohol vyjadriť už v procese tvorby a nebudovalo sa ďalej niečo, s čím by zadávateľ nesúhlasil. Akonáhle v prototype všetko funguje a zadávateľ je s prácou spokojný, tak sa podľa prototypu vytvorí konečný výstup.

Ale to ešte nie je koniec cesty UX. Než sa projekt nasadí, je potrebné ešte vykonať testovanie.

Testovanie

Pred uvedením projektu do praxe je čas na nezabudnuteľnú súčasť celej práce a to testovania. Vždy by sme v praxi mali overiť závery, podľa ktorých sme designovali celý web. Veľmi dobré je testovať už aj počas tvorby, napríklad štruktúru, wireframe a prototyp.

Kto môže testovať?

Na testovanie by sme mali mať skupinu aspoň 3 až 6 ľudí, ktorá zodpovedá našej cieľovej skupine alebo sú ju blízki (nemusia byť nutne našimi zákazníkmi). Taká skupina je schopná odhaliť až 75 % zásadných problémov.

Ako sa testuje

Užívateľské testovanie čiže testovanie použiteľnosti je druh experimentu, kedy testera necháme prechádzať náš web či aplikáciu, sledujeme jeho správanie a hľadáme možné úskalia, s ktorými sa môže stretnúť. Toto testovanie nám pomôže odhaliť napríklad oblasti, kde sa používateľ môže strácať alebo zistíme, že naše riešenie nepokrýva všetky používateľove potreby. Existujú aj špeciálne očné kamery a ďalšie sofistikované spôsoby testovania. O projekte môžeme s respondentmi viesť aj rozhovory. Testovať môžeme viac variantov a všetko potom porovnať (tzv. A/B testovanie).

Testovanie by nám teda malo priniesť poznatky, kde a ako ešte svoje stránky či aplikáciu pred finálnym vypustením projektu vylepšiť.

Pokiaľ prejdeme všetky kroky tohto procesu, máme pred sebou veľmi nádejný projekt, aspoň po stránke UX.

V budúcej lekcii, Emócie a emočný dizajn v UX , si predstavíme, akú veľkú úlohu hrajú emócie a emočný dizajn v celom procese UX.