Početni ekran
Korisnik unosi polaznu i dolaznu stanicu, datum, vreme i broj putnika, čime započinje linearan tok kupovine karte.
UI/UX Case Study
A/B test procesa kupovine vozne karte u mobilnoj aplikaciji
Projekat analizira jedan od ključnih trenutaka u kupovnom toku kroz testiranje dve varijante interfejsa, podatke o ponašanju korisnika, misclick metrike i subjektivnu ocenu lakoće korišćenja.
Pregled projekta
UX istraživanje koje ispituje kako korisnici biraju polazak u procesu kupovine vozne karte
Projekat kombinuje A/B testiranje, kreiranje prototipa, Maze analitiku, heatmap prikaze i interpretaciju korisničkog ponašanja kako bi se donela informisana odluka o tome koja varijanta ekrana bolje podržava izbor polaska.
Glavni izazov bio je utvrditi da li korisnici lakše biraju polazak kada postoji posebno dugme ili kada cela kartica funkcioniše kao klikabilna površina
Kao UX istraživački projekat, analiza obuhvata definisanje hipoteze, izradu dve varijante prototipa, testiranje sa korisnicima, poređenje success rate-a, drop-off-a, misclick rate-a i subjektivne ocene lakoće procesa.
Cilj projekta
Testirati dve varijante ekrana za odabir polaska i utvrditi koja korisnicima omogućava jasniji, stabilniji i uspešniji nastavak kupovine karte
Pored izbora pobedničke varijante, cilj je bio razumeti razliku između onoga što korisnici subjektivno doživljavaju kao lako i onoga što podaci o ponašanju stvarno pokazuju kroz misclickove, drop-off i uspešnost zadatka. Hipoteza je bila da će korisnici lakše završiti izbor ako se ukloni dodatno dugme i cela kartica polaska postane klikabilna.
UX Proces
Od hipoteze do testiranog toka
Proces rada započeo je razlaganjem kupovine vozne karte na ključne korake, definisanjem A/B varijanti i postavljanjem jasnih metrika za evaluaciju ponašanja korisnika u prototipu.
01
Definisanje toka
Tok je obuhvatio izbor relacije i datuma, listu polazaka, detalje voza i izbor sedišta, unos podataka, plaćanje i digitalnu kartu.
02
A/B varijante
Varijanta A koristi karticu polaska sa posebnim dugmetom „Odaberite termin”, dok Varijanta B uklanja dugme i tretira celu karticu kao klikabilnu površinu.
03
Maze testiranje
Test je sproveden kroz Maze Prototype Test, sa zadatkom da korisnici izaberu prvi dostupni voz i rezervišu jedno slobodno sedište.
04
Analiza metrika
Praćeni su success rate, direct success, drop-off, misclick rate, vreme izvršavanja, heatmap ponašanje i subjektivna ocena lakoće procesa.
Lista polazaka (ver. A)
Kartica polaska sadrži osnovne informacije i posebno dugme „Odaberite termin”, pa korisnik mora da prepozna da je dugme glavni nastavak procesa.
Lista polazaka (ver. B)
Dodatno dugme je uklonjeno, a cela kartica postaje klikabilna površina, čime se testira da li veća tap zona smanjuje nesigurnost.
Detalji voza
Ekran prikazuje informacije o izabranom polasku, relaciji, vremenu, tipu voza i nastavku procesa ka izboru sedišta.
Izbor sedišta
Korisnik bira jedno slobodno sedište, što predstavlja sledeću važnu odluku nakon odabira polaska.
Podaci o putniku
Ekran prikuplja osnovne informacije potrebne za završetak rezervacije i nastavak ka plaćanju.
Rezime kupovine
Korisnik proverava detalje putovanja, cenu i podatke pre potvrde plaćanja.
Plaćanje
Proces plaćanja predstavlja završni korak kupovine pre generisanja digitalne karte.
Digitalna karta
Nakon uspešne kupovine korisnik dobija kartu dostupnu u aplikaciji, uključujući QR kod i osnovne informacije o putovanju.
Maze analitika
Heatmap prikazi, misclick podaci i success metrike korišćeni su za razumevanje stvarnog ponašanja korisnika, ne samo njihovog subjektivnog utiska.
Dizajnerske odluke
Iteracija zasnovana na ponašanju korisnika
Pošto su podaci pokazali da korisnici uglavnom uspevaju da završe zadatak, ali i dalje prave veliki broj pogrešnih klikova, finalni pravac nije bio potpuni redizajn, već informisana optimizacija liste polazaka.
1
Zadržati Varijantu B kao osnovu
Varijanta B je imala viši ukupni success rate i manji drop-off, pa predstavlja bolju osnovu za narednu iteraciju.
2
Jasnije definisati tap zonu
Cela kartica treba da ostane klikabilna, ali mora vizuelno jasnije da komunicira da je upravo kartica glavna interaktivna površina.
3
Smanjiti misclickove kroz hijerarhiju
Visok misclick rate pokazuje da nije dovoljno samo povećati klikabilnu zonu; potrebno je bolje odvajanje kartica, jasnija struktura informacija i manje vizuelnih distrakcija.
4
Dodati microcopy instrukciju
Kratka instrukcija poput „Dodirnite karticu da izaberete polazak” može pomoći korisnicima da odmah razumeju očekivanu akciju bez dodatnog opterećenja interfejsa.
Rezultat
Sproveden A/B test sa jasnim UX zaključcima za narednu iteraciju
Krajnji rezultat projekta nije samo izbor pobedničke varijante, već razumevanje kako korisnici stvarno prolaze kroz proces kupovine karte i gde se pojavljuje nesigurnost u interakciji.
Test setup
Maze Prototype Test, 112 učesnika, dve varijante ekrana za odabir polaska i isti zadatak kupovine jednosmerne vozne karte.
Varijanta B
Bolja osnova za nastavak projekta, sa višim ukupnim success rate-om i manjim drop-off-om u odnosu na Varijantu A.
Glavni problem
Misclick rate je ostao gotovo isti u obe varijante, što pokazuje da problem nije samo u dugmetu, već u vizuelnoj hijerarhiji i jasnoći interakcije.
UX preporuke
Zadržati klikabilnu karticu, dodatno odvojiti opcije polazaka, smanjiti distrakcije, dodati microcopy i sprovesti novo testiranje unapređene verzije.
Zaključak
Najveća vrednost projekta nije pobednička varijanta, već razumevanje u kom delu procesa se korisnici izgube.
Ovaj projekat pokazuje zašto UX odluke ne treba donositi samo na osnovu pretpostavke ili vizuelnog utiska. Iako su korisnici proces ocenili kao lak, podaci su pokazali značajan broj pogrešnih klikova. Varijanta B se pokazala kao stabilnija osnova, ali naredna iteracija treba da se fokusira na jasniju hijerarhiju, bolje odvojene kartice i precizniji microcopy. Upravo u toj razlici između subjektivnog utiska i stvarnog ponašanja nalazi se glavna vrednost UX istraživanja.