28. diel - Návrh užívateľského rozhrania v UX

V predchádzajúcom kvíze, Kvíz - Webový design, Maslowova teória webdesignu v UX, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V tejto lekcii si ukážeme, aké kroky a metódy práce musí UX dizajnér použiť pri návrhu používateľského rozhrania. Od skicovania, cez wireframe až po prototyp a mockup.

Návrh užívateľského rozhrania

Pokiaľ už máme predstavu o našom projekte a poznáme pravidlá informačnej architektúry, je čas pristúpiť k tvorbe návrhu. Aké sú všetky náležité kroky, a čo všetko UX dizajnér pri svojich návrhoch používa, si teraz popíšeme.

Skicovanie

Papier a ceruzka sú základ a prvý krok. Nie sú potrebné žiadne znalosti kreslenia. Kto vie rovnú čiaru a nepreťahuje, zvládne nakresliť akýkoľvek diagram v prvej fáze návrhu. Týmto spôsobom si vytvárame takzvané makety.

Skicovanie je asi ten najjednoduchší spôsob, ako si môžeme vizualizovať začiatok svojho projektu. Ide o rýchle zachytenie myšlienok a ich variantov. Nie je dôležitá kvalita prevedenia, ale v tomto kroku ide skôr o kvantitu nápadov, s ktorými potom ďalej pracujeme, triedime ich a rozvíjame.

Skicovaním môžeme tiež navrhnúť základnú sitemapu webu, teda štruktúru, previazanie a rozradenie. O možnostiach tvorby štruktúry webu sme detailne hovorili v lekcii Informačná architektúra v UX.

Na skicovanie využívame pár jednoduchých tvarov ako čiara, kruh, elipsa, štvorec, obdĺžnik a prípadne trojuholník či vlnovka. Viac nepotrebujeme. Na začiatku, teda do stredu papiera zachytíme myšlienku alebo definujeme problém, ktorý chceme riešiť. Od neho následne vedieme v rýchlom slede ďalšie čiary k pojmom, ktoré vetvia naše nápady. V tejto fáze nie je dôležité nad všetkým zložito premýšľať, ale skôr rýchlo vsádzať jeden nápad za druhým. Pokračujeme tak dlho, pokiaľ nám nedôjde inšpirácia.

Čo je pri skicovaní dôležité

K dôležitým veciam pri skicovaní radíme:

Zachytiť to najdôležitejšie, nie nutne všetky detaily.
Zapísať všetky myšlienky, Čo prídu, akýmkoľvek spôsobom.
Negumovať a neškrtať – aj keď sa niečo neskôr zdá ako neužitočné, môže nás to posunúť niekam inam.
Skicu si na záver popísať a archivovať - môžu byť studnicou nápadov pre iné ďalšie projekty.
Mať pri sebe stále niečo, na čo si myšlienky môžeme zachytiť, tie najlepšie väčšinou chodia vtedy, keď to najmenej čakáme a nie sme práve pri počítači.

Nástroje na skicovanie

Na skicovanie môžeme použiť rôzne nástroje, napríklad:

Wireframe

Wireframe je veľmi zjednodušený model, ktorý sa blíži našej skice v prvom kroku. Niekedy sa nazýva ako drôtený model. Ide o zhmotnenie vízie webu či aplikácie a naznačuje jeho štruktúru a rozloženie. Teraz sa ale wireframe často vníma skôr ako veľmi podrobný vizuálny prototyp. Vidíme, kde presne sú aké prvky webu a mali by sme odhadnúť aj funkciu, ktorá rôznym widgetom patrí. Wireframe ale nerieši konkrétny vzhľad prvkov a grafiku všeobecne.

Práca UX dizajnéra je na wireframe v tvorbe onoho modelu - čiernobiele štruktúrované kostry. Následne by táto kostra mala putovať do rúk UI designera, ktorý rozhodne o tom, ako má napríklad vyzerať dané tlačidlo, alebo kde bude využiť konkrétny grafický prvok.

Prínos wireframu v procese tvorby je v overení súladu predstáv jednotlivých zainteresovaných osôb. Dizajnér týmto krokom zrozumiteľne vizualizuje svoju tvorbu zadávateľovi a zistí, či odráža jeho predstavy a naďalej môžu wireframe vzájomne ladiť. Vďaka tomuto prístupu je možné včas zachytiť nedostatky či neporozumenie skôr, ako bude návrhu venovať svoj čas programátor. Šetrí teda čas a je vodítkom pre prácu ďalších osôb.

Ako vytvoriť kvalitné wireframe?

Wireframe by mal vychádzať zo spojenia vedomostí z analýzy projektu z hľadiska marketingu i obchodu, zo znalostí copywritera a obsahovej stratégie, z vedomostí UX dizajnéra aj UI dizajnéra av neposlednom rade samozrejme zo zadania klienta.

Wireframe teda nie je len o rozložení jednotlivých prvkov. Musí reflektovať aj celú stratégiu projektu a jeho ciele, cieliť na užívateľskú prívetivosť a brať do úvahy aj to, aké grafické prvky a dĺžky textov sa kde majú použiť, aká šírka informácií je lahodiaca oku i mozgu s ohľadom na produkte, službu či cieľ.

Vo wireframe využívame jednoduché zobrazenie pre rôzne prvky, priestor pre obrázok môže symbolizovať prázdny štvorec, tlačidlo napríklad len zaoblený malý obdĺžnik. Pre predstavu textu sa využíva Lorem Ipsum.

Lorem Ipsum je pseudo latinský nereálny jazyk, ktorý ich využívam na predstavu textu v grafických návrhoch. Svojím rozložením má na prvý pohľad pripomínať bežný jazyk vo vetách. Príklad: Lorem ipsum dolor sit amet, consectetuer adipiscing elít. Mauris felis, sagittis at, luctus sed, aliquam non, tellus. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Pellentesque ipsum. Fusce suscipit libero eget elít.

Nástroje pre tvorbu Wireframe

Ako pri skicovaní, môže nám dobre poslúžiť aj obyčajná ceruzka a papier. Je tu však už potrebná istá zručnosť, aby výsledku bolo dobre rozumieť a bol čitateľný. Preto je mnohokrát ľahšie pripraviť si wireframe v nejakom programe. Môžeme skúsiť napríklad:

Prototypovanie

Tvorba prototypu je oproti predchádzajúcim krokom už veľmi detailné práce. Prototyp už obsahuje grafické prvky a konkrétny obsah. Nemá nikde žiadny prázdny text typu Lorem Ipsum a namiesto obrázkov vložené prázdne štvorce. Väčšinou však v prototype chýba prepracovaná vizuálna stránka, finálne obrázky, atď. Jedná sa o konečný náhľad projektu, ktorý prechádza schvaľovaním klienta i ďalších zúčastnených osôb a môže byť použiť pre prvé užívateľské testovanie. Ide o presný podklad pre programátorov.

Ideálnou formou prototypu pre prezentáciu a testovanie sú interaktívne prototypy. Preto prototypy, ktoré fungujú na kliknutia a dovoľujú prechádzať návrh do hĺbky rôznych kategórií. Majú teda funkčné tlačidlá, linky a ďalšie funkcie ako pridávanie položiek do košíka, mazanie, vyplňovanie políčok atď.

Tipy na dobré prototypovanie

K tipom na dobré prototypovanie patria:

Navrhujeme v skutočných rozmeroch a pomeroch.
Nepoužívame farby a čierne pozadie, najlepšie využívame šedú farbu v rôznej intenzite.
Používame jasné konkrétne nadpisy.
Prezentujeme reálne dáta, produkty, obrázky.
Využívame konkrétne tlačidlá a placeholdery.
Používame konkrétne popisky.
K prototypu pripájame aj vlastný poznámkový aparát, ktorý o prototype viac hovorí a rozvádza naše myšlienky.

Placeholder je výraz pochádzajúci z HTML jazyka. Ide o konkrétny text, ktorý slúži na ukážku, akú hodnotu zadať do formulárového poľa a je pred zadaný vo formulárovom poli. Týmto atribútom môžeme užívateľovi poradiť, čo má do textového poľa zadať. Jednotlivé políčka tak nemusia mať už svoje označenia pred políčkom.

Nástroje pre prototypovanie

V prototypovaní už nie je veľa miesta na papier a ceruzku. Tu už potrebujeme pracovať s kvalitnými programami. Využiť môžeme napríklad:

Predstavenie niektorých nástrojov môžete nájsť v článku Návrhový a prototypovací softvér..

Finálna prezentácia

Pre finálnu prezentáciu, kedy chceme predstaviť, ako naozaj nakoniec náš projekt bude vyzerať na počítači či mobilných zariadeniach a máme už aj tak presnú predstavu o rozložení (wireframe), funkčnosti a obsahu (prototyp), ale aj dotiahnutý grafický vizuál, je ideálne využiť mockupu. Ide o prezentáciu finálneho vzhľadu našej práce v náhľadoch rôznych objektov v reálnej fotografii. Využíva sa pre lepšiu predstavu, ako bude náš finálny projekt vyzerať tam, kde sa má využívať.

Mockup nástroje

Na tvorbu môžeme využiť napríklad tieto on-line nástroje:

Všetky tieto kroky, ktoré sme si dnes predstavili, nás povedú k ideálnemu návrhu používateľského prostredia. Žiadny z krokov nesmieme vynechať, zanedbať alebo podceniť. Pokiaľ sme túto prácu odviedli kvalitne, užívateľské prostredie by malo viesť k príjemnému užívateľskému zážitku, ktorý je v UX naším hlavným cieľom.

V nasledujúcom kvíze, Kvíz - Testovanie a budovanie dôvery používateľa v UX, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.

Článok pre vás napísala Natálie Růžičková

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Autorka je odbornicí na digitální marketing, specializuje se také na UX/UI Design. Její oblíbenou disciplínou je SEO a jako nováček se pouští do webového vývoje a programování.

Aktivity