Embed Size (px)
Citation preview
ØRJAN CLAUSENDaglig leder og rådgiver i Northern Beat
BakgrunnInformasjonsvitenskapWebdesignKommunikasjonsarbeidMarkedsføring
• Northern Beat er et visjonært initiativ med fokus på strategi, idè, konsept og design
• Northern Beat er et datterselskap av Nova Consulting Group som i tillegg består av:– Novanet AS
• Seniorutviklere innen SharePoint og .net– Epinova AS
• Ekspertmiljø for EPiServer utvikling
DESIGN FOR MOBILE FLATER Responsive Web Design eller skreddersøm? Mobile first eller tilpasning i etterkant? Hvordan skaper vi den beste løsningen?
HVORDAN SKAPE DEN BESTE LØSNINGEN?• I dag ser vi på– Prioriteringer– Valg av løsning– Ressursbruk– Besøkende
HVORFOR?MEN FØR HVORDAN
HVORFOR SKAL DU GÅ MOBIL?
…FORDI:• Alle andre gjør det• Fordi det er der
alle våre kunder er
• Vi får klager fordi vi ikke er der
• Vi har unikt innhold som vi kan tilby
• Våre tjenester passer perfekt for mobil
• Trafikken på nettstedet vårt er over 30% mobil
• Vi har penger igjen på budsjettet
TENK GJENNOM DETTE FØR DERE RINGER
...og sørg for at ambisjoner og forventninger er forankret i organisasjonen
OK - vi er klare!HVORDAN GÅR VI FREM?
MOBIL vs. DESKTOP
Påstand:–Ikke så annerledes å lage mobil løsning
PROSESSEN
Målsetting med
løsningen og bruker-analyse
Funksjonelle og innholds-
krav
Interaksjons-design og
informasjons-arkitektur
Navigasjon og innholds-presentasjon
Grafisk design
MÅLSETTING OG BRUKERANALYSE• Hva skal lages?• Hvorfor skal det lages?• Hvem er brukerne?• Hva forventer brukerne å finne?
FUNKSJONELLE OG INNHOLDSKRAV• Hvordan skal mobile nettstedet fungere?– Hvilke funksjoner trengs for å løse behovet
som eierne av nettstedet har og hva brukerne krever
• Hva finnes av innhold?– Forbedre, endre eller fjerne?– Hvordan presenteres innholdet?
INTERAKSJONSDESIGN• Hvordan skal innholdet struktureres?– Prioritering av innhold– Trådskisser/wireframes– Relatert informasjon
INFORMASJONSARKITEKTUR• Hvordan skal innhold plasseres i henhold
til annet innhold?– Hva er viktig innhold?– Hva er relatert innhold?– Hva hører naturlig sammen?
NAVIGASJON & INNHOLDSPRESENTASJON
• Hvordan skal man navigere på nettstedet?– Antall nivå– Hovedmenyer og sekundærmenyer
• Hvordan skal innholdet presenteres?– Tekst– Bilder– Video– Infografikk– Lyd
GRAFISK DESIGN• Hvordan skal de se ut?– Look & feel– Design guidelines/design manual– Universell utforming og tilgjengelighet
• Hvordan vekte innhold for å oppnå mest brukervennlighet?– Fargebruk– Call to action
PROSESSENGANSKE LIK
MEN HVORDAN GÅR MAN EGENTLIG FREM?
PRIORITERINGER• Andre hensyn– Mindre skjerm– Dårligere linje– Annen kontekst– Andre forventninger hos besøkende– Begrensninger i teknologi– Ekstra tilgjengelig funksjonalitet
MINDRE SKJERM• Vi må prioritere• Vi må komprimere• Vi må fokusere• Vi må tilpasse• Vi må tenke skalering
DÅRLIGERE LINJE• Store bilder• Video• Mye innhold = lang side• Lang side = lang lastetid• Man forventer lengre lastetid på mobil
VILLIG TIL Å VENTE3%
16%
30%
16%
15%
20%
< 1 sekund1-5 sekunder6-10 sekunder11-15 sekunder16-20 sekunder20 + sekunder
FORVENTET LASTETID
12%
25%
21%
31%
11%
RaskereNesten likLikLitt tregereMye tregere
http://mobile.smashingmagazine.com
ANNEN KONTEKTS• Når brukes mobil fremfor desktop?– På veien– Butikken– Sofaen– Møter– Sengen
VET VI HVA DE VIL HA?Du står i butikken. • Vil du da ha middagsoppskriften som du så
på i går da du planla middagen– …eller vil du bare ha ingrediensene?
Du sitter på trikken.• Vil du lese artikkelen om Berit du så på
yr.no?– …eller vil du bare vite hva været blir i morgen
akkurat hvor du er?
31
DET ER SÅRE ENKELT!
• Gi brukerne det de vil ha - når de vil ha det
• Utfordringen er å finne ut hvilken kontekst de besøkende befinner seg når de besøker nettstedet
33
ER DET MULIG?
HVA SURFES DET FRA?– Nesten 100% surfer fra desktop– 44% surfer fra mobil– 16% surfer fra tablet
iProspect undersøkelse 2012
FORVENTNINGENE ENDRES• Ny og bedre teknologi– Bedre kamera– Bedre og større skjermer– Raskere enheter og linje
• Prisendringer for bruk– Fastpris abonnement
• Applikasjoner ”skjemmer” oss bort og setter standard for hva man skal forvente
• Multikanalstrategier slår til
iProspect undersøkelse 2012
3% synes at nettsidene ikke fungerer for desktop
10% synes at nettsidene ikke fungerer for tablets
24% synes at nettsidene er tilbpasset mobil visning
iProspect undersøkelse 2012
BEGRENSNINGER I TEKNOLOGI• Verden går videre, men det er problemer
med:– Tredjepartsløsninger
• Flash• Java Applets
– BankID på mobil• Foreløpig kun Telenor, Talkmore og Djuice, og
utfordring med en rekke telefonmodeller– Video
• Ikke støtte for alle teknologier på alle enheter– +++
EKSTRA TILGJENGELIG FUNKSJONALITET• GPS• Kamera• Kontakter• Bilder• Near Field Communication (NFC)– Google Wallet
• Radio Frequency Identification (RFID)– PayEx
VALG AV LØSNINGFordeler og ulemper med de forskjellige løsnigene
JEG DELER MOBILTILPASNING INN I:• Ikke tilpass…• Apps• Responsive Web Design• Skreddersydde maler
1. Samme sidestruktur• I samme system• Tredjepartsløsninger
2. Ulik sidestruktur• I samme system• Tredjepartsløsninger
APPLIKASJONER• Lastes ned via App Store, Google Play og
lignende• Vanligvis brukerdefinerte oppgaver• Fordeler
– Tilgang til telefonens funksjoner i utstrakt grad– Gir lettere mulighet for inntekter– Man kan sende meldinger til brukerne
• Ulemper– Ikke for alle– Krever utvikling for flere plattformer
BRUKERDEFINERTE OPPGAVER
43
RESPONSIVE WEB DESIGN• Webdesignet responderer på størrelsen til skjermen
som brukes• Innholdet og HTML er lik, men utseende endrer seg• Man bruker hovedsakelig
CSS, men også JavaScript til f.eks. Bildeskalering
• Ulemper– Lastetid– Ikke spisset innhold
• Fordeler– Ett sidetre
TEKNISK SAGT• Fluid Grids
#nav { float: left; width: 25%; }
#box { float: left; margin-left: 5%;}
TEKNISK SAGT• Flexible Images & Media
#box img { max-width: 100%;}
TEKNISK SAGT
• Media queries@media screen and (max-width: 1160px) {
#nav { display: none; } }
@media screen and (max-width: 1540px) {
#box { background-color; red;}
}
SKREDDERSYDDE MALER• Samme sidestruktur
– I samme system– Tredjepartsløsninger
• Fordeler– Redaktørene slipper å forholde seg til flere nettsteder
(vanlig og mobil)• Ulemper
– Alt innhold må tilpasses– Noen system gir utfordring med lenker og skaper dobbelt
innhold hos Google som gir negativ virkning– Hvis man deler lenken til et mobilt nettsted er det ikke
sikkert det vises riktig på desktop
TEKNISK SAGT – SAMME SYSTEM• Når en besøkende kommer inn på et
nettsted så forsøker en å finne ut hvilken enhet det er
• Om det er en mobil som systemet kjenner til så vises innholdet basert på egne maler– Enten ved å sende brukeren til ny side eller
ved å hente ny sidemal• Om det ikke er en mobil så vises vanlig
nettside
TEKNISK SAGT – TREDJEPARTSLØSNING• Når en besøkende kommer inn på et
nettsted så forsøker en å finne ut hvilken enhet det er
• Om det er en mobil som systemet kjenner til så sendes brukeren til en tredjepartsløsning– Innholdet hentes fra publiseringsløsningen
via RSS, XML, Webservice eller lignende• Om det ikke er en mobil så vises vanlig
nettside
53www.itavisen.no m.itavisen.no
54www.regjeringen.no/mobil/
www.regjeringen.no
www.rica.no
www.rica.no
SKREDDERSYDDE MALER• Ulik sidestruktur
– I samme system– Tredjepartsløsninger
• Fordeler– Mer brukervennlig innhold (om man har prioritert riktig)
• Ulemper– Redaktør må forholde seg til forskjellige nettsted– Alt innhold må tilpasses– Noen system gir utfordring med lenker og skaper dobbelt
innhold hos Google som gir negativ virkning– Hvis man deler lenken til et mobilt nettsted er det ikke
sikkert det vises riktig på desktop
TEKNISK SAGT – SAMME SYSTEM• Når en besøkende kommer inn på et
nettsted så forsøker en å finne ut hvilken enhet det er
• Om det er en mobil som systemet kjenner til så henvises brukeren til mobilt nettsted
• Om det ikke er en mobil så vises vanlig nettside
TEKNISK SAGT – TREDJEPARTSLØSNING• Når en besøkende kommer inn på et
nettsted så forsøker en å finne ut hvilken enhet det er
• Om det er en mobil som systemet kjenner til så sendes brukeren til en tredjepartsløsning
• Om det ikke er en mobil så vises vanlig nettside
www.ruter.no
www.ruter.no/no/mobil/
www.episerver.no
www.episerver.no/episerver
RESSURSBRUKHva er kostnadsdrivere?
Teknologi
StrategiInteraksjons-design
Frontend utvikling
Backend utvikling
Innholds-arbeid
Lisenser
Responsive Web Design – tilpasning X X X X
Responsive Web Design – nytt nettsted X X X
Skreddersydde – egen sidestruktur i samme system X X X X X
Skreddersydde – egen sidestruktur i annet system X X X X X X
Skreddersydde – samme sidestruktur i samme system X X X X X
Skreddersydde – samme sidestruktur i annet system
X X X X X X
BESØKENDEHvordan tilnærme oss?
VI ER TILBAKE TIL UTGANGSPUNKTET• Hva vil du tilby?• Hva forventer de besøkende å finne? – I hvilken kontekst?
• Anta, test og les statistikk for å kunne gjøre noe valg
SNAKK MED BRUKERNE• Hør hva de vil ha og hva de forventer• Se hva brukerne får hos konkurrentene
65
SJEKK BESØKET PÅ SIDENE• Hvor mange besøker nettstedet fra en
mobilenhet hver måned?• Hvor mange av dem er iPads?• Hva er de mest besøkte sidene?
HVA SIER STATISTIKKEN?• Ofte ser vi long-neck-long-tale
ANALYSER BRUKERATFERD• Finnes det et mønster?
LAG BRUKERSCENARIER
LAG MOBILE PROTOTYPER
BRUKERTEST PROTOTYPER• Lag noe som
brukerne kan prøve selv
• Juster og test igjen
• Ta i mot alle tips du kan få
71
ØRJAN CLAUSENDaglig leder og rådgiver i Northern Beat
BakgrunnInformasjonsvitenskapWebdesignKommunikasjonsarbeidMarkedsføring
