Mockupy, WireFramy, Prototypy…

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ů.

Autor

ANALYTIK.CZ

Pracuji jako IT/Business analytik a občas jako projektový manažer na IT projektech v oblasti online služeb, webových aplikací a v poslední době především mobilních aplikací pro smartphony a tablety :)