Effektiv mobil tilstedeværelse

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

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

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