$30 off During Our Annual Pro Sale. View Details »

Träff #17 • Flöden • 13 nov • ht 23 UX Writing • Nacakdemin

Träff #17 • Flöden • 13 nov • ht 23 UX Writing • Nacakdemin

Jonas Söderström
PRO

November 14, 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
    #17 • 13 november
    Jonas Söderström • Nackademin • Ht 2023

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

  9. 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 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.
    Behandla texten med kärlek!

    View Slide

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

    View Slide

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

    View Slide

  13. 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 Slide

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

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

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

  17. 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

  23. Jonas Söderström • 2023

    View 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 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 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 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 Slide

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

    View Slide

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

    View Slide

  30. Jonas Söderström • 2023

    View Slide

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

    View 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 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 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 Slide

  35. Jonas Söderström • 2023

    View Slide

  36. Jonas Söderström • 2023

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. 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
    👎
    👍

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. 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 Slide

  45. 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 Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  51. Jonas Söderström • 2021

    View Slide

  52. Jonas Söderström • 2023
    Kundresa

    View Slide

  53. Jonas Söderström • 2021

    View Slide

  54. 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 Slide

  55. View Slide

  56. 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 Slide

  57. View Slide

  58. View Slide

  59. Pain points

    View Slide

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

    View Slide

  61. View Slide

  62. 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 Slide

  63. Jonas Söderström • 2023

    View Slide

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

    View Slide

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

    View Slide