mobil: hva er alternativene? hva må du tenke på?
DESCRIPTION
Presentasjon fraTRANSCRIPT
Design for fingre og små skjermer
Ida Aalen@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?
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)
