Vzory a metafory
vo web dizajne

Prvé pravidlo použiteľnosti: „Užívatelia trávia 99% času na iných weboch“ - Jakob Nielsen v článku End of Webdesign [1]. Tvrdá pravda, ktorá na pohľad pochovala remeslo web dizajnu. Tento fakt ma svoj dopad aj na návrh webových užívateľských rozhraní. Priniesol so sebou nové postupy. Jedným z týchto postupov je využívanie vzorov a metafor.

Vzory

Vzory v informačnej architektúre pochádzajú zo softvérového inžinierstva, kde sú známe pod pojmom návrhové vzory (angl. Design Patterns):

V softvérovom inžinierstve sú návrhové vzory štandardným riešením všeobecných problémov. … Návrhové vzory popisujú abstraktné systémy interakcie medzi triedami, objektmi a komunikačným tokom.– Wikipedia [2]: Design pattern – computer science [3]

Návrhové vzory v interakcii s užívateľom

V informačnej architektúre majú vzory podobný význam. Sú však naviazané na interakciu s užívateľom. Definovať sa dajú ako vizuálne a funkčné riešenia interakcie s užívateľom. Pod vzorom si môžete predstaviť napríklad prihlasovací formulár. Má svoju konkrétnu funkčnosť, svoj vzhľad a spôsob akým sa s ním pracuje.

Vzorom môže byť napríklad formulárové políčko, nadpis, roletkové menu, vyhľadávací formulár, či oznam o chybe. Ale tiež abstrakty ako farebná schéma, alebo prvky z korporátneho manuálu.

Vzory sa môžu spájať do väčších celkov (ďalších vzorov). Formulárové políčka, nápisky, odkazy, tlačítka vytvoria formulár (napríklad prihlasovací). Ten spoločne s vyhľadávaním, zoznamom noviniek a menu (a podobne) tvorí jednu stránku. Niekoľko stránok potom tvorí celý web, čí sériu webov.

Pozrime sa na dopad prvého pravidla použiteľnosti. Užívateľ čerpá všetky svoje skúsenosti z iných webov a aplikuje ich pri používaní toho vášho. Niektoré zo vzorov (napr. prihlasovací formulár) sú riešené vždy podobne. Užívatelia ich poznajú až tak, že na základe toho ako vyzerajú, dokážu určiť ako s nimi pracovať. Takéto vzory je možné označiť za zažité. A tým sa nám otvára brána k metaforám.

Metafory

Ak vieme určiť zažité vzory, môžeme ich použiť pre vytvorenie nových, ktoré vyzerajú, fungujú, alebo sa používajú podobne. Vzory pre metaforu používať buď celé, alebo použiť len ich vzhľad, či dokonca ich charakteristickú časť. Rovnako je možné pre metaforu použiť objekt, či správanie z reálneho sveta. Dobrým príkladom objektu z reálneho sveta sú záložky. Ľudia ich poznajú z papierových kalendárov, alebo telefónnych zoznamov.

---

---

Vhodne aplikovaná metafora dokáže výrazne ovplyvniť celkovú použiteľnosť.

Pri jednom z projektov v Et netere sme riešili DMS, ktoré malo nahradiť celú 'papierovú' komunikáciu u klienta. Na schôdzkach s klientom sme si osvojili súčasný spôsob práce, používané termíny a procesy. Pre UI to znamenalo významnú zmenu. Zložky sa stali spismi. Meta-informácie dokumentov košieľkami. Assety faktúrami, zmluvami či prílohami. Stavy workflow úlohami.

Definícia cieľovej skupiny užívateľov je základom ako zvoliť dobré metafory. Poznanie užívateľa je dobré odpozerať z postupov marketingu. To je však predmetom ďalšieho článku.

Knižnice návrhových vzorov

Dizajnérske tímy si zvykajú na vytváranie knižníc vzorov. Každý nový vzor, ktorý vytvoria riadne zdokumentujú, otestujú, pribalia pár obrázkov a zdrojové kódy. Každý vzor je detailne popísaný v niekoľkých kapitolách. Každý tím môže vzory definovať odlišným spôsobom. Záleží len na nich aká forma im bude vyhovovať. V Et netere používame vlastný Wiki systém s tagovacím mechanizmom, v ktorom vzory dokumentujeme. Štandardný zoznam kapitol pre jeden vzor vyzerá takto:

• Názov – meno vzoru musí byť jasné a jednoznačné pre vás alebo tím, ak v nejakom pracujete. Určite sa vyhnite názvom ako „My Magic Pattern“. Ja preferujem anglické názvy, pretože ich považujem za dostatočne presné. Napríklad: „Expandable box with summary“
• Popis – všeobecný popis funkčnosti a účelu, tak aby bolo aj nezainteresovaným jasné o čo ide. Ako súčasť popisu je možné pridať ilustračný obrázok, či animáciu.
• Použitie – popis kontextu v ktorom je vzor vhodné, či nevhodné použiť.
• Kde bol vzor použitý – zoznam implementácii vzoru. Táto časť slúži hlavne na rýchly náhľad na skutočnú funkčnosť, či rýchleho predvedenia vzoru na tímových workshopoch. Vhodné je uviesť meno projektu, URL, či prístupové údaje.
• Ako pracuje – popis workflow (podobne ako sme popisovali workflow pri autorizácii [5]). Jasne a zrozumiteľne popísať ako vzor funguje. Popis z užívateľského pohľadu sa ukázal ako veľmi praktický.
• Zdrojové kódy – zdrojové kódy od CSS a HTML, cez grafické súbory, až po ukážky implementácie v Jave, PHP,…
• Korekvizity – ak vzor využíva iné vzory, je dobré ich tu uviesť.
• Podobné vzory – zoznam vzorov v knižnici, ktoré majú podobné špecifiká, alebo boli použité ako metafory.
• Konkurenčné vzory – zoznam konkurenčných vzorov (vzorov, ktoré použil iný tím, či spoločnosť). Doplnenie o obrázky, či dokonca animácie môžem len odporučiť.
• Užívateľské názory a testy použiteľnosti – výstupy z užívateľských testovaní, komentárov užívateľov, či iné informácie o použiteľnosti

Podrobnejšie sa dokumentácii vzorov budem venovať v ďalšom článku.

Knižnice sú silným nástrojom. Ako praktické sa ukázali napríklad na úvodných projektových workshopoch s klientom, kde sme nápady predvádzali priamo v knižnici na animáciách funkčnosti. Okrem toho, že organizujú celý návrh do prehľadnej štruktúry, držia celé know-how na jednom mieste. Precízne zdokumentované vzory sú znovupoužiteľné pre ďalšie redizajny. Pri nových projektoch z nich môžu analytici veľmi efektívne čerpať, takže nové rozhrania sa z väčšej miery skladajú ako lego. Tieto dokumentácie sú potom vstupom pre grafikov, či programátorov.

Vzory, metafory a knižnice sme použili v množstve analýz webových aplikácii, či prezentácií. Ich použitie je ale všeobecné a dotýka sa každého užívateľského rozhrania od displeja na mikrovlnke (ikony, formáty čísel) až po rozsiahle informačné systémy ako intranety, či dopravné značenie. Na rozsahu projektu nezáleží, ostatne vzory sme použili aj na tak malom projekte, akým je môj USE*LOG. Záleží len na tom či ste ochotný venovať o niečo viac času na dokumentáciu a o pár mesiacov nevynaliezať vaše vlastné koleso.