Träff #13 • Flöden • 17 jan • ht 22 UX Writing • Nackademin

Jonas Söderström • 2023
Flöden, uppgift
 
+ UX research
UX writing • Trä
ff
#12 • 17 januari
Jonas Söderström • Nackademin • Ht 2022 • Kvartsfart

View Slide

Lite repetition: konkret först,
övergripande sedan

View Slide

Tandvårdsförsäkringen delas upp i
två delar, bastandvård respektive
protetik och tandreglering. Med
bastandvård menas undersökning,
förebyggande tandvård, de
vanligaste behandlingarna som
lagning av hål, tanduttagning och
rotbehandlingar samt akuttandvård.
I den del som kallas protetik och
tandreglering ingår bland annat
behandlingar med bryggor och
kronor, avtagbara proteser,
implantat och olika typer av
tandställningar.
 
Tandvårdsförsäkringen delas upp
 
i två delar, bastandvård respektive
protetik och tandreglering.

Med bastandvård menas under-
sökning, förebyggande tandvård,
 
de vanligaste behandlingarna som

implantat och olika typer
 
av tandställningar.

View Slide

Tandvårdsförsäkringen delas upp
 
i två delar, bastandvård respektive
protetik och tandreglering.

Med bastandvård menas under-
sökning, förebyggande tandvård,
 
de vanligaste behandlingarna som

implantat och olika typer
 
av tandställningar.

Tandvårdsförsäkringen har två
delar:

Dels undersökning, förebyggande
tandvård, de vanligaste
behandlingarna som lagning av hål,
tanduttagning och rotbehandlingar
samt akuttandvård. Detta kallas i
försäkringen bastandvård.

Dels bryggor och kronor, avtagbara
proteser, implantat och olika typer
av tandställningar. Detta kallas i
försäkringen protetik och
tandreglering.

View Slide

Tandvårdsförsäkringen har två
delar:

Dels undersökning, förebyggande
samt akuttandvård. Detta kallas i
försäkringen bastandvård.

Dels bryggor och kronor, avtagbara
proteser, implantat och olika typer
av tandställningar. Detta kallas i
försäkringen protetik och
tandreglering.

Tandvårdsförsäkringen täcker dels
undersökning, förebyggande
samt akuttandvård. Detta kallas
bastandvård.

Den täcker också bryggor och
implantat och olika typer av
tandställningar [men med ett lägre
belopp]. Detta kallas i försäkringen
för protetik och tandreglering.

View Slide

Juridiskt språk
I enlighet med Miljöbalken 26 kap §§ 5–9, Förordningen om miljöfarlig
verksamhet §§ 32–33 (punkt 1 och 2), samt Lagen om viten § 5 (punkt
3) har Miljö- och hälsoskyddsnämnden beslutat att XYZ Fastighets AB
senast en månad efter att företaget tagit del av detta beslut ska låta
utföra bullermätning.

View Slide

Ni måste undersöka bullret på Fredsgatan.
 
Annars kostar det er 25.000 kronor i månaden.

Senaste en månad efter att ni tagit del av detta beslut måste ni

1) låta en SWEDAC-ackrediterad akustiker mäta buller i lägenheten 502
på Fredsgatan 9 och skriftligt redovisa resultatet av undersökningen.

2) Om bullermätningen visar att Socialstyrelsens normer överskrids, ska
ni skriftligen ge förslag på åtgärder för att minska bullret. Även detta
måste göras senast en månad efter att ni tagit del av detta beslut.

3) För varje påbörjad månad som punkterna 1 eller 2 inte är uppfyllda,
kommer ni att få betala ett vite på 25 000 kronor.

Den juridiska grunden för detta är Miljöbalken 26 kap §§ etc etc,
Förordningen om miljöfarlig verksamhet §§ etc (punkt 1 och 2), samt
Lagen om viten §§§ (punkt 3).

View Slide

Enligt paragraf 33 i Förordningen om miljöfarlig
verksamhet och hälsoskydd (1998:899) ska en bostad ska
”ge betryggande skydd mot värme, kyla, drag, fukt,
buller, radon, luftföroreningar och andra liknande
störningar”.
En bostad ska ”ge betryggande skydd mot värme, kyla,
drag, fukt, buller, radon, luftföroreningar och andra
liknande störningar”. Så säger paragraf 33 i Förordningen
om miljöfarlig verksamhet och hälsoskydd (1998:899).

View Slide

Förbundet har enligt 11 kapitlet, 3 paragrafen i stadgar
möjlighet att utesluta en medlem, under förutsättning
att denne inte betalat medlemsavgiften. Undantag är
om …
Betalar du inte medlemsavgiften blir du utesluten.
Undantag är om ...

(Sist i texten:)

Bestämmelserna om uteslutning
fi
nns i stadgarnas
kapitel 11, paragraf 3.

View Slide

Snyggt exempel på ton

View Slide


View Slide

Flöden och
interaktionskommandon
(Först lite repetition)

View Slide

 
Vad lätt att hitta!

Så lätt att förstå!
Vad snyggt!

Vad häftigt!
Vad enkelt!

Så lätt att göra!

View Slide

Visuell
design
Infor-
 
mations-
 
design
Inter-
 
aktions-
 
design
Se,
uppleva,
känna
Hitta,
tolka,
förstå
Agera,
handla,
beställa
Användarens
upplevelse

View Slide

Vad enkelt att
anmäl sig!
Toppen!
Hittar
sajten
Det här ser snyggt,
coolt, seriöst
 
ut!
Ah, här finns
kvällskursen
 
om vikingatiden!
UX – vad människor
upplever när de
använder din
 
app, sajt, tjänst
😀

View Slide

Men WTF … varför
kan jag inte hitta?
Fula färger…
tråkiga bilder….
&%£#! 11
klick för att komma
vidare!?!

View Slide

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
 

View Slide

Interaktionsdesign?

View Slide

Interaktionsdesign
 
i smal bemärkelse
Hund Katt
Husdjur
Välj husdjur
Hund
Katt
V
Husdjur
Hund
Katt
X
Katt Iller Råtta
Hund
H
Husdjur
Hund

View Slide

Informationsdesign
(inklusive ux-text)
Husdjur
Välj husdjur
Hund
Katt
V I
bokstavs-
ordning?
Är ”husdjur” ett bra
samlande begrepp?
Fiskar
Iller
Papegoja
Råtta
Undulat
Eller lägga de
vanligaste
först?
”Fiskar” … eller
”Akvariefiskar”?

View Slide

> > > >
Interaktionsdesign i ett vidare perspektiv:
Flöden

View Slide

Inter-
 
aktions-
 
design
Visuell
design
Infor-
 
mations-
 
design
Att
designa
flöden

View Slide

Vara Frakt Betalning Bekräfta
Försäkring
Grafisk design: Flöden kräver
normalt tre designer
 
(färg, form, typ)
Interaktions-
design:
 
Hur många
steg är
rimligt?
Informations-
design:

Vad kallar vi
de olika
stegen?

Får de rum?
Både och:

I vilken ordning kommer de?
Vad innehåller varje steg?

View Slide


View Slide

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)”

View Slide

Och ett eventuellt alternativ
har en tyngd mellan primär och
ångra
Till betalning >
< Tillbaka till frakt Alternativ
Försäkring
Ångra/backa är nedtonad Primär action är tydligast

View Slide

Till betalning >
< Tillbaka till frakt Hitta försäkring
Försäkring
Knappar ska kunna förstås utan sin kontext.

Text på knappar ska förklara vad de gör –
 
inte bara ”ja” / ”nej”, utan
 
”ja, ladda upp bild” /”nej, ladda inte upp bild”

View Slide

”Förtroendeskapare”
Till betalning >
Avbryt < Tillbaka till frakt
Försäkring
Lugn! Du kan ändra
 
varan även i nästa steg

View Slide

Aktiveras inte förrän man gjort minst ett val

View Slide

Vara
Frakt
Betalning
Bekräfta
Försäkring
Primär aktion
Avbryt
Alternativ

View Slide


View Slide

Flöden är där
problem händer (1)

View Slide

Till betalning >
Försäkring
Lugn! Du kan ändra
 
Vill du verkligen avbryta köpet?
Avbryt
Fortsätt

View Slide

Till betalning >
Försäkring
Lugn! Du kan ändra
 
Ja
Nej

View Slide

Till betalning >
Försäkring
Lugn! Du kan ändra
 
Ja, avbryt köpet
Nej, fortsätt med
köpet

View Slide

Avbryt avbrytningen
Avbryt köpet

View Slide


View Slide

Ja, avbryt Nej, fortsätt
avbryter

View Slide

Ännu tydligare:
Jag vill stoppa köpet.
Jag vill gå vidare
 
och välja betalsätt.
Vill du avbryta köpet?
Knappar ska vara begripliga även utan sin kontext!

View Slide

Flöden är där
problem händer (2)

View Slide

Go to checkout
Pay
Login

View Slide

Login
E-mail
Password
Log In Register
Forgot password?

View Slide

Login
E-mail
Password
Log In Register
Forgot password?
Jag är inte här för att
starta en relation

View Slide

Logga in
E-mail
Password
Log In Register
Forgot password?
45 % hade multipla inloggningar

160.000 nya passwords/dag

< 20 % av dessa köpte

View Slide

Go to checkout
Login

View Slide

Login
E-mail
Password
Log In Register
Forgot password?

View Slide

Continue
You do not need to create an account to make
purchases on our site.
 
Simply click Continue to proceed to checkout.
To make your future purchases even faster,
 
you can create an account during checkout.
E-mail
Password
Log In
Forgot password?

View Slide

Avslutade köp
+45 %
Ökad försäljning
$ 300 miljoner

View Slide

https://articles.uie.com/three_hund_million_button/

View Slide

> > >
Trigger Förtroende-
 
skapare
Backa /
 
gå vidare
Bekräftelse
Underhands-
 
meddelande
>
(Ny) Status
(Möjligt
 
felmeddelande)
Temporära
Permanenta

View Slide

”Kan man tänka
’aktiverande tilltal’
på fler ställen
 
än rubriker?”

View Slide

”Aktiverande tilltal”
You pay by
 
FINANCE
You’ll pay with
 
CARD
Pay by
 
INVOICE

View Slide

Your order

View Slide

Tvinga fram verben!

View Slide

”Vad är det där …”
• Någon står bredvid dig, pekar på skärmen och frågar
 
"vad är det där för länk?" (eller knapp, eller sida).

• Du svarar "Det är länken (sidan/knappen) för att .... "

• Det som kommer efter "att" i den satsen funkar ofta
 
som rubbe, eller länk, eller text på knappen.

• "... att Gå till kassan.”

• "... att Ändra behörigheter.”

• "... att Ställ(a) in datum.”
Börjar
med verb!

View Slide

”Vad jobbar du med?”
• Någon står bredvid dig, pekar på skärmen och frågar
 
"vad jobbar du med för knapp / länk / sida?”

• Du svarar ”Jag jobbar med / länken till / knappen för /
sidan för…

• Kassan.”

• Behörigheter.”

• Datuminställningar.”

View Slide

Uppgift 3

View Slide


View Slide

Meddelande från ett tänkt
 
smittspårnings-system
• Tre delar

• SMS: Du riskerar att ha blivit smittad (=varit nära någon smittad)

• Landningssida med instruktioner om vad du ska göra

• Dementi-SMS: det var falskt alarm, du var utom risk (just då)

View Slide

Tack!
Mejl:
 
[email protected]

Webb:
 
javlaskitsystem.se

Speakerdeck:
 
jonas_blind_hen
Foto: Lars Lundqvist

View Slide

Träff #13 • Flöden • 17 jan • ht 22 UX Writing • Nackademin

Träff #13 • Flöden • 17 jan • ht 22 UX Writing • Nackademin

Jonas Söderström
PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

Träff #13 • Flöden • 17 jan • ht 22 UX Writing • Nackademin

Träff #13 • Flöden • 17 jan • ht 22 UX Writing • Nackademin

Jonas Söderström PRO

More Decks by Jonas Söderström

Other Decks in Design

Featured

Transcript

Jonas Söderström
PRO