Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Jonas Söderström • 2023 Idag • Lite repetition • Story! • Inkluderande design • WCAG …

Slide 3

Slide 3 text

Jonas Söderström • 2022 Lite repetition

Slide 4

Slide 4 text

Jonas Söderström • 2023 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.

Slide 5

Slide 5 text

Jonas Söderström • 2023 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

Slide 6

Slide 6 text

Jonas Söderström • 2023 Innehållet 
 är viktigare än etiketterna!

Slide 7

Slide 7 text

Jonas Söderström • 2023 Ikoner ska alltid ha text. (så gott som)

Slide 8

Slide 8 text

Jonas Söderström • 2023

Slide 9

Slide 9 text

Jonas Söderström • 2023 ”Signifiers” ”Constraints”

Slide 10

Slide 10 text

Jonas Söderström • 2023 ”Constraints”

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Jonas Söderström • 2023 Inkluderande design

Slide 13

Slide 13 text

Jonas Söderström • 2023 Tryck på skärmen! ’’ ’’

Slide 14

Slide 14 text

Jonas Söderström • 2023

Slide 15

Slide 15 text

Jonas Söderström • 2023

Slide 16

Slide 16 text

Jonas Söderström • 2023 Tryck på skärmen! 🤷

Slide 17

Slide 17 text

Jonas Söderström • 2023 🤷 👵

Slide 18

Slide 18 text

Jonas Söderström • 2023 Röd signalfärg Synliga lappar Gul signalfärg Sträcker sig mot användaren ”Ta mig!”

Slide 19

Slide 19 text

Jonas Söderström • 2023 ”Signifiers” (”A ff ordances”) Håll här Lägg något här

Slide 20

Slide 20 text

Jonas Söderström • 2023 ”Signifiers??” ??? Huh? Va?

Slide 21

Slide 21 text

Jonas Söderström • 2023 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!

Slide 22

Slide 22 text

Jonas Söderström • 2023 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!

Slide 23

Slide 23 text

Jonas Söderström • 2023 Apotek

Slide 24

Slide 24 text

Jonas Söderström • 2023 Optiker

Slide 25

Slide 25 text

Jonas Söderström • 2023 Postkontoret

Slide 26

Slide 26 text

Jonas Söderström • 2023 ”Men så svårt är det väl inte…”

Slide 27

Slide 27 text

Jonas Söderström • 2023 • … 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

Slide 28

Slide 28 text

Jonas Söderström • 2023 "….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"

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Jonas Söderström • 2023 Funktionsvariation Jonas Söderström • 2023

Slide 31

Slide 31 text

Jonas Söderström • 2023 Funktionshinder Individens förmågor Omvärldens krav { Funktions- hinder Jonas Söderström • 2023

Slide 32

Slide 32 text

Jonas Söderström • 2023 Inkluderande design – 
 att minska trösklar 
 i omvärlden Individens förmågor Omvärldens krav Jonas Söderström • 2023

Slide 33

Slide 33 text

Jonas Söderström • 2023 Tillgänglighet är ett 
 mått på slutresultatet: 
 bättre eller sämre Individens förmågor Omvärldens krav Jonas Söderström • 2023

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Jonas Söderström 2023 Visuell design Infor- 
 mations- 
 design Inter- 
 aktions- 
 design DESIGN (”UI”) UX 🙁 😀 🙂

Slide 36

Slide 36 text

Jonas Söderström 2023 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

Slide 37

Slide 37 text

Jonas Söderström 2023 Visuell 
 design 
 Tydliga kontraster etc Informations- 
 design Enkelt 
 språk 
 etc Interaktions- 
 design Stora klickytor etc Inkluderande design Tillgänglighet 🙁 😀 🙂

Slide 38

Slide 38 text

Jonas Söderström • 2023 Inkluderande design – 
 att minska trösklar 
 i omvärlden Individens förmågor Omvärldens krav Jonas Söderström • 2023

Slide 39

Slide 39 text

Jonas Söderström • 2023 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 Jonas Söderström • 2023

Slide 40

Slide 40 text

Jonas Söderström • 2023 • Webbdirektivet – 
 den europeiska standarden EN 301 549. • Lagen om tillgänglighet till digital o ff entlig service Jonas Söderström • 2023 https://webbriktlinjer.se/lagkrav/webbdirektivet/

Slide 41

Slide 41 text

Jonas Söderström • 2023 USeIt.se

Slide 42

Slide 42 text

Jonas Söderström • 2023 Dagens Samhälle

Slide 43

Slide 43 text

Jonas Söderström • 2023 Tillgänglighet 
 ett lagkrav även 
 i privat sektor 
 från 28 juni 2025

Slide 44

Slide 44 text

Jonas Söderström • 2023 “Visst, men vi behöver inte tänka på tillgänglighet. Vår målgrupp för den här appen har inga handikapp.”

Slide 45

Slide 45 text

Jonas Söderström • 2023 Det vet du inte, grabben

Slide 46

Slide 46 text

Jonas Söderström • 2022 ” ’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

Slide 47

Slide 47 text

Jonas Söderström • 2023 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

Slide 48

Slide 48 text

Jonas Söderström • 2023

Slide 49

Slide 49 text

Jonas Söderström • 2023

Slide 50

Slide 50 text

Jonas Söderström • 2023

Slide 51

Slide 51 text

Jonas Söderström • 2023

Slide 52

Slide 52 text

Jonas Söderström • 2023 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)

Slide 53

Slide 53 text

Jonas Söderström • 2023 “Visst, men vår målgrupp är genomsnittsanvändarna.”

Slide 54

Slide 54 text

Jonas Söderström • 2023

Slide 55

Slide 55 text

Jonas Söderström • 2023

Slide 56

Slide 56 text

Jonas Söderström • 2022 Källa: Per Axbom

Slide 57

Slide 57 text

Jonas Söderström • 2022 Källa: Per Axbom

Slide 58

Slide 58 text

Jonas Söderström • 2023 Exkludering på fl er sätt

Slide 59

Slide 59 text

Jonas Söderström • 2023 Inkludering är mer än anpassning till funktionsvariationer … … det kan också gälla innehåll.

Slide 60

Slide 60 text

Jonas Söderström • 2023 Förutsätt inte att alla vill fi ra Mors dag

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Jonas Söderström • 2023 Användbarhet ”Tillgänglighet”

Slide 63

Slide 63 text

Jonas Söderström • 2023 Användbarhet ”Tillgänglighet” Användbarhet ”Användbarhet” 
 är illusionen 
 av att det fi nns 
 en bred normalitet.

Slide 64

Slide 64 text

Jonas Söderström • 2023 …inte bara unga vita män Design för alla Användbarhet

Slide 65

Slide 65 text

Jonas Söderström • 2023 …inte bara unga vita män Inkluderande design Användbarhet

Slide 66

Slide 66 text

Jonas Söderström • 2023 Rekommenderad läsning: Katrine Marçal: 
 Att upp fi nna världen

Slide 67

Slide 67 text

Jonas Söderström • 2023 Paus till 20.15!

Slide 68

Slide 68 text

Jonas Söderström • 2023 Inkludering för text

Slide 69

Slide 69 text

Jonas Söderström • 2023 Att tolka och förstå:

Slide 70

Slide 70 text

Jonas Söderström • 2023 Minska kognitiv belastning Läsning är ingen naturlig aktivitet!

Slide 71

Slide 71 text

Jonas Söderström • 2023 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)

Slide 72

Slide 72 text

Jonas Söderström • 2023 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

Slide 73

Slide 73 text

Jonas Söderström • 2023 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 )

Slide 74

Slide 74 text

Jonas Söderström • 2023 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.

Slide 75

Slide 75 text

Jonas Söderström • 2023 Riktlinjer för tillgänglighet: WCAG 2.1 (2.2, 3.0) (”vee-kagg”) A AA AAA

Slide 76

Slide 76 text

Jonas Söderström • 2023 • https://www.w3.org/WAI/standards-guidelines/wcag/

Slide 77

Slide 77 text

Jonas Söderström • 2023

Slide 78

Slide 78 text

Jonas Söderström • 2023 ”Gör så här” Sex posters från gov.uk

Slide 79

Slide 79 text

Jonas Söderström • 2023 Men länkar Det regnar småspik Regnet känns 
 som kalla spikar

Slide 80

Slide 80 text

Jonas Söderström • 2023

Slide 81

Slide 81 text

Jonas Söderström • 2023

Slide 82

Slide 82 text

Jonas Söderström • 2023 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

Slide 83

Slide 83 text

Jonas Söderström • 2023 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.

Slide 84

Slide 84 text

Jonas Söderström • 2023 contrastchecker.online accessible-colors.com contrastchecker.com Dålig kontrast, svårläst text

Slide 85

Slide 85 text

Jonas Söderström • 2023 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.

Slide 86

Slide 86 text

Jonas Söderström • 2023

Slide 87

Slide 87 text

Jonas Söderström • 2023

Slide 88

Slide 88 text

Jonas Söderström • 2023 Alt-texter för bilder

Slide 89

Slide 89 text

Jonas Söderström • 2023

Slide 90

Slide 90 text

Jonas Söderström • 2023

Slide 91

Slide 91 text

Jonas Söderström • 2023 Var försiktig med text i bild eller på rörig bakgrund Sjöstaden

Slide 92

Slide 92 text

Jonas Söderström • 2023

Slide 93

Slide 93 text

Jonas Söderström • 2023 Bilden mörktonad under texten

Slide 94

Slide 94 text

Jonas Söderström • 2023

Slide 95

Slide 95 text

Jonas Söderström • 2023

Slide 96

Slide 96 text

Jonas Söderström • 2023

Slide 97

Slide 97 text

Jonas Söderström • 2023

Slide 98

Slide 98 text

Jonas Söderström • 2023 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

Slide 99

Slide 99 text

Jonas Söderström • 2023 Fyra nödvändiga pusselbitar för ”tillgänglighet” Rätt inklusion Rätt innehåll Rätt design Rätt kod

Slide 100

Slide 100 text

Jonas Söderström • 2023 Nyplings gårdsbutik, Lokrume

Slide 101

Slide 101 text

Jonas Söderström • 2023 Det som är bra för personer med funktions- nedsättningar 
 är oftast också bra för alla. Nyplings gårdsbutik, Lokrume

Slide 102

Slide 102 text

Jonas Söderström • 2023 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

Slide 103

Slide 103 text

Jonas Söderström • 2023

Slide 104

Slide 104 text

Jonas Söderström • 2023 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