1. 11. 2010 v sekci webdesign:

Wireframy profesionálně II

Rozdělení wireframů a ostatních deliverables dle úrovně detailu a tedy i náročnosti.

Dočetl jsem knihu Undercover User Experience Design a vzal jsem si z ní vcelku málo – pár odkazů na knihy, které by snad mohly být zajímavější a několik docela dobrých ucelujících myšlenek. Pokud nemáte načteno o UX nic, tak to může být dobrý úvod do problematiky, ale jinak ji moc doporučit nemohu.

Co mě ovšem zaujalo v knize a dříve jsem nevěděl jak to srozumitelně demonstrovat, je dělení výstupů z analýz (deliverables) do tří úrovní vzhledem k tomu, jak moc se s nimi patláme (tj. dle preciznosti propracování).

Nízká úroveň

Wireframy skicované na papír. Nejjednodušší, nejrychlejší a zároveň nejhůře vypadající výstup, který skvěle poslouží k diskusi nad rozložením a obsahem webu. Je možné ho prezentovat zákazníkovi, ale spíše v případě, že už máte vytvořený vztah nebo v případě, že se zákazníkem právě diskutujete nad řešením problému. Naopak jsou skici zcela nevhodné jako součást smlouvy či formální specifikace webu.

Střední úroveň

Elektronické wireframy. Jejich výhodou je určitá štábní kultura, ale je s nimi více práce a lepší nástroje pro jejich vytváření mohou být docela drahé. Výrazně lépe se v nich řeší větší množství wireframů (ctrl+c+v) a hromadné úpravy. Jestliže si s nimi dáte trochu práce, tak je můžete použít jako součást formální specifikace webu.

Vysoká úroveň

Drátěný prototyp webu – tj. je vidět nejen rozložení prvků, ale i reakce na akce uživatele. Hodí se pro rozsáhlejší weby či kritická místa (řešení formulářů apod.). Prototypy jsou drahé, vyplatí se je použít jen ve chvíli, kdy by mohlo být jejich nevyužití ještě dražší.

Kdy co použít

Záleží na několika faktorech – cílové skupině, vašem vztahu k zákazníkovi, časovém presu a požadovaném rozsahu specifikace.

Osobně neukazuji většině klientů skici na papíře, ale až wireframy překreslené pomocí Axure. Wireframy jsou vaše vizitka a je tudíž vhodné předávat je v co nejlepší formě (tedy pokud to klient zaplatí). Pro diskusi nad konceptem skvěle poslouží papír a tužka, ale když dodáváte výstup někomu třetímu – tj. jste externí dodavatel a zákazník se neúčastní procesu tvorby a za výstupy navíc platí těžké peníze, tak by ho mohl přegumovaný papír se skvrnami od kafe odradit od další spolupráce.

Komentáře

01. 11. 10, 11.13

Hezky napsáno, jen bych snad podotkl, že pokud máte v Axure už předdefinovánu většinu elementů (knihovna), tak s wireframy není více práce než s tužkou a papírem;)
Osobně zastávám nutnost tvorby wireframu pro každou specifickou stránku webu či aplikace, ať už s nimi pracují kolegové, dodavatelé nebo klient.
Souhlasím, že prototyp má význam spíše u větších webů a aplikací. Každopádně krom textové specifikace je to asi nejlepší vodítko pro všechny (a hlavně pro programátory a před-uživatelské testování)

01. 11. 10, 13.19

Axure vypadá jako šikovnej program, vážně ale stojí za těch 589 dolarů? – viz http://www.axure.com/purchase.aspx.

Co levnější alternativy?
Resp. nedostanu za těch 10 tisíc Kč i něco lepšího?
Díky za případný tip !

01. 11. 10, 13.22

Axure vypadá témeř dokonale, mě zatím odrazuje cena – http://www.axure.com/purchase.aspx

Nemáte typ na nějaký levnější SW?
Díky.

01. 11. 10, 20.00

Já teď musel dát za pravdu tomu, proč v Seznamu používáme Balsamiq.
Axure je schopnější, ale trošku moc „počítačovej“ a nejde nad tim tak návrhově uvolněně přemýšlet.

02. 11. 10, 10.43

Jakube, levnější software je určitě Balsamiq, jak správně píše Jirka, ale rozhodně toho neumí tolik.

Jirko, myslím si že jde, a i kdyby to tak někdo chápal, tak nová verze přichází s podobnýcm skicováním a dalšími funkcemi, které jsou přednostmi Balsamiqu – http://axure.com/…re-RP-6.aspx

6. Keff
02. 11. 10, 13.29

V Axure je killer feature ‚masters‘ – vytvořím si nějaký prvek, a ten potom můžu dát do více stránek, když ho změním, změní se všade. Jde to i vnořovat.

U Balsamiqu to je poptávaná featura číslo jedna, teď mají veřejnou betu kde už to je, ale o hodně těžkopádnější než v Axure (v Axure stačí dvojklik na komponentu a už jí edituju, přepnu se do předchozího pohledu a už je aktualizovaný, žádné ukládání/zavírání…).

Druhá killer feature je dynamic panel – panelu můžu nakreslit kolik chci stavů, a přepínat je libovolným buttonem/linkem, tak jde například v jedné stránce ukázat více stavů stejné kontrolky.

Na druhou stranu v Balsamiqu mi přijde super, jak se kontrolky upravují pomocí textové syntaxe (ukázkový příklad je menu)…