EFFEKTIV MOBIL TILSTEDEVÆRELSE
TORD HEYERDAHL (28)InteraksjonsdesignerHar jobbet med kunder som: Trafikanten Ruter Stortinget Statkraft Nordea Norw...
TORBJØRN SITRE (39)Kreativ lederHar jobbet med kunder som: Norgesgruppen Tine Nordea Ruter Stortinget REC Veidekke …
«Go mobile or die!»
EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør...
EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør...
BRUKERE AV MOBILT NETT VIL VÆRE I MAJORITETINNEN MIDTEN AV 2013 GLOBALTMillioneravbrukereglobalt04008001200160020002006 2...
9 AV 10 SOLGTE MOBILTELEFONER ERSMARTTELEFONER- Dette forteller både Telenor og NetCom i 2011- Halvparten av alle de 2,5 m...
*Base: Franske iPhone-brukere 16+Kilde: ForresterEuropeiske iPhone-brukere:”Hvilken av de følgende ville du vært interesse...
SHOPPERE ER SULTNE PÅ INFORMASJON MENSDE ER I BUTIKKEN 56% er interessert iinformasjon knyttettilhelse/trivsel, økologi/m...
UNGE MENNESKER MED EGEN INNTEKT ER DETVIKTIGSTE SEGMENTET INNEN M-HANDELAndel av totalomsetning innen m-handel kommer fra:
HUSHOLDNINGER MED BARN OG HØY INNTEKTHAR OFTERE SMARTTELEFON0 5 10 15 20 25 30 35 40 45Alle husholdningsinntekterOver 600k...
KVINNER I VANLIG MORSALDER ER MER AKTIVPÅ MOBIL ENN NOEN ANNEN ALDERSGRUPPE0% 10% 20% 30% 40% 50% 60% 70% 80%Social Networ...
KVINNER FØLER SEG MER AVHENGIGAV SMARTTELEFONENKilde: Norstat via Aftenposten0%10%20%30%40%50%60%70%Har du smarttelefon?Av...
HVA FORVENTER BRUKERNE VÅRE?Slide15
”the power of the user”
DE FORVENTER VERDISlide17
 Effektivt Attraktivt Dialog Transparent Kontinuerlig tilstedeværelseSlide18
19En fisk
«Google har spådd at 44 % av søk ettergaver og butikker kommer på mobil idesember – har du råd til å gi dem endårlig bruke...
EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør...
«Jo, det er det!»
3 HOVEDUTFORDRINGER Det er mindre plass til alt innholdet Det er vanskeligere for brukerne å nå målet Det krever mer re...
DET ER MINDRE PLASSSlide30
NOEN KONVERTERINGER ER IKKE MULIG PÅ MOBILSlide31
…OG NOEN ER FORSKJELLIGE PÅ MOBILSlide32
Slide33UTVIKLING OG VEDLIKEHOLD PÅ FLEREPLATTFORMER KREVER MER RESSURSER
34768x1024768x10241024x768240x196 128x192320x480 1200x824 600x800MASSE ENHETER OG OPERATIVSYSTEMER
OG HVA KOMMER I FREMTIDEN?Slide35
EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør...
SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bid...
SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bid...
MålbildeForretningsidé StrategiMerkevareplattform- det vi har valgt å konkurrere påSTRATEGIDigital strategi
MålbildeForretningsidé StrategiMerkevareplattform- det vi har valgt å konkurrere påSTRATEGI – STERKT MERKEVAREBYGGENDEDigi...
STRATEGI – ET BREDT PERSPEKTIVBrukerbehovTeknologiskemuligheterSelskapetsbudskap
SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bid...
EN SØMLØS OPPLEVELSEFørNåSnart
VI SKAL GI BRUKERNE VERDI…Slide 45
…OVERALT OG ALLTID!
BRUKERNE VÅRE FORHOLDER SEG IKKE TILPLATTFORM, MEN TIL TOTALTJENESTEN
HELHETLIG TILSTEDEVÆRELSE – VÅRT ANSIKTUTAD
SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bid...
MOBILE KONSEPTER – HVOR KAN VI FINNE DEM?Hvilket innhold har vi, som brukerne allerede er ute etter nårde bruker mobil?Hvi...
INNHOLD BRUKERNE ALLEREDE ER INTERESSERT INÅR DE ER PÅ MOBILHvordan finner vi det?Slide 52
MÅL ANTALL MOBILE BESØK PÅ NETTSTEDET
MÅL KONSUM AV INNHOLD
SE PÅ LOJALITET OG BRUK1696197, 68%794856,32%VisitsReturningVisitorNewVisitorHva slags innhold benytterdenne gruppen?16,5 ...
HVILKE TOUCHPOINTS ER TILGJENGELIG FORDEM (OG DERMED FOR OSS)?
Mobilbrukerne er her…
…eller er de kanskje her?
…eller her?Kilde:Compete
Identifisere konteksten hvor enmobil tjeneste kan gi merverdi tilbrukeren..og som gir mening for dineforretningsresultater
…OG VI ER HELT AVHENGIGE AV ATKONVERTERINGEN FUNGERER
…OG VI ER HELT AVHENGIGE AV ATKONVERTERINGEN FUNGERER
…OG VI ER HELT AVHENGIGE AV ATKONVERTERINGEN FUNGERER
SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bid...
DESIGN FOR66mobil først
ANTALLET MOBILE ENHETER EKSPLODERER6704008001200160020002006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016Dere husker ...
68
MOBIL TVINGER OSS TIL Å PRIORITERE Mindre skjermstørrelse Svakere ytelse Dårligere båndbredde…men det gir en bedre løsn...
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*640Op...
SVAKERE YTELSE Skyldes først og fremst to egenskaper: Svakere prosessor Mindre minne Begrenser muligheter for avansert...
DÅRLIGERE BÅNDBREDDESlide72Dekningskart: http://www.telenor.no/privat/dekning/
Slide 73TRANSPORT FOR LONDON - WEBVERSJON
TRANSPORT FOR LONDON - MOBILVERSJON
TRANSPORT FOR LONDON – FINNE BILLETTPRISER
PLASSER DET VIKTIGSTE ØVERST76Større skjermStørst skjermLiten skjerm
MOBIL UTVIDER VÅRE MULIGHETER78
SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bid...
FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGER
FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGERMobil-web? App?Mobil-webAppHybrid?
FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGERMobil-webhtml/css/jsURL – bookmarkPlattformuavhengigKrever nettilgangWeb-funksjon...
FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGER- HYBRID
BRUKEROPPLEVELSE, TID OG KOSTNAD©CreunaProduksjonskost og -tidBrukeropplevelseMobilwebsideWeb-appHybrid appNative app
SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bid...
86
87bredde x høyde
88
89
Et nettsted har ikke fastVi kan ikke lage noe som erfordi det ikke finnes noe90LERRETPIXEL PERFEKTBREDDE x HØYDE
RESPONSIVE WEB DESIGNEn teknikk drevet frem av behov Fleksibel tilpasning til alle skjermer Klarhet og fokus Hensyn til...
<DEMO>92
RWD – HVA SKAL TIL?Fluid grids Fleksibelt (grid-basert) layoutMedia queries Verktøy til å justere layoutResponsive image...
<DEMO>94
95
RWD – DESIGNPRINSIPPERGraceful Degradation &Progressive Enhancement 96
RWD – DESIGNPRINSIPPER97Graceful Degradation &Progressive Enhancement 
RWD – DESIGNPRINSIPPER98Graceful Degradation &Progressive Enhancement 
RWD – DESIGNPRINSIPPERGraceful DegradationAgile iterativ prosessProgressive Enhancement99
RWD – LØSER IKKE ALLE UTFORDRINGER Krever at det tenkes riktig fra første sekund – fokus påfleksibilitet Mobile First er...
REFERANSER OG NOE Å LESE PÅ101Lesestoff:A Book Apart: http://www.abookapart.com/Samling av nettsteder:Media Queries - http...
EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør...
BYOD
BYOD“Bring your own drinks?”
BYOD“Bring your own device”
OVERALT OG ALLTIDSlide106
OVERALT OG ALLTID
OVERALT OG ALLTID
MOBILUTVIKLINGEN GIR OSS STORE FORDELERBedre prioritering, tydeligere kundeløfteTilby verdi til brukerne på nye måterVære ...
MEN DET KREVER AT VI GJØR DET RIKTIG!Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsept...
TAKK FOR OPPMERKSOMHETEN© Creuna
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Effektiv mobil tilstedeværelse
Upcoming SlideShare
Loading in …5
×

Effektiv mobil tilstedeværelse

241 views
174 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
241
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • (TORD)
  • (TORD)
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Brukerneharrett!BYOD – Bring Your Own Device
  • I 2008 hadde 6% av mobiler superinternet (3G eller bedre), 2011 er det 29% (SSB).http://www.aftenposten.no/forbruker/digital/nyheter/mobil/article4111108.ecehttp://www.aftenposten.no/forbruker/digital/nyheter/mobil/article4085155.ecehttp://www.idg.no/article206915.ece
  • Google forecasts that 44% of all December searches for last-minute gifts and store locations will be mobile.
  • .. en fisk
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Vil det krever mer ressurser? Både av penger til investering i nye løsninger og tid til innholdsutvikling og vedlikehold?
  • Detkommerstadignyeenheter med nyeskjermstørrelser
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Fjernealleunderpunktene – putte inn “hvaerdet vi harvalgtåkonkurrerepå?”
  • Fjernealleunderpunktene – putte inn “hvaerdet vi harvalgtåkonkurrerepå?”
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Sot site... 15 millioner besøk
  • Høy opplevd verdi
  • Men hva ser de etter? Path to purchase.. Tappe inn i dette!
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Jo, dere skal designe for de små enheter først. Tankegangen «Mobile First» ble introdusert av Luke Wroblewski for en kort tid siden og har vakt stor interesse. Han har blant annet skrevet en liten bok om som lyder navnet «Mobile First» som er anbefalt lesning. Lest gjennom på en kveld så det kan vel knapt kalles en bok.Det er uansett 2 gode grunner til å designe for mobil først (KLIKK)
  • Den første har dere allerede sett gjennom den flotte bruken av statistikk i begynnelsen. Enheter med små skjermer overtar sakte, men sikkert verden og vi bruker de mer og mer for absolutt alle oppgaver.Halvparten av smarttelefon-eiere er på nett mer enn 30 minutter i løpet av en dag og denne tidsbruken vil fortsette å øke.
  • Siden dere før eller siden kommer til å lage løsninger på mobil så hvorfor ikke starte med den.Og tankegangen er ganske selvforklarende:man skal starte med å designe og prioritere innhold og funksjonalitet for den minste enheten først og så bygge utover rundt denne kjerne i de ulike flatene. Bruk innholdet ditt og bygg videre rundt dette når du får mer plass tilgjengelig – ikke forsøple nettstedet med irrelevant innhold.(KLIKK)I motsetning til dagens måte hvor man febrilsk forsøke å skalere ned innholdet fra en skrivebordsversjon og ned til mobilen. (KLIKK)Dette går sjeldent bra, så det er like greit å la være.
  • Fordelen ved å begynne med mobilen er at den tvinger oss til å prioritere i enda større grad enn tidligere. Grunnen er at vi blir så synlig straffet hvis vi ikke gjør det. Det er 3 grunner til at vi må prioritere i større grad.
  • Vi har allerede vært inne på at skjermen er mindre på mobilen. Altså mindre plass til innhold.Men selv om skjermen er liten begynner oppløsningen å bli høy. Faktisk snart like høy som de vanligste oppløsningene på større skjermer. Dette er viktig å tenke på når vi kommer til responsive web design.
  • For det andre så er fortsatt ytelsene på håndholdte enheter lavere enn større datamaskiner. Først og fremst prosessorkraft og minne er lavere. Grunnen til mindre minne er fordi minne bruker veldig mye strøm og siste jeg sjekket er det greit med battertid over et døgn på en mobil. Fører blant annet til at funksjoner basert på javascript oppleves tregere og at flash nå er offisielt dødt fra Adobe sin side.
  • Håndholdte enheter er ofte også avhengig av dekning i 3G-nettet for å fungere optimalt. Dette er fra Telenor sitt dekningskart og du skal litt ut på vidda for å miste 3G-dekningen. Men alle har nok opplevd at hvis du sitter i en kjeller eller langt inne i et hus så er dekningen ofte litt ymse.Og det er ikke alltid det finnes et trådløs nett i nærheten.Det koster dessuten mer penger å benytte seg av datatrafikk slik at slik at vi må prøve å begrense datamengden som sendes.
  • Men det å prioritere er ikke feil. Derimot er det veldig gunstig og noe vi interaksjonsdesignere har mast om i en evighet nå.Dette er transport for london - Londons svar på Trafikanten. Hva mener dere er det viktigste når dere skal reise med kollektiv i London?Ikke gaver og suvenirer som de har plassert ganske så tydelig under det viktige Oysterkortet her?Nei, serviceoppdateringer og reiserutesøk er plassert der folk ser til slutt…
  • Men på mobilversjonen derimot har de plassert det jeg tror de fleste mener er viktist høyt oppe. Reisesøk, statusoppdateringer og sanntidsdata er i fokus. For å finne billettpriser må du dessverre tilbake til fullversjonen og oppleve dette. (KLIKK)
  • Er vi nå enige om at det kanskje ikke er optimalt og at så mye som mulig av det samme innholdet må ligge på samme plass?
  • Plasser det for brukeren viktigste innholdet høyt i informasjonshierarkiet ditt. En vanlig utfordring når man jobber med storeog informasjonstunge nettsteder er behovet for dype hierarkier.Man har mye innhold som blir strukturer i 2, 3, 4 eller 5 undernivåer. Hvorvidt dette er riktige å ha en struktur med så mange nivåer er en annen diskusjon, men utfordringen vil dere komme opp i uansett. (Klikk)Det som er ytterst viktig i en slik sammenheng er at man har prioritert innholdet i forhold til hva brukeren har behov for og lagt det høyt oppe i hierarkiet.På den måten unngår man at en mobil med begrenset plass til f.eks meny ikke når det viktigste innholdet.
  • Vi har laget oss et frekt lite prototypingsverktøy som er veldig hendig for tidlige papirprototyper. Samtidig er det veldig visuelt og det er enkelt for alle å se at det må prioriteres. Det er helt uvurderlig å bruke slik verktøy for å se hvor vanskelig det er å prioritere de forskjellige elementene som er nødvendig på siden. Men det blir også latterlig mye enklere å overbevise interessenter at det må kuttes. Det er ikke lenger plass til å legge noe ute til høyre fordi det er litt hvis tomrom der.
  • En siste liten gevinst ved å tenke mobil først er at det er enklere å benytte seg av mer avansert funksjonalitet. World Wide Web har til nå hatt et fundament med ganske enkle egenskaper basert på hva nettleseren på PC’en kan gjøre: Utviklere av nettsteder har desperat prøvd å tenke nytt innenfor disse begrensede rammene og har presset utviklingen langt for hva som er mulig. Da mobilen kom, åpnet den opp for nye og spennende muligheter som den tradisjonelle skrivebordsmaskinen mangler. som f.eks GPS, Gyroskop og kamera som sammen kan brukes til å lage Augmentedreality applikasjoner, multi touch som gir oss et hav av muligheter for interaksjon, osv.Ved å designe for Mobil First tillater vi utviklerteamet å benytte denne utvidede paletten av funksjonalitet fra starten av og gjør det enklere at det passer inn i en overordnede strategi for ditt nettsted.
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Før vi ser på Responsive web design må vi ta et kjapt tilbakeblikk på hvordan vi som designere av nettsteder har jobbet fram til nå?Jo, Da man begynte med Webdesign var det designere utdannet inne trykk og print som raskt ble ledende. Bransjen overført sine prosesser og tankesettet direkte fra det trykte mediet og over til det digitale.Noe man kan se tydelig spor av, som for eksempel gjennom begrepsbruken. Dere kjenner alle til canvas, whitespace og fold for å nevne noen; Disse begrepne stammer direkte fra det trykte mediet.Denne arve fra bransjene er både naturlig og på mange måter også bra. Men i andre sammenhenger fører det til utfordringer og til større problemer. (klikk)
  • Når man skal skape noe innen veldig mange medier så tar det ikke lang tid før man velger formatet som skal brukes. En skulptør velger ut en passende stein.En forlegger velger ut papirstørrelse og tykkelse, font og omslag til boken som skal trykkes.Eller en maler velger ut et passende lerret. (KLIKK)Valg av format begrenser innholdet, fordi formatet har noen fysiske iboende egenskaper som ikke lar seg endres i etterkant. En veldig dominerende egenskap er: Bredde og høyde.
  • Vi som webdesignere har behandlet nettleseren på samme måte som malerne har gjort det. Vi har behandlet et nettsted som om det var et lerret; med en fast bredde og en fast høyde. Det tar ikke lang tid etter oppstart av et nettprosjekt før man definerer bredden til å være f.eks 960-punkter, og man velger et grid på 3-4 eller 5 spalter. (KLIKK)Dette designet låses så og man bruker det i den tro at det er slik nettstedet vil fremstå når løsningen er publisert.
  • Men hvordan kan vi tro at det faktisk er tilfelle, med så mange rare enheter som brukerne våre har?
  • Et nettsted har ikke noe fast bredde eller høyde.Vi kan derfor ikke lage noe som er pixel perfekt,fordi det på nett ikke finnes et fast lerret som oppleves likt for alle brukerne.
  • Det er ut fra disse erkjennelsene at Responsive web design har vokst fram. Så nytt at det ikke finnes en artikkel om det på wikipedia. Det baserer seg på nye behov som har vokst frem pga alle disse rare enhetene.Først og fremst på grunn av behov for fleksibilitet - et nettsted bør i 2012 tilpasse seg brukeren så godt det lar seg gjøreEt behov for lesbarhet – klart fokus og en tydelig prioritering på det viktigste skreddersydd til enheten vi ser påEt behov for å tilpasse oss at ikke alle enheter er like raske.Behovet for større grad av tilgjengelighet noe jeg snart skal vise fram. Universell utforming blir bare viktigere og viktigere og RWD løser mye av dette også.Det siste er penger. Alltid et tema og dere kommer garantert til å lure på hvor mye dette koster i forhold til vanlig webutvikling. Svaret er at det koster mer enn det gjør å lage en løsning. Det tar noe mer tid for interaksjonsdesign, grafisk design og front-end. Men alternativet å lage 2-3 forskjellige løsninger blir det uansett mye billigere enn.
  • Men nå er dere sikkert spente å se hva responsive web design faktisk er. Vi har laget en liten demo Hestenett – For folk som liker hester, eller kjenner noen som liker dem..Legg merke til VindustittelBemerk Breakpointspå Navigasjonpå InnholdZoom-funksjonen
  • Hva skal tilFuidgrids – Layout der utnytter full bredde (er nødvendig i hvert fald til mobiler)&gt; KLIKKMedia queries – Til å definere opp ”breakpoints” hvor ét layout skifter til et annet&gt; KLIKKMed hensynn til bilder (og for så vidt også video) har vi bruk for en fleksibel håndtering av disse. Innenfor RWD kalles teknikken for Responsive images – En teknikk hvor bilder lastes inn ut ifra enheten størrelse
  • Hestenett – For folk som liker hester, eller kjenner noen som liker dem..Legg merke til VindustittelBemerk Breakpointspå Navigasjonpå InnholdZoom-funksjonen
  • Som jeg sa er ikke alt innhold like etterspurt eller viktig i alle flaterHer ser dere eksempel på den italienske kaffeprodusenten Illy har løst dette på sitt nettsted ved hjelp av responsive web design teknikker. Til venstre er skrivebordsversjonen og til høyre er mobilversjonen (Klikk).Skriverbordsversjonen har hovedfokus rundt produktene til Illy mens mobilversjonen tar høyde for at brukerne er ute og går og dermed interesserte i å finne butikker / kafeer i nærheten av seg som selger disse produktene. (KLIKK) Legg merke til at funksjonaliteten er like tilgjengelig i begge disse flatene, men med ulikt prioritering.Når jeg ligger i sofaen med mobilen, er på Tbanen med iPaden eller på jobb foran min stasjonære PC så skal JEG og ikke nettstedet bestemme hva jeg kan og ikke kan få gjøre. Prioriter gjerne, men ikke fjern.
  • For at våre flinke front-endere skal kunne lage det her så trenger vi noe Design – Det jeg sier nå er Våntese..det er ikke så veldig mange i verden som har jobbet mye med dette og har funnet en gjennomtenkt metode. Vi tror vi har det. Jeg er ikke designer og vi har enda ikke den store erfaring – initiativ fra Hans og Karin til fokus på design for RWDMen Jeg tror – at det er rimelig enkelt.. Ved bruk av to – i webutvikling sammenhenge velkjennte begreber &gt; KLIKKNemlig Graceful Degradation og Progressive EnhancementFor designeren faktisk bare den øverste..
  • Graceful Degradation betyr – i denne sammenhenge – at det visuelle design kan lages for desktop / fullskjerm først – og deretter gjøres (eller degraderes) til de mindre krevende enheter.Det degraderte design (for mindre enheter) vil sannsynligvis oftest ha samme basale funsjonalitet og visuelle språk – kanskje (eller helt sikkert) med innholdet prioritert annerledes –– men det er jo IA..
  • Progressive enhancement handler om at man begynner med å gjøre et system ut ifra lageste fellesnevner – I dette tilfelle de mindre, mobile enheter.Progressive enhancement Bør anvendes til IA og front-end utvikling for RWD.
  • En annen mer ressurskrevende modell:Til nettsteder med mer avanserte eller krevende utfordringer f.eks på funksjonaliet må alle faggrupper ta fat sammen;Kanskje ved oppstart med en workshop, hvor det gjøres prototyper, visuelle skisser og enkle html mockups som belyser sentrale utfordringer og løsninger.Uansett hvordan vi får det til er det viktig å komme i gang med en felles forståelse før arbeidet med en responsiv løsning begynner.
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Brukerneharrett!BYOD – Bring Your Own Device
  • Effektiv mobil tilstedeværelse

    1. 1. EFFEKTIV MOBIL TILSTEDEVÆRELSE
    2. 2. TORD HEYERDAHL (28)InteraksjonsdesignerHar jobbet med kunder som: Trafikanten Ruter Stortinget Statkraft Nordea Norwegian Skatteetaten …
    3. 3. TORBJØRN SITRE (39)Kreativ lederHar jobbet med kunder som: Norgesgruppen Tine Nordea Ruter Stortinget REC Veidekke …
    4. 4. «Go mobile or die!»
    5. 5. EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør vi det, da?Brukerne har rett!
    6. 6. EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør vi det, da?Brukerne har rett!
    7. 7. BRUKERE AV MOBILT NETT VIL VÆRE I MAJORITETINNEN MIDTEN AV 2013 GLOBALTMillioneravbrukereglobalt04008001200160020002006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016MobilDesktopKilde: Morgan Stanley
    8. 8. 9 AV 10 SOLGTE MOBILTELEFONER ERSMARTTELEFONER- Dette forteller både Telenor og NetCom i 2011- Halvparten av alle de 2,5 millionene mobiltelefonene som ble solgt i 2010 varsmarttelefonerAndelsmarttelefoner iTelenors nett:Nå: ca.50% smart-telefonerKilde: Pressemeldinger, Aftenposten
    9. 9. *Base: Franske iPhone-brukere 16+Kilde: ForresterEuropeiske iPhone-brukere:”Hvilken av de følgende ville du vært interessert i å gjøre via din iPhone?”0% 5% 10% 15% 20% 25% 30% 35% 40% 45% 50%Research products for purchase*Purchase products*Compare prices when shopping instoreLocate a nearby store to buy a specific productLook up product information while shopping instoreFind or redeem couponNYE MOBILE BRUKSMØNSTRE ETABLERES
    10. 10. SHOPPERE ER SULTNE PÅ INFORMASJON MENSDE ER I BUTIKKEN 56% er interessert iinformasjon knyttettilhelse/trivsel, økologi/miljø 31% er merinteressert ivareplassering ibutikken, pris, lagerstatus0% 10% 20% 30% 40%Food originsHealthOrganicLocation in storePriceInventorySustainable/humane farmingpracticesIngredientsFood safetyRecipesPrimary needsAll needsMatproduktinformasjon shoppere sier de ønsker via mobil i butikk:% av dagligvarehandlere globaltKilde: Latitude Research
    11. 11. UNGE MENNESKER MED EGEN INNTEKT ER DETVIKTIGSTE SEGMENTET INNEN M-HANDELAndel av totalomsetning innen m-handel kommer fra:
    12. 12. HUSHOLDNINGER MED BARN OG HØY INNTEKTHAR OFTERE SMARTTELEFON0 5 10 15 20 25 30 35 40 45Alle husholdningsinntekterOver 600kAlle husholdningsinntekterOver 600kHusholdningermedbarnHusholdningerutenbarnAndel husholdninger mobilt internett (3G eller nyere):Kilde: SSBKilde: SSBAndel med smarttelefon med 3G eller bedre i Norge
    13. 13. KVINNER I VANLIG MORSALDER ER MER AKTIVPÅ MOBIL ENN NOEN ANNEN ALDERSGRUPPE0% 10% 20% 30% 40% 50% 60% 70% 80%Social Networking & ConnectingEmailKnowledge & EducationPlanning & OrganizingPersonal AdminShoppingPre-purchase browsingNews, Sport & WeatherPersonal InterestMulti-Media, EntertainmentOnline GamingMale 35-44Female 35-44Kilde: TNSKilde: TNSAndel mobilbrukere som har gjort aktivitet på mobil siste 12 mnd i Norge
    14. 14. KVINNER FØLER SEG MER AVHENGIGAV SMARTTELEFONENKilde: Norstat via Aftenposten0%10%20%30%40%50%60%70%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?KvinnerMenn
    15. 15. HVA FORVENTER BRUKERNE VÅRE?Slide15
    16. 16. ”the power of the user”
    17. 17. DE FORVENTER VERDISlide17
    18. 18.  Effektivt Attraktivt Dialog Transparent Kontinuerlig tilstedeværelseSlide18
    19. 19. 19En fisk
    20. 20. «Google har spådd at 44 % av søk ettergaver og butikker kommer på mobil idesember – har du råd til å gi dem endårlig brukeropplevelse?»Kilde : http://www.internetretailer.com/2011/09/06/mobile-comprise-15-black-friday-searches
    21. 21. EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør vi det, da?Brukerne har rett!
    22. 22. «Jo, det er det!»
    23. 23. 3 HOVEDUTFORDRINGER Det er mindre plass til alt innholdet Det er vanskeligere for brukerne å nå målet Det krever mer ressurserSlide29
    24. 24. DET ER MINDRE PLASSSlide30
    25. 25. NOEN KONVERTERINGER ER IKKE MULIG PÅ MOBILSlide31
    26. 26. …OG NOEN ER FORSKJELLIGE PÅ MOBILSlide32
    27. 27. Slide33UTVIKLING OG VEDLIKEHOLD PÅ FLEREPLATTFORMER KREVER MER RESSURSER
    28. 28. 34768x1024768x10241024x768240x196 128x192320x480 1200x824 600x800MASSE ENHETER OG OPERATIVSYSTEMER
    29. 29. OG HVA KOMMER I FREMTIDEN?Slide35
    30. 30. EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør vi det, da?Brukerne har rett!
    31. 31. SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    32. 32. SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    33. 33. MålbildeForretningsidé StrategiMerkevareplattform- det vi har valgt å konkurrere påSTRATEGIDigital strategi
    34. 34. MålbildeForretningsidé StrategiMerkevareplattform- det vi har valgt å konkurrere påSTRATEGI – STERKT MERKEVAREBYGGENDEDigital strategi
    35. 35. STRATEGI – ET BREDT PERSPEKTIVBrukerbehovTeknologiskemuligheterSelskapetsbudskap
    36. 36. SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    37. 37. EN SØMLØS OPPLEVELSEFørNåSnart
    38. 38. VI SKAL GI BRUKERNE VERDI…Slide 45
    39. 39. …OVERALT OG ALLTID!
    40. 40. BRUKERNE VÅRE FORHOLDER SEG IKKE TILPLATTFORM, MEN TIL TOTALTJENESTEN
    41. 41. HELHETLIG TILSTEDEVÆRELSE – VÅRT ANSIKTUTAD
    42. 42. SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    43. 43. MOBILE KONSEPTER – HVOR KAN VI FINNE DEM?Hvilket innhold har vi, som brukerne allerede er ute etter nårde bruker mobil?Hvilke touchpoints har vi i dag, som vi kan forbedre?Hvilke situasjoner er våre brukere i, og hva ønsker de seg fraoss i de situasjonene?Hva leverer vi i dag, som vi kan utvikle tjeneste rundt?
    44. 44. INNHOLD BRUKERNE ALLEREDE ER INTERESSERT INÅR DE ER PÅ MOBILHvordan finner vi det?Slide 52
    45. 45. MÅL ANTALL MOBILE BESØK PÅ NETTSTEDET
    46. 46. MÅL KONSUM AV INNHOLD
    47. 47. SE PÅ LOJALITET OG BRUK1696197, 68%794856,32%VisitsReturningVisitorNewVisitorHva slags innhold benytterdenne gruppen?16,5 % av de besøkende har vært innomsiten mer enn 10 ganger siste 30 dager...Høy frekvens av returnerende besøk
    48. 48. HVILKE TOUCHPOINTS ER TILGJENGELIG FORDEM (OG DERMED FOR OSS)?
    49. 49. Mobilbrukerne er her…
    50. 50. …eller er de kanskje her?
    51. 51. …eller her?Kilde:Compete
    52. 52. Identifisere konteksten hvor enmobil tjeneste kan gi merverdi tilbrukeren..og som gir mening for dineforretningsresultater
    53. 53. …OG VI ER HELT AVHENGIGE AV ATKONVERTERINGEN FUNGERER
    54. 54. …OG VI ER HELT AVHENGIGE AV ATKONVERTERINGEN FUNGERER
    55. 55. …OG VI ER HELT AVHENGIGE AV ATKONVERTERINGEN FUNGERER
    56. 56. SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    57. 57. DESIGN FOR66mobil først
    58. 58. ANTALLET MOBILE ENHETER EKSPLODERER6704008001200160020002006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016Dere husker vel statistikken?
    59. 59. 68
    60. 60. MOBIL TVINGER OSS TIL Å PRIORITERE Mindre skjermstørrelse Svakere ytelse Dårligere båndbredde…men det gir en bedre løsningSlide69
    61. 61. 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*640Oppløsning på bærbaredatamaskiner 1280x1024: 14.8 % 1280x800: 14.4 % 1366x768: 10.1 %Slide 70
    62. 62. SVAKERE YTELSE Skyldes først og fremst to egenskaper: Svakere prosessor Mindre minne Begrenser muligheter for avanserte funksjoner ved hjelp avJavaScriptSlide71
    63. 63. DÅRLIGERE BÅNDBREDDESlide72Dekningskart: http://www.telenor.no/privat/dekning/
    64. 64. Slide 73TRANSPORT FOR LONDON - WEBVERSJON
    65. 65. TRANSPORT FOR LONDON - MOBILVERSJON
    66. 66. TRANSPORT FOR LONDON – FINNE BILLETTPRISER
    67. 67. PLASSER DET VIKTIGSTE ØVERST76Større skjermStørst skjermLiten skjerm
    68. 68. MOBIL UTVIDER VÅRE MULIGHETER78
    69. 69. SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    70. 70. FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGER
    71. 71. FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGERMobil-web? App?Mobil-webAppHybrid?
    72. 72. FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGERMobil-webhtml/css/jsURL – bookmarkPlattformuavhengigKrever nettilgangWeb-funksjonalitetBegrenset lagring av dataTilgjengelig fra søk og eksternelinkerAppSkrevet for OSAppStore/Ovi/Android MarketOS-definert brukeropplevelseNett-uavhengig (delvis)Tilgang til OS-funksjonalitetRobust lagring av dataOppdateres via OSHybrid
    73. 73. FORSKJELLIGE BEHOV, FORSKJELLIGELØSNINGER- HYBRID
    74. 74. BRUKEROPPLEVELSE, TID OG KOSTNAD©CreunaProduksjonskost og -tidBrukeropplevelseMobilwebsideWeb-appHybrid appNative app
    75. 75. SÅ HVORDAN GJØR VI DET, DA?Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    76. 76. 86
    77. 77. 87bredde x høyde
    78. 78. 88
    79. 79. 89
    80. 80. Et nettsted har ikke fastVi kan ikke lage noe som erfordi det ikke finnes noe90LERRETPIXEL PERFEKTBREDDE x HØYDE
    81. 81. RESPONSIVE WEB DESIGNEn teknikk drevet frem av behov Fleksibel tilpasning til alle skjermer Klarhet og fokus Hensyn til langsomme enheter Høy grad av tilgjengelighet Penger…Slide91
    82. 82. <DEMO>92
    83. 83. RWD – HVA SKAL TIL?Fluid grids Fleksibelt (grid-basert) layoutMedia queries Verktøy til å justere layoutResponsive images Fleksible bilder og media93
    84. 84. <DEMO>94
    85. 85. 95
    86. 86. RWD – DESIGNPRINSIPPERGraceful Degradation &Progressive Enhancement 96
    87. 87. RWD – DESIGNPRINSIPPER97Graceful Degradation &Progressive Enhancement 
    88. 88. RWD – DESIGNPRINSIPPER98Graceful Degradation &Progressive Enhancement 
    89. 89. RWD – DESIGNPRINSIPPERGraceful DegradationAgile iterativ prosessProgressive Enhancement99
    90. 90. RWD – LØSER IKKE ALLE UTFORDRINGER Krever at det tenkes riktig fra første sekund – fokus påfleksibilitet Mobile First er nesten et kravSlide100
    91. 91. REFERANSER OG NOE Å LESE PÅ101Lesestoff: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?933Ethan 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
    92. 92. EFFEKTIV MOBIL TILSTEDEVÆRELSEBrukerne forventer detVår utfordring: Er ikke mobil endavanskeligere enn web?Så hvordan gjør vi det, da?Brukerne har rett!
    93. 93. BYOD
    94. 94. BYOD“Bring your own drinks?”
    95. 95. BYOD“Bring your own device”
    96. 96. OVERALT OG ALLTIDSlide106
    97. 97. OVERALT OG ALLTID
    98. 98. OVERALT OG ALLTID
    99. 99. MOBILUTVIKLINGEN GIR OSS STORE FORDELERBedre prioritering, tydeligere kundeløfteTilby verdi til brukerne på nye måterVære tilstede i brukernes hverdag
    100. 100. MEN DET KREVER AT VI GJØR DET RIKTIG!Forankre i selskapets forretningsstrategiTilstreb en sømløs opplevelseUtvikle konsepter som bidrar med verdiTenk mobil førstVelg riktig verktøyBruk responsive web design
    101. 101. TAKK FOR OPPMERKSOMHETEN© Creuna

    ×