Wireframe vs mockup vs prototyp: Aký je medzi nimi rozdiel?

Wireframe vs mockup vs prototyp: v čom presne je rozdiel

Tieto tri slová sa v zadaniach a ponukách miešajú takmer náhodne. Klient si objedná „wireframe“ a dostane farebný návrh obrazovky. Niekto pošle „prototyp“ a myslí tým statický obrázok, na ktorý sa nedá kliknúť. Zámena znie ako detail, ale v praxi stojí čas aj peniaze: schvaľujete pripomienky k farbám vo fáze, kde sa má riešiť len to, čo kde je, alebo naopak posúvate klikateľné testovanie na koniec projektu, keď je zmena drahá.

Rozdiel medzi wireframom, mockupom a prototypom je v tom, čo sa v danej fáze rozhoduje, a s kým sa daný materiál testuje. Wireframe rieši štruktúru, mockup rieši vizuál a prototyp rieši správanie. Keď tieto tri veci poplietete, testujete zlú vec v zlej chvíli.

Čo presne je wireframe

Wireframe je najjednoduchšia forma návrhu obrazovky. Ukazuje, kde bude nadpis, kde tlačidlo, kde formulár a kde obrázok, ale bez farieb, fontov alebo finálnych textov. Účelom je rozhodnúť o informačnej architektúre a rozložení skôr, než sa investuje čas do vizuálu, ktorý sa pri zmene štruktúry rovnako zahodí.

Podľa glosára UX pojmov od Nielsen Norman Group je wireframe nízkovernostný výstup, ktorý predstavuje kostru rozloženia a funkčnosti rozhrania ešte pred riešením vizuálneho dizajnu. Práve preto sa wireframe zámerne kreslí čiernobielo alebo v odtieňoch sivej: farba by odvádzala pozornosť od otázky, ktorú má táto fáza zodpovedať, teda čo je na obrazovke a v akom poradí.

V praxi to znamená jednoduché obdĺžniky namiesto obrázkov, čiary namiesto textu alebo krátky placeholder text namiesto finálneho copywritingu. Niektoré wireframy sú papierové náčrty, iné sa robia v nástrojoch ako Figma alebo Balsamiq. Dôležité nie je, akým nástrojom vznikli, ale to, že sa dajú rýchlo zmeniť bez pocitu straty práce.

Čo presne je mockup

Mockup je statický návrh, ktorý už vyzerá ako finálny produkt. Má presné farby, typografiu, ikony, obrázky a rozostupy podľa dizajnového systému. Rieši otázku, ako bude produkt vyzerať, nie ako sa bude správať. Na mockupe sa nedá nič kliknúť ani prepnúť medzi obrazovkami samostatne, aj keď sa jednotlivé obrazovky dajú zoradiť za sebou ako statický príbeh.

Rovnaký glosár NN/g definuje mockup ako statickú, vysokovernostnú simuláciu navrhovaného rozhrania, ktorá zahŕňa detaily vizuálneho dizajnu ako farby a obrázky. Mockup teda pridáva vizuálnu vrstvu na už schválenú štruktúru z wireframu. Ak sa mockup robí bez predchádzajúceho wireframu, hrozí, že sa v ňom rieši farba tlačidla skôr, než je jasné, či tam vôbec má tlačidlo byť.

Mockupy sa dobre hodia na schvaľovanie vizuálnej identity, prezentáciu klientovi alebo vedeniu a na odovzdanie špecifikácií vývojárom. Nehodia sa na testovanie toho, či používatelia rozumejú toku aplikácie, pretože v nich nič nereaguje.

Čo presne je prototyp

Prototyp je interaktívna simulácia produktu. Prepája viacero obrazoviek tak, že kliknutím na tlačidlo alebo odkaz sa prechádza medzi nimi presne tak, ako by to fungovalo vo finálnej appke alebo webe. NN/g definuje prototyp ako ranú verziu návrhu použitú na testovanie a overenie nápadov, interakcií a funkčnosti, pričom zdôrazňuje, že prototypy sa môžu líšiť vo vernosti a kladú dôraz na interaktívne prvky, ktoré ukazujú, ako návrh skutočne funguje.

Prototyp nie je automaticky „to najkrajšie”. Existujú nízkovernostné klikateľné prototypy, poskladané priamo z čiernobielych wireframov prepojených klikacími oblasťami, aj vysokovernostné prototypy, ktoré vyzerajú a reagujú takmer identicky ako hotový produkt. Rozhoduje to, či testujete tok a logiku, alebo aj vizuálny dojem a mikrointerakcie.

Wireframe, mockup a prototyp v priamom porovnaní

Tabuľka zhŕňa rozdiely, s ktorými sa v projektoch pracuje najčastejšie. Presný čas a nástroj sa líšia podľa rozsahu projektu, princíp ostáva rovnaký.

Náklady na zmenu rastú s každou ďalšou fázou, a presne preto sa fázy neobchádzajú: čím neskôr sa chyba v štruktúre odhalí, tým drahšie je ju opraviť. Wireframe je zámerne „škaredý”, aby sa v ňom nikto nebál niečo prekresliť.

Ako fázy nadväzujú na seba v reálnom projekte

V bežnom projekte webu alebo aplikácie tieto tri typy návrhov netvoria tri izolované dokumenty, ale postupnosť, v ktorej každý krok stavia na predchádzajúcom rozhodnutí.

1. Zber požiadaviek a obsahová štruktúra. Skôr než vznikne prvý wireframe, treba vedieť, čo má obrazovka obsahovať a v akom poradí z pohľadu používateľa.
2. Wireframe. Rozloženie sa nakreslí čiernobielo, prejde interným review a prípadne rýchlym testom toku s kolegami alebo s klientom.
3. Nízkovernostný prototyp (voliteľné, ale odporúčané pri zložitejších tokoch). Wireframy sa prepoja klikacími oblasťami, aby sa overilo, či logika toku dáva zmysel skôr, než sa rieši vizuál.
4. Mockup. Na schválenú štruktúru sa aplikuje dizajnový systém: farby, typografia, ikony, obrázky. Toto je moment, keď klient prvýkrát vidí, ako bude produkt vyzerať.
5. Vysokovernostný prototyp. Mockupy sa prepoja do klikateľného toku vrátane stavov (chyba, načítavanie, prázdny stav) a otestujú sa so skutočnými používateľmi.
6. Odovzdanie vývojárom. Vývoj pracuje s finálnymi mockupmi a prototypom ako referenciou správania, nie s pôvodnými wireframami.

Krok tri sa v menších projektoch často vynecháva a rovno sa ide z wireframu do mockupu. To je v poriadku, pokiaľ je tok jednoduchý. Pri zložitejších aplikáciách, napríklad s viacstupňovým checkoutom alebo podmienenou logikou formulárov, sa oplatí overiť tok skôr, než sa doň investuje vizuál. Presnejšie o tom, ako vyzerá kompletná príprava dizajnového systému, na ktorý sa mockupy neskôr napájajú, píšeme v článku o design systéme pre SaaS aplikácie.

Časté chyby, ktoré predlžujú a predražujú projekt

Tieto chyby sa v praxi opakujú naprieč projektmi rôznej veľkosti a takmer vždy majú rovnaký dôsledok: prácu, ktorú treba spraviť dvakrát.

• Riešenie farieb vo wireframe fáze. Keď sa do čiernobieleho náčrtu pridá farba loga „len na ukážku“, diskusia sa okamžite presunie na vizuál namiesto štruktúry.
• Testovanie použiteľnosti na statickom mockupe. Používateľ nemôže kliknúť, takže testovanie sa zmení na zbieranie estetických názorov namiesto reálneho správania.
• Preskočenie wireframu pri zložitom toku. Ak sa rovno kreslí mockup viacstupňového procesu, štrukturálne chyby sa objavia až vo vysokovernostnom prototype, kde je oprava drahšia.
• Prototyp bez chybových a prázdnych stavov. Testovanie len „šťastnej cesty“ neskôr prekvapí vývojárov, ktorí musia dorábať stavy, ktoré dizajn nikdy neriešil.
• Schvaľovanie mockupu ako finálneho zadania bez prototypu. Vizuál môže vyzerať dobre a napriek tomu zle fungovať, pretože statický obrázok neukáže, čo sa stane po kliknutí.
• Miešanie fidelity v jednom dokumente. Časť obrazoviek dotiahnutá do detailu, časť len naznačená, robí review nepredvídateľným, pretože nie je jasné, čo je ešte otvorené a čo už schválené.

Čo ovplyvňuje čas a náklady na jednotlivé fázy

Presnú cenu nemá zmysel paušalizovať bez zadania, ale faktory, ktoré ju posúvajú, sú predvídateľné. Pri wireframoch je to hlavne počet obrazoviek a zložitosť toku medzi nimi. Pri mockupoch pribúda vplyv existujúceho dizajnového systému: ak firma už má nastavené farby, typografiu a komponenty, mockup vzniká rýchlejšie, než keď sa dizajnový systém tvorí od nuly popri projekte. Pri prototypoch najviac rozhoduje počet stavov a mikrointerakcií, ktoré sa majú otestovať, a to, či sa testuje s reálnymi používateľmi alebo len interne.

Ak riešite zadanie ako celok vrátane odhadu, prehľad orientačných rozpätí a modelov spolupráce nájdete v článku o tom, koľko stojí UI/UX dizajn na Slovensku.

Wireframe vs mockup vs prototyp podľa typu projektu

Pomer medzi wireframom, mockupom a prototypom sa mení podľa toho, čo sa navrhuje. Pri jednoduchej firemnej prezentačnej stránke môže byť wireframe len rýchly náčrt na jednu schôdzu. Pri SaaS aplikácii alebo e-shope s desiatkami obrazoviek je to samostatná fáza s vlastným schvaľovaním.

Firemný web alebo landing page

Pri prezentačnom webe je štruktúra zvyčajne jednoduchá: hlavička, pár sekcií, pätička. Wireframe sa tu často robí len pre domovskú stránku a jednu alebo dve kľúčové podstránky, napríklad kontakt alebo cenník. Mockup rieši najmä vizuálnu identitu a dôveryhodnosť, pretože pri firemnom webe rozhoduje prvý dojem. Samostatný interaktívny prototyp sa vynecháva, pretože toky sú krátke a dajú sa otestovať priamo na hotovej stránke počas prípravy pred spustením.

E-shop

Pri e-shope sa oplatí venovať čas nízkovernostnému prototypu procesu nákupu, teda ceste od produktu cez košík až po dokončenú objednávku. Práve tu sa najčastejšie strácajú zákazníci a chyba v logike checkoutu sa v mockupe jednoducho nevidí. Wireframe kategórie a produktovej stránky treba overiť aj s reálnymi dátami, nie len s jedným ukážkovým produktom, pretože dlhé názvy alebo chýbajúce obrázky vedia rozbiť rozloženie, ktoré na maketách vyzeralo bezproblémovo.

SaaS aplikácia alebo interný systém

Pri aplikáciách s komplexnou logikou, napríklad nastaveniami, oprávneniami alebo viacstupňovými formulármi, je poradie wireframe, mockup, prototyp najdôležitejšie zo všetkých troch typov projektov. Zmena v dátovom modeli sa premietne do desiatok obrazoviek naraz, takže štruktúra sa musí overiť skôr, než vznikne čo len jeden mockup. Vysokovernostný prototyp by mal pokrývať aj hraničné stavy: prázdny zoznam, chybu API, obmedzené oprávnenia používateľa. Tieto stavy sa v skorých fázach ľahko vynechajú a potom chýbajú vo vývoji.

Spoločný záver naprieč typmi projektov je rovnaký: čím zložitejší je tok a čím vyššie je riziko chyby, tým viac sa oplatí neponáhľať sa cez wireframe a mockup priamo k finálnemu vizuálu, a namiesto toho si najprv overiť správanie na prototype.

Kontrolný zoznam pred odovzdaním vývojárom

Súvisiace návody a zdroje

• UX audit webu a e-shopu: čo odhalí a kedy sa oplatí
• Design systém pre SaaS a aplikácie
• Koľko stojí UI/UX dizajn na Slovensku
• Redizajn webu alebo priebežná UX optimalizácia: čo je lepšie
• Používateľské testovanie webu: ako ho pripraviť a čo merať
• Prístupnosť webu po roku 2025: Čo má firma technicky skontrolovať
• Lottie vs GIF vs MP4/WebM: ktorý formát animácie zvoliť

Na záver

Wireframe, mockup a prototyp riešia tri rôzne otázky a žiadny z nich nenahradí ostatné dva. Wireframe hovorí, čo je na obrazovke. Mockup hovorí, ako to vyzerá. Prototyp hovorí, ako sa to správa. Keď tímy tieto tri veci poplietajú, výsledkom je buď krásny dizajn, ktorý sa zle používa, alebo funkčný tok, ktorý nikto neschválil vizuálne.

Ak si z tohto textu máte odniesť jednu vec, tak túto: neinvestujte do vizuálu skôr, než je štruktúra stabilná, a netestujte použiteľnosť na niečom, na čo sa nedá kliknúť. Dodržané poradie fáz je to, čo drahé chyby odhalí vtedy, keď ešte stoja najmenej.

Časté otázky