UI/UX dizajn web stranica, shopova i aplikacija

Kome treba UI/UX dizajn?

Poseban UI/UX projekat treba kad je proizvod složen ili kad greška u toku košta novac: web shop s mnogo odustajanja u naplati, aplikacija koju zaposleni izbjegavaju, portal za partnere, rezervacioni sistem ili redizajn sajta koji ne donosi upite. Za jednostavnu prezentacionu stranicu dizajn je dio izrade web stranice i ne naručuje se odvojeno.

Kada se isplati:

• Web shop gubi kupce u korpi ili naplati, a ne znate zašto.
• Aplikacija ima mnogo ekrana i korisnika s različitim ulogama.
• Vaš tim programira sam, a treba mu dizajn i specifikacija.
• Sajt treba redizajn, a prije toga želite znati šta ne radi.
• Gradite proizvod i želite provjeriti ideju prototipom prije razvoja.

Šta dobijate?

Dobijate dokumentovano razumijevanje korisnika, strukturu i tokove, klikabilan prototip, konačni dizajn za mobitel i desktop, dizajn sistem s komponentama i predaju programerima. Svi fajlovi u Figmi su vaši, pa dizajn može nastaviti i drugi tim. Obim istraživanja prilagođavamo budžetu.

Isporuka	Šta sadrži
Istraživanje	analitika, razgovori s korisnicima, pregled konkurencije
Struktura i tokovi	mapa sajta ili aplikacije, koraci do cilja za svaki tip korisnika
Žičani okviri	raspored sadržaja bez vizuelnog dizajna
Prototip	klikabilna verzija ključnih tokova u Figmi
Testiranje	zadaci s 3–5 stvarnih korisnika i popis problema
Vizuelni dizajn	konačni ekrani za mobitel i desktop
Dizajn sistem	boje, tipografija, razmaci i komponente sa stanjima
Predaja	specifikacija za programere i izvoz resursa

Kako izgleda proces?

Proces ide od razumijevanja korisnika prema detaljima: istraživanje, struktura i tokovi, prototip i testiranje, vizuelni dizajn i predaja. Revizije su planirane u svakoj fazi, pa velike promjene dolaze rano, dok su jeftine. Kad radimo i izradu, dizajner i programer rade zajedno, bez gubitka informacija pri predaji.

Kako izgleda test s korisnicima?

Test s korisnicima je kratak razgovor u kojem osoba iz vaše ciljne grupe dobija zadatak na prototipu, npr. „pronađite patike broj 42 i naručite ih s dostavom u Mostar“, a mi gledamo gdje zastane. Ne objašnjavamo ništa i ne pomažemo. Svaki zastoj, pogrešan klik ili pitanje bilježimo kao problem za ispravku.

Test obično izgleda ovako:

1. Biramo 3–5 osoba koje liče na vaše stvarne kupce ili korisnike.
2. Pripremamo 3–5 zadataka koji pokrivaju najvažnije tokove.
3. Svaki razgovor traje oko pola sata, uživo ili online uz dijeljenje ekrana.
4. Probleme razvrstavamo po težini: blokira cilj, usporava, ili samo smeta.
5. Prototip ispravljamo i, ako treba, testiramo ponovo prije vizuelnog dizajna.

Test na prototipu je jeftiniji od svake izmjene nakon programiranja, jer se prototip mijenja za sat, a gotova aplikacija za dane.

Primjer: naplata u web shopu

Primjer: web shop s opremom za bebe iz Sarajeva vidi u analitici da mnogo kupaca dođe do naplate i odustane. Ovo je ilustrativni scenarij, a ne stvarni klijent. Pregled toka pokazuje obaveznu registraciju, cijenu dostave koja se pojavi tek u posljednjem koraku i formu koja traži poštanski broj prije grada.

Novi tok ima kupovinu bez registracije, cijenu dostave u korpi, polja poredana redom kojim ih ljudi popunjavaju i jasno označeno pouzeće uz kartice. Prije programiranja tok testira pet roditelja na prototipu. Nakon objave shop poredi udio završenih kupovina s periodom prije izmjene, da se vidi da li je promjena pomogla.

Koliko košta UI/UX dizajn?

Cijena zavisi od broja ekrana, broja tokova i obima istraživanja i testiranja, pa je dajemo pisanom ponudom. Kad dizajn radimo uz izradu web stranice ili web shopa, uključen je u cijenu izrade: prezentaciona stranica od 1.000 KM, poslovna od 2.000 KM, web shop od 3.000 KM, bez PDV-a.

Ako vam treba samo provjera postojećeg shopa ili sajta, a ne novi dizajn, pogledajte optimizaciju konverzija: CRO audit kod nas košta 1.200–2.000 KM, a mjesečni program 2.000–3.200 KM.

Koje principe primjenjujemo?

Dizajniramo prvo za mobitel, jer većina posjeta lokalnim firmama i web shopovima dolazi s telefona. Tekst mora biti čitljiv bez zumiranja, dugmad dovoljno velika za prst, a svaka stranica treba jasan sljedeći korak. Pristupačnost po WCAG smjernicama planiramo od početka, jer je naknadno popravljanje skuplje.

• Jedan glavni korak po ekranu. Sekundarne radnje su vidljive, ali ne konkurišu glavnoj.
• Kontrast i veličina teksta prema WCAG 2.2 smjernicama.
• Stanja komponenti: greška, učitavanje, prazno stanje i uspjeh dizajnirani su unaprijed.
• Brzina kao dio dizajna: lagani fontovi, optimizovane slike i animacije koje ne kasne.
• Bez uljepšavanja koje smeta: efekt ostaje samo ako pomaže razumjeti sadržaj.

Zašto vam treba dizajn sistem?

Dizajn sistem je skup pravila i komponenti: boje, tipografija, razmaci, dugmad, forme, kartice i njihova stanja. S njim novi ekrani nastaju brže i izgledaju dosljedno, bez obzira ko ih pravi. Bez njega svaka nova stranica dobija malo drugačije dugme, pa sajt nakon godinu dana izgleda kao da su ga radila tri tima.

Za manji sajt dizajn sistem može biti jedna stranica u Figmi s osnovnim komponentama. Za aplikaciju s mnogo ekrana to je biblioteka komponenti povezana s kodom, s opisom kada se koja koristi. U oba slučaja dizajn sistem predajemo zajedno s ekranima, da ga vaš tim ili drugi izvođač može nastaviti koristiti.

Dobar znak da vam treba: programeri pitaju „koji je ovo razmak“ ili „kako izgleda dugme kad je onemogućeno“, a odgovor svaki put zavisi od toga koga pitaju.

Šta je specifično za dizajn u BiH?

Kupci u BiH često traže potvrdu prije kupovine: telefon ili WhatsApp, jasnu cijenu dostave i pouzeće. Dizajn treba te informacije pokazati na vrijeme, a ne skrivati ih iza klikova. Uz to, tekst mora biti razumljiv u cijeloj BiH, a forme moraju jasno tražiti pristanak za obradu ličnih podataka.

• Povjerenje: podaci o firmi, uslovi povrata i načini plaćanja vidljivi prije naplate.
• Cijena dostave prikazana na proizvodu i u korpi.
• Kontakt kanali prilagođeni navikama kupaca, uz mjerenje svakog.
• Lični podaci: pristanak za newsletter odvojen od narudžbe, prema Zakonu o zaštiti ličnih podataka BiH (Službeni glasnik BiH, broj 12/25). Ovo nije pravni savjet.

Najčešće greške u dizajnu

Najčešće greške su dizajn koji polazi od desktopa, odluke na osnovu ukusa umjesto podataka, prototip koji niko od stvarnih korisnika nije isprobao, nedizajnirana stanja greške i dizajn predat programerima bez specifikacije. Rezultat su ekrani koji izgledaju dobro na prezentaciji, a u stvarnom korištenju zbunjuju.

1. Desktop prvo. Mobilna verzija postaje stisnuta kopija.
2. Bez testiranja. Pet korisnika s jednostavnim zadacima otkrije većinu krupnih problema.
3. Zaboravljena stanja. Šta korisnik vidi kad forma javi grešku ili korpa bude prazna?
4. Previše animacija. Usporavaju stranicu i odvlače pažnju.
5. Predaja bez specifikacije. Programer pogađa razmake i ponašanje.

Za projekte gdje dizajn prelazi u razvoj aplikacije pogledajte custom web aplikacije, a za shopove izradu web shopova.