Slide 1

Slide 1 text

Jonas Söderström • 2023 Inledningar – ingresser + Interaktionsdesign Trä ff #8 • Onsdag 11 okt Jonas Söderström • Vt 23 • UX Writing • Nackademin

Slide 2

Slide 2 text

Jonas Söderström • 2023 Lite repetition

Slide 3

Slide 3 text

Jonas Söderström • 2023 En bra rubrik 
 är den som hjälper läsaren 
 att välja bort texter… … som hen inte behöver läsa.

Slide 4

Slide 4 text

Jonas Söderström • 2023 Rubriken bör ha • Nyckelord för område eller ämne • Verb! • Konkret huvudpunkt som vi tror 
 är direkt relevant för vår målgrupp • Vad kan påverka läsaren? 
 (What’s in it for me?) • Fakta, beslut, utveckling • Känslomässigt engagemang • Aktiverande tilltal: ”Vi”, ”du” …

Slide 5

Slide 5 text

Jonas Söderström • 2023 Jo, en rubrik kan vara lång: 
 fyra eller fem rader 
 på mobilskärmen

Slide 6

Slide 6 text

Jonas Söderström • 2023 … men den ska vara effektiv, inte pratig eller långrandig.

Slide 7

Slide 7 text

Jonas Söderström • 2023 Lägg viktiga ord i främre delen av meningen! (Frontloading)

Slide 8

Slide 8 text

Jonas Söderström • 2023 Gör gärna rubriker långa, om det behövs …men:

Slide 9

Slide 9 text

Jonas Söderström • 2023 … skriv korta inledningar! Gör tröskeln in i texten så låg som möjligt! Få och korta meningar! 
 Inga bisatser! 
 Enkla och korta ord!

Slide 10

Slide 10 text

Jonas Söderström • 2023 Gör tröskeln in i texten 
 så låg som möjligt! Få och korta meningar! 
 Inga bisatser! 
 Enkla och korta ord!

Slide 11

Slide 11 text

Jonas Söderström • 2023 Lägg fram huvudbudskapet 
 så tidigt som möjligt! Skippa allmän intro (”mjukt”)! 
 Låt bakgrund/historia (”djupt”) 
 eller förbehåll komma senare!

Slide 12

Slide 12 text

Jonas Söderström • 2023 ”Mjukstart” Ofta när jag skriver upptäcker jag 
 efteråt att inledningen kan skippas. Jag tänker att jag måste linda in 
 det jag egentligen vill säga, 
 börja lite mjukt och allmänt, 
 och det blir ofta tråkigt. Oline Stig

Slide 13

Slide 13 text

Jonas Söderström • 2023 Starta inte ”mjukt” Varför använda en köksplanerare? Att bygga ett nytt kök är en stor dröm för många, men det kan vara en utmaning att hitta ett kök som passar din stil och dina behov. Med en köksplanerare blir det enklare för dig att skapa drömköket precis som du vill ha det. Elgiganten > Meny > Epoq Kök & Tvättstuga > Epoq Designer - Rita ditt eget kök

Slide 14

Slide 14 text

Jonas Söderström • 2023 Starta inte ”mjukt” Varför använda en köksplanerare? Att bygga ett nytt kök är en stor dröm för många, men det kan vara en utmaning att hitta ett kök som passar din stil och dina behov. Med en köksplanerare blir det enklare för dig att skapa drömköket precis som du vill ha det. Elgiganten > Meny > Epoq Kök & Tvättstuga > Epoq Designer - Rita ditt eget kök

Slide 15

Slide 15 text

Jonas Söderström • 2023 Direkt på nyttan istället! Med vår köksplanerare kan du skapa drömköket precis som du vill ha det. Elgiganten > Meny > Epoq Kök & Tvättstuga > Epoq Designer - Rita ditt eget kök

Slide 16

Slide 16 text

Jonas Söderström • 2023 Starta inte ”mjukt” Varför använda en köksplanerare? Att bygga ett nytt kök är en stor dröm för många, men det kan vara en utmaning att hitta ett kök som passar din stil och dina behov. Med en köksplanerare blir det enklare för dig att skapa drömköket precis som du vill ha det. Elgiganten > Meny > Epoq Kök & Tvättstuga > Epoq Designer - Rita ditt eget kök

Slide 17

Slide 17 text

Jonas Söderström • 2023 Jag bad ChatGPT om hjälp… Hur ska jag skriva en krönika? ”Att skriva en krönika kan vara en utmaning. Men med rätt verktyg och strategi kan vem som helst skriva en engagerande och informativ krönika. (…)” Hur kan jag skilja en text skriven av en människa och en skriven av en maskin? ”Att skilja mellan texter som är skrivna av människor och de som är genererade av maskiner kan vara en utmaning. (…)”

Slide 18

Slide 18 text

Jonas Söderström • 2023 Mjukstart

Slide 19

Slide 19 text

Jonas Söderström • 2023 Skolplattformen Ditt barn och ditt barns lärare använder Skolplattformen dagligen i den kommunala grundskolan. Där finns verktyg som underlättar planering och lärande. Här finns viktig information från ditt barns skola, som schema, närvaro, bedömning/betyg kontaktuppgifter till lärare och annan personal. Bla, bla, bla

Slide 20

Slide 20 text

Jonas Söderström • 2023 Skolplattformen Här finns viktig information från ditt barns skola, som schema, närvaro, bedömning/betyg kontaktuppgifter till lärare och annan personal. Bla

Slide 21

Slide 21 text

Jonas Söderström • 2023 Skolplattformen Här finns schema, närvaro, bedömning/betyg, kontaktuppgifter till lärare och annan personal, samt annan viktig information. Den konkreta användar- nyttan först!

Slide 22

Slide 22 text

Jonas Söderström • 2023 Välkommen till test av kommunernas arbete med tillgänglighet! Fokus delaktighet består av frågor om hur kommunerna arbetar strategiskt med tillgänglighet 
 för personer med funktionsnedsättning. 
 Frågorna berör både regionernas arbetsgivaransvar och verksamhet gentemot medborgarna. När ni har svarat på alla frågor får ni en samman- fattning. Den visar vad ni kan eller bör göra för att förbättra ert arbete. Sammanfattningen kan vara 
 ett stöd för prioriteringar och beslut om åtgärder. Analytiskt Användar- nytta

Slide 23

Slide 23 text

Jonas Söderström • 2023 Välkommen till test av kommunernas arbete med tillgänglighet! Fokus delaktighet är ett test som kartlägger 
 vad kommunen kan eller bör göra för att förbättra 
 för personer med funktionsnedsättning – 
 både medborgare och anställda i kommunen. När ni har svarat på alla frågor får ni en samman- fattning som ett stöd för beslut om vad ni ska göra. Användar- nytta!

Slide 24

Slide 24 text

Jonas Söderström • 2023 Den upp-och-nervända pyramiden • Det viktigaste först… • …och sedan allt i fallande viktighetsordning. • Texten kan strykas bakifrån

Slide 25

Slide 25 text

Jonas Söderström • 2023 Byråkratens sätt att skriva 1. Kommunen uppmärksammade redan 2016 problemen med… 2. En utredning tillsattes… 3. I andra kommuner har man… 4. Visserligen… 5. Men andra skäl talar för… 6. Fullmäktige har 2023-01-02 tagit som sitt beslut att… 7. … avska ff a alla daghem. ”Redan de gamla grekerna …”

Slide 26

Slide 26 text

Jonas Söderström • 2023 Att skriva för läsaren 27 7 Daghemmen avska ff as. 6 Det beslutade fullmäktige den 2 januari. 5 Skälen är… 4 Visserligen… 3 Andra kommuner har… 2 Förslaget kommer från en utredning … 1 … som tillsattes 2004.

Slide 27

Slide 27 text

Jonas Söderström • 2023 ”Redan de gamla grekerna …” Mjukstart

Slide 28

Slide 28 text

Jonas Söderström • 2023 Interaktionsdesign

Slide 29

Slide 29 text

Jonas Söderström • 2022 Vadå interaktionsdesign? 🤔

Slide 30

Slide 30 text

Jonas Söderström • 2022 Vadå IxD? 🤔

Slide 31

Slide 31 text

Jonas Söderström • 2022 Vad lätt att hitta! Vad lätt att förstå! Vad snyggt! Vad häftigt! Vad enkelt! Så lätt att göra!

Slide 32

Slide 32 text

Jonas Söderström • 2022 Se Uppleva Känna Hitta Tolka Förstå Agera Handla Göra Visuell design Infor- 
 mations- 
 design Inter- 
 aktions- 
 design Användarens fokus

Slide 33

Slide 33 text

Jonas Söderström • 2022 Färg, form, linje, skuggor …

Slide 34

Slide 34 text

Jonas Söderström • 2022 Vilka rubriker ska vi ha? Hur många? I villken ordning? 
 Vad placeras under varje rubrik? Information Service Tjänster Om Process

Slide 35

Slide 35 text

Jonas Söderström • 2022 Och vad kan man göra? Information Service Tjänster Om Process • Vad kan man göra med menyn? • Hur reagerar den vid mouseover? • Om man klickar på den? Tjänster • Går man till en annan sida? • Fälls det ut en undermeny? •Fälls den ihop eller stannar? • Om man klickar på en annan tab?

Slide 36

Slide 36 text

Jonas Söderström • 2022 Akademiska de fi nitioner ”utforma platser för mänsklig kommunikation och interaktion” Winograd ”frågorna varför och hur i våra dagliga interaktioner när vi använder datorbaserade system” Thackara ”konsten att underlätta interaktioner mellan människor genom produkter och tjänster ” Dan Sa ff er

Slide 37

Slide 37 text

Jonas Söderström • 2022 Praktisk definition – 
 utgå från användaren

Slide 38

Slide 38 text

Jonas Söderström • 2022 Hund Katt Husdjur Välj husdjur Hund Katt V Husdjur Hund Katt X Katt Hund Varg Tiger

Slide 39

Slide 39 text

Jonas Söderström • 2022 Speci fi ka interaktions-sätt

Slide 40

Slide 40 text

Jonas Söderström 2023 Vad enkelt! Så lätt att göra! Så bra – postadressen hämtades direkt när jag fyllt i postnumret ’’ Snyggt, den bytte till si ff ertangenterna när jag klickade i fältet för telefonnummer! ’’ Automatisering – besparar oss ”onödig” interaktion!

Slide 41

Slide 41 text

Jonas Söderström • 2022 Ordningsföljd

Slide 42

Slide 42 text

Jonas Söderström • 2022 Välj försäkring Bas Stor V Husdjur Hund Katt X

Slide 43

Slide 43 text

Jonas Söderström • 2022 Välj försäkring Bas Stor V Husdjur Hund Katt X

Slide 44

Slide 44 text

Jonas Söderström • 2022

Slide 45

Slide 45 text

Jonas Söderström • 2022

Slide 46

Slide 46 text

Jonas Söderström • 2022 Constraints ≈ Saker vi hindrar användaren att göra

Slide 47

Slide 47 text

Jonas Söderström • 2022 Inaktiv

Slide 48

Slide 48 text

Jonas Söderström • 2022 Aktiv

Slide 49

Slide 49 text

Jonas Söderström • 2022 Den som inte tar bort luddet 
 från torktumlaren ska dö!

Slide 50

Slide 50 text

Jonas Söderström • 2022

Slide 51

Slide 51 text

Jonas Söderström • 2022

Slide 52

Slide 52 text

Jonas Söderström • 2022 Prioritering - hierarki ≈ Saker vi ”nudgar” användaren att göra

Slide 53

Slide 53 text

Jonas Söderström • 2022 Ja, gör det! Nej, avbryt

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Jonas Söderström • 2022 När hierarkin blir fel…

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

Jonas Söderström • 2022 Nu vill jag göra … Börjar använda Hur ser 
 det här ut? Var finns det 
 jag söker? Det går inte! 🤬 Kan inte hitta – sticker 😠 Fult, konstigt – sticker 🙁 När dålig ui-design ger användarna en dålig upplevelse 


Slide 67

Slide 67 text

Jonas Söderström • 2022 Interaktionsdesign Smal Bred Speci fi ka interaktions- detaljer Allt arbete med interaktiva (digitala?) produkter

Slide 68

Slide 68 text

Jonas Söderström • 2022 Interaktionsdesign Smal Bred Speci fi ka interaktions- detaljer Allt arbete med interaktiva (digitala?) produkter UX

Slide 69

Slide 69 text

Jonas Söderström • 2022 Ergonomi

Slide 70

Slide 70 text

Jonas Söderström • 2022 Från 145 till 313 klick Godkänna ny vapenlicens

Slide 71

Slide 71 text

Jonas Söderström • 2022

Slide 72

Slide 72 text

Jonas Söderström • 2022

Slide 73

Slide 73 text

Jonas Söderström • 2022

Slide 74

Slide 74 text

Jonas Söderström • 2022

Slide 75

Slide 75 text

Jonas Söderström • 2022

Slide 76

Slide 76 text

Jonas Söderström • 2022 Några interaktionsprinciper

Slide 77

Slide 77 text

Jonas Söderström • 2022 Anpassa till användarna och till verksamheten

Slide 78

Slide 78 text

Jonas Söderström • 2022 Gör tydligt 
 i vilket läge 
 systemet är

Slide 79

Slide 79 text

Jonas Söderström • 2022 Information Service Om Process Tjänster Exempel: Menyn visar alltid var användaren är

Slide 80

Slide 80 text

Jonas Söderström • 2022 Vara Frakt Betalning Bekräfta Försäkring Flöden kräver normalt tre design-varianter 
 (färg, form, typ)

Slide 81

Slide 81 text

Jonas Söderström • 2022

Slide 82

Slide 82 text

Jonas Söderström • 2022 X Ofta tar vi bort huvudnavigation i ett flöde – för att hålla kvar/styra användaren. 
 Men det ska alltid gå att hoppa ur flödet - till exempel med ”Stäng (x)”

Slide 83

Slide 83 text

Jonas Söderström • 2022 Vara Frakt Betalning Bekräfta Försäkring Frakt Betalning Försäkring

Slide 84

Slide 84 text

Jonas Söderström • 2022

Slide 85

Slide 85 text

Jonas Söderström • 2022 Statusmeddelanden Tjänsten/ systemets status Andra användares status Användarens status

Slide 86

Slide 86 text

Jonas Söderström • 2022 Ge användaren kontroll…

Slide 87

Slide 87 text

Jonas Söderström • 2022 Till betalning > < Tillbaka till frakt Vara Frakt Betalning Bekräfta Försäkring Ångra/backa är nedtonad Primär action är tydligast …som möjlighet att backa.

Slide 88

Slide 88 text

Jonas Söderström • 2022 Till betalning > < Tillbaka till frakt Hitta försäkring Om det finns flera alternativ framåt får de olika vikt i designen

Slide 89

Slide 89 text

Jonas Söderström • 2022 UX-text hjälper till Till betalning > Avbryt < Tillbaka till frakt Vara Frakt Betalning Bekräfta Försäkring Lugn! Du kan ändra 
 varan även i nästa steg

Slide 90

Slide 90 text

Jonas Söderström • 2022 Automatisera repetitiva uppgifter – minska belastning

Slide 91

Slide 91 text

Jonas Söderström • 2022

Slide 92

Slide 92 text

Jonas Söderström • 2022 Mikro-friktioner Ibland ska man inte göra det för enkelt

Slide 93

Slide 93 text

Jonas Söderström • 2022 Avsluta-knappen i Zoom fl yttar sig, 
 för att förhindra att man avslutar av missstag.

Slide 94

Slide 94 text

Jonas Söderström • 2022 Superenkel bekräftelse med ansikts- igenkänning … men av fel vara. https://www.linkedin.com/posts/sara-wennersten_sl- tra fi kfaemrvaltningen-ux-activity-6839490107892871168-ybqm

Slide 95

Slide 95 text

Jonas Söderström • 2022 Gör det svårt att göra fel

Slide 96

Slide 96 text

Jonas Söderström • 2022 Gör det enkelt att ångra /rätta

Slide 97

Slide 97 text

Jonas Söderström • 2022 Medge flera användningssätt Gör inte olika – hitta standarder

Slide 98

Slide 98 text

Jonas Söderström • 2022

Slide 99

Slide 99 text

Jonas Söderström • 2022 Takeaways: Anpassa till användarna 
 och till verksamheten

Slide 100

Slide 100 text

Jonas Söderström • 2022 Takeaways: • Gör tydligt i vilket läge systemet är • Ge användaren maximal kontroll • Automatisera repetitiva eller enkla uppgifter – minska belastning • Gör det svårt / omöjligt att göra fel • Gör det enkelt / möjligt att ångra eller rätta • Använd mikrofriktioner för att motverka ”slarvfel” • Respektera/använd närhetens lag och likhetens lag • Medge fl er sätt att interagera

Slide 101

Slide 101 text

Jonas Söderström • 2023 Titta framåt! Något du vill att vi ska ta upp? Det här har jag på min lista: 
 Ton, Länkar, Inifrånperspektiv, Tester, Målgrupper, Flöden, SEO, Kundresor, Typografi, Textdesign Miniuppgift:

Slide 102

Slide 102 text

Jonas Söderström • 2023 Genomgång av uppgiften Mer klarspråk = ni får inlämningsuppgift Måndag Oktober 16 Vecka 42 Ton, Inifrån- perspektiv Måndag Oktober 23 Onsdag Oktober 18 Vecka 43 Länkar, Prototyper, Sista inlämning Onsdag Oktober 25