Slide 1

Slide 1 text

Jonas Söderström • 2024 Interaktionsdesign UX process UX writing • Trä ff #19 • Tisdag 12 mars Jonas Söderström • Nackademin • Vt 2024

Slide 2

Slide 2 text

Jonas Söderström • 2024 Lite repetition

Slide 3

Slide 3 text

Jonas Söderström • 2024 A Typsnittsformer A Linjär Grotesk Sans serif Antikva Serif-typsnitt Medieval- antikva Garald Didon Nyantikva A Mekan Egyptienne Slab serif A Real Transantikva A

Slide 4

Slide 4 text

Jonas Söderström • 2024 A A Futura Helvetica Frutiger Didot Bodoni A Garamond Berling Bembo Minion Goudy Old Style Rockwell Clarendon Memphis Beton A Baskerville Times A Typsnitt har namn – tidigare ofta efter formgivaren eller uppdragsgivaren (tryckeriet eller tidningen)

Slide 5

Slide 5 text

Jonas Söderström • 2024 oceas oceas Slutna former gör bokstäverna svåra att skilja från varandra i små grader oceas 38 Mabry Myriad BBC Reith Helvetica 29 Mabry 29 Open Sans 38 oceas Myriad Helvetica Öppna bokstavsformer bidrar till bra läsbarhet, särskilt i små grader

Slide 6

Slide 6 text

Jonas Söderström • 2024 Ill Bokstavsformer och bokstavspar bör vara distinkta! Ill Helvetica Tahoma Ill Trebuchet nh Arial Avenir nh Ill Atkinson Hyperlegible lo b Helvetica Trebuchet lo b lo b Atkinson Hyperlegible

Slide 7

Slide 7 text

Jonas Söderström • 2024 Bra typsnitt: • PT Sans • Open Sans • Ubuntu • Myriad • Lato • Atkinson Hyperlegible • BBC Reith • PT Serif • Georgia • Adobe Garamond • Minion • Times

Slide 8

Slide 8 text

Jonas Söderström • 2024 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 Långa rader kräver mer radavstånd. 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 Radavstånd 1 rad Radavstånd 1,3 rader

Slide 9

Slide 9 text

Jonas Söderström • 2024 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 hålla ihop tankar och uttryck över radbrytningar. • Mellan preposition och sitt huvudord (i Stockholm) • Mellan verb och verbpartikel (bryta av) • Mellan antals-si ff ra och sitt huvudord (100 slajds) • Mellan bestämd artikel och sitt huvudord (ett bord) • I sammansatta uttryck (project manager) • Efter första ordet i en mening • Efter första ordet i en bisats (… sajten, som …) Bryt helst inte:

Slide 10

Slide 10 text

Jonas Söderström • 2024 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. Typogra fi uttrycker tonläge

Slide 11

Slide 11 text

Jonas Söderström • 2024 Interaktionsdesign

Slide 12

Slide 12 text

Jonas Söderström • 2024 Vadå interaktionsdesign? 🤔

Slide 13

Slide 13 text

Jonas Söderström • 2024 Vadå IxD? 🤔

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Jonas Söderström • 2024 Se Uppleva Känna Hitta Tolka Förstå Agera Handla Göra Visuell design Infor- mations- design Inter- aktions- design Användarens fokus

Slide 16

Slide 16 text

Jonas Söderström • 2024 Färg, form, linje, skuggor …

Slide 17

Slide 17 text

Jonas Söderström • 2024 Vilka rubriker ska vi ha? Hur många? I villken ordning? Vad placeras under varje rubrik? Information Service Tjänster Om Process

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Jonas Söderström • 2024 Hund Katt Husdjur Välj husdjur Hund Katt V Husdjur Hund Katt X Katt Hund Varg Tiger Katt Ka Katt Kamel Kameleont Kanin

Slide 20

Slide 20 text

Jonas Söderström • 2024 Informationsdesign: Vad står det på menyn? 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”?

Slide 21

Slide 21 text

Jonas Söderström • 2024 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, eller nödvändigt på grund av teknik? 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?

Slide 22

Slide 22 text

Jonas Söderström • 2024 Speci fi ka interaktions-sätt

Slide 23

Slide 23 text

Jonas Söderström • 2024 Inte bara input

Slide 24

Slide 24 text

Jonas Söderström • 2024 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! Wow, den stopppade spelningen av låten när hörlurskontakten rycktes ur! ’’

Slide 25

Slide 25 text

Jonas Söderström • 2024 • Ta skärmdump • Stänga denna och gå till hemskärmen • Öppna Bilder • Markera bilden • Kopiera bilden • Stäng Bilder och gå till hemskärmen • Öppna Telegram • Välja kanal • Klistra in bild • Skicka

Slide 26

Slide 26 text

Jonas Söderström • 2024

Slide 27

Slide 27 text

Jonas Söderström • 2024 Ordningsföljd

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Jonas Söderström • 2024 •Eller ange resenärer först?

Slide 31

Slide 31 text

Jonas Söderström • 2024

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Jonas Söderström • 2024 Inaktiv

Slide 34

Slide 34 text

Jonas Söderström • 2024 Aktiv

Slide 35

Slide 35 text

Jonas Söderström • 2024 Den som inte tar bort luddet från torktumlaren ska dö!

Slide 36

Slide 36 text

Jonas Söderström • 2024

Slide 37

Slide 37 text

Jonas Söderström • 2024

Slide 38

Slide 38 text

Jonas Söderström • 2024

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Jonas Söderström • 2024 Ja, gör det! Nej, avbryt

Slide 41

Slide 41 text

Jonas Söderström • 2024 När hierarkin blir fel…

Slide 42

Slide 42 text

Jonas Söderström • 2024

Slide 43

Slide 43 text

Jonas Söderström • 2024

Slide 44

Slide 44 text

Jonas Söderström • 2024

Slide 45

Slide 45 text

Jonas Söderström • 2024

Slide 46

Slide 46 text

Jonas Söderström • 2024

Slide 47

Slide 47 text

Jonas Söderström • 2024

Slide 48

Slide 48 text

Jonas Söderström • 2024

Slide 49

Slide 49 text

Jonas Söderström • 2024

Slide 50

Slide 50 text

Jonas Söderström • 2024

Slide 51

Slide 51 text

Jonas Söderström • 2024 Inget varningsmeddelande! UX COPY FAIL!

Slide 52

Slide 52 text

Jonas Söderström • 2024

Slide 53

Slide 53 text

Jonas Söderström • 2024

Slide 54

Slide 54 text

Jonas Söderström • 2024 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 55

Slide 55 text

Jonas Söderström • 2024 Ergonomi

Slide 56

Slide 56 text

Jonas Söderström • 2024 Från 145 till 313 klick Med nya systemet: Godkänna ny vapenlicens

Slide 57

Slide 57 text

Jonas Söderström • 2024 Min scanner-programvara

Slide 58

Slide 58 text

Jonas Söderström • 2024

Slide 59

Slide 59 text

Jonas Söderström • 2024

Slide 60

Slide 60 text

Jonas Söderström • 2024

Slide 61

Slide 61 text

Jonas Söderström • 2024

Slide 62

Slide 62 text

Jonas Söderström • 2024

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Jonas Söderström • 2024 Några interaktionsprinciper

Slide 66

Slide 66 text

Jonas Söderström • 2024 Anpassa till användarna och till verksamheten

Slide 67

Slide 67 text

Jonas Söderström • 2024 Gör tydligt i vilket läge systemet är

Slide 68

Slide 68 text

Jonas Söderström • 2024 Information Service Om Process Tjänster Exempel: Menyn visar alltid var användaren är

Slide 69

Slide 69 text

Jonas Söderström • 2024 Vara Frakt Betalning Bekräfta Försäkring Flöden kräver normalt tre design-varianter (färg, form, typ)

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Jonas Söderström • 2024 Ge användaren kontroll…

Slide 72

Slide 72 text

Jonas Söderström • 2024 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.

Slide 73

Slide 73 text

Jonas Söderström • 2024 Till betalning > < Tillbaka till frakt Hitta försäkring Om det finns flera alternativ framåt får de olika vikt i designen

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Jonas Söderström • 2024 Automatisera repetitiva uppgifter – minska belastning

Slide 76

Slide 76 text

Jonas Söderström • 2024

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Jonas Söderström • 2024

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Jonas Söderström • 2024

Slide 84

Slide 84 text

Jonas Söderström • 2024 Takeaways: Anpassa till användarna och till verksamheten

Slide 85

Slide 85 text

Jonas Söderström • 2024 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 • Sträva efter konsistens och använd standards

Slide 86

Slide 86 text

Jonas Söderström • 2024 ”UX-process”

Slide 87

Slide 87 text

Jonas Söderström • 2024 Design thinking, service design, tjänstedesign, UX-process

Slide 88

Slide 88 text

Jonas Söderström • 2024 Sex steg Stanford

Slide 89

Slide 89 text

Jonas Söderström • 2024 Double diamond

Slide 90

Slide 90 text

Jonas Söderström • 2024

Slide 91

Slide 91 text

Jonas Söderström • 2024

Slide 92

Slide 92 text

Jonas Söderström • 2024 Tisdag Mars 26 Genomgång av uppgift 3 SEO. Testa text Desirability, krav, MVP… Bild på webb Torsdag Mars 14 Måndag Mars 18 Vecka 11 Vecka 12 OBS! Kl 15-17 Besök av ux-skribent. Onsdag Mars 20 Vecka 13