Wireframe

Čo to znamená

Wireframe je schematický návrh stránky alebo obrazovky: kde je čo umiestnené, čo je dôležitejšie a aké kroky používateľ urobí. Farby, fotografie a finálne texty v ňom zámerne chýbajú.

Vďaka tomu sa diskusia sústredí na štruktúru a nie na odtieň tlačidla. Zmena wireframu stojí hodinu, zmena naprogramovanej obrazovky niekoľko dní.

Wireframe nie je grafický návrh, prototyp ani MVP. Grafický návrh ukazuje, ako obrazovka bude vyzerať, prototyp sa dá preklikať a MVP už reálne funguje pre prvých používateľov. Wireframe stojí pred všetkými tromi: odpovedá len na otázku, čo na obrazovke má byť a v akom poradí.

Ako to funguje v praxi

Pri systéme na mieru sa na wireframoch najskôr prejde bežný pracovný deň používateľa. Tam sa ukáže, čo naozaj potrebuje a čo bolo len prianie z prvého stretnutia.

Pri landing page wireframe určí poradie argumentov a miesto výzvy na akciu. Až potom má zmysel písať finálne texty a robiť grafiku.

Pri objednávkovom formulári sa kreslia aspoň dva wireframy, pre mobil a pre počítač. Na telefóne sa stĺpce skladajú pod seba, a čo bolo na počítači vedľa seba, zrazu delí niekoľko posunutí. Až keď je jasné, čo má byť na malej obrazovke navrchu, sa oplatí riešiť responzívny dizajn do detailov.

Na čo si dať pozor

Preskočiť wireframe a ísť rovno do grafiky vyzerá rýchlejšie, ale predražuje projekt. Klient schvaľuje vizuál, hoci ešte nie je jasné, čo má obrazovka robiť, a zmeny prídu až pri testovaní.

Wireframy ukazujú len ideálny stav: plný zoznam, správne vyplnený formulár, úspešnú platbu. Prázdny zoznam, chybové hlásenie či čakanie na odpoveď v nich chýbajú a programátor ich vymyslí sám, každý inak. Výsledkom je nejednotné UX a opravy, ktoré sa platia až po spustení.