Foredrag om Interaktionsdesign for UNF, Vejle Station, spor 6, lørdag morgen Kilde: Havarikommissionens Rapport

Transkript

1 UNF Interaktionsdesign Rolf Molich Vejle Station, spor 6, lørdag morgen Kilde: Havarikommissionens Rapport Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 1

2 Passageren har forklaret at han på grund af den synlige røde ring var helt sikker på at dette var nødbremsehåndtaget. Han forklarede, at man i en sådan nødsituation ikke læser nogen tekst, men bare handler. Han havde slet ikke set det rigtige nødbremsehåndtag, og er først efter hændelsen blevet gjort opmærksom på, at nødbremsehåndtaget sidder oppe under baldakinen. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 2

3 Ved denne test stod personen uden for toget. Dørmelderlamperne i førerrummet var slukket,hvilket betød at dørene var registreret lukket. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 3

4 cabbage > Sorry, the password must be more than 8 characters. boiledcabbage > Sorry, the password must contain 1 numerical character. 1 boiled cabbage > Sorry, the password cannot have blank spaces. 50fuckingboiledcabbages > Sorry, the password must contain at least one upper case character. 50FUCKINGboiledcabbages > Sorry, the password cannot use more than one upper case character consecutively. 50FuckingBoiledCabbagesShovedUpYourArse.IfYouDon tgivemeaccessimmediately > Sorry, the password cannot contain punctuation. NowIAmGettingReallyPissedOff50FuckingBoiledCabbagesShovedUpYourArse IfYouDontGiveMeAccessImmediately >Sorry, that password is already in use. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 4

5 Credo 1 If the users can t use it, it doesn t work -- Susan Dray Credo 2 Fejl er værdifulde Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 5

6 Credo 2 Fejl er værdifulde Du lærer ofte mere af at fejle end af at gøre det rigtigt For at undgå fejl er det vigtigt, at du ved, hvor fejlene typisk begås Credo 3 Data er væsentlige Meninger er uvæsentlige Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 6

7 Jeg synes, at Om os skal stå først i menuen 13 HiPPO = Highest Paid Person s Opinion Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 7

8 Users: Pests with requests. -- Anonym 15 Users: Those things that make it possible for us to pay you. -- Matthew Oliphant 16 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 8

9 Hvorfor er usability vigtigt? Ét ubesvaret spørgsmål forhindrer et salg Hvorfor er usability vigtigt? Hvis kunden ikke kan finde varen, så kan kunden ikke købe varen Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 9

10 Jeg kan godt forstå, at folk laver sort arbejde det er jo meget nemmere -- Selvstændig erhvervsdrivende, som forgæves søgte blanket til lønindberetning, E-indkomst på Skats hjemmeside 20 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 10

11 People tend to blame themselves for the shortcomings of their devices: If I weren t so stupid...! -- Norman & Tognazzini 21 Brugere er rationelle Dine brugere bruger ikke dine produkter for sjov eller for at løse snedige gåder eller for at hjælpe dig med at spare penge. De bruger den hurtigste og mest bekvemme måde at få løst deres opgave på. Hvis det er dit produkt, så bruger de dit produkt Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 11

12 Brugeres tid er kostbar Websteder er et produkt, som man beder folk om at bruge. De betaler med deres tid og opmærksomhed. Tom du Pré Dette foredrag handler primært om KEDELIGE produkter. Picture credit: Steve Webel stevewebel.com Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 12

13 Kurset handler i mindre grad om websteder som dette Tiden for at løse denne opgave (vælg mobiltelefon) er ikke afgørende Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 13

14 Smart emballage til Microsoft Office produkt. Designeren mente: The packaging has been completely revised and, we hope, foreshadows the great experience that awaits you once you open it.... Designed to be user-friendly, the new packaging is a small, hard, plastic container that s designed to protect the software inside for life-long use.... The new design will provide the strength, dimensional stability and impact resistance required when packaging software today. Andre meninger var: It looks really nice and should really stand out on the shelves. Good job folks! This looks awesome, really. Wow! I must say, I m very, very impressed by this; excellent job guys. De, der prøvede at åbne emballagen, berettede: I simply could not figure out how to open the bizarre new packaging. It represents a complete failure of industrial design.... To be technical about it, it has no true affordances and actually has some false affordances: visual clues as to how to open it that turn out to be wrong. En farlig misforståelse Et produkt er OK, hvis designerne synes, at det er nemt at bruge Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 14

15 En farlig misforståelse Designerens synspunkt: Jeg er et menneske nogenlunde lige som så mange andre Jeg bruger produktet, derfor er jeg en bruger Jeg synes, at dette er et godt produkt - ellers ville jeg have lavet det anderledes Jeg har arbejdet hårdt på at lave et godt produkt. Derfor er mit produkt brugsvenligt! Message During Start-up Remove disk. Press any key to continue. - sidste nyt om gamle nyheder? Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 15

16 U-Haul Udlejning af flyttebiler til privatpersoner i USA Forside Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 16

17 Mange mikrousabilityproblemer, f.eks. samlet lejepris og moms mangler Eksempel på katastrofalt usabilityproblem Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 17

18 Er dette website brugsvenligt? ( Tilsvarende f.eks. En alternativ definition af usability Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 18

19 Nyttig, men ikke brugsvenlig 37 Meget nyttig men ikke særlig brugsvenlig, specielt for førstegangsbrugeren 37 Once you know how to do something, doing it is easy -- John Seely Brown 38 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 19

20 Nyttig og brugsvenlig 39 Både nyttig og brugsvenlig på grund af det menneskelige element (telefonisten) 39 Nyttig, men ikke brugsvenlig 40 Meget nyttig men ikke særlig brugsvenlig for førstegangsbrugeren på grund af kompleksiteten 40 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 20

21 UX kontra usability: Modsat usability omfatter UX bl.a. service, som f.eks. Genius Bar i Apples butikker. Genius Bar er gratis og bemandet med kompetente medarbejdere. Alternativet er telefonisk support med lange ventetider. UX kontra usability: Modsat usability omfatter UX bl.a. service, som f.eks. Genius Bar i Apples butikker. Genius Bar er gratis og bemandet med kompetente medarbejdere. Alternativet er telefonisk support med lange ventetider. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 21

22 UNF Tænke-højt test af brugsvenlighed Rolf Molich Usabilitytest En usabilityevaluering, hvor typiske brugere én for én løser konkrete opgaver med et produkt med henblik på at finde usabilityproblemer eller måle usability, dvs. gennemførlighed, effektivitet og tilfredshed. En usabilitytest er opdelt i en række usabilitytestsessioner. I hver usabilitytestsession løser én bruger usabilitytestopgaver Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 22

23 Usabilitytest: Tænke-højt metoden Usabilitytest: Tænke-højt metoden Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 23

24 UNF Regler for brugsvenligt design Rolf Molich Affordance Brugssignal En affordance er noget i en brugergrænseflade eller et interaktionsdesign, som hjælper en bruger med at løse sine opgaver. Alternative definitioner: Visuel tilkendegivelse af egenskaber eller muligheder. En ting i verden, som opfordrer til handling Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 24

25 A chair affords sitting, depositing and climbing En stol udsender brugssignaler om, at man kan sidde på den, lægge noget fra sig, og stå på den Affordance Eksempel Brugere har forbedret affordance af et mangelfuldt design Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 25

26 Affordance: Hvilken vej åbnes døren? (fra Lidwell, Holden, Butler: Universal Principles of Design) Affordance i Windows 10, Flat Design En opfattelse af hvordan et system er opbygget og fungerer. En mental model behøver hverken at være komplet eller korrekt. Windows 10s tray er flot men hvor kan man klikke? Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 26

27 Danske Bank MobilePay Tydeligt hvad man skal gøre for at overføre penge En flue, som er indstøbt i fajancen, indbyder til at man sigter efter den. Denne brug af affordance kaldes nudging (puffe venligt), dvs. ændre adfærd uden væsentligt at begrænse muligheder eller tilskyndelser. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 27

28 Eksempel på brugsvenlighed i dagligdagen: Kvittering fra US restaurant. Nudging, dvs. puffe brugere i en ønsket retning. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 28

29 Heuristik En alment anerkendt tommelfingerregel, som hjælper med at forbedre effektivitet Heuristikker Regler for brugsvenlighed 1. Vis systemets tilstand Visibility of system status 2. Tal brugeres sprog Følg konventioner Match between system and the real world 3. Lad brugeren bestemme User control and freedom 4. Gør det ensartet Følg standarder Consistency and standards 5. Forebyg fejl Error prevention 6. Støt hukommelse Vis muligheder Recognition rather than recall 7. Tilbyd fleksibel og effektiv betjening Flexibility and efficiency of use 8. Simplificér Aesthetic and minimalist design 9. Hjælp, når der er problemer Help users recover from errors 10. Hjælp og dokumentation Help and documentation 58 Jakob Nielsens 10 heuristikker fra bogen Usability Inspection Methods. Se også 58 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 29

30 2. Tal brugeres sprog Følg konventioner Tal brugeres sprog Følg konventioner Tal brugeres sprog. Brug ord, vendinger og begreber, som brugere kender. Undgå fagslang. Forklar fagudtryk, hvis de er uundgåelige Overhold velkendte konventioner. Træk på brugernes viden om verden. Eksempel: Vis oplysninger i en naturlig og logisk rækkefølge Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 30

31 Tal brugeres sprog Forudsætning: For at kunne tale brugeres sprog skal du vide, hvem brugerne er, og hvilket sprog de taler Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 31

32 Budget.dk biludlejning. Hvor taler denne side ikke brugeres sprog? Budget.dk biludlejning. Hvor taler denne side ikke brugeres sprog? Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 32

33 Budget.dk biludlejning. Hvor taler denne side ikke brugeres sprog? Oticon Streamer Fjernkontrol til høreapparat. Mange ældre brugere kendte ikke Bluetooth og forstod derfor ikke meningen med knappen nederst til venstre. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 33

34 Kontrolpanel for japansk toilet - ikoner er uforståelige hvis man ikke kender modellen Tekstforklaringer hjælper noget, men Flushing sound repræsenterer en kulturforskel Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 34

35 5. Forebyg fejl Forebyg fejl Error prevention Design produktet, så fejl bliver umulige Tjek for mulige fejl, og bed brugere bekræfte deres hensigt, inden systemet udfører en kritisk handling, specielt hvis den er vanskelig eller umulig at fortryde Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 35

36 Forebyg fejl i indtastning af dato. Bruger behøver ikke kende datoformat eller 28/29/30/31 dage Forebyg fejl ved indtastning af kompliceret kunstnernavn Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 36

37 Forebyg fejl ved indtastning af kompliceret kunstnernavn Eksempel på aktiv forebyggelse af fejl fra Gmail. Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 37

38 8. Simplificér Simplificér Fjern oplysninger, som er irrelevante, eller som der sjældent er behov for. Hver ekstra oplysning i en dialog konkurrerer med de relevante oplysninger om brugeres opmærksomhed og formindsker deres relative synlighed Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 38

39 HP, s. 769: Wenger Giant Swiss Army Knife, 87 forskellige værktøjer, $1.600 Keep it simple Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 39

40 Credit: Gerry McGovern Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 40

41 We all want simplicity - but we don t want to remove -- Gerry McGovern Cutting features can be a bloody process -- Giles Colborne Picture credit: angusleonard, flickr.com Simplificér Miniopgave 2A Kom med forslag til, hvordan denne fjernbetjening kan simplificeres Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 41

42 83 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 42

43 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 43

44 Simplificér Fjerne Skjule Gruppere Flytte Tak til Giles Colborne for dette eksempel Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 44

45 9. Hjælp, når der er problemer There will be errors -- Jurek Kirakowski 90 Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 45

46 Hjælp når der er problemer Help users recognize, diagnose, and recover from errors Skriv meddelelser, som er Synlige Konstruktive Præcise Korrekte Forståelige Høflige Defensive Udgangspunkt for gode meddelelser Et godt udgangspunkt for at skrive brugsvenlige (fejl)meddelelser: Hvad ville et høfligt og hjælpsomt menneske gøre og sige? Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 46

47 En god meddelelse er synlig, så brugere ikke overser den. Konstruktive meddelelser I stedet for at bebrejde brugere, fortæl dem hvad de skal gøre for at løse problemet Ingen resultater fundet. Prøv igen! Ulovligt input. Indtast dato som år-måned-dag, for eksempel Den trådløse internet forbindelse fungerer ikke. Højreklik på ikonet og vælg Reparer, eller kontakt en tekniker Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 47

48 Præcise meddelelser Fortæl så præcist som muligt hvad der gik galt: Noget gik galt Startdatoen for lejeperioden, , ligger efter slutdatoen, Forståelige meddelelser Brug ord og vendinger, som brugere forstår: File not found Desværre kunne vi ikke determinere et centerpunkt for søgningen Et bynavn er nødvendigt for at udføre denne søgning. Indtast et bynavn i feltet herunder Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 48

49 Høflige meddelelser Udtryk dig, som om du stod ansigt til ansigt med brugeren: Du SKAL bekræfte password!! Gentag password for at forebygge indtastningsfejl Defensive meddelelser Skyd skylden på systemet, ikke på brugeren: Du har ikke indtastet dit fornavn. Klik Tilbage og indtast det. Systemet skal bruge dit fornavn for at kunne behandle dine data. Indtast fornavn nedenfor Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 49

50 Undgå negative ord Undgå negative ord og vendinger i fejlmeddelelser, for eksempel Ulovlig Ugyldig Forkert Fejl!! Du SKAL UNDGÅ MEDDELELSER OG ORD MED LUTTER STORE BOGSTAVER!!! De råber ad brugeren. 99 Quiz Eksempel på fejlmeddelelse Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 50

51 Tak for jeres opmærksomhed. Spørgsmål? Sammenfatning Diskussioner om interaktionsdesign bør tage udgangspunkt i reelle brugerdata og målinger ikke i meninger Tænke-højt metoden til test af brugsvenlighed Retningslinjer for godt design: Tal brugerens sprog følg konventioner Forebyg fejl Hjælp, når der er problemer Plancher: Interaktionsdesign Copyright 2018 Rolf Molich, side 51