UU workshop på Yggdrasil

2.
UU-skolen
Nina Kristin Langseth
Maren Volsdal Skirbekk

3. Nina Kristin Langseth
@Nklangseth
Maren Volsdal Skirbekk
@mskirbekk

4. Agenda
Introduksjon til universell utforming
Oppgaveløsning

5. 2005
2012
2013
7 prinsipper
Nielsen & Norman
Brukeren først!

6. ULOBA
Independent Living Norge
VISJON: En verden der
funksjonshemmede har frihet til
livsutfoldelse og deltar på alle
samfunnets arenaer.

8. Nye IKT-løsninger som utvikles må være universelt utformet
fra 1. juli 2014. (Difi: Forskrift om universell utforming av IKT)
• Kravet gjelder både for offentlig og privat sektor,
inkludert lag og organisasjoner.
• Eksisterende løsninger skal følge kravene innen
1. januar 2021.
Lovpålagt krav

9. Hvem har behov for UU?
SYNSPROBLEMER MOTORISKEPROBLEMER
«Målet med universelt
utformede løsninger
er at de er tilgjengelige
for alle uavhengig av
funksjonsevne»
Difi.no
HØRSELSPROBLEMER LESEVANSKER KONSENTRASJONSVANSKER

10. • Økt kvalitet på nettstedet
• Større potensiell kundemasse
• Større grad av selvbetjening
• Reduserer kostnader til brukerstøtte
• God merkevarebygging
UU lønner seg

12. Hvem har ansvaret for universell
utforming?
Innhold
Design
Teknologi

13. UU-skolen

14. Meny og navigasjon

15. Navigasjon
Rolle
Navigasjon
Man
skal
kunne
navigere
på
to
måter
i
en
nettside,
for
eksempel:
Meny,
søk,
alfabetisk
liste,
nettstedskart
–
Unngå
flere
enn
7
menypunkter
–
Plasser
meny
og
undermeny
konsekvent
-­‐
Det
optimale
er
en
navigasjonsstruktur
og
ett
søkefelt
–
Vis
tydelig
hvor
brukeren
befinner
seg
i
menyen
-­‐
Brødsmulesti
-­‐
Tydelig
visuell
markering
Navigasjonsmetoder
Siden
skal
fungere
også
når
brukeren
forstørrer
200
%
i
sin
nettleser.
Utforming
og
presentasjon
Eksempler:
ID
UDI
Statens
vegvesen
Gov.uk
NAV
Aftenposten

16. Navigasjon
Rolle
Lenketekster
Beskrivende
lenketekster
i
stedet
for
«les
mer»
og
«klikk
her»
–
Lenker
til
dokumenter
bør
ha
ikon
for
filtype,
for
eksempel
pdf,
eller
word.
Lenker
ID

17. Navigasjon
Rolle
Tab
fokus
• Navigasjon
med
tastatur
i
stedet
for
mus
• Alle
lenker
og
skjemaelementer
får
tab
fokus
• Style
normal,
hover,
fokus,
aktive
tilstander
Fokusmarkering
Front
GD

18. Mer
om
navigasjon
Rolle
Klikkflate
• Lag
alle
klikkbareflater
minst
43
x
43
px
• Lag
hele
linjen
klikkbar
på
ekspandering
og
kollaps
• Padding
på
lenker
som
er
på
bokstaver
eller
ikoner
Klikkflate
Front
GD
Snarveier
• Definer
usynlige
snarveier
til
bruk
ved
tab
navigering
• Hensikten
er
å
kunne
hoppe
over
navigasjonslenker
i
toppen
av
siden
• Gode
forslag
er
«til
søk»
og
«til
innholdet».
• Ikke
ha
for
mange
snarveier,
da
mister
de
meningen.
Snarveier
og
hurtigkommandoer
Front
GD

19. Kontrast
Rolle
Kontraster
–
Vi
må
måle
tekst
og
meningsbærende
ikoner
mot
bakgrunnen.
–
Ved
gradert
bakgrunn
(for
eksempel
knapp)
måles
svakeste
gradient
–
Kontrastkravet
gjelder
ikke
elementer
som
er
«disabled»,
for
eksempel
inaktive
knapper.
–
Brødtekst
bør
oppfylle
krav
til
AAA
–
men
trenger
ikke
være
helt
sort.
Color
contrast
analyser
(verktøy)
Kontrast
GD
FU

20. Typografi

21. Rgtx a
Rgtx a
Overlengde
Underlengde
Åpen Lik strek-
tykkelse i
overgang
Ulik strek-
tykkelse i
overgang
Lukket
x-høyde
Overlengde
Underlengde
x-høyde
Åpen font: Verdana
Lukket font: Eurostile
Åpen eller lukket font?

22. • Fonten skal være åpen slik at den er lettere å lese. Tegn som
a, e og c ikke gror igjen
• Det må være mulig å kunne skille mellom 1, l, I, o ,O, 0 og
tallene 6, 8, og 9.
• Strekktykkelsen bør være lik, spesielt i overgangene.
• Tydelig overlengder og underlengder på bokstavene.
• Gode bokstavmellomrom og ordmellomrom.
• Stor skriftfamilie (light, regular, italic, bold, semibold … )
Kjennetegn på universelt utformet fonter

23. Sammenlign fontene

24. Testing

25. Sidemaler
Rolle
Tittel
• Alle
sider
skal
ha
en
overskrift
Tekst
og
struktur
ID
GD
Tekst
og
struktur
• Definere
alle
typer
overskrift,
ingress,
brødtekst,
lister
osv.
•
Maks
65–70
tegn
per
linje.
Metode
for
valg
av
UU-­‐fonter
(metode)
Tekst
og
struktur
GD
FU
Forstørring
• Tenk
på
at
siden
skal
fungere
også
når
brukeren
forstørrer
200%
i
sin
nettleser.
Utforming
og
presentasjon
GD

26. Elementer
på
siden
Rolle
Lenker
–
Lenker
i
tekst
bør
skille
seg
ut
med
to
visuelle
virkemiddel
Bruk
av
farger
Lenker
Front
GD

27. Formatering
• Bruk alltid innebygde stiler
• Overskrift
• Avsnitt
• Mellomtitler
• Lenker og uthevinger
• Punktlister

28. Bildebruk og diagrammer

29. Innholdselementer
Rolle
Bilder
• Bilder
skal
ha
alternativ
beskrivelse,
hvis
ikke
kan
filens
plassering
dukke
opp
(eller
leses
opp)
• Dekorative
bilder
skal
ha
tom
alt
tekst
• Bildetekst
–
ikke
det
samme
som
alt
tekst
Bruk
av
karusell
på
nett
Bruk
av
video
i
bakgrunnen
Bilder
og
grafikk
IA
GD
Front
Back
Diagrammer
• Alle
diagram
skal
ha
en
tekstlig
fremstilling,
i
tillegg
til
grafisk
• Alle
fargekombinasjoner
i
diagrammer
må
testes.
Test
i
illustrator
Bilder
og
grafikk
IA
GD
Hafslund

30. Lenkede bilder
30 17.04.15

31. Skjema og tabell

32. Innholdselementer
Rolle
Tabeller
Gi
tabellen
tydelig
visuell
markering.
• Skille
mellom
overskrifter,
data
• Skille
mellom
rader
og
kolonner
• Tenk
på
at
tabellen
skal
zoomes
inn
200%
og
fungere
på
mobil
• Gi
tabellen
en
tittel
• Tabellene
skal
også
fungere
på
mobil,
som
er
litt
utfordrende
Tabeller
Skatt
Skatt
mobil
UDI
Responsive
tabeller
IA
GD
Captcha
–
Bruk
en
logisk
captcha,
istedet
for
bilde.
Captcha
IA
GD
Innlogging
–
Husk
skjema
for
registrering
og
glemt
passord.
-­‐ Ledetekster
-­‐ Validering
Basecamp
IA
GD

33. Ekspertgransking

34. • Ekspertgransk Bouvet.no
– Finn feil/mangler
– Finn potensielle forbedringer
Oppgave: Ekspertgransking