uu skolen, yggdrasil15
Post on 22-Jul-2015
376 Views
Preview:
TRANSCRIPT
UU-skolen Nina Kristin Langseth Maren Volsdal Skirbekk
Nina Kristin Langseth @Nklangseth
Maren Volsdal Skirbekk @mskirbekk
Agenda
Introduksjon til universell utforming Oppgaveløsning
2005 2012 2013
7 prinsipper
Nielsen & Norman
Brukeren først!
ULOBA Independent Living Norge
VISJON: En verden der funksjonshemmede har frihet til livsutfoldelse og deltar på alle samfunnets arenaer.
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
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
• Økt kvalitet på nettstedet • Større potensiell kundemasse • Større grad av selvbetjening • Reduserer kostnader til brukerstøtte • God merkevarebygging
UU lønner seg
Hvem har ansvaret for universell utforming?
Innhold
Design
Teknologi
UU-skolen
Meny og navigasjon
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
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
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
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
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
Typografi
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?
• 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
Sammenlign fontene
Testing
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
Elementer på siden Rolle
Lenker – Lenker i tekst bør skille seg ut med to visuelle virkemiddel Bruk av farger Lenker
Front GD
Formatering
• Bruk alltid innebygde stiler • Overskrift • Avsnitt • Mellomtitler • Lenker og uthevinger • Punktlister
Bildebruk og diagrammer
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
Lenkede bilder
30 17.04.15
Skjema og tabell
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
Ekspertgransking
• Ekspertgransk Bouvet.no – Finn feil/mangler – Finn potensielle forbedringer
Oppgave: Ekspertgransking
top related