dnd design smartere - bi
Post on 21-Jul-2015
166 Views
Preview:
TRANSCRIPT
BI Hva gjør du når over 20.000 nettsider skal
tilgjengeliggjøres for mobil og iPad, og over
40 redaktører skal i tillegg holde nettstedet
vedlike.
Litt om bakgrunnen
• Behov for å være tilgjengelig på mobil
• Innovativ skole
• Ung målgruppe
• Statistikk viste økende mobil bruk
Litt om de involverte
• Yvonne Hansen – Spesialrådgiver – BI
• Goril Karstad – Senior kommunikasjonsrådgiver – BI
• Ørjan Clausen – Rådgiver (Epinova – nå Northern Beat)
• Thomas Grøndal – Designer (IXD – nå Skalar)
• Roger Guttormsen – Frontendutvikler (IXD – nå Skalar)
• Utviklingsteam Epinova
• Arild Henrichesen – EPiServer Ekspert
• Aud Marie Hauge – Ekspert brukervennlighet og universell utforming
• Karl Granli – Ekspert brukervennlighet og universell utforming
• Karoline Klever – EPiServer Ekspert
• Åge Reinås – EPiServer Ekspert
Prosessen
• Bestilling fra BI – vi må på mobil!
• Vår respons
• Hvorfor?
• Med hva?
• Til hvem?
• Strategi og målgrupper
• Brukere og innhold
• Interaksjonsdesign og grafisk design
• Grensesnittutvikling
• Utvikling
Vår påstand før vi begynte…
• Nettstedet på mobil og nettstedet på desktop skal ikke være like
• Behovet er ikke det samme
• Innholdet må være mer selgende og mer teaser-aktig – research gjør
man på desktop
• Vi lager et lite mobilt nettsted med kult design og lite innhold
• Det ble ikke slik hadde tenkt…
Strategi og målgrupper
• Fokusgrupper
• Leste statistikk
• Leste spørreundersøkelser
• Sjekket av mot BIs strategi
• Satt opp mål
• Selge studie og kurs
• Informere om fag og forskning
• Gi nyttig informasjon
• Avdekket primær- og sekundærmålgrupper
Brukerne og innhold
• Vi koblet sammen innhold, flyttet innhold til andre
seksjoner
• Helt ny struktur på nettstedet
• SEO vennlig
• Fokus på ord og uttrykk
• Domenestrategi
• Fjernet gammelt innhold
Bachelor
Hva er
bachelor?Hvorfor
bachelor?
Bachelor-
program
Anerkjenn
else
Internasjo
nalt?
Jobb-
muligheter
Faq
BI's
Rådgiver
Hvordan
søke
Låne-
kassen
For
virksom-
heter
Studie-
miljø
Sommer-
program
(.edu)
Kontakt
"bachelor"
adm.
Oppstart
Teste-
monial
Klasserom
Aktiviteter
Fadderuke
Pakke-
tilbud
Hvorfor
valgte jeg
Bi
Campus
Sosialt
Karriere
Klasserom
Bachelor
el.
årsstudie
Opptaks-
krav
Utveksling
FAQ
Fagopp-
byggingPris/
Finansie-
ring
Søknads-
skjema
Teste-
monial
Spesialise
ring
Påbygging
videre
Generell
infoFokus
Intern-ship
Karriere
Fakultet
Studie-
oppsett/
kalender
Låne-
kassen
Eksamen
Emnekart for å forstå studentene
Kriterier
for valg
av skole
ByVenner
Bosted
RykteAnner-
kjennelse
Nettverk
Pris/ finansier
ing
Tids-punkt
Jobb-mulighet
Fag
Hybel
Sport
Studieliv
Gjennomføring
Klasse-rom
Nett-studier
Eksamen
Jobbmuligheter
Utveksling
Utplassering
Kurstype
Høyskole
Spesial
Fordypning
Master
Hva er
master?
Hvorfor
master? Master-
programAnerkjenn
else
Internasjo
nalt?
Jobb-
muligheter
Faq
BI's
Rådgiver
Hvordan
søke
Låne-
kassen
For
virksom-
heter
Studie-
miljø
Sommer-
program
(.edu)
Master
Kontakt
"master"
adm.
Oppstart
Teste-
monial
Forskere
Prosjekter
Publika-
sjoner
Pakke-
tilbudHvorfor
valgte jeg
Bi
Campus
Sosialt
Karriere
Klasserom
evt
hovedfag
Opptaks-
krav
+1 modell
UtvekslingFAQ
Fagopp-
bygging
Pris/
Finansie-
ring
Søknads-
skjema
Teste-
monial
Generell
info
FokusIntern-ship
Double
degree
Karriere
Fakultet
Studie-
oppsett/
kalender
Låne-
kassen
Eksamen
Interaksjonsdesign og grafisk design
• Laget wireframes
• Mobil og desktop
• Brukertestet wireframes
• Designet noe for
• Mobil og desktop
Interakasjonsdesign
Designskisser
Grensesnittutvikling
• Tok et teknologivalg
• Responsive Web Design
• Bygget et system for sidemalene
• Viktig for redaktørene å ikke tenke mobil
• Breakpoint
• Tett dialog mellom frontend og designer
Breakpoints
Universell utforming
• En løsning for alle
Universell utforming
• Prioritert innhold
• Zoom muligheter i responsiv design
• Samme HTML uansett enhet – gjenkjennbart
• Brukeren bestemmer selv
Zoom
Zoom
Leela’s Adaptive Images
• Skalering av bilder for både desktop og mobil
• Wurfl
Leela’s Adaptive Images
• Hvorfor?
1. Lav terskel - krever ingen endring av kode, redaksjonelt innhold
eller design
2. Ytelse - Asynkrom lasting av bilder
3. Skalering - automatisk skalering av alle bilder på alle flater
4. Caching – laster ikke bilde på nytt om ingen endring har skjedd
Adaptive Images
• Skalering av bilder for både desktop og mobil
• Ytelse - Asynkrom lasting av bilder
• Wurfl
Testing i Chrome
Utvikling
• Vi konvertere sidemal for sidemal
• Flyttet innhold fra gammel struktur til ny struktur
• Fjernet innhold
• La til nytt innhold
• Holdt kurs og samling med BIs redaktører
• Bygget løsningen på en slik måte at redaktørene i stor
grad ikke trenger å tenke på mobilvisning
Resultatet
• Målinger viser at besøkende på nettstedet ble presentert
for 40% mer av innholdet på 30% færre klikk, samt at de
besøkende brukte mer tid på å lese innholdet på
nettstedet.
• Farmandprisen 2012
• Nettstedet BI.no vant gull under Farmandprisen
Beste nettsted 2012, i kategorien "Åpen klasse".
• Gulltaggen 2012
• BI.no var shortlistet til Gulltaggen 2012 i klassen
"Beste informasjonstjeneste".
Hva lærte vi?
• Lite erfaring fra lignende prosesser
• Både vi og kunden, og ikke bare BI, men de fleste kundene som
starter mobilprosjekt
• Ikke anta noe – i alle fall ikke si det høyt ;-)
• Gjør designet sammen med grensesnittutviklingen, lag et
system, tenk mobil tidlig/først/parallelt
• Ha tett dialog med SEO
top related