Ako pripraviť wireframy webu bez chaosu

Web môže mať krásne farby, precíznu typografiu aj pôsobivé animácie - a napriek tomu návštevník nenájde službu, nevie si vyžiadať ponuku alebo odíde bez nákupu. Práve preto sa otázka, ako pripraviť wireframy webu, nezačína výberom nástroja. Začína sa rozhodnutím, čo má web pre firmu reálne dosiahnuť.

Wireframe je jednoduchý návrh rozloženia stránky. Nehovorí, či bude tlačidlo modré alebo akú fotografiu použijeme v hero sekcii. Ukazuje, čo návštevník vidí ako prvé, kam ho stránka vedie a aké informácie potrebuje na ďalší krok. Je to architektúra digitálneho zážitku - bez dekorácie, no s jasným účelom.

Pre majiteľa firmy alebo marketingového manažéra je wireframing praktický spôsob, ako znížiť riziko drahých úprav v neskoršej fáze. Keď sa mení štruktúra v jednoduchom čierno-bielom návrhu, je to rýchle. Keď sa tá istá zmena rieši po dokončení dizajnu, textov, fotení a vývoja, stojí čas, peniaze aj energiu celého tímu.

Nezačínajte blokmi, ale obchodným cieľom

Najčastejšia chyba vzniká ešte pred prvým obdĺžnikom na plátne. Tím začne skladať sekcie podľa vzoru konkurencie alebo podľa zoznamu, ktorý si pamätá z iných webov: úvod, o nás, služby, referencie, kontakt. Takáto štruktúra môže fungovať, ale sama osebe nerieši, prečo má človek na stránke zostať.

Najprv si definujte hlavnú konverziu. Pre výrobcu technológií to môže byť dopyt od kvalifikovaného zákazníka. Pre e-shop je to nákup. Pre poradenskú firmu môže byť cieľom rezervácia úvodného stretnutia. Jeden web, samozrejme, plní viac úloh, no jedna z nich musí mať prioritu. Wireframe potom vytvára cestu práve k nej.

Rovnako dôležité je pomenovať, komu stránka slúži. Potenciálny klient, ktorý vás objavil prvýkrát, potrebuje inú argumentáciu než existujúci partner hľadajúci technickú dokumentáciu. Ak sa snažíte na jednej stránke povedať všetko všetkým, výsledkom býva dlhý obsah bez hierarchie. Dobré wireframy nútia tím vybrať si, čo má byť v danom momente podstatné.

Pred návrhom si zodpovedzte tri otázky: Akú akciu má návštevník vykonať? Akú prekážku musí stránka odstrániť, aby ju vykonal? A aký dôkaz potrebuje, aby vám veril? Odpovede určia poradie obsahu oveľa lepšie než osobný vkus.

Ako pripraviť wireframy webu krok za krokom

1. Zmapujte obsah a rozhodnite, čo na webe naozaj má byť

Wireframe nie je spôsob, ako zakryť nejasný obsah. Ak firma nemá jasno v službách, produktoch, procesoch alebo rozdiele oproti konkurencii, návrh stránky len zviditeľní tento problém. Preto najskôr spíšte všetky obsahové vstupy: služby, produktové kategórie, referencie, prípadové štúdie, časté otázky, cenníky, dokumenty a kontaktné body.

Potom ich rozdeľte podľa významu. Nie každá informácia patrí na úvodnú stránku. Tá má návštevníka rýchlo nasmerovať, vysvetliť hodnotu firmy a otvoriť dvere k relevantnému detailu. Detailné parametre, rozsiahle príbehy alebo právne dokumenty majú svoje miesto hlbšie v štruktúre.

Tento krok často odhalí, že firma nepotrebuje viac podstránok, ale jasnejší systém. Menej stránok s presným účelom je účinnejších než rozsiahly web, v ktorom sa používateľ aj interný tím strácajú.

2. Navrhnite používateľské cesty, nie izolované stránky

Návštevník neuvažuje v menu položkách. Prichádza s otázkou alebo úlohou. Hľadá riešenie problému, overuje si vašu dôveryhodnosť, porovnáva možnosti alebo potrebuje kontaktovať správneho človeka. Wireframe musí počítať s tým, odkiaľ prišiel a čo chce vedieť ako ďalšie.

Predstavte si napríklad firmu, ktorá ponúka priemyselné riešenia. Návštevník z vyhľadávača nemusí najprv potrebovať všeobecný príbeh značky. Pravdepodobne chce zistiť, či riešite jeho konkrétnu aplikáciu, v akom rozsahu a s akou skúsenosťou. Logická cesta môže viesť od problému cez riešenie a dôkazy až ku konzultácii.

Naopak, pri službách s vyššou cenou alebo dlhým rozhodovaním je vhodné dať priestor referenciám, procesu spolupráce a expertíze tímu. Neexistuje univerzálna šablóna. Správne poradie závisí od rozhodovacieho procesu zákazníka, nie od toho, čo je aktuálne populárne v dizajne.

3. Dajte každej sekcii jednu úlohu

Každý blok vo wireframe by mal mať jasnú funkciu. Hero sekcia vysvetľuje hodnotu a ponúka prvý krok. Sekcia služieb pomáha návštevníkovi zaradiť sa. Referencie znižujú neistotu. Kontakt premieňa záujem na akciu. Ak blok neviete jednou vetou obhájiť, pravdepodobne tam ešte nepatrí.

Pri návrhu úvodnej stránky pomáha myslieť na prirodzenú postupnosť: najskôr jasné pomenovanie prínosu, potom relevantné riešenie, následne dôkaz, a až potom detailnejšie vysvetlenie. Dôležité výzvy k akcii nemajú čakať až na koniec stránky. Zároveň ich však netreba opakovať bez kontextu v každom druhom bloku.

Dobrý wireframe pracuje aj s pozornosťou. Veľké plochy, zoskupovanie prvkov, nadpisy a prázdne miesto nie sú estetické ozdoby. Už v tejto fáze ukazujú, kam sa oko pozrie najskôr a či má obsah zrozumiteľný rytmus.

4. Navrhujte najprv pre mobil, potom pre väčšiu obrazovku

Mobilný wireframe nie je zmenšený desktop. Na malej obrazovke sa ukáže, či je informačná architektúra skutočne pevná. Navigácia sa zjednoduší, texty musia byť stručnejšie a dlhé tabuľky či komplikované porovnania si vyžadujú iný formát.

Začnite preto základnou mobilnou verziou. Určite, čo musí byť viditeľné bez zbytočného posúvania, ako sa človek dostane k ponuke a čo urobí po odoslaní formulára. Až následne rozšírte kompozíciu pre desktop, kde môžete pracovať s viacerými stĺpcami, bohatšou navigáciou alebo doplnkovým obsahom.

Nie všetko sa musí na mobile zobrazovať rovnako. Ak určitý prvok neprináša hodnotu a len zvyšuje kognitívnu záťaž, pokojne ho upravte alebo vynechajte. Konzistentný zážitok neznamená identické rozloženie.

Čo má wireframe obsahovať a čo ešte nie

V základnej fáze stačí jednoduchá štruktúra: navigácia, názvy sekcií, približná dĺžka textov, miesto pre obrázky alebo video, formuláre, tlačidlá a poznámky k správaniu prvkov. Používajte reálne alebo aspoň realistické textové zadania. Zástupný text typu lorem ipsum často vytvorí falošný pocit, že sa do bloku zmestí čokoľvek.

Naopak, wireframe nemusí riešiť finálnu farebnosť, výber písma, ilustrácie ani fotografický štýl. Príliš skoré riešenie vizuálu odvádza pozornosť od otázok, ktoré sú teraz dôležitejšie: Je ponuka pochopiteľná? Je cesta ku konverzii krátka? Nechýba dôkaz? Nie je formulár zbytočne náročný?

Výnimkou môže byť značka s veľmi silným vizuálnym systémom alebo projekt, v ktorom obraz nesie zásadnú časť informácie. Aj tam však treba najskôr oddeliť rozhodnutie o štruktúre od rozhodnutia o štýle. Dizajn má architektúru posilniť, nie zachraňovať.

Testujte skôr, než sa wireframe zmení na dizajn

Wireframe je pracovný materiál, nie dokument, ktorý treba obdivovať. Ukážte ho ľuďom, ktorí poznajú obchod, zákaznícky servis, predaj aj produkt. Každý z nich môže zachytiť inú medzeru: obchodník vie, kde sa klienti rozhodujú, servis pozná opakujúce sa otázky a produktový tím odhalí nepresné tvrdenie.

Testovanie nemusí byť komplikované. Stačí dať človeku konkrétnu úlohu, napríklad nájsť riešenie pre určitý problém alebo vyžiadať cenovú ponuku. Sledujte, kam kliká, čo prehliada a pri ktorom pojme sa zastaví. Neopýtajte sa iba, či sa mu stránka páči. Pýtajte sa, čo podľa neho firma ponúka a čo by urobil ďalej.

Pri internom pripomienkovaní sa vyhnite vetám typu chcem to väčšie alebo pridajme tam ešte jednu sekciu. Užitočná pripomienka má vždy väzbu na cieľ alebo používateľa: návštevník tu nemusí rozumieť rozdielu medzi dvoma službami, prípadne chýba dôvod, prečo má odoslať formulár práve teraz.

Najčastejšie chyby, ktoré predražujú web

Niektoré chyby sa opakujú naprieč odvetviami. Prvou je kopírovanie konkurencie bez pochopenia jej stratégie. Druhou je príliš veľa priorít, keď chce každá interná osoba dostať svoju tému nad záhyb stránky. Treťou je nejasný obsah, ktorý sa má vraj dopísať neskôr. A štvrtou je odkladanie rozhodnutí o používateľských cestách až na vývojára.

Vývojový tím dokáže presne postaviť to, čo dostane v zadaní. Nemá však hádať, ktorý argument je obchodne najsilnejší alebo aká informácia presvedčí zákazníka. Čím lepšie je toto rozhodnuté vo wireframe, tým menej sa projekt mení na sériu drahých kompromisov.

V 850North vnímame wireframy ako moment, keď sa stratégia mení na konkrétne rozhodnutia na obrazovke. Nie je to medzikrok, ktorý treba len rýchlo preskočiť, aby prišli na rad farby a efekty. Je to miesto, kde web získava logiku.

Keď máte pred sebou ďalší webový projekt, nehľadajte najprv inšpiráciu na vzhľad. Skúste si najskôr nakresliť cestu človeka, ktorý vám má po návšteve stránky dôverovať natoľko, aby urobil ďalší krok. Práve tam sa začína dizajn, ktorý funguje aj pre biznis.