Wireframe - doslova drátěný model - je skica, zjednodušený náčrtek stránky nebo webu. Řeší rozložení prvků, hierarchii informací a do jisté míry i to, jak budou různé tematické celky výrazné. Do wireframu se smí sahat. Dokonce je to velmi žádoucí! Proto prosím škrtejte a doplňujte. Čím víc verzí budu muset udělat, tím líp.
Co se vyřeší ve wireframu, nebude se řešit v grafice. Může to znít idealisticky, ale funguje to. Proto se do wireframu neinvestuje moc času ani energie: místo fotek v něm najdete proškrtnuté obdélníky (označované jako "placeholder"), grafika je jen naznačená. Texty obsahovat může, ale často pouze coby zástupné Lorem Ipsum. A někdy ani to ne.
Mnoho lidí si na poradě k novému webu podobný wireframe nakreslí do bloku nebo na tabuli. To je úplně v pořádku. Bohužel tato první skica je často zároveň i tou poslední. Jde přímo ke grafikovi, který doplní fotky, barvy, tvary a typografii. A pak předělává a předělává.
Neříkám, že nejde udělat web na první dobrou. Ale je to vždycky sázka do loterie, protože úprava grafiky je násobně náročnější než úprava wireframu. Když říkám násobně, myslím tím třeba 3×, 4×. To si ještě vynásobte počtem stránek, kterých se úprava týká. Běžné weby mají desítky stránek, velké mohou mít i víc než sto. To už je při úpravě něčeho základního, třeba šířky stránky, opravdu hodně práce. Nemluvě o tom, že po grafice zpravidla natahují ruce programátoři a kodéři, takže odklady pak ovlivní i jejich harmonogram.
Konzultace wireframů bývají rychlé. Je to díky tomu, že nikoho nerozptylují detaily jako odstín barvy tlačítka nebo míra zaoblení rohů. U wireframu nezáleží na tom, zda se někomu líbí nebo ne. Nejde o finální vzhled stránky a každý to ví. Porady jsou tedy zpravidla efektivní a od tématu se zdaleka neodbíhá tak často, jako když se řeší grafika.
Výsledkem diskuze je okomentovaný prototyp, který UX designér před dalším kolem připomínek nahradí novou verzí. Některé stránky se hned schválí, a tým se tak může soustředit už jen na problematická místa. Pokud je potřeba se k nějaké části vrátit, prostě se vezme ze staršího návrhu a přidá do aktuální verze.
Kdy je ten správný čas na copy? Když vám na textech opravdu záleží, ideální je pustit se do textování ve chvíli, kdy jsou s wireframy všichni spokojeni. Otextovaný wireframe se dá ještě mírně upravit, kde texty chybí nebo přebývají. Teprve pak je wireframe na 100 % final a jde ke grafikovi. Ten už pracuje s final texty, které si bere přímo z wireframe.
Když není čas vsunout mezi wireframe a grafiku několik dní pro copywritera, může copík pracovat paralelně s grafikem. Wireframe má před očima a texty sází do textového dokumentu. Grafika a texty se znovu sejdou u kodérů. Což je hlavní úskalí tohoto přístupu - když jsou nějaké ledabyle nahozené texty v grafice, klade to velké nároky na kodéry, aby nepodlehli nutkání použít je místo ostrých textů dodaných bokem od copywritera. Když si to neohlídáte, můžete si pak zahrát hru "Najdi 10 rozdílů". Jen jich není 10, ale stovky :-)
Samotným grafikům dobře připravený wireframe uvolňuje kapacitu, aby se mohli plně soustředit na svou práci. Nemusí řešit uživatelské scénáře nebo UX persony a mají jistotu, že struktura už prošla schválením a nebude se měnit. Z dobrého wireframu vyčtou, které obsahové celky jsou důležité a měly by vyznít. Tomu pak přizpůsobí výběr barev a velikost písma, případně informace doplní doprovodnou grafikou nebo fotkami. Z vlastní zkušenosti vím, že dobře připravený wireframe mají grafici rádi, protože i jim šetří čas a nervy.
Wireframe je rychlý, levný a snadno se upravuje. Můžete ho testovat, vytvářet varianty a porovnávat je. A právě to je ta správná cesta k optimálnímu výsledku.
Autorský článek:
.png)
Honza Mikulec
UI / UX designer
Jsem hlasem vašich zákazníků a udělám všechno pro to, aby se jim váš web nebo aplikace dobře používaly. Pomůžu vám projekt vymyslet, připravím jeho architekturu a když budete chtít, tak vám ho i nakreslím. Jsem zastánce Design Thinking metodiky, která se mi v praxi mnohokrát osvědčila jak u malých úkolů, tak u projektů skutečně složitých a komplexních. Jako designer tíhnu k minimalismu, ale pokud váš zákazník očekává diskotéku, zvládnu i to. Určitě.
Další Honzovy PIX UX články můžete prozkoumat na těchto odkazech níže:
PIX UX: Když za vás mluví zákazník aneb social proof
PIX UX: Responzivní a ještě responzivnější stránky
PIX UX: Přístupnost webu jako příležitost
Zaujal vás článek? Hledáte nejvhodnější wireframe? Honza je tu pro Vás a rád poradí.
Copyright PIXMAN 2024
