universell utforming ftw! redesign av blindeforbundet.no
TRANSCRIPT
Universell utforming FTW! Redesign av blindeforbundet.no
Joakim Bording Nikolai Krister Strandskogen Yggdrasil 14. april 2015
Foto: greatbuildings.com
Universell utforming
Bruker-vennlighet❤
Universell utforming og brukervennlighet er to sider av samme sak
#1
Mange elefanter i rommet når det gjelder universell utforming
– Tilgjengelighet er fint, men hvor mange blinde er det egentlig?
Synshemmede
Fargeblinde
Blinde
+++
– Vel og bra, men hvem er egentlig dere?
Joakim Nikolai
Hvordan få universell utforming inn i et prosjektløp?
Lær mer på UU-skolen etter lunsj
Målgrupper
1. Synshemmede og pårørende 2. Medlemmer 3. Den interesserte almuen 4. Givere
Prioriterte mål
1. Flere medlemmer 2. Aktivt og selvstendig liv for den enkelte 3. Øke kunnskapen 4. Øke inntektene, redusere utgiftene
Tverrfaglig team
Design og frontend
Prosjektledelse
DesignInteraksjon og
innhold
Grafisk design
Alle har ansvar for universell utforming
#2
Start med innholdet og ikke stopp
Blindeforbundetsmål
Brukernesbehov
Prosjektstart
Brukerintervju
Spørreundersøkelse
Mål og målgrupper
Overordnet konsept
Bakgrunnsdokumenter
De viktigste oppgaveneForskning på øyehelse og syn
Hjelpemidler for blinde og svaksynte. Hva finnes, hvor selges det?
Symptomer på synshemninger og øyesykdommer
Å leve med synshemming (råd og tips)
Øyesykdommer og synshemninger: råd og fakta om min diagnose
Uleselig (kampanje for større skrift)
Rettigheter: Hvilke rettigheter har jeg som blind eller svaksynt?
Behandling av øyesykdommer
Forebygging, risikofaktorer og arvelighet ved synshemninger og øyesykdommer
Produkter som kan brukes av blinde og svaksynte (apper, klokker, mobiltelefoner o.l.)
0 % 10 % 20 %
Topp 25%
797 respondenter
Kjernesideworkshop
Hør mer om Kjernemodellen i
morgen
Opplæring av webredaksjonen
Introduksjon til HTML
Gi redaksjonen kunnskap til å lage tilgjengelig innhold
#3
Grafisk (universell) design
– Tilgjengeligheten begrenser kreativiteten min
– Har du sjekket kontrasten på de fargene?
Ikke utsett universell utforming til slutt
#4
Thord
InnholdKjernesideinngangerSeksjonsinnganger
Forside Transportside Kjerneside
Forstørrelse av skjermen
Forstørrelse innebygget i nettleseren
Annet
Egne innstillinger for farger og fontstørrelse
Skjermleser på datamaskin
Skjermleser på mobiltelefon eller nettbrett
Leselist
Invertering av farger
Talestyring
Tekstnettleser
0 % 5 % 10 % 15 %
40%av målgruppen
bruker tilleggsutstyr
Fra en undersøkelse med 537 deltakere av Blindeforbundets medlemmer utført av Netlife Research i 2014. Spørsmålsformulering: «Bruker du noe av utstyret i følgende liste, når du surfer på nett? Du kan hake av på flere.»
Se mulighetene bak begrensningene
#5
Innhold og design inn i én felles prototype
Protoype i HTML
Tverrfaglige jobbing
InnholdDesign UX PL
– Jeg kan ikke HTML
Skisser Leveranse
Designretning Designprinsipper Designsystem
Form
Innhold
Funksjon
Prototype
Teste ogevaluere
Kjernemodellen bygd inn i CMS
Som også ble implementert i
produksjon
Ny startpakke for å jobbe med
innhold
Ny startpakke for å jobbe med
innhold
– Dette må da ha tatt altfor mye tid??
Fonter og farger for blinde
– Alt dette visuelle høres bra ut, men hva med oss som ikke ser? Styremedlem
Stil og tone
Prioritering
Struktur
Video og lyd
Rekkefølge
Antall valg
Antall steg
Fokus
Status
Størrelse
Flater
Farger
Typografi
Symboler
Grafisk Innhold Interaksjon
Gi meg innholdet jeg er ute etter så kjapt som mulig Or else …
=For tastatur-
brukere
Ingen har gjort dette tidligere
– Jeg liker denne best fordi den går «rett til kjernen» Medlem i referansegruppen
Men det trengs mer testing …
Se mulighetene bak begrensningene
#5
Hvorfor kampanjerigg redder dagen
Kampanjehvaforno?
kampanjerigg
The Sans
La satelittene komme hjem!
blindeforbundet.no Rasjonelt Mange bruksoppgaver Forsiden mindre viktig «Hvordan kan vi hjelpe deg?»
Kampanjeside Emosjonelt Én bruksoppgave Forsiden er viktig «Hvordan kan du hjelpe oss?»
Dette burde knytte dem sammen: Saken Avsender Visuell identitet Layout Funksjonelle moduler Lenker på tvers
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, øke tilgjengelighet o.l.
3) Styrke merkevaren
ved at sidene har et felles visuelt uttrykk
Du når flere kunder med tilgjengelige nettsider
#6
Byggeklosser
La oss bygge en kampanje
En kampanjerigg skal være et fleksibelt system som tåler gjenbruk
Vi bygger flere kampanjer
Byggeklosser
Se mulighetene bak begrensningene
#5
Så hvordan gikk det egentlig med førerhundkalenderen i år?
Andel konverteringer på mobil i 2014
21% 45%
Andel konverteringer på mobil i 2015
Snitt betalingssum økte med
5%
Andel som betalte økte med
151%
Brukertesting, krav og lansering
Ekstern referanse-gruppe på 16 personer
- Jeg likte denne best fordi
den på venstre side hadde samlet andre
linker.
- Denne er mest gjenkjennelig fra andre nettsider.
- Denne har en slik lang meny før
man kommer til det som skal leses, og det
er ikke bra på leselist.
- Denne blir så mye detaljer i venstremarg og
logo osv.
- Listen med lenker på venstre
side [er noe jeg liker] når jeg ønsker å bruke
øynene å lese med.
- Her kom jeg direkte inn på
omtalen av grå stær, uten å måtte innom
flere knapper.
- Jeg liker best denne når jeg
benytter skjermleser fordi den går rett “til kjernen” i lenkelisten
- Denne er helt grei.
- Liker denne best:
Artikkelen starter fra topp. En ser tråden/stien som en linje først, denne
kunne også ha stått nederst. En fin
orientering.
- Listen med lenker på venstre side [er noe jeg
savner] når jeg ønsker å bruke øynene å lese
med.
Eksterne referansgrupper var ikke fleksibelt nok En brukertest med hver av personene ville trengt like mye forberedelser men gitt mye mer lærdom.
Brukertesting med blinde og
svaksynte
Utfordringen er å få tak i brukere å teste på Unngå å kun teste på «ekspertbrukere»
Test tidlig, test enkelt og test ofte
#7
Vi burde holdt av mer tid til
testing underveis i prosjektet
– Tilgjengelighet gjør prosjektet dyrere
– When you say accessibility is slowing your development down. It’s not because of accessibility. It’s because you are learning a new skill. Derek Featherstone
Sett av tid og ressurser til å lære
#8
beta.blindeforbundet.no Inviter de du frykter mest til å kritisere før den er live
Selv om vi lanserer er vi ikke ferdig. Vi har mange ting vi fortsatt ønsker å forbedre
Du blir aldri helt ferdig #9
Loven krever WCAG 2.0 A & AA
Jobb med kravene og dokumenter prosessen i det Da mange krav er basert på skjønn blir det viktig at designere dokumenterer hvorfor de har gjort som de har gjort
– Så lenge vi dekker WCAG kravene er vi tilgjengelige.
Universell utforming
Bruker-vennlighet❤
Design for mennesker - ikke for krav
#10
Rådene våre oppsummert
Universell utforming og brukervennlighet er to sider av samme sak
#1
Alle har ansvar for universell utforming
#2
Gi redaksjonen kunnskap til å lage tilgjengelig innhold
#3
Ikke utsett universell utforming til slutt
#4
Se mulighetene bak begrensningene
#5
Du når flere kunder med tilgjengelige nettsider
#6
Test tidlig, test enkelt og test ofte
#7
Sett av tid og ressurser til å lære
#8
Du blir aldri helt ferdig #9
Design for mennesker - ikke for krav
#10
Takk for oss! Nikolai Strandskogen
[email protected] @nkstrand
Joakim Bording
[email protected] @spispeas
Slides
bit.ly/______