Universell utforming FTW! Redesign av blindeforbundet.no

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

nikolai@netliferesearch.com @nkstrand

Joakim Bording

joakim@netliferesearch.com @spispeas

Slides

bit.ly/______