Case study: Mobile First med m.nrk.no

Mobile First er en tilnærmingsmetode for design av nettsteder/webapps som anbefaler at man først designer for mobile flater, altså enheter som har mindre visningsområde og spesielle egenskaper som finnes ikke på større flater.

Når skjermen blir større, kan man ved bruk av iterasjoner og “progressive enhancement“, gi løsningen mer funksjonaliteter og flere elementer.
La oss se på hvordan mobileportalen m.nrk.no kan designes* med en “Moblie First” tilnærmingen**.

* I dette tilfellet antar jeg at nrk.no ville blitt ombygd fra bunn på mobil, uten arven fra en vanlig pc versjon.

** Dette er bare noe tanker for å illustrere poenget mitt, og bør ikke sees på som en totalløsning for m.nrk.no.

Luke Wroblewski er hovedmannen bak “Mobile First“, en filosofi som må styre prosjektet fra dag én. I stedet for å gjennomføre et prosjekt for vanlige pc’er først og mobil i ettertid, må vi starte med mobilen, og han gir tre grunner til hvorfor det er smart:

• Enhetens egenskaper
• Begrensninger
• Mobilen finnes overalt og er alltid med deg.

Enhetens egenskaper

Først og fremst har mobile flater spesielle egenskaper som finnes ikke på vanlige pc.

1. Ut av boksen får du kamera slik at du skape eget innhold umiddelbart.
2. Med multi-touch / gestures –det er mulig å samhandle med skjerm og innhold på en unike måte,  som kanskje gir et mer naturlig grensensnitt en tastatur og mus
3. GPS kan tilby personlige informasjon basert på hvor du her.

I dag kan du selv velge hvordan du ønsker at forsiden blir presentert, med eller uten bilder, med nyhetene fra ditt distrikt, osv…Tenk deg at m.nrk.no benytter seg av GPS-funksjonaliteten. Da kan de med en gang vise nyhetene som er relatert til din plassering. Ved bruk av GPS og personlig profil blir det mulig å ha et element som viser lokale nyheter i tillegg til land eller distrikt. Bra om du er på reise, og umiddelbart trenger å vite hva som skjer.

Med bevegelsesensor kan skjermoppsettet endre seg i forhold til orientering av smartphone. Kollegaen min Mari forslo at forsiden lister alle artikler , og ved å snu smartphonen i liggende retning, går du rett innen artikkelen.

Det er ikke nødvendig at mobilversjonen kun vises stående med CSS. Ved bruk av mer fleksible løsninger som media queries, kan nettstedet tilpasse seg til liggende visning med veldig liten endring i CSS filen. Det er ikke rocket science, men kan bli oversett når du kommer fra en pc versjon.

Begrensninger

Mobile flater tvinger deg til å fokusere på det viktigste. Skjermområdet er mindre enn på en vanlig pc og ikke alt innhold bør vises på en gang. Når du designer mot en vanlig smartphone får du bare 320 x 480 pixel (i gjennomsnitt) til å leke med. Det er ikke så mye, og det blir nødvendig å være smart i valget på hva man skal vise. Luke Wroblewski sier at du taper 80% av skjermområdet, og faktisk er dette veldig bra. Nettstedet m.nrk.no viser i dag like mange artikler som www.nrk.no men fjerner en god del støttenavigasjonselementer, og det er smart. Jeg går først og fremst til nrk.no for å sjekke de siste nyhetene og trenger ikke en stort Footer eller info fra NRK Tv. Jeg må si at dagens løsninger gjør en bra jobb med å vise frem nyheter, og gir meg samtidig tilgang til mer info om jeg vil.

Mobilen finnes overalt og er alltid med deg

Mobile enheter er personlige og det er veldig sjelden man deler dem. De er med deg overalt og alltid. De har info om når du står opp, hvem du skal treffe til lunsj og hvor, hva du har på din handleliste, osv…

“Mobile devices create a truly Personalized and Responsive user experience regardless of the situation.”

Tim Kadlec

Hvordan kan vi så utnytte disse egenskapene? m.nrk.no kan sjekke hva som har skjedd siden ditt siste besøk og presentere siste oppdatering som hovedsak, og en lenkeliste av de andre oppdateringene. På den måten vet du hva du sist leste om saken og får samtidig tråden av hendelser.

Med “Offline Web storage” som kommer med HTML5 mobile, kan m.nrk.no også gi muligheten til å lagre artikkel til senere, for eksempel når du er på toget uten tilgang til nettet.

Argumentet sjefen din kjøper

I tillegg til de tre hovedgrunnene, hjelper ”Mobile First” deg til å nå flere menneskene. Det er 5,3 milliarder mobilabonnenter i hele verden, nesten 80% av befolkningen. En god del av disse brukere får tilgang på nett kun gjennom mobil.

I mange utviklingsland skjer en veldig rask adopsjon av bankstjeneste på mobil . I Kenya har 22 av 40 millioner innbyggere i dag mobil (200 000 for 11 år siden) og det finnes 9,5 millioner mobile bankkontoer, mot kun 8 millioner tradisjonelle kontoer. Systemet i dag er basert på sms-tjeneste men den raske utbyggingen av mobile bredbåndstjenester vil endre dette.

Denne videoen viser statistikk knyttet til mobil bruk i Afrika.

Men bruk av mobil øker ikke bare i Afrika, IDC forutser at i 2015, vil de fleste tilkoblinger til Internett i USA bli gjennomført med mobile flater (58%), ikke vanlige PCer.
Det samme gjelder i Storbritannia hvor nesten 50% av trafikken på nett kommer fra mobile flater.

Undersøkelsen fra  “Livet på nett” Netcomm viser at nordmenn bruker mer tid på smartphone til ekstra tjeneste enn tradisjonelle teletjenester.

Å tenke “mobile first” gir deg og din bedrift en stor fordel i fremtiden. Du går bort fra det tunge vanlige pc nettstedet og kan tenker på nytt, med nye metoder og nye muligheter.

Hva synes du om “mobile first” tilnærming? Har du startet prosjekter med “mobile First” utgaven? Kom gjerne med tanker og inspill.