Web ŠetřímEnergii.cz získal v súťaži Internet Effectiveness Awards 2013 prvé miesto v kategórii “Priemysel a energetika”. Mám z toho veľkú radosť. Na jeho tvorbe som sa totiť podieľal ako UX. Chcete sa pozrieť pod pokličku?
S projektom ma oslovil bývalý kolega, ktorý teraz pracuje pre agentúru Wunderman. Potreboval redesignovať pôvodný web, ktorý v tej dobe bol zanedbaný a zastaralý. Hľadal niekoho, kto existujúci obsah zorganizuje tak, aby dával zmysel a nakreslí k tomu wireframy.
Proces
Na prvý pohľad mi bolo jasné, že by to bola zbytočná práca. Web by aj tak nefungoval. Nebolo jasné, koho má osloviť a aký má účel. Začal som sa vypytovať: Načo je tu toto? Čo sa stane, keď to vyhodíme? Ako sa o sem dostanem? Prečo by som si to mal prečítať? Čo mám urobiť, keď si to prečítam?
Občas nepríjemné otázky. Ale čím viac sme si ich zodpovedali, tým jasnejší obrázok sme boli schopní kresliť. Veľmi rýchlo sme si vyjasnili, že obyčajný obsahový web nebude plniť účel. Že musíme užívateľa chytiť za ruku a aktívne ho ťahať a strkať, musíme s ním pracovať. Spoločne sme vymysleli koncept, ktorému sme verili.
Z prvých skíc som dal dohromady kreslený interaktívny prototyp stránok (medzi jednotlivými obrazovkami sa dá prechádzať klikaním na príslušné miesta, niektoré oblasti majú viac stavov a klikaním sa medzi nimi prepína). Predviedli sme to klientovi a dostali sme zelenú.
Nasledoval podobný interaktívný wireframe. Tentokrát čistý, s konkrétnejším obsahom. Ten má špeciálnu featuru – kliknutím na farebné kolečká v ľavom hornom rohu sa v ňom dá zapnuť zobrazenie heatmapy dôležitosti jednotlivých prvkov na stránke. Červené sú najdôležitejšie. To je primárna akcia, ktorú chceme, aby užívateľ vykonal. Žlté sú sekundárne prvky. Ak užívateľ nevykoná primárnu akciu, nech urobí alebo prečíta si aspoň toto. Zelené prvky sú doplnkové, ktoré užívateľ kľudne môže ignorovať. Hlavička, pätička a pod.
Tieto wireframy slúžili ako podklad pre grafikov a vývojárov. Videli na nich, aké má byť rozloženie stránky, čo majú vizuálne zdôrazniť a čo naopak potlačiť. Ako sa má užívateľ po webe pohybovať. Ako sa majú správať interaktívne časti.
Nástroje
Prvé wireframy som kreslil rukou na papier. Jediné, na čo som si dával pozor, bola škála. Natiahol som si čiary na vyznačenie šírky stránky, hlavnej obsahovej časti a sidebaru. Všetko som kreslil tak, aby to držalo jednotný rozmer, aby som to po oscanovaní nemusel resizovať. Tým pádom majú všetky časti wireframu rovnaký charakter, rovnaké hrúbky čiar, rovnakú úroveň detailu.
Keď som ten interaktívny HTML wireframe ukazoval kamarátom, pýtali sa, prečo som to robil tak komplikovane. V skutočnosti to vôbec nebolo pracné. Je to pár kontajnerov, v ktorých sú obrázky. Kód je úplne primitívny, obsahuje iba pár DIVov, ktoré majú nastavenú nejakú šírku. Všetko ostatné – rozmery, spacing a pod. – je na vyrezaných obrázkoch. Celý wireframe som schopný za chvíľku komplet preskladať, jednoducho tým že prehodím poradie blokov.
Druhý wireframe som urobil úplne rovnakou technikou. Akurát namiesto ručnej kresby a scanovania som to naťahal vo Fireworks a uložil ako PNG s transparenciou. Vďaka tomu som mohol jednotlivým blokom pridať triedy, ktoré sa postarali o podfarbenie. Tie som potom jednoduchým javascriptom iba vypínal a zapínal. Mrknite do zdrojáku. Je to fakt primitívne.
Výsledok
Pokiaľ viem, tak Wunderman aj RWE sú s výsledkom spokojní. Ocenenie nám všetkým urobilo radosť. A vďaka nemu majú všetky strany chuť opäť podniknúť niečo podobné. Hurá.
