Sådan designer du hjemmesider til mobilen

1: Skær ind til benet

Du ved det godt. Telefonskærmen er langt mindre end en computerskærm. Og det betyder, at store designelementer eller effekter, der ser imponerende ud på computeren, faktisk ofte bliver irriterende på telefonen. Der er simpelthen ikke plads til unødvendige elementer; det er kun det vigtigste indhold, der skal få lov at fylde på mobilskærmen.

Indholdet er det vigtigste, når man designer til mobilen. Det er vigtigt, at brugeren ikke bliver forstyrret af designelementer. Du kan med fordel bruge usynlige interfaces – såsom en burgermenu, der folder ud – for at gøre hjemmesiden mere overskuelig for brugeren.

2: Design, der kan afbrydes

Mobilen bruges ofte på farten. Det betyder, at brugere ofte bliver afbrudt i deres interaktion med dit design; de kan være på farten og skynde sig videre, deres telefon kan gå ud, eller de kan slet og ret blive distraheret af verden omkring dem. Derfor er det vigtigt, at tilpasse sin hjemmeside til en meget flyvsk brugeradfærd.

Man kan med fordel bryde store opgaver, som f.eks. købsopgaver, ned i mindre opgaver og sikre, at brugeren kan fortsætte, hvor de slap. Altså, i stedet for at lave mange felter, brugeren skal udfylde på én gang, i stedet designet et flow, hvor brugeren udfylder 2-3 felter af gangen og herefter trykker “næste”. Det giver plads til pauser og afbrydelser.

Det er vigtigt at kende sine besøgende og deres adfærd. I mange tilfælde kan du simpelthen gå ud fra, at dine brugere ikke er koncentrerede.

3: Gør det nemt at finde rundt

En hjemmeside skal være brugervenlig – også på mobilen. Sørg for at bruge kendte ikoner og funktioner, så brugeren allerede kender dit design, selvom de ikke har brugt det før. Find ud af, hvilke sider og funktioner, brugerne oftest benytter og gør det nemt for dem at finde det, de søger.

Det er vigtigt at brugeren kan finde rundt på din hjemmeside, for selv det bedste indhold er ligegyldigt, hvis brugeren ikke kan finde hen til det.

4: Gør dit design fingervenligt

Når man surfer rundt på computeren, bruger man en markør, der perfekt kan ramme knapper og menupunkter. Det gør sig ikke gældende på en telefon, hvor man bruger fingeren til at navigere rundt. Hvor en markør kan ramme ned til den mindste pixel, er fingeren langt mere klodset og skal bruge større flader.

En tommelfingerregel er, at en finger skal bruge en 7-10 mm. trykflade for at kunne interagere. Det betyder, at det kan være en fordel at gøre knapper og andre ting, der skal trykkes på, større.

5: Tilpas dit design til måden, man holder en mobil på

Når man holder telefonen i hånden, er man stærkt begrænset af, hvor langt ens fingre kan nå. Det er derfor vigtigt at placere oftest brugte sider og funktioner i tommelfingerens rækkevidde. Husk at tænke på, hvordan man holder telefonen og på, hvad der skal være inden for rækkevidde.

Du kan også placere destruktive handlinger som “Slet”, “Tilbage”, “Forlad siden” udenfor tommelfingerens rækkevidde, så brugeren ikke gør noget, der ikke stemmer overens med dine – og deres – interesse.

Husk også, at telefonskærme kun bliver større og større – og din bruger derfor har mere og mere af skærmen udenfor rækkevidde.

6: Skab et genkendeligt univers

Vi har allerede sagt det: det er uhyre vigtigt at skære ind til benet, når man designer til mobilen. Men det er stadig vigtigt, at brugeren kan genkende mobildesignet fra andre platforme – f.eks. computeren. Ellers bliver brugeren forvirret og er i tvivl om, hvilken hjemmeside vedkommende er havnet på.

Sørg for, at farver, ikoner, navne på menuer og undersider og funktioner går igen fra computerversionen til mobilversionen af dit website. Dette styrker både brand awareness – og brugerens evne til at finde rundt på dit site.

7: Gør din tekst letlæselig

En telefonskærm er lille, og derfor kan det være svært at vise alt indhold på din hjemmeside. Det er dog vigtigt, at du ikke vender dig mod den nemme løsning og gør din tekst mindre – tekst på mobilsites bør ikke være mindre end 11 pt., som er det mindste, brugeren kan læse uden at zoome.

For at gøre din tekst nemmere at læse på telefonen, kan du med fordel skabe lidt luft omkring teksterne. Gør linjehøjden højere og mellemrummet mellem bogstaver bredere, så din tekst ikke er klemt og uoverskuelig. Husk desuden at holde dine tekster korte, så brugerens øjne ikke bliver trætte eller ikke kan overskue tekstmængden. Det, der er overskueligt på en computerskærm kan virke helt uoverskueligt på en lille telefonskærm.

Er din hjemmeside mobiloptimeret? 

Har du brug for hjælp til at optimere din hjemmeside, så den er brugervenlig og lettilgængelig fra telefonen? Vi designer skarpe hjemmesider, der ser godt ud på alle platforme!

Kontakt os her for et uforpligtigende tilbud.