Mobilni UX: praktični vodnik za boljšo spletno stran

Avtorica: Patricia Jarmek Vsebine in spletne strani 30. 10. 2026

6 min branja

Mobilna spletna stran lahko prestane tehnični test odzivnosti in je še vedno naporna. Besedilo se prilega zaslonu, gumbi pa so premajhni. Meni deluje, vendar skriva najpomembnejše dejanje. Obrazec je krajši kot na namizju, a odpre napačno tipkovnico in po napaki izbriše podatke.

Mobilni UX zato ni vprašanje, kako zmanjšati namizni dizajn. Odločiti se je treba, kaj uporabnik potrebuje najprej, kaj lahko počaka in kako nalogo dokonča z eno roko, na slabši povezavi in ob pogostih prekinitvah.

Začnite z nalogo uporabnika

Določite glavno mobilno nalogo: poiskati informacijo, primerjati storitev, poslati povpraševanje, kupiti izdelek ali preveriti naročilo. Prvi zaslon ne potrebuje vseh namiznih elementov v istem vrstnem redu, mora pa jasno pokazati naslednji korak.

Opazujte poti po napravah: kje mobilni uporabniki odnehajo, se vračajo, povečujejo prikaz ali večkrat odpirajo isti korak. Razlika v konverziji ni samodejno dokaz slabega UX-a, je pa signal za raziskovanje.

Odziven dizajn ni le nekaj prelomnih točk

Dober razpored se prilagaja prostoru, vsebini in zmožnostim naprave. web.dev opozarja, da se stran brez pravilne oznake viewport lahko naloži zelo pomanjšano, zaradi česar je besedilo težko brati [1].

WCAG 2.2 zahteva, da je pri širini, enakovredni 320 CSS pikslom, vsebina prikazana brez izgube informacij ali funkcionalnosti in brez drsenja v dveh smereh, razen kadar je dvodimenzionalni prikaz nujen [2].

V praksi to pomeni jasno glavno kolono, prilagodljive slike, premišljene mobilne tabele in komponente, ki se ne porušijo pri povečanju besedila. Pomembne vsebine ne skrivajte samo zato, ker jo je težje razporediti.

Tarča dotika mora biti večja od ikone

Uporabnik ne klika s konico kazalca, temveč s prstom. WCAG 2.5.8 določa najmanj 24 × 24 CSS pikslov ali dovolj razmika med manjšimi tarčami [3]. To je spodnja meja, ne ideal za pomemben gumb.

Apple priporoča najmanj 44 × 44 pt [4], Android pa 48 × 48 dp; vidna ikona je lahko manjša, če je aktivno območje povečano z odmikom [5].

Preverite zapiranje modalov, košarico, količino, puščice drsnika, potrditvena polja, nogo in filtre. Sosednji tarči ne smeta povzročati napačnih dotikov.

Oblikujte za palec in različne prijeme

Pogosta dejanja naj bodo dosegljiva, vendar ne predpostavljajte ene univerzalne cone palca. Velikost telefona, roka in kontekst spreminjajo doseg. Pomembne kontrole naj ne zahtevajo natančnega raztezanja, destruktivna dejanja pa ne sodijo tik ob glavni CTA.

Fiksna spodnja navigacija pomaga le, če ima malo jasnih ciljev. Težava postane, ko prekriva vsebino, cookie pasico ali tipkovnico. Lepljivi CTA naj izgine, ko ni več smiseln.

Besedilo mora ostati berljivo brez povečave

Berljivost vključuje kontrast, razmik vrstic, dolžino vrstice, hierarhijo in prostor. Naslov v štirih vrsticah, ki potisne vsebino, je lahko prav tako problematičen kot premajhna pisava.

Ne onemogočajte povečave. Stran se mora po povečanju smiselno prerazporediti. Harmonike lahko skrajšajo stran, vendar morajo naslovi jasno opisovati vsebino, ključne informacije pa ne smejo izginiti za iskalnike ali bralnike zaslona.

Mobilni obrazci naj zahtevajo manj dela

Vprašajte samo po podatkih za naslednji poslovni korak. Vsako polje naj ima trajno oznako, primer po potrebi in sporočilo, ki pove, kako napako popraviti. Placeholder ni oznaka.

Uporabite pravi tip polja, inputmode in autocomplete. GOV.UK Design System priporoča autocomplete, da uporabniki obrazce izpolnijo hitreje, skupaj z jasno oznako in navodilom za poseben format [6].

Preverite, ali se odpre prava tipkovnica, ali upravljalnik gesel deluje, ali podatki po napaki ostanejo, ali tipkovnica prekriva polje in ali je napaka vidna ob elementu.

Hiter odziv je del uporabnosti

Po dotiku mora biti vidno, da se je nekaj zgodilo. Gumb spremeni stanje, košarica potrdi dodajanje, meni se odpre ali se pokaže nalaganje. Brez odziva uporabnik dejanje ponovi.

Interaction to Next Paint meri odziv na interakcije. web.dev kot dober rezultat navaja do 200 ms pri 75. percentilu, ločeno za mobilne in namizne obiske [7]. Številka ni celoten UX, vendar počasno sučelje neposredno ovira uporabo.

Mobilna različica ne sme biti vsebinsko revnejša

Google za indeksiranje uporablja mobilno različico. Priporoča odziven dizajn ter enake glavne vsebine, naslove, metapodatke, strukturirane podatke in alt opise na mobilni in namizni različici [8].

Vsebino lahko premaknete v zavihke ali harmonike, ne odstranite pa opisa storitve, pogojev, dostave, ocen ali informacij, potrebnih za odločitev.

Testirajte na napravi

Emulator ne odkrije vsega. Preverite manjši in večji telefon, iOS in Android, pokončni in ležeči položaj, počasnejšo povezavo, povečano besedilo in pravo tipkovnico.

Prehodite celotno nalogo od vstopa do potrditve. Preverite vrnitev nazaj, rotacijo, ponovno nalaganje, prekinitev s klicem in nadaljevanje obrazca. Analitika pokaže, kje je problem; opazovanje uporabnikov pojasni zakaj.

Kontrolni seznam

glavna naloga je takoj vidna
ni vodoravnega drsenja običajne vsebine
besedilo ostane berljivo pri povečanju
tarče so dovolj velike in razmaknjene
navigacija ne prekriva vsebine
obrazci uporabljajo oznake, autocomplete in pravo tipkovnico
napake ne izbrišejo podatkov
dejanja dobijo takojšen vizualni odziv
mobilna in namizna vsebina sta enakovredni
ključna pot je preizkušena na napravah

Dober mobilni UX uporabniku omogoči branje, dotik, popravek in dokončanje naloge brez natančnosti miške, popolnega signala ali neprekinjene pozornosti.