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