Träff #6 • Inkluderande design • Tor 18 april • UX Writing vt 24 • Nackademin

Slide 1

Slide 1 text

Jonas Söderström • 2024 Inkluderande design som skapar tillgänglighet Trä ff #6 • Torsdag 18 april

Slide 2

Slide 2 text

Jonas Söderström • 2024 Idag • Fråga! • Lite repetition • Story! • Inkluderande design • WCAG …

Slide 3

Slide 3 text

Jonas Söderström • 2024 Lite repetition

Slide 4

Slide 4 text

Jonas Söderström • 2024 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 • 2024 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 • 2024 Innehållet är viktigare än etiketterna!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Jonas Söderström • 2024

Slide 9

Slide 9 text

Jonas Söderström • 2024 ”Constraints”

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Jonas Söderström • 2024 Inkluderande design

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Jonas Söderström • 2024

Slide 15

Slide 15 text

Jonas Söderström • 2024

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Jonas Söderström • 2024 🤷 👵

Slide 18

Slide 18 text

Jonas Söderström • 2024 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 • 2024 ”Signifiers” (”A ff ordances”) Håll här Lägg något här

Slide 20

Slide 20 text

Jonas Söderström • 2024 Inga visuella ledtrådar till att det fi nns lappar Inget ”ta mig!” Ingen text ”tryck här för nummerlapp” … Ingen bild…

Slide 21

Slide 21 text

Jonas Söderström • 2024 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 • 2024 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 • 2024 Ärrvävnad! https://www.dagenssamhalle.se/opinion/gastkronika/en-god-designer-staller-ingen-utanfor/

Slide 24

Slide 24 text

Jonas Söderström • 2024 Apotek

Slide 25

Slide 25 text

Jonas Söderström • 2024 Optiker

Slide 26

Slide 26 text

Jonas Söderström • 2024 Postkontoret

Slide 27

Slide 27 text

Jonas Söderström • 2024 ”Men så svårt är det väl inte…” Jo, det kan vara ett onödigt hinder för alla som…

Slide 28

Slide 28 text

Jonas Söderström • 2024 • … inte kan svenska perfekt • … har immiga glasögon på grund av regn ute • … som är stressade • … ä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! • … som har torr hud

Slide 29

Slide 29 text

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

Slide 30 text

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

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41 text

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

Slide 42 text

Jonas Söderström • 2024 USeIt.se

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Jonas Söderström • 2024 Paus till 15.25!

Slide 46

Slide 46 text

Jonas Söderström • 2024 “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 47

Slide 47 text

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

Slide 48

Slide 48 text

Jonas Söderström • 2024 ” ’My speech is slow, and I slur some words’, said Dagmar Munn, a retired wellness instructor who has ALS. ’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 Interaktions- design!

Slide 49

Slide 49 text

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

Slide 50 text

Jonas Söderström • 2024

Slide 51

Slide 51 text

Jonas Söderström • 2024

Slide 52

Slide 52 text

Jonas Söderström • 2024

Slide 53

Slide 53 text

Jonas Söderström • 2024

Slide 54

Slide 54 text

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

Slide 55 text

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

Slide 56

Slide 56 text

Jonas Söderström • 2024

Slide 57

Slide 57 text

Jonas Söderström • 2024

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Jonas Söderström • 2024

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74 text

Slide 75

Slide 75 text

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

Slide 76 text

Jonas Söderström • 2024 Klarspråksstandard ISO • Relevant: läsarna ska få den information de behöver. • Läsaridenti fi ering, kontext • Lätt att hitta i: Läsarna ska lätt kunna hitta informationen de behöver. • Textstruktur, rubriker, gra fi ska 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 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Jonas Söderström • 2024

Slide 80

Slide 80 text

Jonas Söderström • 2024 Lästips: digitill.se av Per Axbom

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Jonas Söderström • 2024

Slide 84

Slide 84 text

Jonas Söderström • 2024

Slide 85

Slide 85 text

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

Slide 86 text

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

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89 text

Jonas Söderström • 2024

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

Jonas Söderström • 2024

Slide 92

Slide 92 text

Jonas Söderström • 2024

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

Jonas Söderström • 2024 WCAG 2.2.2 Pausa, Stoppa, Dölj Inom nivå A tas också hänsyn till information som när sidan laddas rör på sig, blinkar eller uppdateras automatiskt i mer än fem sekunder. För att alla besökare oavsett förmåga ska få skälig tid på sig gäller att: • Det ska gå att pausa, stoppa eller gömma innehållet; så länge inte rörelserna och blinkandet är nödvändiga delar för att förmedla information.

Slide 95

Slide 95 text

Jonas Söderström • 2024

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101 text

Jonas Söderström • 2024

Slide 102

Slide 102 text

Jonas Söderström • 2024 Tisdag April 23 = Söndag 28 april: Sista inlämning av uppgift 1. Torsdag Maj 2 Torsdag April 25 Tisdag April 30 Inifrån- perspektiv. Inleda text – ingresser. Klarspråk och krångligt språk 1. Genomgång uppgift 1. Rubriker. Vecka 17 Vecka 18