Tři slova, tři různé účely
Klient pošle e-mail: „Pošlete mi mockup hlavní stránky." Designér dodá wireframe. Klient je zklamaný, protože čekal hotový vzhled. Tohle nedorozumění stojí čas obě strany a opakuje se překvapivě často.
Wireframe, mockup a prototyp jsou tři odlišné výstupy v procesu návrhu webových stránek. Každý slouží jinému účelu, vzniká v jiné fázi a odpovídá na jinou otázku. Když si na začátku projektu ujasníte, co přesně potřebujete, ušetříte si zbytečné kolečko schvalování.
Co je wireframe (drátěný model)
Wireframe je zjednodušený nákres rozložení stránky. Obsahuje obdélníky místo obrázků, šedé bloky místo textu a jednoduché čáry naznačující strukturu. Neřeší barvy, fonty ani grafiku.
Účelem wireframu je odpovědět na otázku: „Co bude na stránce a kde to bude?" Designér ve wireframu řeší hierarchii obsahu, tedy co uživatel uvidí jako první, kam padne jeho pozornost a v jakém pořadí bude informace konzumovat. Jakob Nielsen z Nielsen Norman Group tohle označuje jako informační architekturu, tedy způsob, jakým organizujete obsah tak, aby dával smysl uživateli, ne firmě.
Wireframe záměrně vypadá nedokončeně. Kdyby vypadal hezky, klient by komentoval barvu tlačítka místo toho, jestli má navigace správnou strukturu. Tento princip používají týmy v Airbnb i Spotify: papírové wireframy kreslí fixou na tabuli během prvních workshopů, aby diskuse zůstala u struktury.
Typický wireframe obsahuje: rozložení navigace, pozice hlavního nadpisu a textu, umístění call-to-action prvků, náznaky obsahu v patičce a základní grid. Nic víc.
Co je mockup (grafický návrh)
Mockup přidává k wireframu vizuální vrstvu. Obsahuje skutečné barvy, typografii, fotografie, ikony a grafické prvky. Vypadá jako hotová stránka, ale nelze na něj klikat.
Mockup odpovídá na otázku: „Jak bude stránka vypadat?" Designér v něm ukazuje výběr fontů, barevnou paletu, fotografický styl a celkový vizuální jazyk. Klient poprvé vidí, jak bude jeho web působit na návštěvníky.
Rozdíl oproti wireframu je podstatný. Wireframe řeší logiku, mockup řeší estetiku. Když designér přeskočí wireframe a začne rovnou mockupem, často se stane, že klient chce přesunout celou sekci jinam. V mockupu to znamená hodiny práce. Ve wireframu pět minut.
Mockupy dnes většina designérů tvoří ve Figmě. Před deseti lety dominoval Photoshop, ale ten neumožňuje snadnou práci s komponentami a responzivním layoutem. Figma nabízí autolayout, varianty komponent a sdílené knihovny, což přesně odpovídá tomu, jak moderní web funguje.
Co je prototyp
Prototyp je interaktivní verze návrhu. Uživatel na něj klikne a stránka reaguje: otevře se menu, přepne se záložka, zobrazí se modální okno. Prototyp simuluje chování hotového webu bez jediného řádku kódu.
Prototyp odpovídá na otázku: „Jak se bude web chovat?" Nestačí vědět, kde je tlačítko a jak vypadá. Potřebujete zjistit, co se stane, když na něj uživatel klikne, kam ho to přesměruje a jestli bude vědět, co dělat dál.
Google Ventures vyvinul metodu Design Sprint, ve které tým za pět dní vytvoří prototyp a otestuje ho s pěti skutečnými uživateli. Jake Knapp, autor metody, opakovaně zdůrazňuje, že prototyp nemusí být dokonalý. Stačí, aby byl „dostatečně reálný" na to, aby uživatel reagoval přirozeně.
Prototypy mají různou úroveň věrnosti. Low-fidelity prototyp propojuje wireframy jednoduchými přechody. High-fidelity prototyp vypadá a chová se téměř jako hotový web, včetně animací a mikrointerakcí. Volba závisí na tom, co testujete: pokud ověřujete navigační tok, stačí low-fidelity; pokud testujete, jestli uživatel pochopí interaktivní prvek, potřebujete high-fidelity.
Praktické srovnání
Wireframe, mockup a prototyp se liší ve čtyřech dimenzích: věrnost, interaktivita, čas na vytvoření a typ zpětné vazby, kterou od klienta získáte.
Wireframe má nízkou vizuální věrnost, nulovou interaktivitu, vznikne za hodiny a klient při jeho schvalování komentuje strukturu a obsah. Mockup má vysokou vizuální věrnost, stále nulovou interaktivitu, vzniká za dny a klient komentuje grafiku, barvy a typografii. Prototyp přidává interaktivitu, vzniká za dny až týdny a klient (nebo testovací uživatel) komentuje použitelnost a chování.
Tým v designové agentuře IDEO, která pomáhala navrhovat první myš pro Apple, používá pravidlo „build to think". Wireframe vám pomůže přemýšlet o struktuře, mockup o vizuálu, prototyp o chování. Žádný z těchto formátů nenahrazuje ostatní.
Kdy použít který formát
Každý projekt nepotřebuje všechny tři fáze. Rozhodování závisí na dvou faktorech: složitost webu a míra nejistoty.
U jednoduchého informačního webu (pět stránek, žádné formuláře, žádný e-shop) většinou stačí wireframe a mockup. Designér načrtne rozložení, po schválení struktury vytvoří grafický návrh a vývojář podle něj web zakóduje.
U e-shopu s filtrováním, košíkem a vícekrokovým checkoutem je prototyp téměř nutnost. Baymard Institute, dánská výzkumná firma zaměřená na UX e-shopů, publikovala data z více než 150 000 uživatelských testů. Průměrná míra opuštění košíku se podle jejich výzkumu drží kolem 70 %. Značná část těchto odchodů pramení z matoucí navigace v checkoutu, tedy přesně z problémů, které prototyp odhalí ještě před vývojem.
Pro redesign existujícího webu doporučuji začít wireframy, protože struktura se při redesignu mění nejčastěji. Když přidáváte novou funkci do stávajícího webu, wireframe většinou nepotřebujete, stačí mockup nebo rovnou prototyp, protože struktura už existuje.
Časté chyby při práci s wireframy a mockupy
První chyba: klient komentuje barvy ve wireframu. Řešení je jednoduché. Wireframe by měl být černobílý nebo ve stupních šedi. Pokud do něj designér přidá barvu, byť jen jednu, klient se na ni zaměří místo na strukturu.
Druhá chyba: designér tvoří mockup bez schváleného wireframu. Výsledkem jsou drahé změny v pozdější fázi. Přesunout blok ve wireframu trvá minuty, v propracovaném mockupu hodiny. Pravidlo je prosté: strukturu schvalte levně, grafiku řešte až potom.
Třetí chyba: prototyp jako konečný produkt. Prototyp slouží k testování a validaci, ne jako podklad pro vývoj. Vývojář potřebuje mockup s přesnými rozměry, barvami a specifikacemi. Z prototypu tyto hodnoty často nelze spolehlivě exportovat.
Čtvrtá chyba: přeskakování rovnou ke kódu. Některé startupy chtějí „ušetřit čas" a nechávají vývojáře rovnou programovat bez návrhu. Marty Cagan, autor knihy Inspired a partner Silicon Valley Product Group, to označuje za nejdražší způsob testování nápadů. Oprava špatné struktury v kódu stojí řádově víc než její odhalení ve wireframu.
Nástroje pro jednotlivé fáze
Pro wireframy funguje tužka a papír lépe, než byste čekali. Rychlost je důležitější než přesnost. Z digitálních nástrojů se hodí Figma (univerzální), Balsamiq (záměrně „ošklivé" wireframy, které brání diskusím o grafice) nebo Whimsical (rychlé a jednoduché rozhraní).
Pro mockupy dnes dominuje Figma. Nabízí komponenty, autolayout, varianty a sdílení s klientem v prohlížeči bez nutnosti instalace. Sketch stále používají některé týmy na macOS, ale jeho podíl klesá. Adobe XD Adode v roce 2024 přestal aktivně vyvíjet.
Pro prototypy Figma pokrývá základní interakce (kliknutí, přechody, overlay). Pro pokročilejší prototypy s podmínkami, proměnnými a animacemi slouží ProtoPie nebo Framer. ProtoPie umožňuje simulovat senzory telefonu (gyroskop, mikrofon), což se hodí pro mobilní aplikace.
Co si z toho odnést
Wireframe ukazuje strukturu. Mockup ukazuje vzhled. Prototyp ukazuje chování. Každý formát řeší jinou vrstvu návrhu a odpovídá na jinou otázku. Pokud si na začátku projektu ujasníte, kterou otázku potřebujete zodpovědět, vyberete správný formát a vyhnete se zbytečné práci.
Nejčastější problém není v tom, že by tým použil špatný nástroj. Problém nastává, když designér a klient nemluví stejným jazykem. Když klient řekne „mockup" a myslí tím „něco, na co můžu klikat", ve skutečnosti potřebuje prototyp. Pět minut vysvětlování na začátku projektu ušetří hodiny nedorozumění později.
