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