Jistě jste to už někde zaslechli. „Viděli jste už ty vajrfrejmy?“, „ty dráty tentokrát vůbec nevypadají špatně“, a podobně.
Tušíte o čem je řeč?
Dotyční zpravidla hovořili o tzv. Wireframech, Mockupech nebo o „klikacích“ prototypech. Podívejme se poněkud detailněji na to, o co vlastně jde.
Wireframy (čteme „vajr-frejm“; česky drátový model, …)
Wireframy jsou obrázky, které zpravidla vytváří analytici, UX konzultanti nebo informační architekti, za účelem zobrazení všech prvků na webové stránce nebo v aplikaci. Cílem je vizualizovat grafické rozhraní stránek a aplikací a umožnit tak nejen návrhářům, ale i zákazníkovi doladit a zpřesnit své představy o aplikaci ještě před tím, než se začne vyvíjet.
Co je psáno, to je dáno, říká se. Nicméně je známým faktem, že lidské bytosti vnímají valnou většinu informací prostřednictvím zraku – vytvořením wireframů, nákresů obsahujících lze porovnat naše představy s představami zákazníka nesrovnatelně rychleji než když mu dodáme například pouze textovou, byť sebedetailnější analýzu.
Wireframy obsahují zejména tyto informace:
- Druh informací, který bude zobrazen
- Rozsah funkcí, formulářů a dalších prvků grafického rozhraní (GUI)
- Představu o prioritách jednotlivých prvků – informací, ovládacích prvků apod.
- Pravidla pro zobrazování určitých typů informací
- Různé varianty chování GUI, např. zobrazení negativních scénářů, reakcí formulářů na chyby, apod.
Zpravidla se vytváří jednoduché nákresy, tzv. Mock-upy. Tyto tzv. low-fidelity wireframy obsahují méně detailů, jsou graficky výrazně méně podobné finální grafické úpravě, mají ale zásadní výhodu – jejich výroba je velmi rychlá a efektivní. Jsou ideální na menší projekty, GUI s menším počtem ovládacích prvků, a nepochybně také s více informovanými zadavateli – není nic příjemného, když se zadavatel změny na webu nebo v aplikaci popáté ptá, jaktože to má jiné barvy a proč to vůbec nevypadá jako stávající aplikace. Inu, protože to tak úplně vypadat nemá – wireframy jsou určeny hlavně pro ujasnění chování aplikace, a rozložení jednotlivách prvků. Design neřeší… tedy…
… pokud nejde ovšem o high-fidelity wireframy :-) Ty se zpravidla vytváří ve finále, kdy už jsou funkce a chování aplikace nakreslené v rychlejších mock-upech. Na menších prijektech se často ani nevytváří, v případě větších aplikací je ale vhodné je mít. Obsahují totiž již všechny zásadní prvky stránek, i řadu detailů, a obrázky se již začínají podobat finálnímu designu aplikace. Jejich tvorba je nicméně náročnější, jak časově, tak také finančně.
Nástrojů pro tvorbu wireframů je mnoho, budu se jimi proto detailněji zabývat v dalším postu.
A abych nezapoměl na jednu zásadní věc – na wireframy někdy není vlastně často potřeba ani žádný software, ani žádný počítač… je možné je samozřejmě dělat i obyčejnou tužkou na kus papíru :-)
Prototypy
Výroba klikacího prototypu je někdy vhodná pro definitivní odladění a také otestování „chování“ zejména u rozsáhlejší aplikace, před tím, než fakticky začne vznikat.
Nejde o nic jiného, než sadu webových stránek, mezi sebou provázaných jak odkazy, tak například prostřednictvím formulářů (zadání dat ve formuláři a kliknutí na odesílací tlačítko přesměruje testera na jinou statickou stránku).
Výroba klikacího prototypu se vyplatí zejména v těchto případech:
- projekt je rozsáhlejší a je těžké si představit jeho rozsah jen za použití promítaných nebo vytištěných obrázků
- cílem aplikace je umožnit klientovi získat požadované funkce nebo informace co nejrychleji – pak prototyp poslouží pro testování použitelnosti
- aplikace bude sloužit pro vícekrokové objednávky, je třeba odladit ecommerce proces
Klikací prototypy například poměrně bezbolestně ovládá program Axure RP, známý to nástroj mnoha analytiků a informačních architektů.