Träff #6 • Inkluderande design ons 4 okt • UX Writing vt 23 • Nackademin

Jonas Söderström • 2023
Inkluderande design
 
som skapar tillgänglighet
Trä
ff
#6 • Onsdag 4 oktober
Jonas Söderström • Ht 23 • UX Writing • Nackademin

View Slide

Idag
• Lite repetition

• Story!

• Inkluderande design

• WCAG …

View Slide

Lite repetition

View Slide

Informationsdesign är strängt taget två saker:
Utforma så
 
det viktiga
framhävs, och
helheten blir tydlig
och lättolkad.
2
”Chunka”
, ordna, märka
1
Empatisera, tänka.
Rensa bort trivialt
 
och överflödigt.
Förstå vad som
 
är viktigt för
mottagaren.

View Slide

att dela upp informationen
 
i lagom stora och meningsfulla bitar,
”Chunka”
informationen med vettiga etiketter
(rubriker) eller utmärkande drag
(bilder, färg, symboler),
 
så vi förstår vad de betyder för oss
Märka
dem i en vettig följd,
 
med en tydlig hierarki
Ordna

View Slide

Innehållet
 
är viktigare än
etiketterna!

View Slide

Ikoner ska alltid ha text.
(så gott som)

View Slide


View Slide

”Signifiers”
”Constraints”

View Slide

”Constraints”

View Slide

6. Varningar och tillrättavisningar
• Försök designa så att det inte går att göra fel.

View Slide

Inkluderande design

View Slide

Tryck på skärmen!
’’ ’’

View Slide


View Slide

Tryck på skärmen!
🤷

View Slide

🤷
👵

View Slide

Röd signalfärg

Synliga lappar

Gul signalfärg

Sträcker sig mot användaren

”Ta mig!”

View Slide

”Signifiers”
(”A
ff
ordances”)
Håll här
Lägg något
här

View Slide

”Signifiers??”
???
Huh?
Va?

View Slide

Inga visuella ledtrådar
till att det
fi
nns lappar

Inget ”ta mig!”

Ingen text ”tryck här
 
för nummerlapp” …
Ingen bild…
Tryck på den blåa randen!

View Slide

Inga visuella ledtrådar
till att det
fi
nns lappar

Inget ”ta mig!”

Ingen text ”tryck här för
nummerlapp” … ingen
bild…
Ärrvävnad!

View Slide

Apotek

View Slide

Optiker

View Slide

Postkontoret

View Slide

”Men så svårt är det väl inte…”

View Slide

• … den som inte kan
svenska perfekt

• … den som har immiga
glasögon på grund av
regn ute

• … den som är stressad

• … den som är på
vårdcentralen för första
gången
🤷
👵
De mest sårbara – svårt med
språket, svårt att gå –
 
var de som drabbades!
• … den som har torr hud

View Slide

"….jag personligen hade inte
tänkt att det faktiskt kan vara
fysiskt omöjligt att använda en
pekskärm på grund av till
exempel torra
fi
ngertoppar"

View Slide

Funktionsnedsättning
https://termbank.socialstyrelsen.se/?TermId=812&SrcLang=sv
nedsättning av fysisk, psykisk
eller intellektuell
funktionsförmåga”
”

View Slide

Funktionsvariation

View Slide

Funktionshinder
Individens förmågor
Omvärldens krav
{
Funktions-

hinder

View Slide

Inkluderande design –
 
att minska trösklar
 
i omvärlden
Individens förmågor Omvärldens krav

View Slide

Tillgänglighet är ett
 
mått på slutresultatet:
 
bättre eller sämre

View Slide

Jonas Söderström 2023
UX är (strängt taget)
 
ett kvalitetsmått
 
på slutresultatet

View Slide

Visuell
design
Infor-
 
mations-
 
design
Inter-
 
aktions-
 
design
DESIGN (”UI”) UX
🙁 😀
🙂

View Slide

Visuell
 
design
Infor-
 
mations-
 
design
Inter-
 
aktions-
 
design
Tydliga
kontraster,
hänsynsfull
färgskala,
lättlästa
typsnitt,
 
alt-texter
Enkelt
språk,
tydliga
struktur,
förklarande
bild
Stora och åtskilda
klickytor, kunna
använda utan mus
(tangentbords-
styrning)
Inkluderande
design

View Slide

Visuell
 
design
 
Tydliga
kontraster
etc
Informations-
 
design

Enkelt
 
språk
 
etc
Interaktions-
 
design

Stora klickytor
etc
Inkluderande design Tillgänglighet
🙁 😀
🙂

View Slide

Inkluderande design –
 
att minska trösklar
 
i omvärlden

View Slide

Programvara och system skall
vara lämpligt utformade med
hänsyn till arbetsuppgiftens
krav och användarens
förutsättningar och behov.
Arbete vid bildskärm (AFS 1998:5), § 10

View Slide

• Webbdirektivet –
 
den europeiska standarden EN 301 549.

• Lagen om tillgänglighet till digital
o
ff
entlig service
https://webbriktlinjer.se/lagkrav/webbdirektivet/

View Slide

USeIt.se

View Slide

Dagens Samhälle

View Slide

Tillgänglighet
 
ett lagkrav även
 
i privat sektor
 
från 28 juni 2025

View Slide

“Visst, men vi behöver
inte tänka på tillgänglighet.

Vår målgrupp för den här appen
har inga handikapp.”

View Slide

Det vet du inte, grabben

View Slide

” ’My speech is slow, and I slur some words’,
 
said Dagmar Munn, a retired wellness
instructor who has amyotrophic lateral
sclerosis.

’Although I am careful to enunciate
 
and carefully pronounce a command,
 
the device stops listening by my second word.
 
I just can’t speak fast enough to satisfy
 
the preset listening time,’ Ms. Munn said.”
NY Times 22 sep 2021

View Slide

Companies have usually engineered voice
technology to cater to uninterrupted speech
from “the average North American English
voice,” said Frank Rudzicz, associate professor
at the University of Toronto who studies
speech, language and arti
fi
cial intelligence.
 
As a result, diverse speech patterns sometimes
sound foreign to voice-enabled devices.

In other words, companies have rarely
prioritized those of us whose speech doesn’t
match what engineers assume to be the norm.
https://www.nytimes.com/2021/09/22/opinion/voice-assistants-accessibility-disability.html
NY Times 22 sep 2021

View Slide


View Slide

Kognitiva funktionsvariationer
Permanent

• Autism / ADHD-spektrum

• Dyslexi

• Utvecklingsstörning

• Hjärntrötthet (permanent?)

Tillfällig

• ”Pollenhjärna”

Situation

• Utvakad på grund av kolikbarn

• Kognitiv överbelastning (stress)

View Slide

“Visst, men vår målgrupp är
genomsnittsanvändarna.”

View Slide


View Slide

Källa: Per Axbom

View Slide

Exkludering på
fl
er sätt

View Slide

Inkludering är mer än anpassning
till funktionsvariationer …
… det kan också gälla innehåll.

View Slide

Förutsätt inte att alla vill
fi
ra Mors dag

View Slide

Förutsätt inte
att alla vill
fi
ra
Fars dag …
 
… ge
möjlighet
 
att avstå
 
(opt-out)

View Slide

Användbarhet
”Tillgänglighet”

View Slide

Användbarhet
”Tillgänglighet” Användbarhet
”Användbarhet”
 
är illusionen
 
av att det
fi
nns
 
en bred normalitet.

View Slide

…inte bara
unga vita
män
Design för alla Användbarhet

View Slide

…inte bara
unga vita
män
Inkluderande
design
Användbarhet

View Slide

Rekommenderad läsning:

Katrine Marçal:
 
Att upp
fi
nna världen

View Slide

Paus till
20.15!

View Slide

Inkludering för text

View Slide

Att tolka och förstå:

View Slide

Minska kognitiv belastning
Läsning är ingen naturlig aktivitet!

View Slide

25 % har svårt att läsa
• På en vecka ökar befolkningen ökar med 1 340
personer. Största delen av ökningen – 1 000
personer – beror på invandring (minus utvandring).
42 % av vuxna
svenskar når
 
inte upp till nivån
”goda läsare”

De
fi
nition: Klara av att
söka efter information i en
lång, komplex text, tolka
innehållet och dra
slutsatser (nivå 3 av 5).
Källa: PIAAC-studien, 2013, SCB (stort antal OECD-länder)

View Slide

25 % har svårt att läsa
• På en vecka ökar befolkningen ökar med 1 340
personer. Största delen av ökningen – 1 000
personer – beror på invandring (minus utvandring).
100 % har ont om tid

View Slide

Verktyg , riktlinjer, resurser
• Utformning: Riktlinjer i Web Content
Accessibility Guidelines (WCAG)

• Innehåll: ISO 24495-1:2023

• Plain language, Part 1:
 
Governing principles and guidelines

• Språkrådet ( isof.se )

• Begriplig text ( begripligtext.se )

View Slide

Klarspråksstandard ISO
• Relevant: läsarna ska få den information de behöver.

• Läsaridentifiering, kontext

• Lätt att hitta i: Läsarna ska lätt kunna hitta
informationen de behöver.

• Textstruktur, rubriker, grafiska element

• Begriplig: Läsarna ska lätt kunna förstå informationen.

• Ordval, klara meningar, respektfull ton, inkluderande språk.

• Användbar: Läsarna ska lätt kunna använda
informationen.

View Slide

Riktlinjer för tillgänglighet:

WCAG 2.1 (2.2, 3.0)

(”vee-kagg”)
A AA AAA

View Slide

• https://www.w3.org/WAI/standards-guidelines/wcag/

View Slide


View Slide

”Gör så här”
Sex posters från gov.uk

View Slide

Men länkar
Det regnar småspik
Regnet känns
 
som kalla spikar

View Slide


View Slide

WCAG om textstorlek
• Minst 16 punkter för huvudsaklig text (brödtext)

• 16 punkter ≈ 21 pixlar

• Ingen de
fi
nitiv riktlinje,
 
men en genomgående rekommendation

View Slide

WCAG om övriga textattribut
• Radavstånd minst 1,5 gånger textens storlek (grad).

• Avstånd mellan stycken minst 2 gånger
 
textens storlek.

• Bokstavsmellanrum minst 0,12 gånger
 
textens storlek.

• Ordmellanrum minst 0,16 gånger textens storlek.

View Slide

contrastchecker.online

accessible-colors.com

contrastchecker.com
Dålig kontrast,
svårläst text

View Slide

WCAG om kontrast
• Textens kontrast mot bakgrund
 
ska vara minst 4,5:1.

• Stor stil,

• större än 18 p, eller

• fetstil större än 14 p

ska ha en kontrast på minimum 3:1.

View Slide


View Slide

Alt-texter
för bilder

View Slide


View Slide

Var försiktig med
text i bild eller på
rörig bakgrund
Sjöstaden

View Slide


View Slide

Bilden mörktonad
under texten

View Slide


View Slide

Sammanfattning
• Funktionsnedsättning kan vara permanent,
tillfällig eller situationsberoende

• Kognitiva nedsättningar vanligare än till
exempel syn

• Inkluderande design skapar tillgänglighet

• Inkludering är mer än funktionsnedsättning

View Slide

Fyra nödvändiga pusselbitar för ”tillgänglighet”
Rätt
inklusion
Rätt
innehåll
Rätt
design
Rätt
kod

View Slide

Nyplings gårdsbutik, Lokrume

View Slide

Det som är bra
för personer
med funktions-
nedsättningar
 
är oftast också
bra för alla.
Nyplings gårdsbutik, Lokrume

View Slide

Titta till nästa gång:
Patricia Moore: Design for all –
 
The Lifespan Design Challenge (YouTube)

25 min

https://www.youtube.com/watch?v=AzjEfozVWj0

View Slide


View Slide

Genomgång
av uppgiften
Mer klarspråk
= ni får inlämningsuppgift
Rubriker,
Lämna in
uppgift
(senast)
Måndag

Oktober
16
Vecka 42
Krångligt
språk,
klarspråk
Måndag

Oktober
9
Vecka 41
Onsdag

Oktober
11 Onsdag

Oktober
18

View Slide

Träff #6 • Inkluderande design ons 4 okt • UX Writing vt 23 • Nackademin

Träff #6 • Inkluderande design ons 4 okt • UX Writing vt 23 • Nackademin

Jonas Söderström
PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

Träff #6 • Inkluderande design ons 4 okt • UX Writing vt 23 • Nackademin

Träff #6 • Inkluderande design ons 4 okt • UX Writing vt 23 • Nackademin

Jonas Söderström PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

Jonas Söderström
PRO