Mobile-first web shop se ne završava time što se desktop stranica „smanji“ za telefon. Na malom ekranu korisnik ima manje prostora za poređenje proizvoda, manje tolerancije za sporo učitavanje i veći rizik da izgubi kontekst između kataloga, korpe i plaćanja. Zato se mobilna verzija mora projektovati kao prioritetni scenario, a ne kao naknadna adaptacija.
Najvažnije odluke odnose se na dve celine: katalog, koji treba da omogući brzo pronalaženje i izbor proizvoda, i checkout, koji treba da ukloni neizvesnost bez nepotrebnih polja i koraka. Te odluke uključuju strukturu kategorija, prikaz varijanti, ponašanje filtera, sticky elemente, validaciju formi, načine dostave i povratak na korpu. Ako se ovi detalji rešavaju tek nakon izrade desktop interfejsa, problemi se obično samo premeštaju u uži ekran.
U nastavku su kriterijumi za planiranje mobilnog web shopa, sa praktičnim primerima i trade-offima. Za širi kontekst obima i procesa izrade, relevantna je stranica izrada web shopa, dok je ovaj tekst usmeren samo na mobilno iskustvo kataloga i kupovine.
Šta mobile-first znači za web shop
Mobile-first pristup polazi od najmanjeg relevantnog ekrana i osnovnog zadatka korisnika. U prodavnici je taj zadatak najčešće: pronaći odgovarajući proizvod, proveriti da li je dostupan, izabrati opciju, razumeti cenu i dostavu, a zatim završiti kupovinu bez nedoumica.
To ne znači da mobilni interfejs treba da bude siromašnija verzija desktopa. Neke informacije mogu biti sažete, ali ne i važne odluke. Cena, stanje zaliha, izabrana veličina ili boja, uslovi dostave i ukupna vrednost porudžbine treba da ostanu lako proverljivi. S druge strane, navigacija koja zauzima veliki deo ekrana, suvišni promotivni blokovi i dugačak tekst mogu da se sklone iza jasnih kontrola.
Tri pitanja pre dizajna ekrana
- Koju odluku korisnik treba da donese na ovom ekranu?
- Koja informacija mu je potrebna da bi tu odluku doneo?
- Šta može da se odloži, sažme ili prikaže tek na zahtev?
Ova pitanja pomažu da se izbegne čest problem: mobilna stranica sadrži sve elemente desktop verzije, ali nijedan nije dovoljno istaknut. Za tehničku osnovu prilagodljivog interfejsa korisno je pratiti principe responsivnog dizajna i viewport podešavanja koje opisuje MDN dokumentacija o responsive dizajnu.
Mobilni katalog: od kategorije do proizvoda
Katalog na telefonu treba da smanji broj odluka koje se donose istovremeno. Umesto da se korisniku prikažu brojni filteri, baneri i različiti tipovi kartica, bolje je jasno odvojiti faze: izbor kategorije, sužavanje rezultata i pregled konkretnog proizvoda.
Kategorije i navigacija
Mobilna navigacija treba da odgovori na pitanje „gde se nalazi ono što tražim?“ bez oslanjanja na širok mega meni. Hijerarhija kategorija treba da bude dovoljno kratka da se razume, ali ne toliko plitka da jedna kategorija sadrži nepregledan broj proizvoda.
Ako prodavnica ima mnogo grupa, korisno je kombinovati pretragu sa kategorijama i jasno označiti putanju do trenutne pozicije. Breadcrumb može biti sažet, ali korisnik ne bi trebalo da mora da pritiska browser back više puta kako bi se vratio na listu proizvoda.
Kartica proizvoda
Kartica na malom ekranu ima ograničen prostor. Njena uloga nije da prikaže kompletan opis, već da omogući pouzdanu odluku da li vredi otvoriti detalj. Minimum obično čine:
- prepoznatljiva fotografija proizvoda;
- naziv koji nije isečen na način koji menja značenje;
- jasna cena i, kada je relevantno, informacija o akciji;
- važna kratka oznaka, poput dostupnosti ili ključne karakteristike;
- kontrola za čuvanje proizvoda, ako takva funkcija postoji.
Previše informacija u kartici dovodi do dugih lista i otežava skeniranje. Premalo informacija povećava broj ulazaka i povrataka na prethodni ekran. Pravi kompromis zavisi od asortimana: kod mode su fotografija, veličina i boja često presudne, dok kod tehničke opreme mogu biti važni model, kompatibilnost i osnovna specifikacija.
Filteri i sortiranje
Filteri na desktopu mogu stajati u bočnoj koloni, ali na telefonu najčešće pripadaju u zaseban panel ili modalni prikaz. Kontrola treba da pokaže koliko je filtera aktivno i da omogući jednostavno uklanjanje pojedinačnih izbora. Dugme „primeni“ ima smisla kada se rezultati ne osvežavaju odmah; u suprotnom, korisnik mora jasno da razume da li se promena već primenila.
Ne treba svaku osobinu proizvoda pretvoriti u filter. Prioritet imaju atributi koji zaista sužavaju izbor ili predstavljaju uslov kupovine. Filter za boju može biti koristan u odeći, dok isti atribut možda nije relevantan u katalogu usluga ili standardizovane kancelarijske opreme. Za dublju strukturu kategorija, atributa i varijanti pogledajte vodič Arhitektura kataloga: kategorije, atributi i varijante proizvoda.
Stranica proizvoda na malom ekranu
Stranica proizvoda treba da odgovori na četiri praktična pitanja: šta je proizvod, koliko košta, koju varijantu mogu da izaberem i šta se dešava nakon kupovine. Fotografije treba da se učitavaju i pregledaju bez gubitka kontrole nad stranicom. Ako galerija koristi horizontalno pomeranje, korisno je vizuelno nagovestiti da postoji još sadržaja.
Varijante ne smeju biti skrivene iza nejasnog padajućeg menija ako je izbor važan za cenu ili dostupnost. Nazivi poput „Opcija 1“ ne pomažu; izbor treba da koristi konkretne oznake, a nedostupne opcije moraju biti jasno razlikovane od dostupnih. Kada korisnik izabere veličinu ili boju, promena cene, slike ili stanja zaliha treba da bude razumljiva i bez oslanjanja na boju kao jedini signal.
Dugme za dodavanje u korpu treba da bude dostupno u trenutku kada su ispunjeni uslovi za kupovinu. Kod dužih stranica može pomoći sticky kontrola, ali ona ne sme da prekrije sadržaj, poruku o grešci ili izbor varijante. Nakon dodavanja u korpu, korisniku treba ponuditi jasan sledeći korak: nastavak kupovine ili odlazak na korpu.
Checkout bez suvišnog trenja
Checkout na telefonu je sekvenca odluka, a ne samo forma. Korisnik mora da razume gde se nalazi, šta je već uneo i koliko još koraka preostaje. Ako se forma otvara bez jasnog konteksta korpe, svaka greška ili povratak unazad povećava rizik od odustajanja.
Redosled informacija
Praktičan tok najčešće obuhvata kontakt podatke, adresu ili način dostave, izbor plaćanja i završnu proveru. Tačan redosled zavisi od poslovnog modela i integracija, ali pravilo je isto: ne tražiti podatak pre nego što je jasno zašto je potreban.
Checkout može biti na jednoj stranici ili podeljen u korake. Jedna stranica pruža pregled, ali može postati veoma dugačka. Višekoračni tok smanjuje vizuelnu složenost, ali mora jasno čuvati prethodno unete podatke i omogućiti izmenu bez gubitka sadržaja. Ne postoji univerzalno najbolji obrazac; odluka zavisi od broja polja, načina dostave, pravila plaćanja i složenosti porudžbine.
Polja, tastatura i greške
Na telefonu svako nepotrebno polje predstavlja dodatno kucanje. Zato treba proveriti da li se neka informacija može dobiti iz već unetog podatka, izabrati iz liste ili ostaviti za kasnije. Polja treba da imaju jasne oznake koje ostaju vidljive, a odgovarajući tip inputa može da prikaže praktičniju tastaturu za email, broj telefona ili poštanski broj.
Validacija ne treba da čeka samo završni klik. Ako je greška nastala, poruka treba da kaže šta nije u redu i kako da se ispravi. Nije dovoljno označiti polje crvenom bojom. Fokus nakon greške treba da bude predvidiv, a već unete vrednosti ne smeju nestati bez jasnog razloga.
Kontrole moraju biti dovoljno velike i razmaknute da se mogu pouzdano aktivirati prstom. WCAG 2.2 definiše kriterijume za veličinu ciljeva pokazivača, uz navedene izuzetke; to je koristan referentni okvir za dugmad, checkbox kontrole i zatvaranje panela. Relevantni su zvanični WCAG 2.2 kriterijumi, ali testiranje na stvarnim uređajima ostaje važno.
Korpa, dostava i plaćanje: šta mora biti vidljivo
Korpa treba da bude mesto provere, ne prepreka između proizvoda i forme. Na malom ekranu svaki proizvod treba da zadrži naziv, izabranu varijantu, količinu, cenu i mogućnost izmene ili uklanjanja. Ako je popust primenjen, korisnik treba da vidi kako utiče na međuzbir i ukupan iznos.
Trošak dostave ne bi trebalo skrivati do poslednjeg trenutka ako zavisi od lokacije ili iznosa porudžbine. Ako se obračunava tek nakon adrese, to treba jasno najaviti. Isto važi za rok obrade, preuzimanje i eventualne uslove plaćanja. Ne treba obećavati određenu opciju dok nije provereno da li je dostupna za konkretnu adresu, sadržaj korpe i integraciju sa izabranim servisom.
Na ekranu plaćanja korisnik mora da razlikuje ukupnu cenu od pomoćnih informacija. Dugme za završetak kupovine treba da ima precizan naziv, a ne generičko „Nastavi“, ako klik zaista potvrđuje porudžbinu. Pre završetka treba omogućiti proveru ključnih podataka, naročito adrese, načina dostave i izabrane varijante proizvoda.
Performanse i pristupačnost kao deo prodajnog toka
Mobilni katalog često sadrži veliki broj fotografija, filtera i skripti. Tehničko rešenje zato mora obuhvatiti optimizaciju slika, prioritizaciju sadržaja iznad pregiba, stabilan raspored elemenata i pažljivo učitavanje interaktivnih funkcija. Nije dovoljno da početna stranica deluje brza ako se korpa ili checkout blokiraju pri promeni količine.
Za merenje i tumačenje ključnih signala učitavanja i interakcije može poslužiti tekst Brzina web shopa: Core Web Vitals i performance pod opterećenjem. Performanse treba proveravati u uslovima koji liče na stvarne telefone i mreže, a ne samo na brzom računaru u kancelariji.
Pristupačnost nije odvojena od konverzacionog toka. Dovoljna kontrastnost, vidljiv fokus, logičan redosled tabulatora, tekstualne oznake i poruke koje ne zavise samo od boje pomažu i korisnicima koji kupuju na telefonu u buci, na suncu ili jednom rukom. Svaki ključni zadatak treba testirati bez oslanjanja na precizne pokrete i bez pretpostavke da korisnik vidi sve vizuelne signale.
Kako testirati mobile-first web shop
Testiranje ne treba svesti na pitanje da li se stranica „otvara na telefonu“. Potrebno je proći kroz konkretne scenarije:
- Pronađi proizvod preko kategorije i preko pretrage.
- Primeni filter, ukloni jedan izbor i proveri da li su rezultati razumljivi.
- Izaberi varijantu koja menja cenu ili dostupnost.
- Dodaj proizvod u korpu, promeni količinu i vrati se u katalog.
- Unesi pogrešan podatak u checkout i proveri poruku i očuvanje forme.
- Uporedi ukupan iznos pre potvrde sa očekivanom cenom i dostavom.
Ove scenarije treba proveriti na različitim širinama ekrana, u uspravnom i vodoravnom položaju, sa sporijom mrežom i bez oslanjanja na samo jedan browser. Posebno treba testirati dugačke nazive proizvoda, mnogo varijanti, prazne rezultate filtera, rasprodate artikle i povratak iz eksternog payment toka.
Pre puštanja prodavnice korisno je definisati i događaje za katalog, korpu i checkout: pregled proizvoda, izbor varijante, dodavanje u korpu, početak checkouta, grešku u formi i završetak porudžbine. Planiranje takvog modela obrađeno je u vodiču E-commerce analytics: event model pre puštanja prodavnice. Analitika ne zamenjuje testiranje, ali može da pokaže na kom koraku korisnici najčešće prekidaju tok.
Praktičan kriterijum za odluke
Kada se bira između dva mobilna rešenja, prednost treba dati onom koje korisniku omogućava da brže i sigurnije donese sledeću odluku. To ne znači automatski kraći interfejs. Dodatni korak za izbor veličine može biti bolji od direktnog dodavanja pogrešne varijante u korpu; pregled dostave može zauzeti prostor, ali sprečava neprijatno iznenađenje na kraju.
Za planiranje je korisno napraviti tabelu ključnih komponenti:
| Komponenta | Ključno pitanje | Rizik ako je loše rešena |
|---|---|---|
| Kategorija i pretraga | Može li korisnik brzo da dođe do relevantnih proizvoda? | Odustajanje pre pregleda proizvoda |
| Filteri | Da li su najvažniji atributi dostupni bez pretrpanog ekrana? | Nerelevantni rezultati i gubitak konteksta |
| Varijante | Da li je jasno šta je izabrano i da li je dostupno? | Pogrešna porudžbina ili greška pri dodavanju |
| Checkout | Da li korisnik zna gde je i koliko još treba da uradi? | Prekid kupovine i ponavljanje unosa |
| Ukupan iznos | Da li su cena, dostava i popust razumljivi pre potvrde? | Nepoverenje i neočekivani troškovi |
Ako je potreban širi rad na strukturi, sadržaju i tehničkoj postavci sajta, može biti relevantna i izrada sajta. Za sam web shop, sledeći korak je da se pre dizajna popišu katalog, varijante, pravila dostave, načini plaćanja i obavezna polja checkouta. Tako mobilni interfejs nastaje iz stvarnog poslovnog toka, a ne iz naknadnog smanjivanja desktop ekrana.
