Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Träff #16 • Flöden, kundresa • 28 nov • ht 23 UX Writing • Nackademin

Träff #16 • Flöden, kundresa • 28 nov • ht 23 UX Writing • Nackademin

Jonas Söderström

November 29, 2023
Tweet

More Decks by Jonas Söderström

Other Decks in Design

Transcript

  1. Jonas Söderström • 2023
    Flöden, kundresa
    UX writing • Trä
    ff
    #16 • Tisdag 28 november
    Jonas Söderström • Nackademin • Ht 2023

    View full-size slide

  2. Jonas Söderström • 2023
    Lite repetition

    View full-size slide

  3. 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

    View full-size slide

  4. Jonas Söderström • 2023
    xnh
    xnh xnh73 %
    52 %
    72 %
    Cochin
    Century Gothic
    Trebuchet
    xnh
    Open Sans
    72 %
    xnh55 %
    Adobe Garamond
    xnh63 %
    Minion
    Liten x-höjd Stor x-höjd

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 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

    View full-size slide

  9. Jonas Söderström • 2023
    digitill.se

    View full-size slide

  10. 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!

    View full-size slide

  11. 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!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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!

    View full-size slide

  15. 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

    View full-size slide

  16. 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
    😀

    View full-size slide

  17. 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!?!

    View full-size slide

  18. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 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!

    View full-size slide

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

    View full-size slide

  23. Jonas Söderström • 2023

    View full-size slide

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

    View full-size slide

  25. 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

    View full-size slide

  26. 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”

    View full-size slide

  27. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Jonas Söderström • 2023

    View full-size slide

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

    View full-size slide

  32. 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

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. Jonas Söderström • 2023

    View full-size slide

  36. Jonas Söderström • 2023

    View full-size slide

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

    View full-size slide

  38. Jonas Söderström • 2023
    Ännu tydligare:
    Ja, jag vill stoppa köpet.
    Nej, jag vill gå vidare
    och välja betalsätt.
    Vill du avbryta köpet?
    Knappar ska vara begripliga även utan sin kontext!

    View full-size slide

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

    View full-size slide

  40. Jonas Söderström • 2023
    Ibland är det bra
    att ”bromsa” ett flöde …

    View full-size slide

  41. Jonas Söderström • 2022
    Mikrofriktion
    Måste flytta
    muspekaren
    Minskar risken att man snabbt klickar två gånger och avslutar av misstag.

    View full-size slide

  42. Jonas Söderström • 2022
    Efter jobbet mötte jag upp en kollega och vi skulle
    tillsammans åka hem till mig och vi var stressade
    då vi skulle möta upp en person där. Jag kom på
    att shit, jag var tvungen att köpa en SL-biljett,
    något som jag gjort i SL's app vid några tillfällen förut
    då jag inte behövt ha ett periodkort på 1,5 år.
    Det är mycket folk, lite FÖR mycket för att kännas
    bekvämt då pandemin fortfarande inte är över.
    Jag småspringer fram, väjer för personer
    samtidigt som jag klickar på biljett och
    använder Swish som är förvalt i appen.
    Eftersom jag har en modern telefon kan jag
    dessutom godkänna betalningen bara genom
    att titta på skärmen, dvs ansiktsigenkänning.
    Helt plötsligt står det att jag har köpt en biljett
    som är giltig en månad framåt. Jag hajar till men
    hinner inte göra nåt förrän den automatiskt aktiveras.
    ’’

    View full-size slide

  43. Jonas Söderström • 2022
    Vad skulle man kunna göra
    • Ångra – återbetala
    • Skjuta upp – frysa
    • Ge bort – överlåta

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 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

    View full-size slide

  48. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. 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?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Jonas Söderström • 2021

    View full-size slide

  55. Jonas Söderström • 2023
    Kundresa

    View full-size slide

  56. Jonas Söderström • 2021

    View full-size slide

  57. 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?

    View full-size slide

  58. 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

    View full-size slide

  59. Många möjligheter
    för ux-text att mildra
    dessa ”pain points”:
    • erbjudanden
    • bekräftelser
    • förtroendeskapare

    View full-size slide

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

    View full-size slide

  61. 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

    View full-size slide

  62. Jonas Söderström • 2023

    View full-size slide

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

    View full-size slide

  64. Jonas Söderström • 2023
    SEO,
    Ev besök av
    ux-”writer”
    Uppgift 3
    = ni får inlämningsuppgift
    Testa text,
    användnings-
    tester
    Tisdag
    December
    5
    Mer klarspråk
    Tisdag
    December
    12 Tisdag
    December
    19
    User stories,
    UX-process
    Tisdag
    Januari
    2
    Är detta
    ok?

    View full-size slide

  65. Jonas Söderström • 2023
    Tisdag
    Januari
    9 Torsdag
    Januari
    11 Tisdag
    Januari
    16 Tisdag
    Januari
    23
    Tors
    18??

    View full-size slide