Slide 1

Slide 1 text

Jonas Söderström • 2023 Flöden, kundresa UX writing • Trä ff #17 • 13 november Jonas Söderström • Nackademin • Ht 2023

Slide 2

Slide 2 text

Jonas Söderström • 2023 Lite repetition

Slide 3

Slide 3 text

Jonas Söderström • 2023 oceas Slutna former gör bokstäverna svåra att skilja från varandra i små grader oceas oceas g Mabry Myriad Atkinson Hyperlegible Helvetica 29 Mabry 29 Open Sans g oceas Myriad Helvetica

Slide 4

Slide 4 text

Jonas Söderström • 2023 Bra typsnitt: • PT Sans • Open Sans • Ubuntu • Myriad • Lato • Atkinson Hyperliegible • BBC Reith • PT Serif • Georgia • Times

Slide 5

Slide 5 text

Jonas Söderström • 2023 … för rubriker

Slide 6

Slide 6 text

Jonas Söderström • 2023 … men också för knappar

Slide 7

Slide 7 text

Jonas Söderström • 2023 WCAG om textstorlek • Minst 16 punkter för huvudsaklig text (brödtext) • 16 punkter ≈ 21 pixlar • Ingen definitiv riktlinje, men en genomgående rekommendation

Slide 8

Slide 8 text

Jonas Söderström • 2023 digitill.se

Slide 9

Slide 9 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Försök att inte bryta tankar över radslut. Tänk på var man skulle gör en mikropaus om man läste det högt!

Slide 10

Slide 10 text

While the methods and the amount of collaboration required may di ff er, what goes for individuals goes for organizations. Every single time you are faced with a decision, you need to ask “Do we have the right information to make this decision?” If you are continuously making decisions, you need to continuously ensure that those decisions are well-informed. Of course it feels easier to make things without asking questions. It always will. Like everything else uncomfortable in life, if you don’t make a habit out of it and connect it to rewards, you will fi nd excuses to avoid it. Th is is as true for organizations as it is for everyone eating Pringles on the sofa wishing they wanted to motivate. Behandla texten med kärlek!

Slide 11

Slide 11 text

Håll ihop tankar och uttryck över radbrytningar. Gäller även rubriker!

Slide 12

Slide 12 text

Jonas Söderström • 2023 Flöden och interaktionskommandon (Först lite repetition)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18 text

Jonas Söderström • 2023 > > > > Interaktionsdesign i ett vidare perspektiv: Flöden

Slide 19

Slide 19 text

Jonas Söderström • 2023 Interaktionsdesignens tre steg • Möjliggöra – inmatningsfält • Förenkla – ge förslag • Automatisera – automatisk ifyllnad

Slide 20

Slide 20 text

Jonas Söderström • 2023 Ux- texter bildar också ofta flöden Status Uppmaning Varning Felmeddelande Erbjudande Bekräftelse

Slide 21

Slide 21 text

Jonas Söderström • 2023 Ux- texter bildar också ofta flöden Du har 10 MB lagringsutrymme Du kan ska ff a mer lagringsutrymme Varning: Du har bara 500 kB lagringsutrymme Lagringsutrymmet är fullt! Köp till mer lagringsutrymme Nu har du 200 MB utrymme!

Slide 22

Slide 22 text

Jonas Söderström • 2023 > > > Trigger Förtroende- skapare Backa / gå vidare Bekräftelse Process- meddelande > (Ny) Status (Möjligt felmeddelande) Temporära Permanenta

Slide 23

Slide 23 text

Jonas Söderström • 2023

Slide 24

Slide 24 text

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

Slide 25 text

Jonas Söderström • 2023 Och ett eventuellt alternativ har en tyngd mellan primär och ångra Till betalning > < Tillbaka till frakt Alternativ Vara Frakt Betalning Bekräfta Försäkring Ångra/backa är nedtonad Primär action är tydligast

Slide 26

Slide 26 text

Jonas Söderström • 2023 Till betalning > < Tillbaka till frakt Hitta försäkring Vara Frakt Betalning Bekräfta 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”

Slide 27

Slide 27 text

Jonas Söderström • 2023 ”Förtroendeskapare” 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 28

Slide 28 text

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

Slide 29

Slide 29 text

Jonas Söderström • 2023 Primär aktion Avbryt Alternativ Primär aktion Avbryt Alternativ

Slide 30

Slide 30 text

Jonas Söderström • 2023

Slide 31

Slide 31 text

Jonas Söderström • 2023 Flöden är där problem händer (1)

Slide 32

Slide 32 text

Jonas Söderström • 2023 Till betalning > Avbryt < Tillbaka till frakt Vara Frakt Betalning Bekräfta Försäkring Lugn! Du kan ändra varan även i nästa steg Vill du verkligen avbryta köpet? Avbryt Fortsätt

Slide 33

Slide 33 text

Jonas Söderström • 2023 Till betalning > Avbryt < Tillbaka till frakt Vara Frakt Betalning Bekräfta Försäkring Lugn! Du kan ändra varan även i nästa steg Vill du verkligen avbryta köpet? Ja Nej

Slide 34

Slide 34 text

Jonas Söderström • 2023 Till betalning > Avbryt < Tillbaka till frakt Vara Frakt Betalning Bekräfta Försäkring Lugn! Du kan ändra varan även i nästa steg Vill du verkligen avbryta köpet? Ja, avbryt köpet Nej, fortsätt med köpet

Slide 35

Slide 35 text

Jonas Söderström • 2023

Slide 36

Slide 36 text

Jonas Söderström • 2023

Slide 37

Slide 37 text

Jonas Söderström • 2023 Ja, avbryt Nej, fortsätt avbryter

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Jonas Söderström • 2023 Knappar ska vara begripliga utan sin kontext Kom ihåg:

Slide 40

Slide 40 text

Jonas Söderström • 2022 Tunnelseende för ”Best bet” (Bästa gissning) Du sökte på ”lorem” Bästa trä ff : Du sökte på ”lorem” 1 2 3 4 5 6 👎 👍

Slide 41

Slide 41 text

Jonas Söderström • 2023 Flöden är där problem händer (2)

Slide 42

Slide 42 text

Jonas Söderström • 2023 Go to checkout Pay Login

Slide 43

Slide 43 text

Jonas Söderström • 2023 Login E-mail Password Log In Register Forgot password?

Slide 44

Slide 44 text

Jonas Söderström • 2023 Login E-mail Password Log In Register Forgot password? Jag är inte här för att starta en relation

Slide 45

Slide 45 text

Jonas Söderström • 2023 Logga in E-mail Password Log In Register Forgot password? 45 % hade multipla inloggningar 160.000 nya passwords/dag < 20 % av dessa köpte

Slide 46

Slide 46 text

Jonas Söderström • 2023 Go to checkout Login

Slide 47

Slide 47 text

Jonas Söderström • 2023 Login E-mail Password Log In Register Forgot password?

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Jonas Söderström • 2023 Avslutade köp +45 % Ökad försäljning $ 300 miljoner

Slide 50

Slide 50 text

Jonas Söderström • 2023 https://articles.uie.com/three_hund_million_button/

Slide 51

Slide 51 text

Jonas Söderström • 2021

Slide 52

Slide 52 text

Jonas Söderström • 2023 Kundresa

Slide 53

Slide 53 text

Jonas Söderström • 2021

Slide 54

Slide 54 text

Jonas Söderström • 2021 Helheten Försök beskriva de kända eller de förmodade stegen som tjänsten eller delen ska hjälpa användaren med. • Vilka steg fi nns? • Vad gör, tänker, känner användaren i varje steg och delsteg? • Vilka är svårigheterna?

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Jonas Söderström • 2022 Typiskt exempel på ”kundresa” Relevant och inspirerande nyhetsbrev – sinnebilden av drömresan Andras resbilder väcker nyfikenhet Annonsera Mottaglig men passiv Läser resereportage Läser nyhetsbrev Tittar på resebilder på Facebook Letar aktivt men okritiskt Kollar resmål och aktiviteter Tar reda på fakta Kollar priser och budget Samlar förslag på hög Säljer in idén om en resa till andra Ställer frågor till vänner som rest Trött på livspusslet Längtar till sol och värme Sliten och trött Avundsjuk på vänners bilder på Facebook Inspireras av andra Splittrad av livspusslet Ensam i letandet eller flera? Osäker var åker man? Hur ska jag välja? Förvirrad av alla alternativ Glatt överraskad av utbudet Finns inte Filippinerna som charter? Har vi hittat allt som passar oss? Det här blir härligt! Kritiskt och praktiskt orienterad Rangordnar bland alternativen Jämför aktiviteter, standard, service och priser Presenterar alternativen för sina medresenärer Planerar in resan i tiden Sätter budget och tidsram Bekräftar med medresenärerna Kontrollerar försäkringar, visum och vaccinationer Vill ha stöd av andra i sitt letande Har vi alla fakta? Kommer alla att tycka om resmålet? Där finns något för alla! Är alla överens? Är alla kostnader inräknade? Jag ska ligga i den solstolen och läsa! Nyhetsbrev Facebook TV Charterapp Desktop web Mobilwebb "Man kan simma med delfiner! Och det är inte så dyrt.". Visa att alla vettiga alternativ finns med Sammanställning av allas kriterier, lyft resmålens USP, sinnebilden av drömresan. Snabbfakta om extrakostnader, vaccin, visum, … Visa upp och kolla med utomstående Flagga för tillkommande kostnader, förenka bokningsflödet, informera om försäkringar, vaccin, visum. Grattis till ett bra val - nu börjar det roliga! Berätta för världen att ni ska åka Stressad, mottaglig för hjälp & råd Jämför detaljer, priser och tilläggskostnader Väljer betalsätt Kryssar mellan erbjudanden och försäkringar Förväntansvull, mottaglig för tips Delar sina planer med andra Kollar och bokar aktiviteter Läser på om resmålet Förbereder sig praktiskt, inköp, vaccina - tioner Begär ledighet och kontaktar dagis och skola Beslutsångest. Är det en bra deal? Törs jag välja bort försäkring? Blev dyrare efter tillval - pinsamt att förklara Blir allt rätt nu? Har betalningen gått igenom? Oro över att något viktigt är missat Vad kul vi ska ha! Hur ska vi göra för att få ut mesta möjliga? Vad får vi inte missa? Är det här bästa valet? Tänk om nåt händer? Hoppas alla blir nöjda nu! Hoppas barnen ska trivas Äntligen ska vi ut och resa! Glad & mottaglig för tips Kollar bra restauranger Kollar väderprognos Berätta att vi är framme och har det bra! Kollar området Kontaktar personal om något inte stämmer Fryser minnen Delar i sociala media Undrar hur det ser ut när vi kommer fram? Skönt att vara framme “Det här är minst lika bra som jag trodde att det skulle bli.” Njuter av värme, sol och bad Nu regnar det hemma! Men varifrån går bussen för utflykten? Här skulle man bo! Tänk att vi kom iväg! Fjärdedagsångest Mail med timad information och inspiration. Dela på FB! Nedräkning till avresa. Anteckna aktiviteter. "Jag är här och det är underbart"" – turkos- filter. Fota, filma, dela. Våra aktiviteter, hitta bästa resturangen "Ska jag klaga på mögellukten?" Aktiv med att berättande Tittar på sakerna vi köpte Landar i vardagen Ber att få se dom andras bilder Konservera upplevelsen Skönt att vara hemma igen Vad härligt vi hade det! Jag fick ut det jag ville av resan Vi valde rätt och det blev bra Återupplever tillsammans Positiv känsla med in i vardagen Det här borde vi göra oftare Så snabbt det gick Nostalgisk Lagar mat, visar bilder Reparerar minnen, genom andra Skratta också åt det mindre lyckade Så härligt och roligt vi hade det Kommer du ihåg när …? Förväntan inför nya resor Så bra att vi kom iväg till slut Vart ska vi åka nästa gång? Samla ihop och snygga till bilder & filmer. Dela räkningen Visa hur härligt det var Påminn om resan Påminn vänner, skapa event Visa foto- & videoalbum Point of pain på jobbet... hemma i kaoset några dagar senare sent på kvällen resan börjar närma sig på playan hemma igen en tid senare SAMLA & LETA DRÖMMA JÄMFÖRA & ENAS FÖRE BOKA & BETALA UNDER EFTER ÅTERUPPLEVA Besviken på dyra priser DEN RÄTTA KNUFFEN ALLT ÄR MÖJLIGT! RESMÅLETS SPETS TRYGGT & ENKELT NU BÖRJAR RESAN, NJUT! MAXIMERA UPPLEVELSEN KONSERVERA LYCKOKÄNSLAN FÖRLÄNG UPPLEVELSEN Besvikelse över mögel på rummet Långt kvar till nästa gång Ta beslut Uppgiftsorienterad Bekräftar att valet av resa är bra Genomför aktiviteter Träffas och minns tillsammans När borde vi boka? Ge bästa bilden av resan

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Pain points

Slide 60

Slide 60 text

Touchpoints: Vad användaren interagerar med i det givna steget Facebook Sajt Mejl Mobil Boknings- system Reseledare

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Jonas Söderström • 2023 1. Vad gör användaren nu? Beskriv! 2. Hur känner hen sig (på en skala)? 5. Vad kan vi kalla det här steget? 3. Hur känner hon, mer konkret? Citat, exempel. Identi fi era ”pain points”: 4. System/tjänst/produkt/person som användaren interagerar med (Touchpoint) Pain point

Slide 63

Slide 63 text

Jonas Söderström • 2023

Slide 64

Slide 64 text

VIKTIGT! Våra insikter/ takeways. Vad kan / måste vi göra?

Slide 65

Slide 65 text

Jonas Söderström • 2023 Testa text, SEO Uppgift 3 Bild på webb, Mer UX-text = ni får inlämningsuppgift Vecka 46 Onsdag November 15 Sista inlämning Vecka 47 Måndag November 20 Onsdag November 22 Vecka 48 Några digitala egenheter, Ditt bästa exempel Måndag November 27