effektiv mobil tilstedeværelse
DESCRIPTION
Tord Heyerdals og mitt frokostseminar på CreunaTRANSCRIPT
EFFEKTIV MOBIL TILSTEDEVÆRELSE
TORD HEYERDAHL (28)
Interaksjonsdesigner
Har jobbet med kunder som:
Trafikanten
Ruter
Stortinget
Statkraft
Nordea
Norwegian
Skatteetaten
…
TORBJØRN SITRE (39)
Kreativ leder
Har jobbet med kunder som:
Norgesgruppen
Tine
Nordea
Ruter
Stortinget
REC
Veidekke
…
«Go mobile or die!»
EFFEKTIV MOBIL TILSTEDEVÆRELSE
Brukerne forventer det
Vår utfordring: Er ikke mobil enda vanskeligere enn web?
Så hvordan gjør vi det, da?
Brukerne har rett!
EFFEKTIV MOBIL TILSTEDEVÆRELSE
Brukerne forventer det
Vår utfordring: Er ikke mobil enda vanskeligere enn web?
Så hvordan gjør vi det, da?
Brukerne har rett!
BRUKERE AV MOBILT NETT VIL VÆRE I MAJORITET INNEN MIDTEN AV 2013 GLOBALT
Mill
ioner
av b
ruke
re g
lobalt
2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 20160
400
800
1200
1600
2000
Mobil
Desktop
Kilde: Morgan Stanley
9 AV 10 SOLGTE MOBILTELEFONER ER SMARTTELEFONER- Dette forteller både Telenor og NetCom i 2011- Halvparten av alle de 2,5 millionene mobiltelefonene som ble solgt i 2010
var smarttelefoner
Andel smarttelefoner i Telenors nett:
Nå: ca. 50% smart-telefoner
Kilde: Pressemeldinger, Aftenposten
*Base: Franske iPhone-brukere 16+
Kilde: Forrester
Europeiske iPhone-brukere: ”Hvilken av de følgende ville du vært interessert i å gjøre via din iPhone?”
Research products for purchase*
Purchase products*
Compare prices when shopping instore
Locate a nearby store to buy a specific product
Look up product information while shopping instore
Find or redeem coupon
0% 5% 10% 15% 20% 25% 30% 35% 40% 45% 50%
NYE MOBILE BRUKSMØNSTRE ETABLERES
SHOPPERE ER SULTNE PÅ INFORMASJON MENS DE ER I BUTIKKEN
56% er interessert
i informasjon
knyttet til
helse/trivsel,
økologi/miljø
31% er mer
interessert i
vareplassering i
butikken, pris,
lagerstatus
Food origins
Health
Organic
Location in store
Price
Inventory
Sustainable/humane farming practices
Ingredients
Food safety
Recipes
0% 5% 10% 15% 20% 25% 30% 35% 40%
Primary needs
All needs
Matproduktinformasjon shoppere sier de ønsker via mobil i butikk:% av dagligvarehandlere globalt
Kilde: Latitude Research
UNGE MENNESKER MED EGEN INNTEKT ER DET VIKTIGSTE SEGMENTET INNEN M-HANDEL
Andel av totalomsetning innen m-handel kommer fra:
HUSHOLDNINGER MED BARN OG HØY INNTEKT HAR OFTERE SMARTTELEFON
Alle hushold...
Over 600k
Alle hushold...
Over 600k
Hus
hold
ning
er m
ed b
arn
Hus
hold
ning
er u
ten
barn
0 5 10 15 20 25 30 35 40 45
Andel husholdninger mobilt internett (3G eller nyere):
Kilde: SSBKilde: SSB
Andel med smarttelefon med 3G eller bedre i Norge
KVINNER I VANLIG MORSALDER ER MER AKTIV PÅ MOBIL ENN NOEN ANNEN ALDERSGRUPPE
Social Networking & Connecting
Knowledge & Education
Planning & Organizing
Personal Admin
Shopping
Pre-purchase browsing
News, Sport & Weather
Personal Interest
Multi-Media, Entertainment
Online Gaming
0% 10% 20% 30% 40% 50% 60% 70% 80%
Male 35-44
Female 35-44
Kilde: TNSKilde: TNS
Andel mobilbrukere som har gjort aktivitet på mobil siste 12 mnd i Norge
KVINNER FØLER SEG MER AVHENGIGAV SMARTTELEFONEN
Kilde: Norstat via Aftenposten
Har du smarttelefon?
Av de som har smarttelefon, svart ja på spørsmål:
Føler du deg avhengig av smarttelefonen?
Føler du deg avskåret fra verden uten mobilen?
0%10%20%30%40%50%60%70%
Menn
Kvinner
HVA FORVENTER BRUKERNE VÅRE?
Slide 15
”the power of the user”
DE FORVENTER VERDI
Slide 17
Effektivt
Attraktivt
Dialog
Transparent
Kontinuerlig tilstedeværelse
Slide 18
19
En fisk
«Google har spådd at 44 % av søk etter gaver og butikker kommer på mobil i desember – har du råd til å gi dem en dårlig brukeropplevelse?»
Kilde : http://www.internetretailer.com/2011/09/06/mobile-comprise-15-black-friday-searches
EFFEKTIV MOBIL TILSTEDEVÆRELSE
Brukerne forventer det
Vår utfordring: Er ikke mobil enda vanskeligere enn web?
Så hvordan gjør vi det, da?
Brukerne har rett!
«Jo, det er det!»
3 HOVEDUTFORDRINGER
Det er mindre plass til alt innholdet
Det er vanskeligere for brukerne å nå målet
Det krever mer ressurser
Slide 29
DET ER MINDRE PLASS
Slide 30
NOEN KONVERTERINGER ER IKKE MULIG PÅ MOBIL
Slide 31
…OG NOEN ER FORSKJELLIGE PÅ MOBIL
Slide 32
Slide 33
UTVIKLING OG VEDLIKEHOLD PÅ FLERE PLATTFORMER KREVER MER RESSURSER
34
768x1024
768x1024
1024x768
240x196 128x192
320x480 1200x824 600x800
MASSE ENHETER OG OPERATIVSYSTEMER
OG HVA KOMMER I FREMTIDEN?
Slide 35
EFFEKTIV MOBIL TILSTEDEVÆRELSE
Brukerne forventer det
Vår utfordring: Er ikke mobil enda vanskeligere enn web?
Så hvordan gjør vi det, da?
Brukerne har rett!
SÅ HVORDAN GJØR VI DET, DA?
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
SÅ HVORDAN GJØR VI DET, DA?
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
MålbildeForretningsidé Strategi
Merkevareplattform- det vi har valgt å konkurrere på
STRATEGI
Digital strategi
MålbildeForretningsidé Strategi
Merkevareplattform- det vi har valgt å konkurrere på
STRATEGI – STERKT MERKEVAREBYGGENDE
Digital strategi
STRATEGI – ET BREDT PERSPEKTIV
Brukerbehov
Teknologiske muligheter
Selskapets budskap
SÅ HVORDAN GJØR VI DET, DA?
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
EN SØMLØS OPPLEVELSE
Før
Nå
Snart
VI SKAL GI BRUKERNE VERDI…
Slide 45
…OVERALT OG ALLTID!
BRUKERNE VÅRE FORHOLDER SEG IKKE TIL PLATTFORM, MEN TIL TOTALTJENESTEN
HELHETLIG TILSTEDEVÆRELSE – VÅRT ANSIKT UTAD
SÅ HVORDAN GJØR VI DET, DA?
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
MOBILE KONSEPTER – HVOR KAN VI FINNE DEM?
Hvilket innhold har vi, som brukerne allerede er ute etter når de bruker mobil?
Hvilke touchpoints har vi i dag, som vi kan forbedre?
Hvilke situasjoner er våre brukere i, og hva ønsker de seg fra oss i de situasjonene?
Hva leverer vi i dag, som vi kan utvikle tjeneste rundt?
INNHOLD BRUKERNE ALLEREDE ER INTERESSERT I NÅR DE ER PÅ MOBIL
Hvordan finner vi det?
Slide 52
MÅL ANTALL MOBILE BESØK PÅ NETTSTEDET
MÅL KONSUM AV INNHOLD
SE PÅ LOJALITET OG BRUK
1696197;
68%
794856;
32%
Visits
Returning Visitor
New Visi-tor
Hva slags innhold benytter denne gruppen?
16,5 % av de besøkende har vært innom siten mer enn 10 ganger siste 30 dager...
Høy frekvens av returnerende besøk
HVILKE TOUCHPOINTS ER TILGJENGELIG FOR DEM (OG DERMED FOR OSS)?
Mobilbrukerne er her…
…eller er de kanskje her?
…eller her?
Kilde:Compete
Identifisere konteksten hvor en mobil tjeneste kan gi merverdi til brukeren
..og som gir mening for dine forretningsresultater
…OG VI ER HELT AVHENGIGE AV AT KONVERTERINGEN FUNGERER
…OG VI ER HELT AVHENGIGE AV AT KONVERTERINGEN FUNGERER
…OG VI ER HELT AVHENGIGE AV AT KONVERTERINGEN FUNGERER
SÅ HVORDAN GJØR VI DET, DA?
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
DESIGN FOR
66
mobil først
ANTALLET MOBILE ENHETER EKSPLODERER
67
2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 20160
400
800
1200
1600
2000
Dere husker vel statistikken?
68
MOBIL TVINGER OSS TIL Å PRIORITERE
Mindre skjermstørrelse
Svakere ytelse
Dårligere båndbredde
…men det gir en bedre løsning
Slide 69
MINDRE SKJERM
Galaxy Note 5,3 tommer m/1280*800
Galaxy Nexus 4,65 tommer m/1280*720
iPhone 4S 3,5 tommer m/960*640
Oppløsning på bærbare datamaskiner
1280x1024: 14.8 %
1280x800: 14.4 %
1366x768: 10.1 %
Slide 70
SVAKERE YTELSE
Skyldes først og fremst to egenskaper: Svakere prosessor Mindre minne
Begrenser muligheter for avanserte funksjoner ved hjelp av JavaScript
Slide 71
DÅRLIGERE BÅNDBREDDE
Slide 72
Dekningskart: http://www.telenor.no/privat/dekning/
Slide 73
TRANSPORT FOR LONDON - WEBVERSJON
TRANSPORT FOR LONDON - MOBILVERSJON
TRANSPORT FOR LONDON – FINNE BILLETTPRISER
PLASSER DET VIKTIGSTE ØVERST
76
Større skjerm
Størst skjerm
Liten skjerm
MOBIL UTVIDER VÅRE MULIGHETER
78
SÅ HVORDAN GJØR VI DET, DA?
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
FORSKJELLIGE BEHOV, FORSKJELLIGE LØSNINGER
FORSKJELLIGE BEHOV, FORSKJELLIGE LØSNINGER
Mobil-web? App?
Mobil-web
App
Hybrid?
FORSKJELLIGE BEHOV, FORSKJELLIGE LØSNINGER
Mobil-web
html/css/js
URL – bookmark
Plattformuavhengig
Krever nettilgang
Web-funksjonalitet
Begrenset lagring av data
Tilgjengelig fra søk og eksterne linker
App
Skrevet for OS
AppStore/Ovi/Android Market
OS-definert brukeropplevelse
Nett-uavhengig (delvis)
Tilgang til OS-funksjonalitet
Robust lagring av data
Oppdateres via OS
Hybrid
FORSKJELLIGE BEHOV, FORSKJELLIGE LØSNINGER- HYBRID
BRUKEROPPLEVELSE, TID OG KOSTNAD
© Creuna
Produksjonskost og -tid
Bru
kero
pp
levels
e
Mobil webside
Web-app
Hybrid app
Native app
SÅ HVORDAN GJØR VI DET, DA?
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
86
87
bredde x høyde
88
89
Et nettsted har ikke fast
Vi kan ikke lage noe som er
fordi det ikke finnes noe
90
LERRET
PIXEL PERFEKT
BREDDE x HØYDE
RESPONSIVE WEB DESIGN
En teknikk drevet frem av behov
Fleksibel tilpasning til alle skjermer
Klarhet og fokus
Hensyn til langsomme enheter
Høy grad av tilgjengelighet
Penger…
Slide 91
<DEMO>
92
RWD – HVA SKAL TIL?
Fluid grids Fleksibelt (grid-basert) layout
Media queries Verktøy til å justere layout
Responsive images Fleksible bilder og media
93
<DEMO>
94
95
RWD – DESIGNPRINSIPPER
Graceful Degradation
&
Progressive Enhancement
96
RWD – DESIGNPRINSIPPER
97
Graceful Degradation
&
Progressive Enhancement
RWD – DESIGNPRINSIPPER
98
Graceful Degradation
&
Progressive Enhancement
RWD – DESIGNPRINSIPPER
Graceful Degradation
Agile iterativ prosess
Progressive Enhancement
99
RWD – LØSER IKKE ALLE UTFORDRINGER
Krever at det tenkes riktig fra første sekund – fokus på fleksibilitet
Mobile First er nesten et krav
Slide 100
REFERANSER OG NOE Å LESE PÅ
101
Lesestoff:A Book Apart: http://www.abookapart.com/
Samling av nettsteder:Media Queries - http://mediaqueri.es/
Luke Wroblewski:Mobile First: http://www.lukew.com/ff/entry.asp?933
Ethan Marcotte:Fluid Grids:http://www.alistapart.com/articles/fluidgrids/RWD: http://www.alistapart.com/articles/responsive-web-design/Responsive Images: http://unstoppablerobotninja.com/entry/fluid-images
EFFEKTIV MOBIL TILSTEDEVÆRELSE
Brukerne forventer det
Vår utfordring: Er ikke mobil enda vanskeligere enn web?
Så hvordan gjør vi det, da?
Brukerne har rett!
BYOD
BYOD
“Bring your own drinks?”
BYOD
“Bring your own device”
OVERALT OG ALLTID
Slide 106
OVERALT OG ALLTID
OVERALT OG ALLTID
MOBILUTVIKLINGEN GIR OSS STORE FORDELER
Bedre prioritering, tydeligere kundeløfte
Tilby verdi til brukerne på nye måter
Være tilstede i brukernes hverdag
MEN DET KREVER AT VI GJØR DET RIKTIG!
Forankre i selskapets forretningsstrategi
Tilstreb en sømløs opplevelse
Utvikle konsepter som bidrar med verdi
Tenk mobil først
Velg riktig verktøy
Bruk responsive web design
TAKK FOR OPPMERKSOMHETEN
© Creuna