Close
metaphorical UX advocacy blog by Rastko Vukasinovic

UI prototip – kako i zašto

Kreiranje prototipa je više potreba nego dobra praksa, to je način utvrđivanja kvaliteta ideje.

U svakom dizajnerskom procesu postoje bar dve strane – kreativni tim i klijent ili dizajner i klijent, ako generalizujemo svaku primenjenu umetnost, ali ostanemo u okviru mogućnosti da je nešto rađeno zbog same umetnosti, imamo sledeću postavku u procesu razmišljanja o ideji:

Kao web/softver programeri/dizajneri imamo dodatak još dve stavke:

Po sastavljanju ove osnovne liste, naš sledeći zadatak je detaljan sastanak sa klijentom, a zatim sa timom koji pored vas radi na projektu (ili sa dev/design relations članom tima).  Ovi sastanci su, naravno, obimni, brainstorming orijentisani sastanci koji posle nekog vremena iznedre priličnu gomilu UI i UX crteža, storyboardova i srodnih zabeleški sa sličnih događaja.

Smisao prototipa

Vršimo istraživanje ideje, kreiramo najprihvatljivije koncepte i prihvatamo se pravljenja prototipa iz sledećih razloga:

  • Ušteda vremena i resursa
  • Istraživanje UI modela iz dizajn/dev i korisničkog aspekta

Najvažniji razlozi koji daju prednost prototipu pored svih mogućih načina:

  • Dokaz o adekvatnosti koncepa
  • Dublje istrađivanje koncepta
  • Tehnička studija izvodljivosti

Sada je ideje potrebno staviti u prvi plan. Prototip treba da predstavi minimalnu potrebnu formu kako bi puno shvatanje ideje bilo moguće. Ovde imamo dve vrste prototipa koji nastaju, zbog načina na koji ćemo im pristupiti:

  1. Prototip za klijenta (prototip za odobrenje dizajna)
  2. Prototip za tim (radni model/prototip)

Ono što pre svega uradim je grub nacrt izgleda backend-a aplikacije (ako se radi o aplikaciji ili multifunkcionalnom prtalu), sa spiskom svih potrebnih korisnika i na osnovu release backlog-a, posle toga pogledam šta bi moglo biti potrebno kao omogućavanje daljeg proširenja. Tada, na osnovu funkcija nastaje interfejs. Naravno, preporuka je da ovo uradite na jednom od završnih sastanaka pre kraja prve faze (formiranja ideje).

1. Prototip za klijenta

Kada?

Na samom početku projekta, pre ulaska u razvojni proces. Ovo je deo koji je zastupljen samo kod kreiranja aplikacije po narudžbini, takođe se primenjuje kod izrade web prezentacija i web templejta.

Pošto smo upoznati sa onim što klijent želi i pod uslovom da je naš grafički dizajner (ako su u pitanju dve različite osobe) završio mokap, krećemo u funkcionalno prototipiranje mokapa – predstavljanje vizuelnog indentiteta klijentu. U ovoj fazi, jedini fokus nam je što pre klijentu dati na uvid šta želimo da mu isporučimo – u većini slučajeva klijenti su non-dev, non-it itd, tako da im je bitno predstaviti izgled i iskustvo kakvo će njihovi klijenti i zaposleni imati u dodiru sa interfejsom na kome radimo.

2. Prototip za tim

Kada?

Bilo kada. Ovo je vrsta prototipa koja se radi u bilo kom delu razvoja i za bilo koji interfejs koji je potrebno izraditi, a potrebna je analiza koncepata. Ova vrsta prototipiranja je opšteprimenljiva i korisna za sve stadijume razvoja i dizajna:

  • Izgled
  • Funkcionalnost
  • Funkcionalnost specifičnih elemenata

Vreme potrebno za izradu i upotrebno vreme ovakvih prototipa jako varira zavisno od potrebe.

Zaboravite izgled.

Setite se storyboard-ova, skica backend-a i release backlog-a.

Ovde je potrebno zasijati. Dizajner interfejsa mora da osmisli celu aplikaciju – sada kada znamo šta treba da radi i ko su njeni korisnici, i uz malo sreće imamo odobren dizajn, potrebno je napraviti sve ostalo. Ono što ćete stvoriti u ovom koraku će iskristalisati svaku ideju do vrhunca njenog potencijala – i onda je najverovatnije odbaciti; statistički gledano, po testiranju ideja kroz funkcionalni prototip 75%  ideja biva odbačeno.

Prototip za tim sastoji se od I/O elemenata, stranica (ekrana), tačnih položaja navigacije i info elemenata, bilo kako da počnete (crteži, papirni prototipovi, diferencijalne analize funkcionalnosti), sve morate svesti na konačno isprobavanje kako ono što ste odabrali radi – da bi, konačno, odabrali ponovo.

Detaljnost

Najčešće i jedino pitanje na koje postoji bilo kakav analitički odgovor je – Koliko daleko treba ići pri kreiranju prototipa?

Sagledajte projekat sa što je više aspekata moguće, pogledajte backlog još jednom, i prema tome odredite detaljnosti prototipa koje izrađujete. Vodite se osnovnim analitičkim smernicama:

  1. Potrebno je utvrditi kolika je minimalna investicija kako bi se dobili potrebni odgovori.
  2. Imajte na umu da svaki prototip ima ograničeno vreme korišćenja.
  3. Obratite pažnju na sve rizike koje nosi prevelika detaljnost prototipa, od kojih je verovatno najveći, skretanje pažnje sa onog što je bitno, iako se prevelika detaljnost kosi i sa prve dve smernice.

 Razvoj

Pri kreiranju prototipa nije previše bitno uklopiti se u usvojene koncepte i tehnike razvoja, naročito ako želite brz prototip.

Za kreiranje brzih prototipova možete koristiti desktopi ili web bazirane aplikacije za ovu primenu ili ih razvijati u vašoj omiljenoj web dev tehnici (html/css/js ili flex/flash).

Lično, ne koristim aplikacije za kreiranje prototipa, ali sam se angažovao oko testiranja nekoliko i evo mojih preopruka:

Desktop aplikacije

Web aplikacije

Ako želite opširniju listu alata možete potražiti ovde posetiti Smashing Magazine, SpeckyBoy Magazine ili pogledati na viki strani konsalting OOP kompanije Cunningham & Cunningham Inc. 
Sa strane razvoja sopstvenih prototipa, što je moja praksa, ali definitivno zavisi od ličnih preferenci i znanja koje posedujete, imam par potencijalno korisnih saveta:
  • Stvorite svoj stil kreiranja prototipa – ne da biste bili prepoznatljivi po tome (to je bonus), već da bi vaše razumevanje i kvalitet pristupa onome na čemu radite bio maksimalan.
  • Što je kvalitetnije za vas, potencijalno je kvalitetnije i za vaše korisnike.
  • Kreirajte svoje interfejs elemente, bazirane na svojim preferencama, prepravljajte ili koristite gotove opensource (GPL, MIT) plaginove sa kojima ste u potpunosti upoznati. Uvek testirajte nove alate.
  • Sve pomenuto čuvajte sortitrano i sistematizovano, kao svojevrsni Prototyping Boilerplate.
  • Koristite svaku priliku da kroz prototip isprobate svoju ideju – tako ćete brže shvatiti potrebe i rešenja zadataka koje klijent ima za vas.

Otvorenost

“Ako ja imam jabuku i vi imate jabuku, pa ih podelimo, tada ponovo imamo po jednu jabuku, ali ako ja imam ideju i vi imate ideju, pa ih podelimo, tada svako od nas ima po dve ideje.” – Bernard Šo.

Kreirajte nove elemente i alate u slobodno vreme

Koristite Github, Bitbucket, Sourceforge… Omogućite uložite u zajednicu, i dozvolite zajednici da uloži u vas.

Moj github nalog je https://github.com/metaphorical, a moja dva interfejs elementa (konstantno u razvoju) koja se nalaze na ovom nalogu, možete videti na:

One Response to “UI prototip – kako i zašto”

  1. UBREE says:

    Jako sam zadovoljan profesionalnim konduktom sa kojim sam bio u pocetku iznenadjen. Ono sto je najbitnije jeste jednostavno objasnjenje jako komplikovanih programskih fraza koje sam razumeo i mogao da donesem biznis odluke bez recnika.

    Hvala

    Branko Veljovic

    Predsednik BISEER INC.
    Projekat: ÜBREE

Leave a Reply

Hi, my name is
Rastko Vukašinović
and I am Rastko Vukašinović
It is not what we do, but why - and why is user experience
Close

Drop me an email




Close
X

For your consideration
It is not what we do, but why - and why is user experience
Close