Easyweb AS Easyweb AS X
Anslått lesetid:
ca. 2 minutter

Fokuser på tommelvennlig mobildesign

En kjapp innføring i utforming av digitale løsninger for mobil. Stikkordet er tommelbruk.

Det er 3 grunnleggende grep på hvordan vi holder mobilen vår:

  • Ca. 49 % holder telefonen med etthåndsgrep.
  • Ca. 36 % holder telefonen med den ene hånden og bruker finger eller tommelen fra den andre hånden til å berøre skjermen
  • De resterende 15 % bruker begge hendene for å holde telefon, og berører med begge tommelene.

    Felles for alle er at over 75 % berører skjermen med tommelen, uansett grep.

Økte skjermstørrelser gir høyere krav til plassering av elementer

I takt med at skjermstørrelser for mobil øker må vi blir mer beviste på hvor vi plasserer de ulike elementene på mobil.

Da telefonene var mindre, var de fleste områder lette å nå. Etter hvert som skjermene har blitt større har det blitt vanskelig (eller umulig) å berøre hele skjermen uten å bytte grep eller justere telefonplasseringen i hånden.

Under ser resultat av hvor på skjermen brukere synes det er naturlig eller vanskelig å «touche» uten å bytte grep. Områdene er inndelt i 4 soner:

  • Naturlig
  • Strekk (må strekke seg)
  • Vanskelig (må kanskje flytte hånden)
  • Umulig (uten å flytte hånden)

Bruk gjerne soneoversikten over til å vurdere hvordan din nettside eller nettbutikk oppleves for besøkende som bruker mobil. Beviste og smarte valg vil gjøre ting enklere for dine besøkende – og gi mer verdi til deg!

Husk navigasjon

Noen av de viktigste elementene på mobil er navigasjon, søk og CTA-knapper (call-to-action).

Hvorfor er det slik at 90% av dagens nettsteder utvikles med navigering, meny og søk i toppen? I «app-verden» har det lenge vært helt naturlig å legge disse elementene i bunnen av appen:

Illustrasjonen over er vanlig i app-verden, men ganske sjelden på nettsider og nettbutikker.

Siden toppen av skjermen blir vanskelig å nå, er det et bedre alternativ å plassere disse elementene i bunnen på mobil.

Noen eksempler:

Bildet over er en fiktiv illustrasjon laget av noen som mener bilde til høyre er en vesentlig forbedring. Slack.com har ikke endret, men det bør de kanskje?
Komplett.no har lenge kjørt med navigering, søk, logg inn og handlekurv i bunnen av siden.
Easyweb.no har nylig lagt om til navigasjon i bunnen.

Test gjerne ut vår nye navigering i bunnen av mobil-siden. Vi tar gjerne i mot ris og ros 🙂


Trenger du hjelp til et mer mobilvennlig nettsted? Ta kontakt med oss her.