110
EFFEKTIV MOBIL TILSTEDEVÆRELSE

Effektiv mobil tilstedeværelse

Embed Size (px)

DESCRIPTION

Tord Heyerdals og mitt frokostseminar på Creuna

Citation preview

Page 1: Effektiv mobil tilstedeværelse

EFFEKTIV MOBIL TILSTEDEVÆRELSE

Page 2: Effektiv mobil tilstedeværelse

TORD HEYERDAHL (28)

Interaksjonsdesigner

Har jobbet med kunder som:

Trafikanten

Ruter

Stortinget

Statkraft

Nordea

Norwegian

Skatteetaten

Page 3: Effektiv mobil tilstedeværelse

TORBJØRN SITRE (39)

Kreativ leder

Har jobbet med kunder som:

Norgesgruppen

Tine

Nordea

Ruter

Stortinget

REC

Veidekke

Page 4: Effektiv mobil tilstedeværelse

«Go mobile or die!»

Page 5: Effektiv mobil tilstedeværelse

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!

Page 6: Effektiv mobil tilstedeværelse

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!

Page 7: Effektiv mobil tilstedeværelse

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

Page 8: Effektiv mobil tilstedeværelse

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

Page 9: Effektiv mobil tilstedeværelse

*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

Page 10: Effektiv mobil tilstedeværelse

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

Page 11: Effektiv mobil tilstedeværelse

UNGE MENNESKER MED EGEN INNTEKT ER DET VIKTIGSTE SEGMENTET INNEN M-HANDEL

Andel av totalomsetning innen m-handel kommer fra:

Page 12: Effektiv mobil tilstedeværelse

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

Page 13: Effektiv mobil tilstedeværelse

KVINNER I VANLIG MORSALDER ER MER AKTIV PÅ MOBIL ENN NOEN ANNEN ALDERSGRUPPE

Social Networking & Connecting

Email

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

Page 14: Effektiv mobil tilstedeværelse

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

Page 15: Effektiv mobil tilstedeværelse

HVA FORVENTER BRUKERNE VÅRE?

Slide 15

Page 16: Effektiv mobil tilstedeværelse

”the power of the user”

Page 17: Effektiv mobil tilstedeværelse

DE FORVENTER VERDI

Slide 17

Page 18: Effektiv mobil tilstedeværelse

Effektivt

Attraktivt

Dialog

Transparent

Kontinuerlig tilstedeværelse

Slide 18

Page 19: Effektiv mobil tilstedeværelse

19

En fisk

Page 20: Effektiv mobil tilstedeværelse
Page 21: Effektiv mobil tilstedeværelse
Page 22: Effektiv mobil tilstedeværelse
Page 23: Effektiv mobil tilstedeværelse
Page 24: Effektiv mobil tilstedeværelse
Page 25: Effektiv mobil tilstedeværelse
Page 26: Effektiv mobil tilstedeværelse

«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

Page 27: Effektiv mobil tilstedeværelse

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!

Page 28: Effektiv mobil tilstedeværelse

«Jo, det er det!»

Page 29: Effektiv mobil tilstedeværelse

3 HOVEDUTFORDRINGER

Det er mindre plass til alt innholdet

Det er vanskeligere for brukerne å nå målet

Det krever mer ressurser

Slide 29

Page 30: Effektiv mobil tilstedeværelse

DET ER MINDRE PLASS

Slide 30

Page 31: Effektiv mobil tilstedeværelse

NOEN KONVERTERINGER ER IKKE MULIG PÅ MOBIL

Slide 31

Page 32: Effektiv mobil tilstedeværelse

…OG NOEN ER FORSKJELLIGE PÅ MOBIL

Slide 32

Page 33: Effektiv mobil tilstedeværelse

Slide 33

UTVIKLING OG VEDLIKEHOLD PÅ FLERE PLATTFORMER KREVER MER RESSURSER

Page 34: Effektiv mobil tilstedeværelse

34

768x1024

768x1024

1024x768

240x196 128x192

320x480 1200x824 600x800

MASSE ENHETER OG OPERATIVSYSTEMER

Page 35: Effektiv mobil tilstedeværelse

OG HVA KOMMER I FREMTIDEN?

Slide 35

Page 36: Effektiv mobil tilstedeværelse

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!

Page 37: Effektiv mobil tilstedeværelse

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

Page 38: Effektiv mobil tilstedeværelse

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

Page 39: Effektiv mobil tilstedeværelse

MålbildeForretningsidé Strategi

Merkevareplattform- det vi har valgt å konkurrere på

STRATEGI

Digital strategi

Page 40: Effektiv mobil tilstedeværelse

MålbildeForretningsidé Strategi

Merkevareplattform- det vi har valgt å konkurrere på

STRATEGI – STERKT MERKEVAREBYGGENDE

Digital strategi

Page 41: Effektiv mobil tilstedeværelse

STRATEGI – ET BREDT PERSPEKTIV

Brukerbehov

Teknologiske muligheter

Selskapets budskap

Page 42: Effektiv mobil tilstedeværelse

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

Page 43: Effektiv mobil tilstedeværelse

EN SØMLØS OPPLEVELSE

Før

Snart

Page 44: Effektiv mobil tilstedeværelse

VI SKAL GI BRUKERNE VERDI…

Slide 45

Page 45: Effektiv mobil tilstedeværelse

…OVERALT OG ALLTID!

Page 46: Effektiv mobil tilstedeværelse

BRUKERNE VÅRE FORHOLDER SEG IKKE TIL PLATTFORM, MEN TIL TOTALTJENESTEN

Page 47: Effektiv mobil tilstedeværelse
Page 48: Effektiv mobil tilstedeværelse

HELHETLIG TILSTEDEVÆRELSE – VÅRT ANSIKT UTAD

Page 49: Effektiv mobil tilstedeværelse

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

Page 50: Effektiv mobil tilstedeværelse

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?

Page 51: Effektiv mobil tilstedeværelse

INNHOLD BRUKERNE ALLEREDE ER INTERESSERT I NÅR DE ER PÅ MOBIL

Hvordan finner vi det?

Slide 52

Page 52: Effektiv mobil tilstedeværelse

MÅL ANTALL MOBILE BESØK PÅ NETTSTEDET

Page 53: Effektiv mobil tilstedeværelse

MÅL KONSUM AV INNHOLD

Page 54: Effektiv mobil tilstedeværelse

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

Page 55: Effektiv mobil tilstedeværelse

HVILKE TOUCHPOINTS ER TILGJENGELIG FOR DEM (OG DERMED FOR OSS)?

Page 56: Effektiv mobil tilstedeværelse
Page 57: Effektiv mobil tilstedeværelse

Mobilbrukerne er her…

Page 58: Effektiv mobil tilstedeværelse

…eller er de kanskje her?

Page 59: Effektiv mobil tilstedeværelse

…eller her?

Kilde:Compete

Page 60: Effektiv mobil tilstedeværelse

Identifisere konteksten hvor en mobil tjeneste kan gi merverdi til brukeren

..og som gir mening for dine forretningsresultater

Page 61: Effektiv mobil tilstedeværelse

…OG VI ER HELT AVHENGIGE AV AT KONVERTERINGEN FUNGERER

Page 62: Effektiv mobil tilstedeværelse

…OG VI ER HELT AVHENGIGE AV AT KONVERTERINGEN FUNGERER

Page 63: Effektiv mobil tilstedeværelse

…OG VI ER HELT AVHENGIGE AV AT KONVERTERINGEN FUNGERER

Page 64: Effektiv mobil tilstedeværelse

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

Page 65: Effektiv mobil tilstedeværelse

DESIGN FOR

66

mobil først

Page 66: Effektiv mobil tilstedeværelse

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?

Page 67: Effektiv mobil tilstedeværelse

68

Page 68: Effektiv mobil tilstedeværelse

MOBIL TVINGER OSS TIL Å PRIORITERE

Mindre skjermstørrelse

Svakere ytelse

Dårligere båndbredde

…men det gir en bedre løsning

Slide 69

Page 69: Effektiv mobil tilstedeværelse

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

Page 70: Effektiv mobil tilstedeværelse

SVAKERE YTELSE

Skyldes først og fremst to egenskaper: Svakere prosessor Mindre minne

Begrenser muligheter for avanserte funksjoner ved hjelp av JavaScript

Slide 71

Page 71: Effektiv mobil tilstedeværelse

DÅRLIGERE BÅNDBREDDE

Slide 72

Dekningskart: http://www.telenor.no/privat/dekning/

Page 72: Effektiv mobil tilstedeværelse

Slide 73

TRANSPORT FOR LONDON - WEBVERSJON

Page 73: Effektiv mobil tilstedeværelse

TRANSPORT FOR LONDON - MOBILVERSJON

Page 74: Effektiv mobil tilstedeværelse

TRANSPORT FOR LONDON – FINNE BILLETTPRISER

Page 75: Effektiv mobil tilstedeværelse

PLASSER DET VIKTIGSTE ØVERST

76

Større skjerm

Størst skjerm

Liten skjerm

Page 76: Effektiv mobil tilstedeværelse
Page 77: Effektiv mobil tilstedeværelse

MOBIL UTVIDER VÅRE MULIGHETER

78

Page 78: Effektiv mobil tilstedeværelse

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

Page 79: Effektiv mobil tilstedeværelse

FORSKJELLIGE BEHOV, FORSKJELLIGE LØSNINGER

Page 80: Effektiv mobil tilstedeværelse

FORSKJELLIGE BEHOV, FORSKJELLIGE LØSNINGER

Mobil-web? App?

Mobil-web

App

Hybrid?

Page 81: Effektiv mobil tilstedeværelse

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

Page 82: Effektiv mobil tilstedeværelse

FORSKJELLIGE BEHOV, FORSKJELLIGE LØSNINGER- HYBRID

Page 83: Effektiv mobil tilstedeværelse

BRUKEROPPLEVELSE, TID OG KOSTNAD

© Creuna

Produksjonskost og -tid

Bru

kero

pp

levels

e

Mobil webside

Web-app

Hybrid app

Native app

Page 84: Effektiv mobil tilstedeværelse

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

Page 85: Effektiv mobil tilstedeværelse

86

Page 86: Effektiv mobil tilstedeværelse

87

bredde x høyde

Page 87: Effektiv mobil tilstedeværelse

88

Page 88: Effektiv mobil tilstedeværelse

89

Page 89: Effektiv mobil tilstedeværelse

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

Page 90: Effektiv mobil tilstedeværelse

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

Page 91: Effektiv mobil tilstedeværelse

<DEMO>

92

Page 92: Effektiv mobil tilstedeværelse

RWD – HVA SKAL TIL?

Fluid grids Fleksibelt (grid-basert) layout

Media queries Verktøy til å justere layout

Responsive images Fleksible bilder og media

93

Page 93: Effektiv mobil tilstedeværelse

<DEMO>

94

Page 94: Effektiv mobil tilstedeværelse

95

Page 95: Effektiv mobil tilstedeværelse

RWD – DESIGNPRINSIPPER

Graceful Degradation

&

Progressive Enhancement

96

Page 96: Effektiv mobil tilstedeværelse

RWD – DESIGNPRINSIPPER

97

Graceful Degradation

&

Progressive Enhancement

Page 97: Effektiv mobil tilstedeværelse

RWD – DESIGNPRINSIPPER

98

Graceful Degradation

&

Progressive Enhancement

Page 98: Effektiv mobil tilstedeværelse

RWD – DESIGNPRINSIPPER

Graceful Degradation

Agile iterativ prosess

Progressive Enhancement

99

Page 99: Effektiv mobil tilstedeværelse

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

Page 100: Effektiv mobil tilstedeværelse

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

Page 101: Effektiv mobil tilstedeværelse

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!

Page 102: Effektiv mobil tilstedeværelse

BYOD

Page 103: Effektiv mobil tilstedeværelse

BYOD

“Bring your own drinks?”

Page 104: Effektiv mobil tilstedeværelse

BYOD

“Bring your own device”

Page 105: Effektiv mobil tilstedeværelse

OVERALT OG ALLTID

Slide 106

Page 106: Effektiv mobil tilstedeværelse

OVERALT OG ALLTID

Page 107: Effektiv mobil tilstedeværelse

OVERALT OG ALLTID

Page 108: Effektiv mobil tilstedeværelse

MOBILUTVIKLINGEN GIR OSS STORE FORDELER

Bedre prioritering, tydeligere kundeløfte

Tilby verdi til brukerne på nye måter

Være tilstede i brukernes hverdag

Page 109: Effektiv mobil tilstedeværelse

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

Page 110: Effektiv mobil tilstedeværelse

TAKK FOR OPPMERKSOMHETEN

© Creuna