Wireframe

Wireframe je skica jedne stranice na kojoj su označeni dijelovi i njihov redoslijed, bez boja, fotografija i konačnog teksta. Kod nas se prevodi kao žičani okvir, mada se u praksi kaže engleski.

Cilj je da se o strukturi razgovara dok je izmjena jeftina. Pomjeriti sivu kutiju traje trideset sekundi. Pomjeriti isti dio na programiranoj stranici traje dan i ide na nečiji račun.

Zašto je namjerno ružan

Ovo zbunjuje klijente koji prvi put vide skicu i pomisle da je nedovršena.

Čim se na stranici pojavi fotografija, razgovor se pomjeri na nju. Sviđa li se, je li prava, može li se naći bolja. Pitanje je li poziv na akciju na pravom mjestu ostane neodgovoreno, a upravo ono odlučuje hoće li stranica raditi.

Sive kutije tjeraju razgovor na ono što se u toj fazi može mijenjati bez troška: šta ide prvo, šta se može izbaciti i šta nedostaje. Kad se to zaključa, dizajn ima jasan zadatak.

Šta se na skici odlučuje

• Redoslijed dijelova. Šta čovjek vidi prvo, drugo, treće. Kod stranica usluga to je najvažnija odluka na cijelom projektu.
• Šta stoji iznad prve linije skrolanja. Prostor koji se vidi bez pomjeranja je najskuplji na stranici i u njemu mora stajati šta radite i šta se od posjetioca traži.
• Gdje idu pozivi na akciju. Koliko ih ima, koji je glavni, i ponavlja li se niže.
• Koliko teksta ide u koji dio. Ne sam tekst, nego procjena dužine, jer sto riječi i tri stotine ne izgledaju isto.
• Šta ide na telefon, a šta se sakriva. Uski ekran ne trpi isti raspored.
• Koje slike su potrebne i u kojem obliku. To je i popis posla za fotografa.

Nakon toga se crta dizajn, pa se programira. Svaki korak unazad u tom nizu je skuplji od prethodnog.

Kako izgleda posao u praksi

Prvo se dogovori šta stranica treba postići. Jedna rečenica, i to konkretna: ova stranica treba donijeti poziv od čovjeka koji traži hitnu intervenciju.

Zatim se popiše koja pitanja taj čovjek ima, redom kojim ih ima. Šta radite, dolazite li kod mene, koliko brzo, koliko košta, jeste li pouzdani, kako vas zovem. Taj redoslijed je skica.

Onda se crta, najčešće prvo za telefon, jer uski ekran ne oprašta. Ono što ne stane na telefon obično nije ni trebalo stajati.

Na kraju se skica pokaže nekome ko projekat ne poznaje. Pet minuta i jedno pitanje: šta ova firma radi i šta se od tebe traži. Ako odgovor ne stigne brzo, raspored se mijenja dok je to još besplatno.

Gdje se ovo najviše isplati

Kod landing stranica, jer one imaju jedan cilj i svaki dio se brani time doprinosi li mu.

Kod redizajna, jer tu postoji zamka da se prenese stari raspored sa novim bojama. Skica prisili na pitanje zašto je nešto uopšte bilo tu.

Kod projekata s više ljudi koji odlučuju. Rasprava o sivim kutijama traje dan; ista rasprava nad gotovim dizajnom traje dvije sedmice i završi kompromisom koji nikome ne odgovara.

I kod sajtova koji se rade po drugi put, nakon što prvi nije donosio upite. Tada se skica crta iz podataka: šta pokazuje analitika, dokle su ljudi skrolali, gdje su odustajali. To je mjesto gdje se UX dizajn i CRO sretnu.

Šta ide u skicu stranice usluge

Kod firmi u BiH se najčešće crta upravo ta stranica, pa vrijedi konkretno.

Na vrh ide šta radite i za koga, u jednoj rečenici, uz mjesto za broj telefona koji se može pritisnuti. Ispod toga jedan poziv na akciju.

Zatim dio koji odgovara na pitanje odgovara li ovo mome slučaju. Popis situacija u kojima ljudi zovu, a ne popis vaših vještina.

Pa dio o tome kako posao ide. Tri do pet koraka, od poziva do završetka, jer ljudi najviše strahuju od onoga što ne mogu zamisliti.

Onda cijena ili raspon, i od čega zavisi. Stranica bez ijednog broja tjera ljude da traže dalje.

Pa dokaz: fotografije obavljenog posla, kratke izjave kupaca, godine rada, područje koje pokrivate.

Na kraju ponovljen poziv na akciju i podaci za kontakt, jer je čovjek koji je došao do dna spreman, a ne treba ga slati nazad na vrh.

Kako se skica predaje dalje

Skica sama po sebi nije dokument nego dogovor, pa uz nju ide nekoliko bilješki.

Uz svaki dio kratko piše šta je njegov zadatak i koliko teksta se očekuje. Bez toga se dizajn radi na izmišljenom tekstu, pa sve puca kad stigne pravi.

Uz skicu ide i popis slika koje treba nabaviti, s opisom šta treba biti na njima. To je često najduži dio posla i vrijedi ga pokrenuti odmah.

I jedna rečenica o tome šta stranica mora postići, koja se poslije koristi kao mjerilo. Kad se kasnije raspravlja o izmjeni, pitanje je da li ona toj rečenici pomaže.

Skica za telefon prvo

Razlog nije moda nego aritmetika: kod većine sajtova koje viđamo veći dio posjeta dolazi s telefona, pa raspored koji tamo radi vrijedi više od onog koji dobro izgleda na širokom ekranu.

Uski ekran ima jednu korisnu osobinu. Sve stoji jedno ispod drugog, pa se redoslijed ne može sakriti u kolone. Ako nešto na telefonu djeluje suvišno, obično je suvišno i na računaru, samo se tamo lakše progura.

Kad se skica za telefon zaključa, verzija za širok ekran se najčešće svodi na to koje dijelove staviti jedan pored drugog. Suprotan redoslijed traži da se odlučuje šta izbaciti, a to je teža i sporija rasprava.

Greške koje najčešće viđamo

Prva je preskakanje skice kod projekata koji se žure. Vrijeme se ne uštedi nego pomjeri; ista rasprava se desi kasnije, kad je skuplja.

Druga je skica s pravim tekstom i pravim slikama. Tada to više nije skica nego dizajn, i vraća se na isti problem.

Treća je crtanje samo za širok ekran. Na telefonu se sve složi jedno ispod drugog nekim redom koji niko nije birao.

Četvrta je odobravanje skice bez ijednog pitanja. Klijent kaže može, jer ne izgleda kao nešto o čemu se raspravlja, a onda se sve primjedbe pojave na gotovom dizajnu.

Peta je previše dijelova. Stranica na kojoj svaki odjel firme ima svoj blok ne govori ništa, jer sve izgleda jednako važno.

Šesta je zaboravljanje na ono što se dešava poslije klika. Skica pokriva stranicu, a poruka nakon slanja forme i stranica zahvale ostanu neodređene.

Lista za provjeru

• Zna li se u jednoj rečenici šta ova stranica treba postići?
• Je li nacrtana verzija za telefon, i to prva?
• Vidi li se iznad prve linije skrolanja šta radite i šta se od posjetioca traži?
• Ima li stranica jedan glavni poziv na akciju, a ne pet jednakih?
• Odgovara li redoslijed dijelova redoslijedu pitanja koja kupac ima?
• Je li skicu vidio neko ko projekat ne poznaje?
• Postoji li procjena dužine teksta za svaki dio, ili se to ostavlja za kasnije?
• Je li osmišljeno šta se dešava poslije slanja forme?

Pojmovi koje ćete čuti uz wireframe

• Mockup: isti raspored s bojama, tipografijom i slikama.
• Prototip: verzija na koju se može kliknuti, za isprobavanje puta kroz sajt.
• Iznad prve linije: dio stranice vidljiv bez skrolanja.
• Responsive dizajn: prilagođavanje rasporeda veličini ekrana.
• Figma: alat u kojem se danas najčešće crtaju skice i dizajn.
• UX dizajn: oblikovanje puta kroz stranicu, čiji je wireframe prvi vidljivi korak.