9. KONTEXTEN
HAR
FÖRÄNDRATS
Användar
na sitte
inte läng r
re bekvä
framför mt
den
stationä
Förutsättningar som påverkar: ra dator
n
● Skärmstorlek
● Uppkopplingshastighet
● Funktioner i hårdvaran
● Inmatningsmöjligheter
● Batteri
Men också användarens:
● Mål
● Miljö
● Uppmärksamhet
● Tid
11. SEKVENTIELL
ANVÄNDNING
Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
12. SAMTIDIG
ANVÄNDNING
Källa: ”The New Multi-screen World: Understanding Cross-platform Consumer Behavior”, Google, augusti 2012
13. TILLGÅNG
TILL
BLIR
CENTRALT
Från:
Till:
● 13
fly;lådor
(ca
600
böcker)
● Kindle,
e-‐biblioteket,
iBooks
● 100
tals
DVD
och
CD,
6TB
data
● NeRlix,
SpoUfy,
TV
Play,
med
film,
TV
abonnemang
iTunes
● Backup
av
data
● Finns
i
molnet,
just
in
Ume
● Bokmärken
och
appar
● Sök
och
flöden
av
informaUon
Direkt
Ullgång
på
alla
mina
devices.
När
jag
vill,
var
jag
vill!
(dessutom
tar
det
väldigt
lite
plats)
14. SAMMANFATTNING
1.
Fler
skärmar
och
ökad
mobil
användning.
2.
Andra
kontexter
och
användarbeteenden.
3.
Sök
blir
allt
vikUgare.
4.
Det
är
Ullgången
Ull
istället
för
ägande
som
blir
allt
vikUgare.
5.
Var
öppen
för
det
som
kommer,
det
kommer
a;
påverka
verksamheten.
16. VILKA
ÄR
DINA
UTMANINGAR?
● Konsekvenser för er verksamhet?
● Vad behöver ni göra för att anpassa er?
Diskutera kort med din granne
17. HUR
KAN
VI
SKAPA
MER
FRAMTIDSVÄNLIGA
LÖSNINGAR?
18. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
19. INNEHÅLLSSTRATEGI
pl an för att
ållsstrat egin är en ålla releva
nt
Inneh rh
era och unde
sk apa, lever ll.
db art innehå
och använ
in nehåll för
pa specifikt
Vi vil l inte ska
l!
varje kana
20. INNEHÅLLSSTRATEGI
–
VAD?
1. Relevant innehåll
Vilket innehåll är relevant för dina användare i en specifik kontext.
2. Innehållsstruktur och API:er
Hur ska vi strukturera informationen, vilken metadata, hur kommer
man åt informationen?
3. Hantera informationen
Hur skapar vi innehåll och underhåller det? Policy, riktlinjer och
processer.
25. INFORMATIONSOBJEKT
-‐
RECEPT
Definiera varje innehåll som
ett informationsobjekt
- Vad är det?
Recept
- Vilka beståndsdelar har det?
-‐ Namn/rubrik
- Vad bör vara strukturerad
-‐ Ingress
data?
MaträS
-‐ Bilder
- Vad är relationen till annat?
-‐ InstrukUoner
-‐ Ingredienser
-‐ TillagningsUd
Ingrediens
-‐ Näringsinnehåll
-‐ HögUd
-‐ Typ
av
kök
HögWd
Typ
av
kök
Betyg/omdöme
Event/kalender
26. API:ER
KANALER
OCH
INTEGRATION
PresentaUon
Webbsajt
App
Mobilsajt
Andra
kanaler
API:er
REST,
RSS,
Webservice,
XML,
Sök
InformaUonsobjekt
Data
och
admin
CMS
Tjänst
X
Tjänst
Y
Tjänst
Z
● Multikanal
● Tjänstekontrakt och öppna API:er
● Semantisk web, Microdata, HTML5
● Bygg Content Management System, COPE
28. DET
HANDLAR
INTE
LÄNGRE
OM
ANPASSNING
TILL
MOBILT
Från Till
● Desktop first ● Mobile first
● Anpassa för olika enheter ● Anpassa efter browser-storlek
● Desktop-sajt och mobilsajt i ● Allt styrs från samma
två olika redaktörsgränssnitt redaktörsgränssnitt
29. VAD
ÄR
RESPONSIV
WEBB?
Bild lånad från: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
30. OLIKA
TEKNISKA
LÖSNINGAR
Vad
som
är
rä*
val
beror
på
vad
du
vill
uppnå
Mobilsajt
Responsiv
webb
Separat
webbplats
Anpassad
layout
beroende
på
för
mobiler
skärmstorlek
Appar
Laddas
ner
och
installeras
på
din
mobil
31. FÖRDELAR
MED
DE
OLIKA
TEKNISKA
LÖSNINGARNA
Appar
Mobilsajt
Responsiv
webb
Fördelar:
Fördelar:
Fördelar:
● Kan
använda
mobilens
● Större
möjlighet
a;
anpassa
● Fungerar
på
flera
olika
funkUoner
fullt
ut
innehåll
och
ha
en
helt
enheter
● OpUmera
separat
informaUons-‐ ● Mer
framUdsvänlig
användarupplevelsen
struktur
● Enklare
teknisk
förvaltning
● Kan
fungera
offline
● Kan
gå
relaUvt
snabbt
a;
få
● Enklare
uppdatering
av
● Passar
för
återkommande
på
plats
som
komplement
innehåll
användning
Ull
en
stor
och
komplex
desktopsajt
● Fungerande
modell
för
betalning
33. MOBILSAJT
Passar till:
● När man vill göra en
snabb mobilanpassning
av en komplex sajt
● E-handel
● Sociala medier
Några exempel:
● Etsy (m.etsy.se) ● Dagens Nyheter (mobil.dn.se)
● Asos (m.asos.com) ● Flickr (m.flickr.com)
● Pricerunner (m.pricerunner.se) ● Twitter (mobile.twitter.com)
● Dropbox (dropbox.com/m) ● Linkedin (touch.www.linkedin.com)
34. RESPONSIV
WEBB
ndly
b = fu ture frie
Respo nsive we
Passar till: Några exempel:
● Informationssajter ● SVT Play (svtplay.se)
● Sajter med innehåll att ● Folktandvården i Stockholm
läsa och konsumera (folktandvardenstockholm.se)
● Nyheter ● Radiotjänst (radiotjanst.se)
● Tidningar/magasin
● Webb-tv Fler svenska exempel på :
● Bloggar
responsivelistan.se
● Design- och portfoliosajter
35. OM
TILLGÄNGLIGHET
I
MOBILEN
I mob
ile
av tillg n är vi alla i
• Enkelt navigationskoncept ängliga behov
lösning
• Stora klickytor ar
• Anpassa radlängd för god läsbarhet
• Hjälp användaren vid inmatning av text
• Genvägar till innehållet i långa sidor
• Stöd för olika plattformars navigationsmanér
• Se till att det går att zooma
• Säkerställ goda färgkontraster
• Möjlighet att välja att se sajten i ”desktop-läge”
Källa: ”Slutrapport-Tillgängliga-mobilgränssnitt.pdf”, Funka.nu, januari 2012
36. SAMMANFATTNING
•
Utveckla
en
innehållstrategi
•
Bygg
dina
lösningar
framUdsvänliga
•
Responsivt
är
e;
ganska
säkert
kort
•
Kanalval
och
teknisk
lösning
styrs
av
• Dina
användares
kontext
och
skärm
• Dina
behov
och
budget
•
Finns
inget
givet
eller
rä;
svar
37. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
38. AMF
FASTIGHETER
–
RESPONSIV
WEBB
Varför
valet
responsiv
design?
● Allt
fler
använder
mobilen
● En
plats
för
uppdatering
av
innehåll
● iPad
används
i
uthyrningssituaUon
● Samma
innehåll
för
användare
och
anställda
● Inga
särskilda
funkUoner
som
kräver
en
app
för
a;
fungera
AMF
Fas7gheter
är
en
fas7ghetsägare
med
fokus
på
kontors-‐
och
retailfas7gheter
i
Stockholm
och
Göteborg.
Äger
och
förvaltar
kända
byggnader
som
t.ex.
Femte
Hötorgshuset,
Gallerian
och
Mood
Stockholm.
39. AMF
FASTIGHETER
–
RESPONSIV
WEBB
Brytpunkter:
● Fast
bredd
för
desktop
och
liggande
iPad
● Fast
bredd
och
touchanpassning
för
stående
iPad
● ”Fluid
design”
för
allt
som
är
mindre
än
stående
iPad
Teknisk
lösning:
● Episerver
och
Twi;er
bootstrap
40. AMF
FASTIGHETER
–
RESPONSIV
WEBB
Hur
mycket
anpassas?
● NavigaUonsramverk
● Generella
regler
för
mallsidor
● Prioriterade
funkUoner:
● Sök
ledig
lokal,
Felanmälan,
Kontakt
● Touchanpassad
design
42. ERFARENHETER
FRÅN
ETT
RESPONSIVT
PROJEKT
● ”Mobile first” är en bra metod för att fokusera på rätt saker
● Prioritera god anpassning av de viktigaste delarna av sajten
● Börja bygga enkelt och förbättra eftersom
● Ett integrerat och kunnigt team en förutsättning
● Inte detaljstyra:
● Designa endast en verktygslåda – inte slutgiltiga skisser
● Ge teamet mandat att ta beslut löpande
● Det finns färdiga ramverk
● t.ex. Responsive Grid System, Twitter Bootstrap, Foundation
43. CASE:
STOCKHOLMS
LÄNS
LANDSTING
(SLL),
VÅRDGIVARGUIDEN
dfokus p
å
vu
ats med hu
gm atisk ans PI:er me
d
En pra ch öppna
A ive
inn ehåll o n) , respons
first (nästa
mobi le tablet
ansats
44. VÄGVAL
SLL
-‐
ÖVERGRIPANDE
● Övergripande vägval
● Innehållet kommer att användas på flera platser
● Innehållet kommer bestå av ”atomer”
● Relaterat innehåll ska enkelt gå att kopplas ihop
● Hantera innehåll på så få platser som möjligt
● Det mobila är inte så prioriterat, men det ska gå att hantera
● COPE inspirerat
t i
Fl exibilite
nen
inf ormatio
45. VÄGVAL
SLL
-‐
LÖSNING
● Sökbaserad arkitektur
● Allt är informationsobjekt
● Allt är löst kopplat med varandra
● Allt är baserat på sök och metadata
● All information, oavsett källa, finns i sökindex
● All information och data går via sökmotorns API
● Progressive enhancement
● Microdata
● HTML5 (semantisk HTML)
● Responsive Design
46. VÄGVAL
SLL
–
SÖKBASERAD
ARKITEKTUR
Presentation Externa
platser
(1177,
vårdguiden)
Vårdgivarguiden
Journal
och
vårdsystem
Anpassad presentation, Kan
stödja
vårdguidens
”Hi;a/ Tillhandahålla
en
fristående
Tillhandahålla
funkUoner
för
jämför
vård”
och
öka
”Hi;a
producent”
för
olika
a;
hi;a
producenter
av
hämtar och presenterar
transparensen
gentemot
vårdtjänster
och
möjligheter
a;
vårdtjänster
som
kan
kopplas
informationsobjekt utifrån invånarna
jämföra
vårdtjänsterna
Ull
de
egna
systemen
kontexten. Webb eller
mobilt
API
Hanterar interna kopplingar och
API för åtkomst till informations-
objekt. Mot tjänst eller via
sökindex
Informationsobjekt
Enskilda informationsobjekt
som taggas/kategoriseras
utifrån deras egenskaper
Administration
Kan vara olika anpassade
lösningar beroende på behov
CMS
(EPI)
Custom
1
Custom
2
Tjänst
X
per informationsobjekt
49. STOCKHOLMSMÄSSANS
VAL:
NATIVE
APP
Frågan: utveckla en app för alla mässor eller en app per mässa?
Målet: Erbjuda appar som visar information för samtliga mässor.
Valet om ett ramverk som varje specifik mässa kunde använda vilade
bl a på behov om:
● att underlätta för utländska utställare/besökare (tillgång till Internet)
● att utveckla kartfunktionalitet
● att jobba med sökbarhet och synlighet (App Store)
● tydligare identitet för respektive mässa
51. DAGENS
FRUKOSTSEMINARIUM
● Utblick
● Tekniken
• Innehållsstrategi
• Teknik- och kanalval
● Case – så gjorde vi
● Modell för att välja rätt
52. 5
STEG
FÖR
EN
HÅLLBAR
DIGITAL
STRATEGI
Förstå
dina
användare
Formulera
en
Stå
inte
sUll
målbild
Din digitala
strategi
Välj
teknik
Välj
och
kanaler
ambiUonsnivå
53. 1. Förstå dina användare
● Identifiera dina prioriterade användare
● Analysera deras vanor, kontext och behov
54. 2. Formulera en målbild
● Vad vill ni åstadkomma?
● Verksamhetens krav / behov
● T.ex. effektiv kundsupport
56. 4. Välj teknik och kanaler
● Flexibel innehållsstrategi
● Vilka kanaler
● Tänk på förvaltning och organisation
57. 5. Stå inte still
● Börja någonstans – just do it
● Räkna med att förutsättningarna kommer att ändras
● Örat mot marken för vad som kommer i framtiden
58. 5
STEG
FÖR
EN
HÅLLBAR
DIGITAL
STRATEGI
Förstå
dina
användare
Formulera
en
Stå
inte
sUll
målbild
Din digitala
strategi
Välj
teknik
Välj
och
kanaler
ambiUonsnivå
59. TACK
FÖR
IDAG!
Elin
Sjöberg
Fredrik
Dolléus
Malin
Misaghi
elin.sjoberg@alenio.se
fredrik.dolleus@alenio.se
malin.misaghi@alenio.se
070-‐511
31
26
070-‐387
12
60
070-‐767
01
45
linkedin.com/in/esjoberg
linkedin.com/in/dolleus
linkedin.com/in/malinmisaghi
Alenio
etablerades
2001
Erfarna
konsulter
med
kompetens
Vi
vill
a;
företag
skall
Samlade
erfarenheter
från
över
inom
affärsstrategi,
design
och
se
och
dra
ny;a
av
de
affärs-‐ 100
större
uppdrag
projektledning.
Arbetar
oqast
på
möjligheter
som
digitala
medier
beställarens
sida.
erbjuder.
