Hva tenker du når du hører universell utforming? Dyrt? Kjedelig? Vanskelig? Lovkrav? Til syvende og sist handler også universell utforming om godt innhold, prioritert design og ryddig kode – til glede for alle besøkere på nettsidene dine.

1. Universell utforming:
Er du klar?
Nikolai Strandskogen @nkstrand
Ida Aalen @idaAa
7. november 2014

2. Om Netlife Research
• Etablert i år 2000
• Tverrfaglig, digitalt designbyrå
• Teknisk uavhengige
• Kontor i Oslo og Bergen
• 50+ ansatte
• Eid av gründerne og ansatte

3. Først, la oss snakke litt
om funksjonshemming.

6. Kroppen Verdenvs.

7. Impairment
Det som gjør kroppen din annerledes eller skadet

9. Disability
Det som skjer når kroppen din møter en hindring den
ikke får til å løse

11. Du har den kroppen du
har.
Hvor funksjonshemma
du er varierer fra
situasjon til situasjon.

12. Svaksynt
Dysleksi

13. Svaksynt
Dysleksi

14. Universell utforming er å
redusere
funksjonshemming.

19. Prisen på henvendelser
0 kr
20 kr
40 kr
60 kr
80 kr
100 kr
120 kr
Skriftlig Per telefon Elektronisk
Kilde: Digital agenda for Norge

20. Er du klar for
eldrebølgen?

21. TORSDAG18.SEPTEMBER2014 DAGENS NÆRINGSLIV
ETTERBØRS58 ETTERBØRS5858
D
et er lett å tenke at
grunnen til at jeg blir
spurt om barn og
ungdom er at fagfeltet mitt er
sosiale medier og digital
kommunikasjon. Og alle vet jo
at det er sånt ungdommer
holder på med, ikke sant? Ja,
også vi voksne da, som er i
27-åringen har en plan B.
Men det betyr at det er
penger å tape på ikke å ta høyde
for det mangfoldet av brukere
du antagelig har på nettstedet
ditt, og kommer til å få i frem-
tiden. Jo eldre man blir, jo
større er faren for at man har
nedsatt syn, nedsatt hørsel,
nedsatt motorikk. Ørliten skrift
og lav kontrast er noe som irri-
terer mange, men som kan
gjøre det umulig for andre å få av få år skaffe seg nye, dyrere forskriften trer i kraft, kan ikke
INNLEGG
Media
Dublirnødttilå
designeogutvi-
klesiderforflereenn
LeonardodaVincis
idealmann.
DE GAMLE ER FRELST.
Pensjonister er også nettbru-
kere. 29 prosent av
67–79-åringene har tilgang
til nettbrett. Foto: Ammentorp
Photography
Eldrebølge på nett
Det er penger å tape på ikke å ta høyde for det
mangfoldet av brukere du antagelig har på nettstedet
ditt.
KVALITET. Vi
må stille krav til
Tarigjendeunge...
0
20
40
60
80
100
2013201220112010200920082007200620042002200019981997
67-79år
9-15år
Alle
…oggårforbi
LestnyheterBestillereiseBanktjenesterE-post
SosialemedierSpiltspillLestbloggNetthandel
66%
61%
39%
55%
6% 6%
0%
74%
67%
34%
1%
9%
4%
11%
18%
4%
18%
50%
4%
65%
57%
31%
1%
22%
På flere områder er pensjonistene mer aktive internett-
brukere enn ungdomsskoleelevene.
Andel internettbrukere som har brukt nettet til ulike typer tjenester en gjennomsnittsdag
67-79år9-15årAlle
20©14 grafikk/Kilde: SSB
Andelen internettbrukere blant pensjonistene er i dag
på høyde med andelen blant 9-15-åringer i 2006.
http://bit.ly/
eldrebolge

22. Men hva er egentlig
universell utforming på
nett?

24. Større redesign kjøpt
eller bestillt etter
1.7.2014
Ingen blir pålagt å
gjøre noe med
eksisterende nettsted
før 2021
Fra 1. juli

25. – Kravene om universell utforming gjelder for
private og offentlige virksomheter, lag og
organisasjoner som bruker nettsteder eller
automater som hovedløsning for å henvende
seg til allmenheten.
uu.difi.no

26. Unntak
• Sosiale medier brukt i
privat sammenheng
• IKT i skoler og
utdanningsinstitusjoner
• Fjernsynsmedier,
inklusiv film og nett-TV

27. bit.ly/
wcagwja

28. uu.difi.no

29. Dette ble veldig tørt.
Hva betyr det i praksis?

30. Universell utforming på
nett handler om:

31. Universell utforming på
nett handler om:
• kode

32. Universell utforming på
nett handler om:
• kode
• design

33. Universell utforming på
nett handler om:
• kode
• design
• innhold

34. Kode
som er ryddig og følger etablerte standarder

35. Design
med god lesbarhet, kontrast og prioritering

36. Innhold
som er prioritert og har et godt og tydelig språk

38. Dingser
Telefon Nettbrett PC

39. Dingser
rett PC Leselist

40. Programvare
Chrome Safari Firefox

41. Programvare
Safari Firefox ZoomText

42. skjermleser

43. VoiceOver

44. Vi må alle bli flinkere

46. Dårlig
kontrast

47. Dårlig
kontrast
Mangler
alt-tagg

48. Dårlig
kontrast
Mangler
alt-tagg
<h2>
<h4>

49. Fra teori og jus til design
av nettsider...

50. Case: Kampanjerigg

51. Kampanjehvaforno?

52. Beate Sørum / @BeateSorum
Rådgiver digital kommunikasjon
og fundraising i Kreftforeningen

53. – Med nytt kampanjenettsted
fra gang til gang, og produkt
til produkt, har du heller
ingen læring.
Beate Sørum / @BeateSorum
Rådgiver digital kommunikasjon og fundraising i Kreftforeningen

54. – Du finner ikke ut hva på
nettstedet som fungerer, og
kan aldri forbedre deg, fordi
alt for mye er forskjellig fra
gang til gang.
Beate Sørum / @BeateSorum
Rådgiver digital kommunikasjon og fundraising i Kreftforeningen

58. – Når vi kan lage
kampanjenettstedene selv ut
i fra en verktøykasse, sparer
vi mye i både tid og penger
på design og utvikling.
Beate Sørum / @BeateSorum
Rådgiver digital kommunikasjon og fundraising i Kreftforeningen

59. – Vi kan bruke kreftene på
godt innhold og budskap i
stedet, og vi forbedrer oss
hele tiden.
Beate Sørum / @BeateSorum
Rådgiver digital kommunikasjon og fundraising i Kreftforeningen

72. The Sans

73. The Sans

76. blindeforbundet.no
Informasjonsnettsted
Rasjonelt
Mange bruksoppgaver
Forsiden mindre viktig
«Hvordan kan vi hjelpe
deg?»
Førerhundkalender
Kampanjenettsted
Emosjonelt
Én bruksoppgave
Forsiden er viktig
«Hvordan kan du
hjelpe oss?»

77. Dette burde knytte dem
sammen:
Saken
Avsender
Visuell identitet
Layout
Funksjonelle moduler
Lenker på tvers

78. Mål for en
kampanje-
rigg

79. Mål for en
kampanje-
rigg
1) Effektivisere
ved at det kreves mindre
utviklingstid og
administrasjonstid

80. Mål for en
kampanje-
rigg
1) Effektivisere
ved at det kreves mindre
utviklingstid og
administrasjonstid
2) Øke inntektene
ved at man stadig
forbedrer skjemaer o.l.

81. Mål for en
kampanje-
rigg
1) Effektivisere
ved at det kreves mindre
utviklingstid og
administrasjonstid
2) Øke inntektene
ved at man stadig
forbedrer skjemaer o.l.
3) Styrke merkevaren
ved at sidene har et felles
visuelt uttrykk

82. Designprinsipper
Vi bygger videre på prinsippene fra blindeforbundet.no

83. Kun mørkt på lyst
• Slik at folk som bruker invertering slipper å bytte underveis for
å kunne lese innholdet.
• Vil gi et lyst, vennlig og optimistisk inntrykk
Kun mørkt på lyst

84. Kun mørkt på lyst
• Slik at folk som bruker invertering slipper å bytte underveis for
å kunne lese innholdet.
• Vil gi et lyst, vennlig og optimistisk inntrykk

88. Svart og gult,
men ikke farlig
Svart på gult gir god kontrast men kan fort gi konnotasjoner til
fare. (Veps, tiger, trafikkskilt.) En lysere gul og runde former vil
kommunisere mer i tråd med blindeforbundets verdier.

89. Navigasjon på siden
Ledelinjer: Vi bruker stiplete linjer hentet fra profilen.
Horisontale utfallende linjer som får folk til å stoppe.

93. Moduler

94. Byggeklosser

96. La oss bygge en
kampanje

97. Responsiv
Demo

98. Vi begynner
med et hvitt
lerrett. Mørkt på
lyst, for
gjenkjenbarhet
og god
lesbarhet

99. Logoen får en
fast plass, og
skaper
gjenkjennlighet og
tydelig avsender

100. Vi bruker et stort
bilde for å kunne ha
en emosjonell effekt og
gjenkjenbarhet til
kampanjen

101. For å sikre både
god lesbarhet og
fleksibilitet i bildebruk,
bruker vi sort tekst
med hvit bakgrunn
oppå bildet.

102. Etter
kampanjeintroen
kommer de velkjente,
gule knappene fra
blindeforbundet.no
som handlingsdriver.

103. I toppen
plasserer vi
menyen. Denne bør
ha så få punkter som
mulig. Første punkt er
handlingsdriver, de
andre gir
utdypende info.

107. Vi skroller ned. Her
har vi bilde, tekst og
ingress i kombinasjon
som én modul,
knappen er en annen
modul.

111. Vi scroller videre
ned. Dette er et
bildegalleri, man kan
også bruke bilder som
er bredere. Denne
skal detaljeres mer.

116. I bunn plasserer vi
skjemaet. Det er
designet på samme
måte som
blindeforbundet.no, så
alle skjema passer inn
begge steder.

121. I bunn kommer en
footer som minner om
den far
blindeforbundet.no.
Denne er ikke ferdig
designet, og vil få
sponsor-logoer også.

122. En kampanjerigg skal
være et fleksibelt
system som tåler
gjenbruk

123. Fordi vi
bruker svart
tekst med et hvitt
bånd bak, får vi
stor fleksibilitet i
bildebruk!

124. Fordi vi
bruker svart
tekst med et hvitt
bånd bak, får vi
stor fleksibilitet i
bildebruk!

125. Fordi vi
bruker svart
tekst med et hvitt
bånd bak, får vi
stor fleksibilitet i
bildebruk!

126. Det er
tydelig at
Blindeforbundet er
avsender, samtidig
som bildet er med
og påvirker
uttrykket.

127. Det vil være
enkelt å finne
bilder som passer,
man må kun sørge
for at fokus ikke er
i 1/3 til
venstre.

128. Vi bygger flere
kampanjer

131. Tydelig som
iCare - men også
tydelig at
Blindeforbundet
er avsender

137. Vi gjenbruker
video-modulene
fra
blindeforbundet.no

140. Kampanje-
riggen fungerer
også med mer
politiske
budskap!

141. Det er
tydelig at
Blindeforbundet er
avsender, samtidig
som bildet er med
og påvirker
uttrykket.

142. Byggeklosser

147. gode steder å
starte5

148. Slett all drit - løft
frem det viktige1

159. Overskrifter er ikke
for syns skyld2

161. Ctrl + B

165. Fotball
Regler
Mål
Dommere
Spillsystemer - formasjoner
2-3-5
1960-2000
Siste års tendenser

166. Fotball
Regler
Mål
Dommere
Spillsystemer - formasjoner
2-3-5
1960-2000
Siste års tendenser

167. Fotball
Regler
Mål
Dommere
Spillsystemer - formasjoner
2-3-5
1960-2000
Siste års tendenser
<h1>
<h2>
<h3>
<h3>
<h2>
<h3>
<h3>
<h3>

168. Fotball
Regler
Mål
Dommere
Spillsystemer - formasjoner
2-3-5
1960-2000
Siste års tendenser
<h1>
<h2>
<h3>
<h3>
<h2>
<h3>
<h3>
<h3>

169. Få frem poenget
bak bildet3

170. Skjermdump: knyteslips.no

171. Skjermdump: knyteslips.no

172. Skjermdump: knyteslips.no

173. Illustrasjonsbilder
Tekstalternativ:
«»
Meningsfyllte bilder
Tekstalternativ:
«Portrettfoto av Lars»
Foto: flic.kr/p/bJxmpP

174. Bli medlem
hos oss
MedlemsfordelerMedlemsfordeler
Foto: flic.kr/p/bJxmpP

175. Gå på date
med Lars
MedlemsfordelerBook tidspunkt
Foto: flic.kr/p/bJxmpP

176. Skriv korte og
beskrivende
tekstalternativer for
meningsfyllte bilder

177. En liten digresjon ...

181. Opp med
kontrasten, folkens4

185. Hell kaffe i
trackpadden5

186. Datamus Finger

187. Foto: Flickr - yum9me
Men hvem tyr til
tastaturet?

188. 1. Kaffeuhell
2. Late brukere
3. Ekspertbrukere
4. Motoriske problemer
5. Blinde og svaksynte
Men hvem tyr til
tastaturet?

191. Sett deg selv egne
brukeroppgaver du skal
teste på ditt nettsted

192. 1. Ser du hvor du er og hva du gjør?
2. Får du gjort alt du vil?
3. Hvor er fokus etter interaksjon
Tre ting å teste

193. Du er klar til å
begynne!

195. 1. Slett all drit - løft frem det viktige

196. 1. Slett all drit - løft frem det viktige
2. Overskrifter er ikke for syns skyld

197. 1. Slett all drit - løft frem det viktige
2. Overskrifter er ikke for syns skyld
3. Få frem poenget bak bildet

198. 1. Slett all drit - løft frem det viktige
2. Overskrifter er ikke for syns skyld
3. Få frem poenget bak bildet
4. Opp med kontrasten, folkens

199. 1. Slett all drit - løft frem det viktige
2. Overskrifter er ikke for syns skyld
3. Få frem poenget bak bildet
4. Opp med kontrasten, folkens
5. Hell kaffe i trackpadden

201. Foto: greatbuildings.com

202. Spørsmål?

203. Takk for oss!
Nikolai Strandskogen
nikolai@netliferesearch.com
Ida Aalen
ida@netliferesearch.com