Mobilni UX: praktičan vodič za bolju web-stranicu

Autorica: Patricia Jarmek Sadržaj i web-stranice 30. 10. 2026.

7 min čitanja

Mobilna web-stranica može proći tehnički test responzivnosti, a i dalje biti naporna za korištenje. Tekst stane na ekran, ali gumbi su premali. Izbornik radi, ali skriva najvažniju radnju. Obrazac je kraći od desktop verzije, no otvara pogrešnu tipkovnicu i briše podatke nakon pogreške.

Mobilni UX zato nije pitanje kako smanjiti desktop dizajn. To je odluka što korisniku treba prvo, što može pričekati i kako dovršiti zadatak jednom rukom, na slabijoj vezi i uz česte prekide.

Počnite zadatkom koji korisnik želi dovršiti

Najprije odredite primarni mobilni zadatak: pronaći informaciju, usporediti uslugu, poslati upit, kupiti proizvod, pronaći lokaciju ili provjeriti status narudžbe. Početni ekran ne treba sadržavati sve što postoji na desktopu istim redoslijedom. Mora jasno pokazati sljedeći korak.

Promatrajte stvarne putove po uređaju: gdje mobilni korisnici odustaju, vraćaju se, povećavaju prikaz ili otvaraju isti korak više puta. Razlika u stopi konverzije nije sama po sebi dokaz lošeg UX-a — kontekst korištenja može biti drukčiji — ali je signal za istraživanje.

Responzivno ne znači samo nekoliko prijelomnih točaka

Dobar raspored prilagođava se dostupnom prostoru, sadržaju i mogućnostima uređaja. web.dev upozorava da stranica bez ispravne viewport oznake može biti prikazana jako umanjeno, zbog čega je tekst teško čitati, te preporučuje raspored koji odgovara uređaju umjesto oslanjanja na fiksne dimenzije [1].

WCAG 2.2 traži da se sadržaj pri širini ekvivalentnoj 320 CSS piksela može prikazati bez gubitka informacija ili funkcionalnosti i bez pomicanja u dvije dimenzije, osim kada je dvodimenzionalni raspored nužan, primjerice kod karte ili složene tablice [2].

Praktično to znači: jedna jasna kolona za glavne zadatke, slike koje se prilagođavaju, tablice s promišljenim mobilnim prikazom i komponente koje se ne raspadaju pri povećanju teksta. Nemojte sakriti važan sadržaj samo zato što ga je teško smjestiti.

Dodirni cilj mora biti veći od ikone

Korisnik ne dodiruje vrhom kursora. Dodiruje prstom, često u pokretu. WCAG kriterij 2.5.8 kao minimum navodi cilj od 24 × 24 CSS piksela ili dovoljan razmak između manjih ciljeva [3]. To je donja granica pristupačnosti, ne ideal za svaki važan gumb.

Apple preporučuje najmanje 44 × 44 pt za dodirne kontrole [4], a Android najmanje 48 × 48 dp, pri čemu vidljiva ikona može biti manja ako je njezino aktivno područje povećano paddingom [5].

Provjerite posebno: zatvaranje modala, ikonu košarice, odabir količine, strelice slidera, checkboxe, poveznice u footeru i male kontrole u filtrima. Dva cilja ne smiju biti toliko blizu da pogrešan dodir pokrene neželjenu radnju.

Dizajnirajte za palac i promjenu hvata

Najčešće radnje postavite u dohvat, ali nemojte pretpostaviti jednu univerzalnu „zonu palca”. Veličina uređaja, ruka kojom ga korisnik drži i kontekst mijenjaju doseg. Važne kontrole trebaju biti dostupne bez preciznog istezanja, dok destruktivne radnje ne bi trebale stajati tik uz primarni CTA.

Fiksna donja navigacija može biti korisna ako sadrži nekoliko jasnih odredišta. Postaje problem kada prekriva sadržaj, sukobljava se s cookie trakom ili zauzima previše vertikalnog prostora. Sticky CTA treba nestati ili promijeniti stanje kada više nije relevantan.

Tekst mora ostati čitljiv bez zumiranja

Čitljivost nije samo veličina fonta. Važni su kontrast, razmak redaka, duljina retka, hijerarhija i dovoljno prostora oko elemenata. Naslov od četiri retka koji potisne sadržaj ispod prvog ekrana može biti jednako problematičan kao premali tekst.

Nemojte uklanjati mogućnost zumiranja. Korisnik mora moći povećati sadržaj, a stranica se pritom mora presložiti bez gubitka funkcionalnosti. Akordioni mogu smanjiti duljinu stranice, ali naslovi moraju jasno govoriti što se nalazi unutra, a ključni sadržaj ne smije postati nevidljiv tražilici ili čitaču ekrana.

Mobilni obrasci trebaju manje rada, ne manje informacija

Tražite samo podatke potrebne za sljedeći poslovni korak. Svako polje mora imati trajnu oznaku, jasan primjer kada je potreban i poruku o pogrešci koja objašnjava kako je ispraviti. Placeholder nije zamjena za oznaku.

Koristite odgovarajući tip polja, inputmode i autocomplete. GOV.UK Design System preporučuje autocomplete kako bi korisnici brže ispunili polja, uz jasnu oznaku i pomoćni tekst kada se traži specifičan format [6].

Na mobitelu posebno provjerite:

otvara li se numerička tipkovnica za broj, kod i količinu
može li upravitelj lozinki ispuniti prijavu
ostaju li podaci nakon validacijske pogreške
vidi li korisnik pogrešku bez vraćanja na vrh
prekriva li tipkovnica aktivno polje ili gumb
može li se obrazac dovršiti bez horizontalnog pomicanja

Brz odgovor sučelja dio je upotrebljivosti

Nakon dodira mora biti jasno da se nešto dogodilo: gumb mijenja stanje, košarica potvrđuje dodavanje, izbornik se otvara ili se prikazuje indikator učitavanja. Bez povratne informacije korisnik ponavlja dodir i može dvaput poslati obrazac ili dodati proizvod.

Interaction to Next Paint mjeri odziv stranice na korisničke interakcije. web.dev navodi da vrijednost do 200 ms na 75. percentilu predstavlja dobar odziv, odvojeno za mobilne i desktop posjete [7]. Broj nije cijeli UX, ali sporo sučelje izravno otežava korištenje.

Mobilna verzija ne smije biti sadržajno siromašna

Google za indeksiranje i rangiranje koristi mobilnu verziju sadržaja. Preporučuje responzivni dizajn te jednak primarni sadržaj, naslove, metapodatke, strukturirane podatke i alt opise na mobilnoj i desktop verziji [8].

Sadržaj možete premjestiti u kartice ili akordione radi preglednosti, ali nemojte iz mobilne verzije ukloniti opis usluge, uvjete, informacije o dostavi, recenzije ili druge elemente koji korisniku trebaju za odluku.

Testirajte na uređaju, ne samo u užem prozoru

Emulator je koristan za razvoj, ali ne otkriva sve. Testirajte barem jedan manji i jedan veći telefon, iOS i Android kada je relevantno, portretni i vodoravni položaj, sporiju mrežu, povećan tekst i stvarnu tipkovnicu.

Prođite cijeli zadatak: od ulaska na stranicu do potvrde. Provjerite duboke poveznice, povratak natrag, rotaciju uređaja, ponovno učitavanje, prekid pozivom i nastavak obrasca. Analitika otkriva gdje je problem; promatranje korisnika objašnjava zašto.

Kontrolna lista za mobilni UX

primarni zadatak vidljiv je bez traženja
nema horizontalnog pomicanja pri uobičajenom sadržaju
tekst ostaje čitljiv i pri povećanju
dodirni ciljevi dovoljno su veliki i razmaknuti
navigacija i sticky elementi ne prekrivaju sadržaj
obrazac koristi oznake, autocomplete i prikladnu tipkovnicu
pogreške se prikazuju uz polje i ne brišu unesene podatke
svaka radnja daje neposrednu vizualnu povratnu informaciju
mobilni sadržaj i SEO podaci jednaki su desktop verziji
ključni put testiran je na stvarnim uređajima

Mobilni UX postaje dobar kada korisnik ne mora razmišljati o sučelju. Može pročitati, dodirnuti, ispraviti pogrešku i završiti zadatak bez preciznosti miša, savršenog signala ili neprekinute pažnje.