Objavljeno: 8 januarja, 2020

V prejšnjem blogu smo se že dotaknili nekaterih trendov, ki jih prinaša novo leto. Večino trendov že dobro poznamo, saj nas v različnih oblikah spremljajo že nekaj let. Letos pa bo v ospredju uporabniška izkušnja za območje palca – thumb-zone design.

Kaj je območje palca (thumb-zone)?

Območje palca (op. thumb-zone) je območje na zaslonu mobilne naprave, ki ga ob enoročnem držanju naprave lahko dosežemo s palcem iste roke. Glede na težavnost dosega, je zaslon mobilne naprave razdeljen na tri območja, ki jih lahko dosežemo s palcem: naravno (zelena), srednje težko (rumena), težko (rdeča).

Revolver blog - območje palca na mobilnem telefonu
Območje palca na mobilnem telefonu

Pri oblikovanju uporabniške izkušnje si prizadevamo, da uporabniku čimbolj olajšamo uporabo našega spletišča. To dosežemo tako, da so pomembni elementi lahko dostopni. V idealnih okoliščinah te elemente umestimo v naravno (zeleno) območje palca, saj s tem povečamo možnost, da se bodo oblikovalci odločili za dejanje (npr. kontakt, naročilo na e-novice, nakup izdelka).

Vse je v palcu – zakaj je območje palca pomembno?

Od prihoda prvega mobilnega telefona z večjim zaslonom (op. to je bil iPhone 6), se je mobilni splet za vedno spremenil. V želji po čim večjih zaslonih, na katerih lahko prikažemo čim več informacij, mobilni telefoni rastejo v svoji velikosti. Na mobilne telefone z velikimi zasloni smo se že dodobra navadili, postopoma pa smo tudi spremenili način, kako ga uporabljamo.

Uporabniki mobilnih telefonov držijo svoje telefone na enega izmed treh načinov: z levo roko, z obema rokama ali z desno roko. Pri enoročnem držanju telefona uporabnik opravlja vse funkcije s palcem roke, s katero drži telefon. Poskusite sami: primite telefon v levo ali desno roko in opazili boste, da palec uporabljate za premikanje po vsebini in za klikanje gumbov. Uporaba palca pri brskanju na mobilnih napravah je ključnega pomena. Zato moramo to upoštevati pri načrtovanju uporabniške izkušnje in jo prilagoditi za območje palca.

Kako oblikovati dobro uporabniško izkušnjo za območje palca?

Naravno območje palca je najpomembnejše območje na telefonu. Pri oblikovanju uporabniške izkušnje se moramo osredotočiti na postavljanje pomembnih elementov znotraj tega območja. Primer pomembnega elementa, ki sodi v naravno območje palca, je gumb s pozivom k akciji. Glede na vsebino vaše spletne strani je poziv k akciji lahko karkoli. Najpogosteje pa gre za gumb, ki obiskovalcem omogoča stopiti v stik z vami, se naročiti na vaše e-novice ali pa jim omogoča hitro dodajanje artiklov v košarico.

Razdalja med elementi

Vendar pa pri oblikovanju uporabniške izkušnje za območje palca ni pomembno le to, katere elemente umestimo v naravno območje palca, temveč tudi kaj se nahaja v njihovi bližini. Za dosego dobre uporabniške izkušnje moramo paziti, da so elementi primerno oddaljeni drugo od drugega ter dovolj veliki, da jih uporabnik z lahkoto klikne s palcem. Medsebojna oddaljenost elementov lahko pomeni razliko med uspešno opravljenim nakupom ali zapustitvijo vaše spletne strani! Predstavljajte si primer, ko sta gumba »Zaključi nakup« in »Izprazni košarico« tesno skupaj in kliknemo napačnega. Vsem nam se je to že zgodilo, marsikdo od nas pa je po tem tudi razočarano zapustil spletno stran. Očitno ločite nasprotujoče si gumbe s primerno razdaljo med njimi in tako preprečite zgrešene klike.

Velikost elementov

Na uporabniško izkušnjo v območju palca poleg razdalje med elementi igra pomembno vlogo tudi sama velikost elementov. Oblikovalcem uporabniške izkušnje se prevečkrat zgodi, da pri načrtovanju elementov za mobilne naprave zanemarijo značilnosti naših rok. Izdelava spletnih strani poteka na računalniku, kjer lahko z miškinim kazalcem kliknemo na zelo majhno izbrano mesto. Pri klikanju in pritiskanju elementov na mobilnih napravah pa je malce drugače.

V odnosu do istega elementa (recimo gumba) je blazinica palca občutno večja od miškinega kazalca, kar otežuje natančen izbor oz. pritisk želenega elementa. Poleg tega pa s palcem zakrijemo del elementa, kar je moteče, če s tem prikrijemo pomembno informacijo ali pa ne vemo, kaj točno bomo pritisnili. Rešitev je v primerno velikih elementih, ki jih brez težav pritisnemo ter vedno vidimo, kaj bomo pritisnili.

Lepljivi elementi (sticky elements)

Pri načrtovanju uporabniške izkušnje vedno izhajamo iz obstoječih temeljev – navad naših uporabnikov, saj so se te navade oblikovale skozi dolgoletno ponavljajočo prakso, ki jo je nemogoče spremeniti čez noč. Povsem preprost primer: navadili smo se, da se ob kliku logotipa na vrhu strani vrnemo nazaj na domačo stran spletišča. Navadili smo se tudi tega, da se ta logotip pojavlja zgoraj levo ali na sredini. Na podlagi navad si ustvarimo pričakovanje, kako mora nekaj delovati in kako pridemo do želenega učinka. Danes vsi vemo, da kadar smo v dvomu, na vrhu poiščemo logotip spletišča in vrnili se bomo »nazaj na začetek«. Na mobilnih napravah pa je ta vrh strani lahko zelo oddaljen.

Mobilne spletne strani v veliko pogledih sledijo logiki spletnih strani za velike naprave. Ena izmed teh je, da se navigacija spletišča pojavljal na vrhu posamezne strani, v glavi strani. Glava najpogosteje vključuje logotip spletišča ter meni, dodani pa so lahko tudi drugi elementi kot gumb za poziv k dejanju, iskalnik, bližnjice do družbenih omrežij in tako naprej. Na mobilnih napravah se za lažjo dostopnost navigacije uporabljajo lepljivi elementi (sticky elements). Lepljivi elementi so tisti, ki vedno ostanejo na enakem mestu in v našem vidnem polju, ne glede na to, na katerem mestu strani se nahajamo. Pri načrtovanju uporabniške izkušnje za območje palca so lepljivi elementi (predvsem meniji) na vrhu zaslona nepogrešljivi, vse pogosteje pa opažamo premik navigacije v lepljivi plavajoči balonček ob strani, ki je bližje naravnemu območju palca.

Območje palca na vaši spletni strani

Spletne strani, ki so prilagojene mobilnim napravam, so v poslu nujne. Z njimi lahko pospešite svojo prodajo, dvignete ugled svojega podjetja ali pa učinkovito ohranjate stik z vašimi strankami. Pojdite en korak dlje – naj po vaša spletna stran prilagojena tudi za območje palca. Izdelava spletnih strani, ki so prilagojene za območje palca, terja malce drugačen pristop kot izdelava spletnih strani za velike naprave. In ta pristop nam je na Revolverju blizu. Pišite nam in se odločite za novo spletno stran.