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

Träff #14 • Flöden • 27 mars • vt 23 UX Writing • Nackademin

Träff #14 • Flöden • 27 mars • vt 23 UX Writing • Nackademin

Jonas Söderström

March 27, 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 #14 • 27 mars Jonas Söderström • Nackademin • Vt 2023
  2. Jonas Söderström 2023 Formulera länkar så 
 att användaren kan

    
 förutse vad hen får, 
 om hen klickar på dem. Samma princip som för rubriker: 
 ”What’s in it for me?” Eller, ”Den länken behöver jag inte klicka på”.
  3. Jonas Söderström 2023 Använd det unika som länk • …i

    en intervju berättade X 
 om bråket i partiet 2019. • …i en intervju berättade X 
 om bråket i partiet 2019. 👍 👎 Länkar – liksom knappar – ska vara begripliga 
 utan sin kontext!
  4. Jonas Söderström 2023 Förutsättning Handling Verktyg Mål, syfte, resultat Identitet

    Substantiv Resa Boka biljett Biljettbokning Flygresa Flygresenär Verb: 
 In fi nitiv (Att) – Boka fl ygbiljett Boka biljett Boka/köpa en fl ygresa Bli fl ygresenär Verb: 
 Imperativ 1 (M -> S) – Låt mig boka fl ygbiljett Visa mig/Gå till biljettbokningen Låt mig boka en fl ygresa Låt mig bli fl ygresenär Verb: 
 Imperativ 2 (S -> M) – Boka fl ygbiljett Klicka här för biljettbokningen Boka en fl ygresa Bli fl ygresenär Verb: 
 Interrogativ Ska du resa? Vill du boka en fl ygbiljett? Vill du gå till biljettbokningen? Vill du boka en fl ygresa? Vill du bli fl ygresenär? Verb: 
 1 pers citat Jag ska resa Jag vill boka en fl ygbiljett Ta mig till biljettbokningen Jag vill boka en fl ygresa Jag vill bli fl ygresenär
  5. 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!
  6. 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
  7. 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 😀
  8. 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!?!
  9. 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 

  10. Jonas Söderström • 2023 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
  11. Jonas Söderström • 2023 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”?
  12. Jonas Söderström • 2023 Inter- 
 aktions- 
 design Visuell

    design Infor- 
 mations- 
 design Att designa flöden
  13. Jonas Söderström • 2023 Ux- texter bildar också ofta flöden

    Status Uppmaning Varning Felmeddelande Erbjudande Bekräftelse
  14. 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!
  15. Jonas Söderström • 2023 > > > Trigger Förtroende- 


    skapare Backa / 
 gå vidare Bekräftelse Underhands- 
 meddelande > (Ny) Status (Möjligt 
 felmeddelande) Temporära Permanenta
  16. Jonas Söderström • 2023 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?
  17. 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)”
  18. 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
  19. 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”
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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!
  25. 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
  26. 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
  27. 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?
  28. Jonas Söderström • 2021 Försöka förstå målgruppen Vad vet vi

    om dem redan? • Data, undersökningar? Om vi inte vet … • Liknande tjänster eller produkter?
  29. Jonas Söderström • 2021 Scenarios – kundresa Innan wireframes eller

    skisser, 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?
  30. 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
  31. Touchpoints: 
 Vad användaren interagerar med 
 i det givna

    steget Facebook Sajt Mejl Mobil Boknings- system Reseledare
  32. 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. 4. System/tjänst/produkt/person som användaren interagerar med (Touchpoint) Pain point
  33. Jonas Söderström • 2023 Tisdag April 4 Genomgång av uppgift

    2 Målgrupper 
 Uppgift 3 = ni får inlämningsuppgift SEO 
 Skriva för sök Torsdag Mars 30 Vecka 13 Torsdag April 6 Vecka 14 Tisdag April 11 Testa text UX Research Vecka 15
  34. Jonas Söderström • 2023 Tack! Mejl: 
 [email protected] Webb: 


    javlaskitsystem.se Speakerdeck: 
 jonas_blind_hen Foto: Lars Lundqvist