2. diel - Spolupráca s užívateľom a pomôcky UX designera - Online kurz

V minulej lekcii, Kroky pre vytvorenie dobrého UX , sme si predstavili súhrn, čo všetko musíme urobiť pre to, aby bol náš projekt po stránke UX vyladený. Zamerali sme sa na základné kroky práce UX designera od analýz, cez tvorbu, až po testovanie.

V dnešnej lekcii si ukážeme, prečo je dôležité spolupracovať s užívateľmi pri návrhu rozhrania a ako s užívateľmi komunikovať. Ďalej sa budeme zaoberať pomôckami, ktoré UX dizajnéri využívajú pri návrhu rozhrania. Skúsime si vytvoriť návrh grafického rozhrania a uvedieme si, aké pomôcky a nástroje na to používame.

Spolupráca s užívateľom, pomôcky UX designera

Na vývoj aplikácie možno pozrieť z dvoch rôznych strán. Na jednej strane stoja programátori, ktorí pri vývoji vidia technické záležitosti. Nimi sú napríklad výber programovacieho jazyka, cieľová platforma, spôsoby uloženie dát, logiku programu a nad týmto postavené užívateľské rozhranie.

Na opačnej strane stojí užívateľ, ktorý nemá znalosti v oblasti vývoja programov. Užívateľ vidí grafické rozhranie programu, s ktorým dokáže pracovať. Všetko za rozhraním je pre neho "mágie". A rovnako, ako sa líšia pohľady programátorov a používateľov, sa môžu líšiť ich požiadavky na rozhraní. Užívatelia môžu mať požiadavky, ktoré programátora často ani nemusí napadnúť!

Preto je dôležité sa zaoberať požiadavkami užívateľov a plniť ich priania. Pomocou spoločného dialógu je možné vytvoriť graficky príjemné, užívateľsky prívetivé a ľahko ovládateľné grafické rozhranie.

Ako spolupracovať s užívateľmi

Ešte pred začatím návrhu grafického rozhrania a celého programu je dobré si s užívateľom naplánovať schôdzku a na nej prebrať, čo od systému očakáva. Môžeme získať cenné informácie využiteľné nielen pri návrhu rozhrania, ale aj pri ďalších krokoch vo vývoji programu.

Metód, ako pracovať s užívateľmi je samozrejme viac, než len schôdzka. Ak má napríklad náš vyvíjaný systém nahradiť iný existujúci program, potom je veľmi vhodné využiť tohto systému a zistiť, prečo ho chce užívateľ nahradiť. Môžeme sa tak poučiť z chýb rozhrania predošlého programu a vyvarovať sa ich, rovnako ako môžeme vypozorovať návyky používateľov, ktoré by sme mali zakomponovať do vznikajúceho systému. Vyšším stupňom tejto metódy je len nepozorovat prácu užívateľov, ale do práce sa sám zapojiť!

Ak pracujeme na veľkom systéme, ktorý má používať veľké množstvo ľudí, potom sa týchto budúcich užívateľov môžeme opýtať na ich požiadavky prostredníctvom hromadného dotazníka alebo ankety.

Či už pri komunikácii s budúcimi užívateľmi nášho systému zvolíme ľubovoľnú metódu, vždy je vhodné sa riadiť heslom "Užívateľ má vždy pravdu".

Pomôcky UX designera

Pri návrhu rozhranie vytvára správny UX designer niekoľko rôznych návrhov. Každý z týchto návrhov sa zameriava na určitý problém a snaží sa ho efektívne riešiť. UX designer často nie je jediný, kto na týchto návrhoch pracuje. Na vývoji pracuje celý tím a to od UX a UI dizajnérov cez grafiky až po front-end programátorov, ktorí rozhranie programujú, a testery rozhranie.

Obvykle vytvárame spolu 3 návrhy rozhranie, ktoré na seba nadväzujú a kde návrh nasledujúce stavia na informáciách z predchádzajúceho návrhu.

Wireframe

Wireframe, alebo po slovensky drôtený model, je "prvú úroveň" návrhu rozhrania. Neobsahuje žiadne grafické prvky, ako logá alebo obrázky, a ideálne neobsahuje ani žiadne farby, ktoré by mohli rozptyľovať oko. Čím nám wireframe pomôže? Vďaka tomuto modelu rozhraniu budeme mať jasnú predstavu o rozložení jednotlivých grafických prvkov, navigáciu v systéme a celkovej štruktúre grafického rozhrania.

Typicky nevytvárame iba jeden jediný drôtený model, ale celú sadu modelov. Rozhranie sa mení podľa toho, čo je potrebné užívateľovi prezentovať. Uveďme si príklad: inak bude vyzerať úvodná stránka e-shopu, inak bude vyzerať stránka s detailom produktu a úplne inak bude vyzerať stránka nákupného košíka.

Wireframe ďalej používame pri návrhu dizajnu rozhrania. Po jeho vytvorení je tiež vhodné ho prezentovať užívateľovi - podľa jeho hodnotenia je možné vykonávať zmeny. Zmeny vo wireframe sú jednoduchšie a lacnejšie, než užívateľovi prezentovať hotové rozhrania a následne meniť niektoré prvky.

Vyskúšajme si teraz vytvoriť wireframe. Vezmite si ceruzku a papier a vytvorte wireframe pre e-shop ponúkajúci potraviny. Pre začiatok pár rád: obrázky nahraďte proškrtnutými obdĺžniky. Výsledok môže vyzerať nejako takto:

Mockup

Mockup, alebo po slovensky maketa, je ďalším modelom, ktorý vzniká pri návrhu rozhrania. Pri vytváraní makety vychádzame z už existujúceho drôteného modelu. Do neho vkladáme jednotlivé grafické prvky, "preškrtnuté obdĺžniky" nahrádzame skutočnými obrázky a celý model získava farbu.

Účel tohto návrhu nie je technický, slúži najmä na prezentáciu užívateľom. Užívateľ si dokáže lepšie predstaviť finálnu grafické rozhranie. Pri prezentácii je dôležité získať od užívateľov spätnú väzbu. Informácie zo spätnej väzby nám môžu pomôcť k zlepšeniu celého návrhu rozhrania. Aby si užívateľ dokázal naozaj dobre predstaviť výsledok, je možné vložiť náš mockup do reálneho prostredia, napríklad vložiť navrhovanú webovú stránku do obrázka s monitorom:

Príklad makety v reálnom prostredí.

Pokračujme teraz s našim príkladom e-shopu s potravinami:

. <> Príklad mockup vytvorený z wireframe.

Prototyp

Posledným krokom pri návrhu rozhranie je prototyp, čiže funkčné maketa rozhranie. Prototyp vytvárame najmä pre užívateľov, ktorý si tak môže vyskúšať aplikáciu a jej rozhrania skôr, než je dokončená. Na základe interakcie užívateľa s prototypom možno vyladiť ovládanie a samotné zobrazenie.

Aj prototyp je možné vytvoriť iba pomocou ceruzky a papiera:

Nástroje pre návrh

Poslednou otázkou je, ako tieto návrhy vytvoriť. Ak majú návrhy slúžiť len ako pomôcka pri vývoji, vystačíme si s ceruzkou a papierom. Ak budeme však návrh prezentovať užívateľovi, potom je vhodné ho vytvoriť digitálne. K tomu môžeme použiť ako bežné grafické programy, tak špecializovaný softvér. Medzi najznámejšie programy patrí napríklad Microsoft Visio, Pencil2D, Axura a mnohé ďalšie.

V nasledujúcej lekcii, UX: Ako na tlačidlá , sa budeme zaoberať tlačidlami. Ukážeme si, ako správne vytvárať a používať tlačidlá tak, aby bola aplikácia užívateľsky prívetivá.