{"id":200012100,"date":"2026-10-30T06:00:00","date_gmt":"2026-10-30T06:00:00","guid":{"rendered":"https:\/\/www.verdera.agency\/?p=200012100"},"modified":"2026-10-30T10:33:22","modified_gmt":"2026-10-30T10:33:22","slug":"mobilni-ux-web-stranica-mora-biti-jednostavna-za-palac-ne-samo-manja","status":"publish","type":"post","link":"https:\/\/www.verdera.agency\/hr\/clanci\/sadrzaj-i-web-stranice\/mobilni-ux-web-stranica-mora-biti-jednostavna-za-palac-ne-samo-manja\/","title":{"rendered":"Mobilni UX: web-stranica mora biti jednostavna za palac, ne samo manja"},"content":{"rendered":"

Mobilna web-stranica mo\u017ee pro\u0107i tehni\u010dki test responzivnosti, a i dalje biti naporna za kori\u0161tenje. Tekst stane na ekran, ali gumbi su premali. Izbornik radi, ali skriva najva\u017eniju radnju. Obrazac je kra\u0107i od desktop verzije, no otvara pogre\u0161nu tipkovnicu i bri\u0161e podatke nakon pogre\u0161ke.<\/p>\n

Mobilni UX zato nije pitanje kako smanjiti desktop dizajn. To je odluka \u0161to korisniku treba prvo, \u0161to mo\u017ee pri\u010dekati i kako dovr\u0161iti zadatak jednom rukom, na slabijoj vezi i uz \u010deste prekide.<\/p>\n

Po\u010dnite zadatkom koji korisnik \u017eeli dovr\u0161iti<\/h2>\n

Najprije odredite primarni mobilni zadatak: prona\u0107i informaciju, usporediti uslugu, poslati upit, kupiti proizvod, prona\u0107i lokaciju ili provjeriti status narud\u017ebe. Po\u010detni ekran ne treba sadr\u017eavati sve \u0161to postoji na desktopu istim redoslijedom. Mora jasno pokazati sljede\u0107i korak.<\/p>\n

Promatrajte stvarne putove po ure\u0111aju: gdje mobilni korisnici odustaju, vra\u0107aju se, pove\u0107avaju prikaz ili otvaraju isti korak vi\u0161e puta. Razlika u stopi konverzije nije sama po sebi dokaz lo\u0161eg UX-a \u2014 kontekst kori\u0161tenja mo\u017ee biti druk\u010diji \u2014 ali je signal za istra\u017eivanje.<\/p>\n

Responzivno ne zna\u010di samo nekoliko prijelomnih to\u010daka<\/h2>\n

Dobar raspored prilago\u0111ava se dostupnom prostoru, sadr\u017eaju i mogu\u0107nostima ure\u0111aja. web.dev upozorava da stranica bez ispravne viewport<\/code> oznake mo\u017ee biti prikazana jako umanjeno, zbog \u010dega je tekst te\u0161ko \u010ditati, te preporu\u010duje raspored koji odgovara ure\u0111aju umjesto oslanjanja na fiksne dimenzije [1]<\/a>.<\/p>\n

WCAG 2.2 tra\u017ei da se sadr\u017eaj pri \u0161irini ekvivalentnoj 320 CSS piksela mo\u017ee prikazati bez gubitka informacija ili funkcionalnosti i bez pomicanja u dvije dimenzije, osim kada je dvodimenzionalni raspored nu\u017ean, primjerice kod karte ili slo\u017eene tablice [2]<\/a>.<\/p>\n

Prakti\u010dno to zna\u010di: jedna jasna kolona za glavne zadatke, slike koje se prilago\u0111avaju, tablice s promi\u0161ljenim mobilnim prikazom i komponente koje se ne raspadaju pri pove\u0107anju teksta. Nemojte sakriti va\u017ean sadr\u017eaj samo zato \u0161to ga je te\u0161ko smjestiti.<\/p>\n

Dodirni cilj mora biti ve\u0107i od ikone<\/h2>\n

Korisnik ne dodiruje vrhom kursora. Dodiruje prstom, \u010desto u pokretu. WCAG kriterij 2.5.8 kao minimum navodi cilj od 24 \u00d7 24 CSS piksela ili dovoljan razmak izme\u0111u manjih ciljeva [3]<\/a>. To je donja granica pristupa\u010dnosti, ne ideal za svaki va\u017ean gumb.<\/p>\n

Apple preporu\u010duje najmanje 44 \u00d7 44 pt za dodirne kontrole [4]<\/a>, a Android najmanje 48 \u00d7 48 dp, pri \u010demu vidljiva ikona mo\u017ee biti manja ako je njezino aktivno podru\u010dje pove\u0107ano paddingom [5]<\/a>.<\/p>\n

Provjerite posebno: zatvaranje modala, ikonu ko\u0161arice, odabir koli\u010dine, strelice slidera, checkboxe, poveznice u footeru i male kontrole u filtrima. Dva cilja ne smiju biti toliko blizu da pogre\u0161an dodir pokrene ne\u017eeljenu radnju.<\/p>\n

Dizajnirajte za palac i promjenu hvata<\/h2>\n

Naj\u010de\u0161\u0107e radnje postavite u dohvat, ali nemojte pretpostaviti jednu univerzalnu \u201ezonu palca\u201d. Veli\u010dina ure\u0111aja, ruka kojom ga korisnik dr\u017ei i kontekst mijenjaju doseg. Va\u017ene kontrole trebaju biti dostupne bez preciznog istezanja, dok destruktivne radnje ne bi trebale stajati tik uz primarni CTA.<\/p>\n

Fiksna donja navigacija mo\u017ee biti korisna ako sadr\u017ei nekoliko jasnih odredi\u0161ta. Postaje problem kada prekriva sadr\u017eaj, sukobljava se s cookie trakom ili zauzima previ\u0161e vertikalnog prostora. Sticky CTA treba nestati ili promijeniti stanje kada vi\u0161e nije relevantan.<\/p>\n

Tekst mora ostati \u010ditljiv bez zumiranja<\/h2>\n

\u010citljivost nije samo veli\u010dina fonta. Va\u017eni su kontrast, razmak redaka, duljina retka, hijerarhija i dovoljno prostora oko elemenata. Naslov od \u010detiri retka koji potisne sadr\u017eaj ispod prvog ekrana mo\u017ee biti jednako problemati\u010dan kao premali tekst.<\/p>\n

Nemojte uklanjati mogu\u0107nost zumiranja. Korisnik mora mo\u0107i pove\u0107ati sadr\u017eaj, a stranica se pritom mora preslo\u017eiti bez gubitka funkcionalnosti. Akordioni mogu smanjiti duljinu stranice, ali naslovi moraju jasno govoriti \u0161to se nalazi unutra, a klju\u010dni sadr\u017eaj ne smije postati nevidljiv tra\u017eilici ili \u010dita\u010du ekrana.<\/p>\n

Mobilni obrasci trebaju manje rada, ne manje informacija<\/h2>\n

Tra\u017eite samo podatke potrebne za sljede\u0107i poslovni korak. Svako polje mora imati trajnu oznaku, jasan primjer kada je potreban i poruku o pogre\u0161ci koja obja\u0161njava kako je ispraviti. Placeholder nije zamjena za oznaku.<\/p>\n

Koristite odgovaraju\u0107i tip polja, inputmode<\/code> i autocomplete<\/code>. GOV.UK Design System preporu\u010duje autocomplete<\/code> kako bi korisnici br\u017ee ispunili polja, uz jasnu oznaku i pomo\u0107ni tekst kada se tra\u017ei specifi\u010dan format [6]<\/a>.<\/p>\n

Na mobitelu posebno provjerite:<\/p>\n