Wireframe



Drôtený model. Dosť hlúpy slovenský preklad slova "wireframe". V 3D modelovacích programoch sa wireframe nazýva pohľad na čiarový model, kde sú zvýraznené len obrysy a plochy sú priehľadné (viď titulný obrázok, to je môj dom). To aspoň dáva väčší zmysel. Vo webdizajne sa tým myslí jednoduchá pracovná pomôcka na prezentáciu rozloženia elementov. Aké existujú typy wireframe-ov, kedy a prečo ich robiť, akým spôsobom, čo zahrnúť a čo nie... A to všetko zažijete v nasledujúcich 5 minútach! Koniec reklamného bloku.



Čo to je...


Wireframe je model stránky z nízkou podrobnosťou. Je to transformácia informačnej architektúry do približného konceptu stránky. Slúži na komunikáciu medzi členmi tímu a na rýchle skúšky navrhovaných zmien. Je to skvelý komunikačný nástroj, ale nepríjemný kreatívny limit pre webdizajnérov. Spravidla obsahuje: navigáciu, približný textový obsah (aspoň nadpisy, popisky), naznačené plochy pre médiá (obrázky, videá), formulárové prvky, výzvy do akcií a ostatné zjednodušené prvky používateľského rozhrania. Zvyčajne je naozaj škaredý a to sa zmení k horšiemu, keď sa k nemu začnú vyjadrovať ostatní členovia návrhového procesu. Treba sa pripraviť na to, že pixel sem - pixel tam pri wireframe-och nemá cenu, rovnako ani farebnosť a nikto by sa takýmito nedostatkami nemal zaoberať.

Čo to nie je...


Nie je to (rapid) prototyp a nie je to ani mockup. Okej, okej... je to trochu jedno aj druhé. Mockup je wireframe naplnený grafikou. Prototyp je funkciami naplnený mockup. Komplikované? Ešte tu je rapid prototyp a to je funkciami naplnený wireframe. To, na čom testujem aplikácie počas používateľských testov, nie je wireframe ani mockup, ale (rapid) prototyp.



Aké typy...


Existujú dva typy wireframov: užitočné a neužitočné. Tie neužitočné sú krásne wireframy, ktoré nájdete napríklad na dribbble. Sú nádherne a najmä veľmi pracne nakreslené. Nie sú na skutočnú prácu. Podobný efekt ako Starckov odšťavovač. Je to nádherný kus dizajnu, ale je len na výstavku, nie na citróny. Tie užitočné wireframy sú tie, z ktorých je jasne vidieť, že je to pracovný model, že texty nie sú finálne a všetkým sa dá hýbať. Mal by pôsobiť ako papier, na ktorom kreslím ceruzkou a gumou niekoľkokrát pregumujem kresbu a tak jej postupne dodávam tvar. Čím viac prekreslovaný, tým menej sa bojím zmien.

Pre koho...


Úplne možnosť "namakaného" wireframe nezahadzujem. Treba si len uvedomiť,  pre koho je určený. Ak je z nejakého dôvodu určený na získanie klienta, alebo prezentačné účely (portfólio)... Zvyčajné publikum, ku ktorému sa wireframe dostane, či už priamo od UX dizajnéra, alebo nepriamo z druhej ruky, je:

  • projekťáci
  • produkťáci
  • biznis analytici
  • dizajnéri
  • copywriteri, marketéri, editori
  • SEO špecialisti (optimalizácia pre vyhľadávanie)
  • developeri
  • QA (zabezpečenie kvality)
  • používatelia
  • klienti

Trochu UX klišé...


"Pomýľ sa rýchlo, aby si mohol rýchlo vyhrať." je také tajné poslanie a zároveň to, čo robí prácu UX dizajnéra smutnou: viem, že vždy na začiatku pravdepodobne zlyhám. Wireframe je prostriedok stavaný na omyly. Dokonca Leah Buley z agentúry Adaptive Path odporúča vždy sa donútiť navrhnúť niekoľko variant riešení a nezamerať sa hneď na prvé. Odôvodňuje to tým, že ľudská myseľ sa odpichuje vždy od toho, čo pozná, čo jej pripadá familiárne. Ale familiárnosť nemusí byť vždy tým správnym riešením problému.



Ako na to...


Štandartne začínam s informačnou architektúrou: sitemaps (mapy stránok) a user flows (používateľské scenáre) by mali byť v tomto momente už dávno zadefinované na základe klientských požiadaviek (biznis požiadavky) a persón (používateľský komfort, používateľské požiadavky).

Tu prvýkrát zohľadňujem to, či je aplikácia určená pre mobily, pre monitory, pre tablety alebo pre všetko dokopy. Pri návrhu sa snažím mať na mysli "future proof", takže sa nespolieham na pixle, ale skôr myslím na to, ako sa rozloženie "rozčapí" na celú plochu akéhokoľvek zariadenia. Začínam však návrhom pre to najmenšie ("mobile first"). Za tento postup vďačíme manifestu od Luke Wroblewski.

Okrem rozloženia aplikácie a jednotlivých prvkov rozhrania používam trik, ktorý som si vymyslel a písal som o ňom v príspevku o farbách, tak sa len odcitujem, ako skutočný akademik:
Mojím obľúbeným postupom pri návrhu wireframe je vynechať farebnosť úplne a pracovať len s odtieňmi šedej. Viem si tak jednoducho nastaviť "hĺbku" dizajnu a odstupňovať tak dôležitosť prvkov na úrovni kontrastov. Tie najvýrazjnešie a najkontrastnejšie elementy figurujú "blízko" a tie menej dôležité sú uložené "vzadu".
Na dosiahnutie podobného efektu si štandartne definujem 3 druhy odkazovania na stránke: 
  1. najbližšie tlačidlo, t.j. chcem, aby ľudia klikali ako diví (call-to-action)
  2. bežné tlačidlo, t.j. náhradná voľba, ak niekomu nevyhovie možnosť  číslo 1
  3. vzdialené tlačidlo, t.j. chcem, aby naň ľudia klikali len vtedy, ak vyslovene hľadajú (silent)


Združovanie, radenie informácií a prevencia proti chybám pošmyknutím (slip errors) majú svoje dôležité miesto vo wireframe tiež. Združovanie informácií, "zgrupovanie", je spolu s radením informácií jedna zo zložiek stratégie obsahu, ktorá by sa mala dostávať aj do wireframe. Prevencia chýb pošmyknutím (viac info v mojom príspevku o chybách) zase definuje proporcie a uloženie tlačidiel tak, aby neboli na kritických miestach (napr.: tlačidlo "odoslať formulár" pri tlačidle "vymazať formulár").



Následne wireframe dochucujeme ako polievku: podľa potreby sa následne pridávajú ostatné, viac detailné zložky návrhu.

Ako to nerobiť...


Pri wireframe-och sa nezaoberám copywriting-om ani emočným dizajnom. Niekedy zahrabnem do labeling-u (vytváranie popisiek), ale aj ten sa snažím čo najviac vyhostiť z procesu tvorby wireframe. Väčšinou sa texty popisiek menia na základe obsahu a na základe analýz na živej stránke, čo prebieha oveľa neskôr.

Čo je na to potrebné...


Na vytvorenie wireframe nie je potrebný počítač. Stačí pero, papier a hlava. Ak má niekto pochybnosti o prvých dvoch, existuje množstvo nástrojov na pomoc. Väčšina aplikácií, ktoré riešia wireframing sú komplexné nástroje zaoberajúce sa najmä prototypovaním: UXPin (12€/mes.), Balsamiq Mockups (79€), Infragistics Indigo (zadarmo), Pencil (opensource, zadarmo), OmniGraffle (150€) a napokon Axure RP (bez anotácií, 216€). Na webe je ich asi milión ďalších.

TL;DR (too long, didn't read, resp. zhrnutie)


Wireframe:
  • Ako Adam Fendrych vyhlásil: "neřešte kraviny". Je to pracovná pomôcka a absolútne nezáleží na tom, ako vyzerá (ak nie je v požiadavkách stanovená prezentácia pre klienta, netreba sa vzhľadom vôbec trápiť).
  • Nie je "klikateľný". To sa volá prototyp.
  • Je určený na chyby a ich opravy. Určite "neprejde" prvý návrh. Ak áno, niečo nie je v poriadku... s vesmírom a tak.
  • Je zhmotnením informačnej architektúry.
  • Zobrazuje rozloženie aplikácie (layout).
  • Vyjadruje hĺbku (call-to-action, silent button).
  • Uplatňuje niekoľko UX metód radenia informácií a prevencie chýb.
  • Neobsahuje texty, ale len predbežne nahodené popisky.
  • Existuje milión nástrojov, z ktorých je najlepšia kombinácia pero a papier.

Ak by mal niekto záujem: nejaké ukážky mojich wireframe-ov (papierových alebo aj z iných nástrojov) môžem poslať na požiadanie. Kontaktný email: www.hypestudio.sk


0 komentárov :

Zverejnenie komentára