Mobil: Hva er alternativene? Hva må du tenke på?

Design for fingre og små
skjermer

Ida Aalen
@idaAa

Hei!

Ida Aalen
ida@netliferesearch.com
45 24 24 12
@idaAa

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

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

9.15-10.45
Agenda • 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

• Hvor mange kommer fra
#1 mobil?
• Hvor mange faller fra når
Sjekk de kommer på mobil?
• Hvilke sider er det mobil-
statistikken brukerne besøker mest?

din!

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

• Er det noen sider som er
#2 mer besøkt fra mobil enn
fra desktop?
Sjekk hva • Er det noen fraser som er
mer søkt etter fra mobil
mobil- enn desktop?

brukerne er
ute etter

• Et nettsted som følger
#1 moderne webstandarder
kan fint vises på nyere
Funksjonell smarttelefoner
• Kan ikke bruke
tilpasning tilleggsprogrammer som
- Flash
- Silverlight

Fordeler
#1 • Koster ingenting, med
mindre du i dag bruker
Funksjonell eksempelvis Flash

tilpasning Ulemper
• Kan ta lang tid å laste
nettstedet
• Vanskelig å navigere seg
frem, fordi ting er smått

• Nettstedet sjekker hva
#2 slags skjerm eller dings
brukeren har, og tilpasser
Mobil hva de får se ut i fra det
• Gjøres gjerne ved
tilpasning - Nettlesersniffing
- Responsive Web Design

Fordeler
#2 • Billigere enn å utvikle apps
Mobil Ulemper
• Ikke samme tilgang til
tilpasning innebygget funskjonalitet,
for eksempel kamera

Et program
#3 f. eks Trafikanten
som lastes ned fra
Native en distribusjons-
plattform
apps f. eks App Store eller
Android Market
og så installeres på
en dings
f. eks en iPad, en Samsung
Galaxy S, en iPod

Foto: Flickr-bruker asterix611 CC-BY-SA

Foto: Flickr-bruker FaceMePLS CC-BY

Fordeler
#3 • Lar deg ta i bruk telefonens
innebygde egenskaper
Native • Kan lastes ned fra App
Store og Android Market
apps
Ulemper
• Dyrt å utvikle
• Fungerer ikke på tvers av
ulike platformer, som for
eksempel Android og
iPhone

#4
Hybrid-app
HTML
CSS
Proprietært skall JS

Fordeler
#4 • Billigere å utvikle
• Kan bruke samme kode på
Hybrid-app 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

• Folk bruker mobilen til å
Du bør - google,
- lese e-post,
uansett - sjekke Facebook og
Twitter.
være • Hva møter dem når de
åpner en link til nettstedet
tilgjengelig ditt? Da hjelper det lite å
ha en app
på nett... • Hva med de som ikke
bruker Android eller
iPhone?

Trafikkandel fra mobil
Direktorat uten Organisasjon uten E24.no med
mobilside mobilside mobiltilpasning

6% 11%
22%

78%
94% 89%

Mobil Desktop

Windows
Bouncerate 30%

hos iPhone og Android
42-46%
direktoratet

Windows
Bouncerate 47%

hos iPhone og Android
72%
veldedig
organisasjon

Hva er et godt
mobilt nettsted?

Ufokuserte Begrense
nettsteder 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?

– 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 First Clour Four Blog
Luke Wroblewski (2011) http://cloudfour.com/blog/

Responsive Web Media Queries Blog
Design http://mediaqueri.es/
Ethan Marcotte (2011)

Et program
Hva er en f. eks Trafikanten
som lastes ned fra
app? en distribusjons-
plattform
f. eks App Store eller
Android Market
og så installeres på
en dings
f. eks en iPad, en Samsung
Galaxy S, en iPod

...hvis den kommer
Når passer til å brukes ofte
ettersom den først må
det å ha en lastes ned og installeres

app?

.. hvis den bruker
Når passer innebygget
funksjonalitet
det å ha en eksempelvis
• kamera
app? • 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

Hvem
Klarer du skal bruke appen?
Hva
svare på skal de bruke appen til?
Når
hva appen skal de bruke appen?
Hvor
din skal skal de bruke appen?
Hvorfor
gjøre? skal de bruke appen?

Hvem, hva, hvor, når
og hvorfor?
Eiere av Miele-maskiner
kan styre kjøkken-
apparatene sine
når de ikke er på kjøkkenet
men likevel er hjemme
og det gidder de fordi de
har så stort hus, kanskje?

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

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

Anbefalt lesning
Tapworthy
Josh Clark (2010)

Slik designer du app for nettbrett på 1-2-3-4
Live Grønlien
http://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

Ja:
Hva kan Konsept
Overordnet
jeg ta med informasjonsarkitektur

meg? Nei:
Detaljert
interaksjonsdesign
Detaljert grafisk design

Anbefalt lesning
Finn.no webstatistikk
http://labs.finn.no/tema/finn-statistikk/

Design for små skjermer
og touch

7 spørsmål
1. Ligger den viktigste 4. Kan man bruke appen uten
informasjonen øverst? gestures?
2. Er det tydelig hva man kan 5. Har du tatt bort alt du kan
trykke på? ta bort?
3. Kan man bruke appen kun 6. Har du tydelige
med en tommeltott? handlingsdrivere?
7. Har du vært konsekvent?

1. Ligger den viktigste
informasjonen øverst?

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

• Legg derfor det du vil at
1. Ligger folk skal se først øverst på
skjermen
den • Knapper som brukes ofte
bør legges lengst ned på
viktigste skjermen
• ...Men ikke legg menyen
infoen nederst på Android-apper

øverst?

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

• Bruksanvisninger er en
2. Er det farlig sovepute, og overses
ofte av brukerne
tydelig hva • Sørg for at trykkbare
elementer skiller seg ut
man kan
trykke på?

3. Kan du bruke den
med en tommeltott?

• Ikke vær redd for å gjøre
3. Kan du touch-elementer for store!
Vanlig minimum er 7mm x
bruke den 7mm
• Sørg for stor nok plass
med en mellom ulike touch-
elementer
tommel-
tott?

4. Klarer man seg uten
gestures?

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

• Sørg for at det alltid er en
4. Klarer vei til alle handlinger uten
å måtte bruke gestures
man seg • Bruk gestures som
snarveier, ikke primær
uten navigasjon

gestures?

5. Har du kuttet alt du
kan kutte?

• Jo mer funksjonalitet
5. Har du appen din har, jo
vanskeligere blir det å
kuttet alt forklare hva den gjør
• Jo mer du putter inn på en
du kan skjerm, jo mindre
oppmerksomhet får hvert
kutte? enkelt element
• Hold antall instillinger til
et minimum, og gjør heller
gode valg for brukerne

6. Har du tydelige
handlingsdrivere?

• Sørg for at du vet hva du
6. Har du vil at brukeren skal gjøre
på hvert skjermbilde
tydelige • Ha tydelige veier videre,
for eksempel i form av
handlings- knapper og inputfelter

drivere?

• Er bruken av begreper og
7. Har du ikoner konsekvent mellom
ditt mobile nettsted,
vært desktopnettsted og app?
• Er appen eller mobilsiden
konsekvent? konsekvent innad, i bruken
av begreper og
interaksjonselementer?
• Er appen din konsekvent
med plattformen?

Anbefalt lesning
Tapworthy Lovely UI
Josh Clark (2010) http://lovelyui.com

Mobile First Mobile UI Patterns
Luke Wroblewski (2011) http://mobile-
patterns.com/
TappGala
http://tappgala.com Pttrns
http://pttrns.com/

Finn feilen før markedet
gjør det!

2007
Vi har for iPhone lanseres
2008
lite erfaring Android 1.0 lanseres
2010
til å vite iPad lanseres
Samsung Galaxy Tab m fl
hva som 2011
Hvor mange nordmenn får
funker 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)

Eksempel:
Brukerne
kjenner
ikke til
“long
?
press”

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

#3
Test på den mobilen
brukeren er vant til

Hva er det du
ønsker å gjøre i
menyen?
Jeg leter etter
menyen...

Ser du noe sted du
kan klikke for å gå
Logge meg
videre til å gjøre
inn..
det?

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

Hva skjer hvis jeg Hva tenker du
trykker her? burde skje hvis du
trykker der da?

#5
Pass på at du ikke
hjelper brukeren

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

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

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

Ta frem
mobilen og gå inn på
http://bit.ly/demo-mobil

#7
Test tidlig i prosessen
også

Anbefalt lesning
Invision App Praktisk
http://invisionapp.com Brukertesting
Toftøy-Andersen & Wold
Gjør det selv: 5 trinn (2011)
til brukertest
http://bit.ly/
brukertest12345

Takk for meg!

Ida Aalen
ida@netliferesearch.com
45 24 24 12
@idaAa

Mobil: Hva er alternativene? Hva må du tenke på?

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Mobil: Hva er alternativene? Hva må du tenke på?

Ähnlich wie Mobil: Hva er alternativene? Hva må du tenke på? (20)

Mehr von Ida Aalen

Mehr von Ida Aalen (20)

Mobil: Hva er alternativene? Hva må du tenke på?