Najskuplja greška u digitalnim projektima rijetko nastaje u kodu. Ona nastaje ranije, kada se počne graditi nešto što niko nije do kraja zamislio. Tim mjesecima razvija funkcionalnost, a tek na kraju svi shvate da je tok pogrešan, da ekran ne odgovara stvarnom procesu ili da je ključni korak izostavljen. Wireframe i prototip postoje upravo zato da se te greške uhvate dok su jeftine, na papiru ili u alatu za dizajn, a ne u produkcijskoj bazi podataka. U nastavku objašnjavamo čemu tačno služe, kako se razlikuju i zašto ih ozbiljan razvojni proces nikada ne preskače.
Šta je wireframe, a šta prototip
Iako se pojmovi često miješaju, riječ je o dvije različite faze sa različitim ciljevima. Wireframe je skica strukture. On pokazuje gdje se nalazi koji element, kako je raspoređen sadržaj i kojim redoslijedom korisnik prolazi kroz ekrane. Namjerno je sive boje, bez slika i bez finog dizajna, jer u toj fazi pažnju želimo držati na rasporedu i logici, a ne na estetici.
Prototip je sljedeći korak. To je interaktivni model u kojem se dugmad zaista mogu kliknuti, ekrani se smjenjuju i tok se može proći od početka do kraja kao da je proizvod stvaran. Prototip ne sadrži pravi kod niti pravu bazu, ali daje vrlo realan osjećaj kako će se aplikacija ponašati. Razlika je suštinska: wireframe odgovara na pitanje “kako je ovo posloženo”, a prototip na pitanje “kako se ovo koristi”.
Niski i visoki nivo detalja
Oba artefakta postoje u različitim nivoima vjernosti. Niski nivo (low fidelity) je brz, grub i namijenjen ranom dogovoru. Visoki nivo (high fidelity) je blizak finalnom izgledu, sa stvarnim bojama, tipografijom i tekstovima. Pravilo je jednostavno: što je ideja manje provjerena, to nivo detalja treba biti niži. Nema smisla brusiti piksele na ekranu koji bi se sutra mogao potpuno izbaciti.
Zašto se isplati prije nego što se napiše kod
Promjena u wireframeu traje nekoliko minuta. Ista ta promjena, kada je već implementirana, povučena kroz bazu, testirana i postavljena na server, košta neuporedivo više. Wireframe i prototip su zato najjeftinije osiguranje koje projekat može imati. Konkretne koristi su sljedeće:
- Rano otkrivanje grešaka u toku. Logičke rupe u procesu vide se čim pokušate kliknuti kroz prototip, a ne tek kada korisnik zapne usred narudžbe.
- Usklađivanje očekivanja. Klijent, dizajner i programer gledaju isti ekran i govore o istoj stvari. Tekstualni opis funkcionalnosti svako čita drugačije, sliku svi vide jednako.
- Realna procjena obima. Kada je tok razrađen do ekrana, procjena vremena i troška postaje precizna umjesto okvirna.
- Manje izmjena tokom razvoja. Svaka odluka donesena u dizajnu je jedna odluka manje koja prekida programera usred posla.
Kako izgleda proces u praksi
Dobar proces ne počinje alatom, nego pitanjima. Prije nego što povučemo i jednu liniju, želimo razumjeti ko je korisnik, šta pokušava postići i koji je najkraći put do tog cilja. Tek tada strukturiranje ekrana ima smisla. Tipičan redoslijed izgleda ovako:
- Definisanje korisničkih tokova. Popisuju se ključni scenariji, na primjer registracija, kreiranje narudžbe ili plaćanje.
- Skica strukture. Svaki ekran dobija grubi raspored, najprije ručno ili u jednostavnom alatu.
- Wireframe. Skice se pretvaraju u uredne, dosljedne ekrane sa jasnom hijerarhijom sadržaja.
- Prototip. Ekrani se povezuju u klikabilni tok koji se može proći od početka do kraja.
- Provjera sa korisnicima. Prototip se daje stvarnim ljudima da ga koriste, a njihove zapreke se bilježe.
- Predaja u razvoj. Tek usaglašen i provjeren prototip ide programerima kao jasna specifikacija.
Ovaj redoslijed nije birokratija. On osigurava da svaki sljedeći korak gradi na nečemu što je već potvrđeno, umjesto da se gradi na pretpostavci.
Testiranje prototipa sa stvarnim ljudima
Najveća vrijednost prototipa dolazi onda kada ga date nekome ko ga nije pravio. Petoro ljudi koji pokušaju izvršiti jedan zadatak otkriće iznenađujuće mnogo problema. Negdje će zastati jer ne znaju gdje da kliknu, negdje će krenuti pogrešnim putem jer ih je naziv dugmeta zavarao. Sve to su nalazi koje je u prototipu lako ispraviti, a u gotovom proizvodu bolno.
Pri testiranju vrijedi pratiti nekoliko stvari: da li korisnik završi zadatak bez pomoći, koliko mu vremena treba, gdje oklijeva i šta naglas komentariše. Cilj nije da se dokaže kako je dizajn dobar, nego da se pronađe gdje nije. Što više slabosti otkrijete prije razvoja, to je manje skupih iznenađenja kasnije.
Kada je dovoljan wireframe, a kada treba i prototip
Nije svakom projektu potreban isti nivo pripreme. Jednostavna prezentacijska stranica može krenuti u izradu web stranica sa wireframeom i osnovnim dizajnom, bez složenog interaktivnog prototipa. Sa druge strane, kompleksne web platforme i aplikacije sa mnogo koraka skoro uvijek zahtijevaju prototip jer je tok pretežak da bi se pouzdano zamislio iz statičnih ekrana.
| Tip projekta | Wireframe | Interaktivni prototip |
|---|---|---|
| Prezentacijska stranica | Preporučeno | Najčešće nepotrebno |
| Web shop | Obavezno | Preporučeno za naplatu i košaricu |
| Poslovna platforma | Obavezno | Obavezno |
| Mobilna aplikacija | Obavezno | Obavezno |
Šta dobar prototip predaje razvoju
Kada prototip stigne do programera, on bi trebao biti više od slike. Uz njega ide opis ponašanja: šta se dešava na klik, kako sistem reaguje na grešku, kako izgledaju prazna stanja kada još nema podataka i kako se ekran prilagođava manjim uređajima. Ti detalji odvajaju prototip koji ubrzava razvoj od onog koji ostavlja programera da nagađa. Što je manje nagađanja, to je razvoj brži i predvidljiviji, a krajnji proizvod bliži onome što je zamišljeno.
U NEVIS pristupu wireframe i prototip nisu zaseban trošak nego dio zdravog razvoja koji štedi vrijeme svima. Ako planirate digitalni proizvod i želite ga postaviti na temelj koji ne morate rušiti, pogledajte naše usluge ili nam se javite da zajedno razradimo prvi tok prije nego što napišemo prvu liniju koda.