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

Träff #8 • Ingresser + Interaktionsdesign • Onsdag 11 okt • ht 23 • UX Writing • Nackademin

Träff #8 • Ingresser + Interaktionsdesign • Onsdag 11 okt • ht 23 • UX Writing • Nackademin

Jonas Söderström
PRO

October 11, 2023
Tweet

More Decks by Jonas Söderström

Other Decks in Design

Transcript

  1. Jonas Söderström • 2023
    Inledningar – ingresser


    +


    Interaktionsdesign
    Trä
    ff
    #8 • Onsdag 11 okt
    Jonas Söderström • Vt 23 • UX Writing • Nackademin

    View Slide

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

    View Slide

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

    View Slide

  4. 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” …

    View Slide

  5. Jonas Söderström • 2023
    Jo, en rubrik kan vara lång:

    fyra eller fem rader

    på mobilskärmen

    View Slide

  6. Jonas Söderström • 2023
    … men den ska vara
    effektiv, inte pratig
    eller långrandig.

    View Slide

  7. Jonas Söderström • 2023
    Lägg viktiga ord

    i främre delen av meningen!
    (Frontloading)

    View Slide

  8. Jonas Söderström • 2023
    Gör gärna rubriker
    långa, om det
    behövs …men:

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. 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. (…)”

    View Slide

  18. Jonas Söderström • 2023
    Mjukstart

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. Jonas Söderström • 2023
    ”Redan de gamla
    grekerna …”
    Mjukstart

    View Slide

  28. Jonas Söderström • 2023
    Interaktionsdesign

    View Slide

  29. Jonas Söderström • 2022
    Vadå
    interaktionsdesign?
    🤔

    View Slide

  30. Jonas Söderström • 2022
    Vadå IxD?


    🤔

    View Slide

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

    View Slide

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

    View Slide

  33. Jonas Söderström • 2022
    Färg, form, linje, skuggor …

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. Jonas Söderström • 2022
    Praktisk definition –

    utgå från användaren

    View Slide

  38. Jonas Söderström • 2022
    Hund Katt
    Husdjur
    Välj husdjur
    Hund
    Katt
    V
    Husdjur
    Hund
    Katt
    X
    Katt Hund Varg
    Tiger

    View Slide

  39. Jonas Söderström • 2022
    Speci
    fi
    ka interaktions-sätt

    View Slide

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

    View Slide

  41. Jonas Söderström • 2022
    Ordningsföljd

    View Slide

  42. Jonas Söderström • 2022
    Välj försäkring
    Bas
    Stor
    V
    Husdjur
    Hund
    Katt
    X

    View Slide

  43. Jonas Söderström • 2022
    Välj försäkring
    Bas
    Stor
    V
    Husdjur
    Hund
    Katt
    X

    View Slide

  44. Jonas Söderström • 2022

    View Slide

  45. Jonas Söderström • 2022

    View Slide

  46. Jonas Söderström • 2022
    Constraints
    ≈ Saker vi hindrar användaren att göra

    View Slide

  47. Jonas Söderström • 2022
    Inaktiv

    View Slide

  48. Jonas Söderström • 2022
    Aktiv

    View Slide

  49. Jonas Söderström • 2022
    Den som inte tar bort luddet

    från torktumlaren ska dö!

    View Slide

  50. Jonas Söderström • 2022

    View Slide

  51. Jonas Söderström • 2022

    View Slide

  52. Jonas Söderström • 2022
    Prioritering - hierarki
    ≈ Saker vi ”nudgar” användaren att göra

    View Slide

  53. Jonas Söderström • 2022
    Ja, gör det!
    Nej, avbryt

    View Slide

  54. View Slide

  55. View Slide

  56. Jonas Söderström • 2022
    När hierarkin blir fel…

    View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. View Slide

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

    View Slide

  67. Jonas Söderström • 2022
    Interaktionsdesign
    Smal Bred
    Speci
    fi
    ka
    interaktions-
    detaljer
    Allt arbete med
    interaktiva
    (digitala?)
    produkter

    View Slide

  68. Jonas Söderström • 2022
    Interaktionsdesign
    Smal Bred
    Speci
    fi
    ka
    interaktions-
    detaljer
    Allt arbete med
    interaktiva
    (digitala?)
    produkter
    UX

    View Slide

  69. Jonas Söderström • 2022
    Ergonomi

    View Slide

  70. Jonas Söderström • 2022
    Från 145 till 313 klick
    Godkänna ny vapenlicens

    View Slide

  71. Jonas Söderström • 2022

    View Slide

  72. Jonas Söderström • 2022

    View Slide

  73. Jonas Söderström • 2022

    View Slide

  74. Jonas Söderström • 2022

    View Slide

  75. Jonas Söderström • 2022

    View Slide

  76. Jonas Söderström • 2022
    Några interaktionsprinciper

    View Slide

  77. Jonas Söderström • 2022
    Anpassa till användarna
    och till verksamheten

    View Slide

  78. Jonas Söderström • 2022
    Gör tydligt

    i vilket läge

    systemet är

    View Slide

  79. Jonas Söderström • 2022
    Information Service Om Process
    Tjänster
    Exempel:


    Menyn visar alltid var
    användaren är

    View Slide

  80. 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)

    View Slide

  81. Jonas Söderström • 2022

    View Slide

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

    View Slide

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

    View Slide

  84. Jonas Söderström • 2022

    View Slide

  85. Jonas Söderström • 2022
    Statusmeddelanden
    Tjänsten/
    systemets
    status
    Andra
    användares
    status
    Användarens status

    View Slide

  86. Jonas Söderström • 2022
    Ge användaren
    kontroll…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  90. Jonas Söderström • 2022
    Automatisera repetitiva
    uppgifter – minska belastning

    View Slide

  91. Jonas Söderström • 2022

    View Slide

  92. Jonas Söderström • 2022
    Mikro-friktioner
    Ibland ska man inte göra det för enkelt

    View Slide

  93. Jonas Söderström • 2022
    Avsluta-knappen i Zoom
    fl
    yttar sig,

    för att förhindra att man avslutar av missstag.

    View Slide

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

    View Slide

  95. Jonas Söderström • 2022
    Gör det svårt att göra fel

    View Slide

  96. Jonas Söderström • 2022
    Gör det enkelt att ångra /rätta

    View Slide

  97. Jonas Söderström • 2022
    Medge flera
    användningssätt
    Gör inte olika – hitta standarder

    View Slide

  98. Jonas Söderström • 2022

    View Slide

  99. Jonas Söderström • 2022
    Takeaways:
    Anpassa till användarna

    och till verksamheten

    View Slide

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


    View Slide

  101. 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:

    View Slide

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

    View Slide