Wireframy profesionálně I
Čtyři úrovně wireframů pro různé části procesu tvorby webu a různé cílové skupiny.
Wireframy mohou mít různý účel a můžete je prezentovat různým cílovým skupinám, aby měly lepší představu o webu. Nemusíte je všechny automaticky ukazovat klientovi, protože to může být kontraproduktivní. Že nechce platit wireframy, které nevidí? Prostě je neuvedete do kalkulace jako samostatnou položku a budou zahrnuty v grafickém návrhu či analýze.
Wireframy pro designery
Slouží k prvotnímu rozložení obsahu webu (např. na základě content inventory typových stránek od analytika). Často k jejich kreslení ani nepoužijete počítač a naskicujete si je rukou na papíře. Dají se k tomu použít spešl čtveřečkované papíry a rozličné podpůrné nástroje, stejně jako bílý papír a nejistá ruka v MHD. Výstup uvidí jen ti, co si pod ním něco představí, a tak můžete dělat cokoliv vám vyhovuje.
Wireframy pro designera nemusí zachycovat přesné proporce webu, finální důraz na jednotlivé složky designu, všechny obrázky apod. Drátěné modely mohou v této fázi sloužit jen jako mentální pomůcka při promýšlení designu – výsledný design nebude prvoplánovitý, ale projde určitým vývojem, který už nebudete opakovat eletronicky.
Obecně jsem nenarazil na web, který by měl ve finálě stejnou strukturu, jako jeho úvodní wireframy. Vývoj webu je o změnách – mnohdy se nepovede navrhnout vše napoprvé a až v pozdějších fázích vidíte, že takto ne.
Wireframy pro copywritera
Zatímco wireframy pro designera mohly být spíše ve stádiu boxíků, wireframy pro copywritera už obsahují text (tj. jsou vytvářeny elektronicky). Copywriter si na jejich základě dokáže představit, kolik textu na webu orientačně bude, a pokud obsah webu píše klientova sekretářka, tak alespoň vynechá blah-blah ságu na hlavní straně. Je možné (a pokud klient dodává texty, tak i velmi vhodné) spojit tuto úroveň s wireframy pro klienta.
Wireframy pro klienta
Dokument, který prezentujete klientovi, by na jednu stranu měl vypadat profesionálně (srovnejte obecně základní výstupy z Axure a z Balsamiqu), na druhou stranu wireframy pro klienta nikdy nebrandujte. Obrandované wireframy (logíčko, barvičky, ikonky) jsou grafický návrh (budete se divit kolik klientů nepozná rozdíl).
Obrázky nahraďte obdelníky a skutečný obsah pouze naznačujte, nikdy nepoužívejte korporátní barvy, realistické fotky apod. Poté, co klientovi (tj. třeba desítce manažerů one-by-one) horkotěžko vysvětlíte účel wireframů a přenesete se přes komentáře, které s účelem wireframů nijak nesouvisí (ta žena by měla mít červené šaty ne modré), vám omlátí o hlavu grafický návrh, který přece vypadá úplně stejně. ;-)
Wireframy pro prototyp
Zatímco wireframy pro klienta doporučuji striktně černobílé, wireframy pro prototyp webu stojí za to alespoň lehce obrandovat, protože případným testerům je jedno, jaký bude nakonec design, ale červené tlačítko může mít jiný důsledek než bílé. V prototypu už bývají reálné texty, můžete přidat logo či reálnou fotografii, kterou chcete použít v designu.
Určitě byste dokázali vymyslet další cílové skupiny a varianty wireframů – důležité je definovat si jejich účel a na základě toho přizpůsobit jejich podobu a úroveň detailu. Není wireframe jako wireframe.
Související články
Komentáře
Pěkný článek, jen mi tu trochu chybí zmínka o tom, že by se mělo jednat o jeden jediný kontinuální proces: Tak jak získávám další a další informace od klienta či poznatky z testů, zpřesňuji a zkvalitňuji návrhy. Těžko si řeknu „Tak a teď udělám wireframe pro textaře,“ když ještě nemám ani tu základní skicu na ubrousku…
Ještě bych doporučil FlairBuilder, přijde mi krapet lepší než Balsamiq
Vzhledem k tomu, že u nás je wireframe součástí specifikace (a většinou i přílohou smlouvy), nedovedu si představit, že bychom ho klientovi „zatajovali“. Už jen kvůli tomu, že je k němu první zpětná vazba od klienta, k čemuž přeci slouží (aby nebylo nutné pracně upravovat grafické návrhy kvůli nedorozuměním v obsahu nebo funkcionalitách).
Jinak papírový náčrtek je samozřejmě základ. Wireframe pro copywritera mi připadá jako zbytečnost. Na testování používáme buď wireframe nebo prototyp v co nejfinálnějším vzhledu, nic mezi.
[4] obávám se, že jsme si úplně neporozuměli, a tak se to pokusím přiblížit jinak – to, že klient objedná např. design homepage neznamená, že vidí všechny vývojová stadia… a stejně nakonec dostane design homepage :-) – s wireframy je to stejné – některé vývojové fáze není vhodné ukazovat nikomu, natožpak klientovi a neznamená to, že nakonec některá „verze“ nebude součástí specifikace webu.
Wireframe by určitě měl reflektovat pro koho a pro jaké účely je vytvářen.
Nicméně každý wireframe by podle mě měl sdělovat tyto tři věci:
- strukturu stránky a rozmístění prvků
- funkcionalitu jednotlivých prvků
- vizuální prioritu jednotlivých prvků
[6] co myslíš pod funkcionalitou? Poznáš z wireframe, zda se po kliku na odkaz otevře JS potvor nebo nová stránka?
Ad další dvě – souhlasím.
[7] Wireframe by měl být doplněný textovým popisem, který vysvětluje funkcionalitu nejasných prvků. Přijde mi zbytečný komentovat banality typu „Odkaz Kontakty povede na stránku Kontakty“. Ale např. v případě situace, kterou popisuješ, je je to užitečné.
Co se týče wireframů pro klienta – osobně dávám spíš přednost „neformálnějším“ výstupům z balsamiqu než supr dupr Axure, a to z jednoho jednoduchýho důvodu – balsamiq vypadá jako skica a ještě se mi nestalo, aby si ho klient spletl s grafickým návrhem.
Navíc ve prospěch balsamiqu mluví i cena (nejakejch $80).