{"id":200012101,"date":"2026-10-30T06:00:00","date_gmt":"2026-10-30T06:00:00","guid":{"rendered":"https:\/\/www.verdera.agency\/?p=200012101"},"modified":"2026-10-30T14:34:44","modified_gmt":"2026-10-30T14:34:44","slug":"mobilni-ux-spletna-stran-mora-biti-preprosta-za-palec-ne-le-manjsa","status":"publish","type":"post","link":"https:\/\/www.verdera.agency\/sl\/clanki\/vsebine-in-spletne-strani\/mobilni-ux-spletna-stran-mora-biti-preprosta-za-palec-ne-le-manjsa\/","title":{"rendered":"Mobilni UX: spletna stran mora biti preprosta za palec, ne le manj\u0161a"},"content":{"rendered":"

Mobilna spletna stran lahko prestane tehni\u010dni test odzivnosti in je \u0161e vedno naporna. Besedilo se prilega zaslonu, gumbi pa so premajhni. Meni deluje, vendar skriva najpomembnej\u0161e dejanje. Obrazec je kraj\u0161i kot na namizju, a odpre napa\u010dno tipkovnico in po napaki izbri\u0161e podatke.<\/p>\n

Mobilni UX zato ni vpra\u0161anje, kako zmanj\u0161ati namizni dizajn. Odlo\u010diti se je treba, kaj uporabnik potrebuje najprej, kaj lahko po\u010daka in kako nalogo dokon\u010da z eno roko, na slab\u0161i povezavi in ob pogostih prekinitvah.<\/p>\n

Za\u010dnite z nalogo uporabnika<\/h2>\n

Dolo\u010dite glavno mobilno nalogo: poiskati informacijo, primerjati storitev, poslati povpra\u0161evanje, kupiti izdelek ali preveriti naro\u010dilo. Prvi zaslon ne potrebuje vseh namiznih elementov v istem vrstnem redu, mora pa jasno pokazati naslednji korak.<\/p>\n

Opazujte poti po napravah: kje mobilni uporabniki odnehajo, se vra\u010dajo, pove\u010dujejo prikaz ali ve\u010dkrat odpirajo isti korak. Razlika v konverziji<\/a> ni samodejno dokaz slabega UX-a, je pa signal za raziskovanje.<\/p>\n

Odziven dizajn ni le nekaj prelomnih to\u010dk<\/h2>\n

Dober razpored se prilagaja prostoru, vsebini in zmo\u017enostim naprave. web.dev opozarja, da se stran brez pravilne oznake viewport<\/code> lahko nalo\u017ei zelo pomanj\u0161ano, zaradi \u010desar je besedilo te\u017eko brati [1]<\/a>.<\/p>\n

WCAG<\/a> 2.2 zahteva, da je pri \u0161irini, enakovredni 320 CSS pikslom, vsebina prikazana brez izgube informacij ali funkcionalnosti in brez drsenja v dveh smereh, razen kadar je dvodimenzionalni prikaz nujen [2]<\/a>.<\/p>\n

V praksi to pomeni jasno glavno kolono, prilagodljive slike, premi\u0161ljene mobilne tabele in komponente, ki se ne poru\u0161ijo pri pove\u010danju besedila. Pomembne vsebine ne skrivajte samo zato, ker jo je te\u017eje razporediti.<\/p>\n

Tar\u010da dotika mora biti ve\u010dja od ikone<\/h2>\n

Uporabnik ne klika s konico kazalca, temve\u010d s prstom. WCAG 2.5.8 dolo\u010da najmanj 24 \u00d7 24 CSS pikslov ali dovolj razmika med manj\u0161imi tar\u010dami [3]<\/a>. To je spodnja meja, ne ideal za pomemben gumb.<\/p>\n

Apple priporo\u010da najmanj 44 \u00d7 44 pt [4]<\/a>, Android pa 48 \u00d7 48 dp; vidna ikona je lahko manj\u0161a, \u010de je aktivno obmo\u010dje pove\u010dano z odmikom [5]<\/a>.<\/p>\n

Preverite zapiranje modalov, ko\u0161arico, koli\u010dino, pu\u0161\u010dice drsnika, potrditvena polja, nogo in filtre. Sosednji tar\u010di ne smeta povzro\u010dati napa\u010dnih dotikov.<\/p>\n

Oblikujte za palec in razli\u010dne prijeme<\/h2>\n

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\u010dnega raztezanja, destruktivna dejanja pa ne sodijo tik ob glavni CTA.<\/p>\n

Fiksna spodnja navigacija pomaga le, \u010de ima malo jasnih ciljev. Te\u017eava postane, ko prekriva vsebino, cookie pasico ali tipkovnico. Lepljivi CTA naj izgine, ko ni ve\u010d smiseln.<\/p>\n

Besedilo mora ostati berljivo brez pove\u010dave<\/h2>\n

Berljivost vklju\u010duje kontrast, razmik vrstic, dol\u017eino vrstice, hierarhijo in prostor. Naslov v \u0161tirih vrsticah, ki potisne vsebino, je lahko prav tako problemati\u010den kot premajhna pisava.<\/p>\n

Ne onemogo\u010dajte pove\u010dave. Stran se mora po pove\u010danju smiselno prerazporediti. Harmonike lahko skraj\u0161ajo stran, vendar morajo naslovi jasno opisovati vsebino, klju\u010dne informacije pa ne smejo izginiti za iskalnike ali bralnike zaslona.<\/p>\n

Mobilni obrazci naj zahtevajo manj dela<\/h2>\n

Vpra\u0161ajte samo po podatkih za naslednji poslovni korak. Vsako polje naj ima trajno oznako, primer po potrebi in sporo\u010dilo, ki pove, kako napako popraviti. Placeholder ni oznaka.<\/p>\n

Uporabite pravi tip polja, inputmode<\/code> in autocomplete<\/code>. GOV.UK Design System priporo\u010da autocomplete<\/code>, da uporabniki obrazce izpolnijo hitreje, skupaj z jasno oznako in navodilom za poseben format [6]<\/a>.<\/p>\n

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.<\/p>\n

Hiter odziv je del uporabnosti<\/h2>\n

Po dotiku mora biti vidno, da se je nekaj zgodilo. Gumb spremeni stanje, ko\u0161arica potrdi dodajanje, meni se odpre ali se poka\u017ee nalaganje. Brez odziva uporabnik dejanje ponovi.<\/p>\n

Interaction to Next Paint meri odziv na interakcije. web.dev kot dober rezultat navaja do 200 ms pri 75. percentilu, lo\u010deno za mobilne in namizne obiske [7]<\/a>. \u0160tevilka ni celoten UX, vendar po\u010dasno su\u010delje neposredno ovira uporabo.<\/p>\n

Mobilna razli\u010dica ne sme biti vsebinsko revnej\u0161a<\/h2>\n

Google za indeksiranje uporablja mobilno razli\u010dico. Priporo\u010da odziven dizajn ter enake glavne vsebine, naslove, metapodatke, strukturirane podatke<\/a> in alt opise na mobilni in namizni razli\u010dici [8]<\/a>.<\/p>\n

Vsebino lahko premaknete v zavihke ali harmonike, ne odstranite pa opisa storitve<\/a>, pogojev, dostave, ocen ali informacij, potrebnih za odlo\u010ditev.<\/p>\n

Testirajte na napravi<\/h2>\n

Emulator ne odkrije vsega. Preverite manj\u0161i in ve\u010dji telefon, iOS in Android, pokon\u010dni in le\u017ee\u010di polo\u017eaj, po\u010dasnej\u0161o povezavo, pove\u010dano besedilo in pravo tipkovnico.<\/p>\n

Prehodite celotno nalogo od vstopa do potrditve. Preverite vrnitev nazaj, rotacijo, ponovno nalaganje, prekinitev s klicem in nadaljevanje obrazca. Analitika poka\u017ee, kje je problem; opazovanje uporabnikov pojasni zakaj.<\/p>\n

Kontrolni seznam<\/h2>\n