Realita by vás možno prekvapila. UXáci robievajú kopec chýb, mávajú takmer vždy viac otázok ako odpovedí, väčšinu svojho dňa testujú rôzne hypotézy a neustále sa učia o používateľoch niečo nové.

Hlavná otázka, ktorú si UX dizajnéri kladú, nie je “ako to mám nadizajnovať?”, ale “ako svoj dizajn čo najrýchlejšie otestovať?”.

Viac iterácií = lepšia použiteľnosť?

Pri dizajne Martinusu sme napríklad jednu stránku celkovo iterovali až 77 krát. Testovali sme všetko od rozloženia hlavných elementov až po detaily ako farba a tvar jednotlivých tlačidiel. Pri tak veľkom e-commerce projekte môže každý detail znamenať rozdiel v konverziách v hodnote tisícok eur.

Celý projekt však napriek tomu prebiehal rýchlo. Od prvotného zadania až po vypustenie webu ubehlo len 6 mesiacov. Aby sme dosiahli takúto efektivitu, museli sme obmedziť akékoľvek plýtvanie času a budgetu. V duchu Lean UX sme dizajnovali prototypy len do takých detailov, aké boli nutné pre otestovanie našej hypotézy.

3 úrovne detailnosti prototypov

V ideálnom svete by každý prototyp vyzeral ako finálny produkt. Lenže to by bolo neefektívne, najmä v počiatočných fázach. Niekedy stačí prototyp bez farieb a obsahu, inokedy dokonca len rýchla skica na tabuli.

Pozrite sa na tieto 3 typy detailnosti prototypov, ktoré vám umožnia testovať tak rýchlo a efektívne, ako sa len dá.


Tá istá obrazovka v 3 rôzných úrovňiach fidelity

Low-fidelity prototyp

Low-fi prototyp je základný koncept vášho produktu. Obsahuje štruktúru, jednotlivé funkcie, prepojenie obrazoviek a podobne.

Môže mať formu jednoduchých skíc na papieri, whiteboarde alebo postitoch, prípadne aj jednoduchú klikateľnú formu vytvorenú v Balsamiqu či inom digitálnom nástroji. Slúži na rýchle zhmotnenie vašich prvotných nápadov a následnú validáciu s kolegami, klientom či používateľmi.

Vždy ho však treba tretím stranám vysvetliť, pretože pochopiť low-fidelity koncept vyžaduje dobre rozumieť kontextu. Práve to býva kameň úrazu pri testovaní low-fi prototypov s používateľmi, ktorí majú často problém porozumieť abstraktným skicám. Odporúčame ich teda pred takýmto testovaním dať aspoň do klikateľnej podoby a vyladiť copy.

Ako testujeme:

  • Expert review - vypýtame si feedack od iných členov tímu, najmä UX dizajnérov a programátorov
  • S klientom - ak sa klientovi niečo nepozdáva, je dobré o tom vedieť čo najskôr
  • S používateľmi - skôr výnimočne, na to sú vhodnejšie vyššie fidelity

Čo nám umožňuje zistiť:

  • Schopnosť konceptu riešiť hlavné problémy používateľov
  • Jednoduchosť procesu - nie je príliš komplikovaný? Ako by šiel zjednodušiť?
  • Technické limitácie - je dobré hneď na začiatku konzultovať nápady s programátormi, aby sme zbytočne nedizajnovali niečo, čo technicky nie je možné postaviť

Čo by mal obsahovať:

  • Základný layout a vzájomné prepojenie jednotlivých obrazoviek
  • Popis kontextu (ako sa bude zákazník pohybovať po týchto stránkach?)
  • Hlavné CTA
  • Nadpisy a popisky dôležité pre pochopenie kontextu
  • Navigáciu (aspoň približne)

Čo nemusí obsahovať:

  • Obrázky
  • Grafiku
  • Interaktivitu


Takáto schéma aplikácie slúži skôr na validáciu s kolegami ako používateľmi


Vďaka jednoduchej šablóne viete svoj low-fi papierový prototyp oživiť a lepšie odprezentovať používateľom či klientovi

Takto vyzerali prvotné skice produktovej stránky na webe Martinus.sk

High-Fidelity prototyp

Hi-fi prototyp si môžeme predstaviť ako low-fi na steroidoch. Obsahuje omnoho viac detailov a často je aj interaktívny. Hi-fi slúžia na testovanie nášho konceptu s koncovými používateľmi (tzv. usability testing).

Tieto prototypy vyvíjame iteratívne - otestujeme ich, zapracujeme feedback a otestujeme ich znova. Hľadáme a opravujeme problémy v použiteľnosti až kým nie je všetko tip-top.

Aby sme boli efektívni, uprednostňujeme v tejto fáze vysoký počet iterácií pred ich kvalitou. Radšej otestujeme viac ľudí a rýchlejšie, ako testovať úzku skupinu a veľmi podrobne.

Feedback zapracúvame do prototypov čo najskôr, často už po prvotných náznakoch problému, aby sme nové zmeny ihneď otestovali.

Ako testujeme:

  • Testovanie použiteľnosti guerilla spôsobom - oslovovanie a testovanie na náhodných cudzincoch v kaviarňach, nákupných centrách, na prevádzkach klienta a pod.
  • Click testing - diaľkové monitorované testovanie používateľov na spôsob “kde by ste hľadali toto?”
  • Štruktúrované testovanie použiteľnosti v UXlabe - toto si však nechávame až na záver, ak už je náš prototyp dostatočne oditerovaný

Čo nám umožňuje zistiť:

  • Vplyv layoutu, ikon, textov, umiestnenia elementov, informačnej architektúry a prepojenia jednotlivých obrazoviek na použiteľnosť
  • Užitočnosť funkcionalít a ich umiestnenie

Čo by mal obsahovať:

  • Kľúčové stavy obrazovky - napr. otvorené menu, stlačené tlačidlo, aktívnu záložku…
  • Interaktivitu - schopnosť klikať naprieč prototypom
  • Finálne informačné texty, labele a popisky
  • Ilustračné obrázky, ktoré dávajú v danom kontexte zmysel (pokojne aj z fotobanky)
  • Zmysluplné ikony

Čo by nemal obsahovať

  • Grafiku a farby
  • Lorem Ipsum texty
  • Prekrížené obdĺžniky namiesto obrázkov (kedysi sa často vo wireframoch používali)


Prototyp aplikácie Hopin - prototypy môžu obsahovať ilustračné fotografie, aby pomohli používateľovi lepšie si predstaviť výslednú funkcionalitu


A takto vyzerá interaktívny hi-fi prototyp v aplikácii Invision

Mockup prototyp

Mockup je hi-fi prototyp vo finálnom grafickom a obsahovom prevedení. Je to tá najvyššia úroveň podrobnosti, ktorá na pohľad vyzerá takmer úplne totožne ako výsledný produkt.

Mockup taktiež slúži ako funkčná špecifikácia pre programátorov podielajúcich sa na implementácii. Je preto dôležité v tejto fáze spoznámkovať jednotlivé obrazovky a vysvetliť, ako sa má produkt správať aj po funkčnej stránke.

Mnohé súčasné prototypovacie nástroje (napr. Invision) umožňujú dať prototypom štruktúru, robiť ich klikateľné a pridávať poznámky na konkrétne miesta. Vďaka tomu môžeme dať zbohom zdĺhavým a nudným špeckám.

Čo nám umožňuje zistiť

  • Dopad grafiky na použiteľnosť - najmä ak máme grafiku, ktorá sa vymyká konvenciám
  • Dopad grafiky na pritiahnutie pozornosti - napr. všimnú si používatelia toto CTA?
  • Prístupnosť - bude interface dostatočne použiteľný aj pre ľudí s rôznymi obmedzeniami? (zhoršené videnie, farbosleposť, zranenia rúk…)

Ako testujeme:

  • Usability testing v UX labe - ideálne na zariadení, pre ktoré chceme náš dizajn otestovať (mobil, tablet, desktop)
  • In-field testovanie - napr. aplikáciu Hopin sme testovali priamo na ulici, vďaka čomu sme lepšie nasimulovali výsledný používateľský zážitok
  • Eye-tracking - sledujeme ako dobre vedie náš dizajn používateľov zrak k hlavnej CTA, či sú pre neho texty ľahko čitateľné, a pod.

Čo by prototyp mal obsahovať:

  • Všetko, čo bude obsahovať aj finálny web
  • Poznámky pre programátorov (ak je prototyp súčasťou špecifikácie, čo by rozhodne mal byť)

Čo nemusí obsahovať:

  • Bohužiaľ ešte nepoznáme efektívny spôsob, ako nasimulovať animácie a niektoré funkcionality


V aplikáciach ako Invision viete vytvoriť klikateľné prototypy

Validácia je kľúčom k dobrému UX

Je dôležité validovať tak často a tak skoro, ako sa len dá. Nikto predsa nechce plytvať časom na dizajn niečoho, čo používatelia nebudú vedieť používať alebo sa to vlastne ani nezrealizuje kvôli technickej náročnosti.

Dúfame, že týmto článkom sme vám aspoň trochu pomohli porozumieť základným princípom prototypovania. Prihláste sa na náš newsletter pre viac podobného obsahu a pokojne nás kontaktujte v prípade akýchkoľvek otázok.

Na článku spolupracovali Milan Tibenský a Stanislav Rykalský