vajrfrejmTakéUI wireframe, website wireframe, low-fidelity wireframeZákladní
Definice
Wireframe je hrubý návrh obrazovky, stránky nebo toku, který ukazuje rozmístění obsahu, ovládacích prvků a priorit bez finální grafiky. Slouží k rychlé debatě o struktuře, navigaci a interakci, aby tým odhalil chyby v zadání dřív, než vznikne vizuální design nebo kód.
Nezaměňujte: Wireframe v UX označuje náčrt rozhraní, zatímco v 3D grafice může znamenat zobrazení modelu pomocí hran.
Proč wireframe vzniká dřív než grafika
Wireframe pomáhá oddělit rozhodnutí o fungování rozhraní od rozhodnutí o vzhledu. Designer, vývojář, produktový manažer a zadavatel se mohou bavit o tom, co má být na stránce nejdůležitější, kudy uživatel pokračuje a které informace chybí. Nízká vizuální věrnost je záměr: šedé bloky a jednoduché popisky snižují pokušení hodnotit barvy, ilustrace nebo fonty.
Dobře načasovaný wireframe šetří práci hlavně tam, kde se ještě mění obsah, obchodní pravidla nebo pořadí kroků. Změnit obdélník s názvem formuláře je levnější než přepisovat hotovou komponentu v aplikaci. Wireframe ale nemá nahrazovat uživatelský výzkum ani přesnou specifikaci chování.
Co je ve wireframu vidět
Wireframe obvykle zachycuje hierarchii nadpisů, bloky obsahu, navigaci, formulářová pole, výzvy k akci, chybové stavy a vazby mezi obrazovkami. Text může být pracovní, ale klíčové popisky tlačítek a polí by neměly být jen výplň. Právě mikrokopie často rozhoduje, jestli je tok srozumitelný.
[Logo] [Vyhledávání]
--------------------------------
Nadpis produktu
[Fotografie] Cena
[Do košíku]
Popis, parametry, dostupnostJednoduchý náčrt může vzniknout na papíře, v nástroji typu Figma nebo jako textová skica. Důležité je, aby bylo jasné, zda jde o nízkou věrnost, střední návrh s reálnými texty, nebo téměř finální rozvržení před vizuálním designem.
Dva příklady z praxe
Košík e-shopu před napojením plateb
Tým e-shopu zjistí na wireframu, že tlačítko pro pokračování k dopravě soupeří s polem pro slevový kód. Produktový manažer přesune slevový kód do méně výrazné části a vývojáři zatím nemusí měnit hotovou šablonu. Výsledek je kratší schvalování a menší riziko, že zákazník opustí košík kvůli nejasnému dalšímu kroku.
Mobilní onboarding pro účetní aplikaci
Designer nakreslí tři obrazovky registrace a označí, kde se ptát na firmu, DIČ a pozvání kolegů. Test se dvěma interními účetními ukáže, že dotaz na kolegy patří až po vytvoření účtu. Wireframe zabrání tomu, aby tým postavil onboarding, který působí složitě už v první minutě.
Věrnost návrhu a hranice detailu
Low-fidelity wireframe stačí pro rozložení obsahu a hlavní tok. High-fidelity wireframe se blíží vizuálnímu návrhu, proto může být užitečný pro responzivní pravidla, stavy komponent nebo předání vývojářům. Příliš mnoho detailu v rané fázi však zpomaluje diskusi a vytváří falešný pocit hotového řešení.
Wireframe je dobré doplnit poznámkami k přístupnosti: pořadí focusu, význam nadpisů, alternativní cesty bez myši a chování chybových hlášek. Rozhraní s hezkým rozložením může selhat, pokud wireframe nepočítá s klávesnicí, čtečkou obrazovky nebo dlouhými překlady.
Příklady z praxe
Košík e-shopu před napojením plateb
Tým e-shopu zjistí na wireframu, že tlačítko pro pokračování k dopravě soupeří s polem pro slevový kód. Produktový manažer přesune slevový kód do méně výrazné části a vývojáři zatím nemusí měnit hotovou šablonu. Výsledek je kratší schvalování a menší riziko, že zákazník opustí košík kvůli nejasnému dalšímu kroku.
Mobilní onboarding pro účetní aplikaci
Designer nakreslí tři obrazovky registrace a označí, kde se ptát na firmu, DIČ a pozvání kolegů. Test se dvěma interními účetními ukáže, že dotaz na kolegy patří až po vytvoření účtu. Wireframe zabrání tomu, aby tým postavil onboarding, který působí složitě už v první minutě.
Časté omyly
- MýtusWireframe je jen ošklivá verze finální grafiky.
- Ve skutečnostiWireframe není náhrada vizuálního designu, ale samostatný krok pro rozhodnutí o struktuře a toku. Záměrně potlačuje barvy a dekorace, aby se debata nezasekla na estetice.
- MýtusDo wireframu stačí dát lorem ipsum, texty se doplní později.
- Ve skutečnostiPracovní výplň může pomoci u dlouhých bloků, ale klíčové popisky musí být ověřitelné už ve wireframu. Špatně pojmenované tlačítko nebo nejasná chybová hláška mění použitelnost celého toku.
Časté dotazy
- Kdy má wireframe vzniknout v projektu?
- Wireframe má největší hodnotu po ujasnění cíle obrazovky a před tvorbou detailního vizuálního návrhu. Wireframe není první nápad bez kontextu, protože bez znalosti uživatele a obsahu snadno jen zafixuje špatné zadání. V agilním týmu může vzniknout těsně před implementací konkrétní části, v rozsáhlejším projektu často doprovází produktovou specifikaci a pomáhá sjednotit očekávání stakeholderů.
- Kdy wireframe stačí místo klikatelného prototypu?
- Wireframe stačí místo klikatelného prototypu ve chvíli, kdy tým řeší hlavně strukturu stránky, pořadí informací a viditelnost hlavních akcí. Klikatelný prototyp je vhodnější, pokud je potřeba ověřit přechody mezi obrazovkami, reakce na chyby, gestikulaci v mobilní aplikaci nebo pocit z delšího procesu. Wireframe může být první kontrola, prototyp pak navazuje při ověřování interakce.
- Má wireframe obsahovat reálné texty?
- Wireframe má obsahovat reálné texty tam, kde text ovlivňuje rozhodnutí uživatele nebo velikost rozhraní. Popisek tlačítka, chybová hláška, název kroku nebo text v prázdném stavu nejsou kosmetika, ale součást funkce. Výplňový text může stačit u dlouhých odstavců, které pouze drží místo, ale u klíčových prvků často skrývá problémy v pochopení toku.
- Kdo má wireframe schvalovat?
- Wireframe by měli schvalovat lidé odpovědní za uživatelský tok, obsah, technickou proveditelnost a obchodní cíl. Produktový manažer kontroluje prioritu funkcí, designer srozumitelnost rozhraní, vývojář náklady a omezení implementace, případně právník nebo compliance specialista povinné texty. Schválení jen podle vkusu zadavatele je slabé, protože wireframe má řešit hlavně strukturu a rozhodování uživatele.
Zdroje
- Website wireframe(otevře se v novém okně)
- ISO 9241-210:2019(otevře se v novém okně)
- Web Content Accessibility Guidelines (WCAG) 2.2(otevře se v novém okně)
- HTML: HyperText Markup Language(otevře se v novém okně)
Související pojmy
