9 minstekrav for mobiltilpasset design

Mobil nettsurfing har eksplodert etter introduksjonen av Apple iPhone. VG Nett og de andre nettavisene opplever en enorm økning i antall sidevisninger fra mobile enheter. Tall fra A-pressen viser at iPhone alene står for halvparten av sidevisningene fra mobil i september:

Andre mobilmodeller er også i siget, spesielt HTC Hero og Android.

Det er med andre ord viktig å få din nettside til å kle lommeformatet.

Debatten om spesialtilpasning til mobilmodell og operativsystem tar vi ikke denne gangen. Noen retningslinjer er generelle og går på tvers av mobilprodusent, modell og operativsystem. Jeg har samlet ni minstekrav for mobiltilpasset design:

1: Tilpass designet til den konteksten brukeren befinner seg

Opera Software gjennomfører månedlige undersøkelser hvor de analyserer trender og registrerer oftest besøkte sider via Opera Mini: State of the Mobile Web.

Dette er statistikk over de mest besøkte nettsidene i Storbritannia i august 2009, via Opera Mini:

1. facebook.com
2. google.com
3. bbc.co.uk (up from 4)
4. live.com (up from 5)
5. yahoo.com (down from 3)
6. wikipedia.org
7. youtube.com
8. bebo.com
9. my.opera.com
10. ebay.co.uk

Sjekk ut undersøkelsen for å se statistikk fra flere land i Europa eller andre verdensdeler.

Det som kjennetegner flere av disse nettsidene på mobil (må innrømme at jeg ikke har sjekket ut alle) er at designerne har vurdert brukerbehov i kontekst, og prioritert innhold og funksjoner.

YouTube har skrelt ned sitt tilbud via sin iPhone app, og brukeren kan søke, legge i favoritter, eller få anbefalte og mest viste videoer.

Facebook har prioritert opp de aller viktigste funskjonene, som å få oppdateringer på hva vennene dine holder på med, og sende meldinger.

Dette betyr ikke nødvendigvis at du skal fjerne innhold og funksjonalitet fra mobilversjonen din, men at du skal identifisere de viktigste oppgavene utifra kontekst og løfte disse frem. Slik oppnår du et mobilvennlig design.

Hvis flere vurderer brukernes kontekst og prioriterer, vil vi se en mobilsurfing som i større grad også beveger seg mot  tjenestebaserte funksjoner.

Dette var jeg inne på i min bloggpost Mobilsurfing = surfing på et «utvannet» Internett.

2: Ikke repeter navigasjonen på alle sider…

Brukervennlige nettsider som er designet for PC repeterer vanligvis navigasjonen på alle sider. Men skjermplass på en mobiltelefon er hellig. Navigasjonen kan gjøre at brukeren må skrolle laaaangt ned for å komme til innholdet.

Derfor: vis kun navigasjonen på forsiden. På alle andre sider bør du ta med lenker til forsiden og til andre viktige punkt som brukeren har vært igjennom. For eksempel vha. en brødsmulesti, som BBC har gjort:

3: …men ta med basisnavigasjon på alle sider

Noen mobile nettlesere  skipper basisnavigasjon som Tilbake-knappen for å spare plass. Pass derfor på alltid å ha med en «Tilbake» knapp eller lenke på alle sider.

Annen viktig basisnavigasjon kan være (avhengig av innhold/tjeneste) «Neste side», «alle resultater», «alternativ reisevei», osv.

4: Vis tydelig hvilket element som er i fokus

Å bevege musepekeren på en mobiltelefon er knotete. Det må derfor ikke være noen tvil om hvilket element som er i fokus.

Uthev den fokuserte lenken eller knappen ved å endre font og bakgrunnsfarge, eller evt. forstørr elementet.

Hva du enn gjør, la brukeren slippe å lete etter musepekeren.

Markering av lenke i fokus på trafikanten.no: 

5: Pass på at rekkefølgen på tab-index er gjennomtenkt

Denne retningslinjen følger logisk etter retningslinje 4:

Fordi det er tungt å navigere med mus på mobiltelefon føles piltaster mer effektivt og behagelig. Tenk derfor gjennom rekkefølgen på tab-indexen, slik at den følger en logisk rekkefølge sett opp mot formålet med siden.

6: Gjør det enkelt for brukerne å legge inn informasjon

Å skrive inn tekst på en mobiltelefon kan føles grusomt tregt, og det er lett å skrive feil med et 12-knappers tastatur (eller å treffe riktig bokstav på et lite touch-tastatur).

Brukerne ender også fort opp med å skrive inn søkeord som gir dårlige eller ingen resultater. Det er tungt å måtte «prøve seg frem» på en mobiltelefon.

Et sett godt gjennomtenkte lenker og gode søkeordforslag kan gjøre mobiltjenesten din svært brukervennlig.Tillatt brukerne dine å foreta valg som et alternativ til å skrive inn fri tekst.

7: Sørg for en mobilvennlig sidelayout

Pass på at din nettside på mobil ser slik ut:		Og ikke slik:

8: Vis bare essensiell informasjon

For å unngå eventuelle misforståelser: Dette betyr ikke at vi skal strippe ned informasjon og vise så lite som mulig. Folk er villige til å lese store mengder informasjon på en liten skjerm, hvis det gir dem en verdi i den konteksten de befinner seg i. Det er ikke mengde tekst det dreier seg om, men kvaliteten på teksten.

Viktig innhold kan fort overskygges av uviktige elementer som «Om oss», «Hjelp», reklametekster eller lignende.

Noen mobilbrukere betaler også mer jo større datamengde de laster ned. Brukere blir frustrerte hvis de må betale for innhold som de ikke ønsker seg.

9: Test nedlastingstiden på hver side

Å komme til neste skjermside kan ta lang tid. Optimer din mobiltilpassede nettside slik at den lastes så raskt som mulig, f.eks. ved å unngå store, tunge elementer som sinker nedlastingstiden.

Til slutt: Ikke glem å teste på sluttbrukerne dine. En brukertest vil alltid finne ting som ikke dekkes av generelle retningslinjer.

Ta kontakt med oss hvis du ønsker brukertesting av mobile enheter.

Vil du lese mer om webdesign for mobil?

• MobileDesign.org: Nettsamfunn for alle som er interessert i web design for mobile enheter, i regi av guru og mobilekspert Brian Fling
• Opera Software gjennomfører månedlige undersøkelser hvor de analyserer trender og registrerer oftest besøkte sider via Opera Mini: State of the Mobile Web
• Jakob Nielsen og hans team gjennomførte i vår en større undersøkelse, Mobile Usability
• Live gir tre gode tips for mobil webdesign
• Skal man lage egne versjoner av nettsidene tilpasset mobil, eller ikke? Jeg mener JA. Det er uansett en egen diskusjon, som er debattert uttallige steder på den store verdensveven. Blant annet i Thors blogginnlegg UI12: Fire metoder for mobil webdesign.