mobil: hva er alternativene? hva må du tenke på?

Design for fingre og små skjermer

Ida Aalen@idaAa

Hei!

Ida Aalenida@netliferesearch.com45 24 24 12@idaAa

Foto: Flickr-bruker ChristChurch City Libraries CC-BY-NC-ND

Foto: Flickr-bruker sea turtle CC-BY-NC-ND

Agenda 9.15-10.45• Hva menes med “mobil”?• Bruksmønstre• 4 måter å komme seg på

mobil• Hvordan lage et mobilt

nettsted?• Hva er en god app?• Android vs iPhone• Design av mobil• Finn feilen før markedet

gjør det

Hva er en mobil?

Kilde: A-pressen, 2011

#1Sjekk statistikken din!

• Hvor mange kommer fra mobil?

• Hvor mange faller fra når de kommer på mobil?

• Hvilke sider er det mobil-brukerne besøker mest?

Mobil på farten?

Foto: Flickr-bruker mrjorgen CC-BY-NC-ND

Foto: Flickr-bruker C.Bry@nt CC-BY-NC-ND

Foto: Martin Bekkelund, www.bekkelund.net via Flickr. Lisens CC-BY-NC-SA 3.0.

En iPads hverdag

Kilde: A-pressen, 2011

En iPhones hverdag

Kilde: A-pressen, 2011

Folk gjør hva som helst på mobil hvis du lar dem

#2Sjekk hva mobil-brukerne er ute etter

• Er det noen sider som er mer besøkt fra mobil enn fra desktop?

• Er det noen fraser som er mer søkt etter fra mobil enn desktop?

Hva skal du gjøre på mobil?

#1Funksjonelltilpasning

• Et nettsted som følger moderne webstandarder kan fint vises på nyere smarttelefoner

• Kan ikke bruke tilleggsprogrammer som

- Flash- Silverlight

#1Funksjonell tilpasning

Fordeler• Koster ingenting, med

mindre du i dag bruker eksempelvis Flash

Ulemper• Kan ta lang tid å laste

nettstedet• Vanskelig å navigere seg

frem, fordi ting er smått

#2Mobil tilpasning

• Nettstedet sjekker hva slags skjerm eller dings brukeren har, og tilpasser hva de får se ut i fra det

• Gjøres gjerne ved- Nettlesersniffing- Responsive Web Design

#2Mobil tilpasning

Fordeler• Billigere enn å utvikle apps

Ulemper• Ikke samme tilgang til

innebygget funskjonalitet, for eksempel kamera

#3Native apps

Et programf. eks Trafikantensom lastes ned fra en distribusjons-plattformf. eks App Store eller Android Marketog så installeres på en dingsf. eks en iPad, en Samsung Galaxy S, en iPod

Nissan Leaf iPhone App

Tesco Grocery Shopping App

Glympse

Foto: Flickr-bruker asterix611 CC-BY-SA

Foto: Flickr-bruker FaceMePLS CC-BY

#3Native apps

Fordeler• Lar deg ta i bruk telefonens

innebygde egenskaper• Kan lastes ned fra App

Store og Android Market

Ulemper• Dyrt å utvikle• Fungerer ikke på tvers av

ulike platformer, som for eksempel Android og iPhone

#4Hybrid-app

HTMLCSSJSProprietært skall

#4Hybrid-app

Fordeler• Billigere å utvikle• Kan bruke samme kode på

web, iPhone, Android m fl• Kan lastes ned fra App

Store og Android Market

Ulemper• Går treigere enn native

apps• Må fortsatt tilpasse appen

til hver plattform

Du bør uansett være tilgjengelig på nett...

• Folk bruker mobilen til å - google,- lese e-post,- sjekke Facebook og

Twitter. • Hva møter dem når de

åpner en link til nettstedet ditt? Da hjelper det lite å ha en app

• Hva med de som ikke bruker Android eller iPhone?

Trafikkandel fra mobil

78%

22%

Mobil Desktop

94%

6%

Mobil Desktop

89%

11%

Direktorat uten mobilside

Organisasjon uten mobilside

E24.no med mobiltilpasning

Bounceratehos direktoratet

Windows30%

iPhone og Android42-46%

Bouncerate hosveldedig organisasjon

Windows47%

iPhone og Android72%

Hva er et godtmobilt nettsted?

Ufokuserte nettsteder

Begrense mobilsider

• Tar som utgangspunkt at man får en bedre løsning om man begynner med å designe for små skjermer først

• Tanken er at dette får oss til å fokusere og prioritere bedre

• Hvis det ikke er viktig nok til å ha på mobil, er det egentlig viktig nok for desktop?

Kilde: A-pressen, 2011

– We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte

Responsive Web Design, s. 6

– [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte

Responsive Web Design, s. 6

• Tar som utgangspunkt at du tilbyr det samme innholdet på alle plattformer

• Det som tilpasses er hvordan dette innholdet vises frem

Anbefalt lesning

Mobile FirstLuke Wroblewski (2011)

Responsive Web DesignEthan Marcotte (2011)

Clour Four Bloghttp://cloudfour.com/blog/

Media Queries Bloghttp://mediaqueri.es/

Når trenger jeg en app?

Vi trenger en app!

Et programf. eks Trafikantensom lastes ned fra en distribusjons-plattformf. eks App Store eller Android Marketog så installeres på en dingsf. eks en iPad, en Samsung Galaxy S, en iPod

Hva er en app?

...hvis den kommer til å brukes ofteettersom den først må lastes ned og installeres

Når passer det å ha en app?

Når passer det å ha en app?

.. hvis den bruker innebygget funksjonaliteteksempelvis

• kamera• lydopptak• gyroskop• adressebok• sms

– Too often, people start from the other end of the stick, effectively asking, “What does this app do for me, the app creator?”Josh Clark i Tapworthy

Hvemskal bruke appen?Hvaskal de bruke appen til?Nårskal de bruke appen?Hvorskal de bruke appen?Hvorforskal de bruke appen?

Klarer du svare på hva appen din skal gjøre?

Hvem, hva, hvor, når og hvorfor?Eiere av Miele-maskinerkan styre kjøkken-apparatene sinenår de ikke er på kjøkkenetmen likevel er hjemmeog det gidder de fordi de har så stort hus, kanskje?

Hvem, hva, hvor, når og hvorfor?Bysykkel-medlemmerkan finne sykkelstativ på kartet og hvor nærmeste ledige sykkel ernår de er ute og sykler i Osloså slipper de å lete eller komme frem til et fullt sykkelstativ

Foto: Aktiv i Oslo CC-BY-NC-ND

Anbefalt lesning

TapworthyJosh Clark (2010)

Slik designer du app for nettbrett på 1-2-3-4Live Grønlienhttp://bit.ly/nettbrettapp

Hva med de ulike plattformene?

+ =

Foto: Flickr-bruker reticulating CC-BY-NC-ND

Foto: Flickr-bruker Mike Babcock CC-BY

http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey

Hvorfor ser de så ulike ut?

Hva kan jeg ta med meg?

Ja:KonseptOverordnet informasjonsarkitektur

Nei:Detaljert interaksjonsdesignDetaljert grafisk design

Anbefalt lesning

Finn.no webstatistikkhttp://labs.finn.no/tema/finn-statistikk/

Design for små skjermer og touch

7 spørsmål

1. Ligger den viktigste informasjonen øverst?

2. Er det tydelig hva man kan trykke på?

3. Kan man bruke appen kun med en tommeltott?

4. Kan man bruke appen uten gestures?

5. Har du tatt bort alt du kan ta bort?

6. Har du tydelige handlingsdrivere?

7. Har du vært konsekvent?

1. Ligger den viktigste informasjonen øverst?

Luke Wroblewski: Mobile First

http://dcurt.is/3-point-5-inches/

1. Ligger den viktigste infoen øverst?

• Legg derfor det du vil at folk skal se først øverst på skjermen

• Knapper som brukes ofte bør legges lengst ned på skjermen

• ...Men ikke legg menyen nederst på Android-apper

2. Er det tydelig hva man kan trykke på?

2. Er det tydelig hva man kan trykke på?

• Bruksanvisninger er en farlig sovepute, og overses ofte av brukerne

• Sørg for at trykkbare elementer skiller seg ut

3. Kan du bruke den med en tommeltott?

3. Kan du bruke den med en tommel-tott?

• Ikke vær redd for å gjøre touch-elementer for store! Vanlig minimum er 7mm x 7mm

• Sørg for stor nok plass mellom ulike touch-elementer

4. Klarer man seg uten gestures?

http://lukew.com/touch

http://lukew.com/touch og Ljuba Miljkovic @ljuba

4. Klarer man seg uten gestures?

• Sørg for at det alltid er en vei til alle handlinger uten å måtte bruke gestures

• Bruk gestures som snarveier, ikke primær navigasjon

5. Har du kuttet alt du kan kutte?

5. Har du kuttet alt du kan kutte?

• Jo mer funksjonalitet appen din har, jo vanskeligere blir det å forklare hva den gjør

• Jo mer du putter inn på en skjerm, jo mindre oppmerksomhet får hvert enkelt element

• Hold antall instillinger til et minimum, og gjør heller gode valg for brukerne

6. Har du tydelige handlingsdrivere?

6. Har du tydelige handlings-drivere?

• Sørg for at du vet hva du vil at brukeren skal gjøre på hvert skjermbilde

• Ha tydelige veier videre, for eksempel i form av knapper og inputfelter

7. Har du vært konsekvent?

7. Har du vært konsekvent?

• Er bruken av begreper og ikoner konsekvent mellom ditt mobile nettsted, desktopnettsted og app?

• Er appen eller mobilsiden konsekvent innad, i bruken av begreper og interaksjonselementer?

• Er appen din konsekvent med plattformen?

Anbefalt lesning

TapworthyJosh Clark (2010)

Mobile FirstLuke Wroblewski (2011)

TappGalahttp://tappgala.com

Lovely UIhttp://lovelyui.com

Mobile UI Patternshttp://mobile-patterns.com/

Pttrnshttp://pttrns.com/

Finn feilen før markedet gjør det!

Vi har for lite erfaring til å vite hva som funker

2007iPhone lanseres2008Android 1.0 lanseres2010iPad lanseresSamsung Galaxy Tab m fl2011Hvor mange nordmenn får sin første smarttelefon i år? Denne uka?

...jeg ser ikke noen meny, jeg?

Oi, det er jo der reklamen pleier å

ligge..

...men jeg ser ikke fotballen..

Hvorfor får jeg ingen treff?

– Less than 15 percent of downloaded apps get so much as a glance over the course of a week,Josh Clark

Tapworthy (2010, s. 10)

– and two months after purchase, only a third of downloaded apps get used at all.Josh Clark

Tapworthy (2010, s. 10)

#1Test før du lanserer

Er du en vanlig bruker?

?Eksempel:Brukerne kjenner ikke til “long press”

#2Rekruttér vanlige brukere fra den faktiske målgruppen

Foto: Flickr-bruker reticulating CC-BY-NC-ND

Foto: Flickr-bruker Mike Babcock CC-BY

#3Test på den mobilen brukeren er vant til

Bruker Testleder

Hva tenker du nå?

Jeg leter etter menyen...

Hva er det du ønsker å gjøre i

menyen?

Logge meg inn..

Ser du noe sted du kan klikke for å gå videre til å gjøre

det?

#4Få brukeren til å tenke høyt og still åpne spørsmål

Hva skjer hvis jeg trykker her?

Hva tenker du burde skje hvis du

trykker der da?

#5Pass på at du ikke hjelper brukeren

Det er bedre å se det med egne øyne enn å lese det i en rapport

#6Invitér prosjekteiere, designere, markedsavdeling og lignende med på testen

Takk til Mats Angermo Ringstad, Ståle Torger Stokke og Åsmund Skjerdal for godt samarbeid!

Takk til Mats Angermo Ringstad, Ståle Torger Stokke og Åsmund Skjerdal for godt samarbeid!

Ta fremmobilen og gå inn på

http://bit.ly/demo-mobil

#7Test tidlig i prosessen også

Anbefalt lesning

Invision Apphttp://invisionapp.com

Gjør det selv: 5 trinn til brukertest http://bit.ly/brukertest12345

Praktisk BrukertestingToftøy-Andersen & Wold (2011)

Ida Aalenida@netliferesearch.com45 24 24 12@idaAa

Takk for meg!