Gränsnittsprinciper. Mattias Institutionen för datavetenskap Linköpings universitet

Transkript

1 Gränsnittsprinciper Mattias Institutionen för datavetenskap Linköpings universitet 1

2 Dagens föreläsning Principer i gränssnitt 2

3 Principer i gränssnitt Syfte: Förklara gränssnittsprinciper i termer av kognitiv psykologi Problem: Ibland blir principer motsägande. Då måste man prioritera. För att prioritera måste man förstå vad som ligger bakom principerna. 3

4 Exempel på principer Enkel och naturlig dialog Tala användarens språk Minimera användarens minnesbelastning Var konsekvent Ge feedback Erbjud tydligt markerade utgångar Erbjud genvägar Bra felmeddelanden Förebygg fel 4

5 Neisser (1976) Actual nearby environment (available information) Modifies Actual present environment (available information) Samples Modifies Samples Schema of present environment Cognitive map of nearby environment Directs Perceptual exploration Motion and travelling Directs 5

6 Affordance (handlingsinvit) Uppfattade och faktiska egenskaper hos ett ting som bestämmer vad man kan göra med den. 6

7 7

8 Knappar på skärmen tycks ge en invit att trycka på dem men inte dra i dem eller redigera Reply Forward Print Delete 8

9 9 Handlingsinviter sekvensieras

10 Handlingsinviter i GUIs sekvensieras också Selected Mouse Over Unselected Disabled 10

11 Vilken ger tydligaste inviten att scrolla? United States List Item United Arab Emirates! United Kingdom! United States! US Minor Outlying Isl.! Uruguay List Item List Item List Item List Item List Item 11

12 JA Falsk Synlig Perceptuell informa0on NEJ Korrekt förkastad Gömd NEJ JA Handlingsinvit 12

13 Mentala modeller Användares föreställningar om domänen och systemen de använder. Hur funkar det i deras värld? 13

14 Mentala modeller i design Norman (1988) 14

15 Designa en konceptuell modell (Dan Brown, 15

16 Metaforer Att förstå en domän genom analogi till en annan domän (metaforiskt tänkande) är ett sätt att strukturera upp en konceptuell modell. 16

17 Det ska fungera som: (Marcus, 1995) Ett skrivbord: Drawers, files, folders, papers, paper clips, stick-on note sheets Ett dokument: Böcker, kapitel, bokmärken, bilder, tidningar, stycken, tidskrifter, artiklar, nyhetsbrev, formulär Ett foto: Albums, photos, photo brackets/holders TV: Program, kanaler, TVbolag, reklam, TV-guide En kortlek: Kort, högar En behållare: Hyllor, lådor, fack Ett träd: Rötter, stam, grenar, löv En stad: Folk, områden, landmärken, vägar, byggnader, rum, fönster, skrivbord 17

18 Funktioner ska fungera som att: (Marcus, 1995) Traversera (målinriktat): navigera, köra, flyga, gå Browsa (mindre målinriktat sökande efter alternativ): snabbläsa, fönster-shoppa, bläddra Scanna (väldigt snabb browsing): rulla förbi, passera anslagstavlor längs motorvägen Lokalisera: peka, beröra, ringa in Välja: beröra, peta, ta tag, fånga med lasso, placera fingret på och dra Skapa: lägga till, kopiera Radera: kasta bort, förstöra, tappa, återvinna, makulera 18

19 Direktmanipulation Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt. 19

20 Ej direktmanipulation 20

21 MÅL AVSIKT FÖRVÄNTAN BEDÖMA BESTÄM HANDLING Normans handlingscykel TOLKA GENOMFÖR! UPPFATTA! 214

22 Feedback Återkoppling på resultatet av en handling. Copy Moving 1,234 Files to "Keynotopia" 36.6 MB of MB - About 10 seconds 22

23 Feedforward Att man vet vad som ska hända innan man utför handlingen. 23

24 FYSISKT SYSTEM GULF OF EXECUTION GULF OF EVALUATION MÅL Gulf: avgrund, stup, skrämmande gap, bråddjup Execution: genomförande Evaluation: bedömning 24

25 Uppmärksamhet och den magiska siffran 7±2 Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet 25

26 Därför: Hjälp folk att komma ihåg vad de gör och deras arbetsobjekts status Modes är både kraftfulla och riskabla Att komma ihåg instruktioner med många steg är svårt. Se till att användaren kan se dem samtidigt som de utför stegen. 26

27 Fitts lag Tiden det tar att flytta till ett föremål är beroende av avståndet och föremålets storlek 27

28 Hicks lag För varje valmöjlighet ökar tiden det tar att välja. Ta bort det onödiga. Folk delar upp sina val i kategorier om det går vilket minskar tiden att välja. Om något sticker ut väljer de det: Primärt innehåll först snarare än navigation först. 28

29 29

30 30

31 Poka-Yoke-principen Att felsäkra, antingen genom att förebygga fel eller göra det lätt att upptäcka fel 31

32 80/20-regeln (The Pareto Principle) En hög andel användare kommer använda en liten del av funktionaliteten Använd användarstudier för att ta reda på vilka funktioner det är som kommer användas mest Placera dem nära till hands 32

33 Användbarhet Den grad i vilken specifika användare kan använda en produkt för att uppnå ett specifikt mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt i ett givet sammanhang. ISO

34 34 Det var första timmen

35 Neisser (1976) Förväntningar Actual nearby environment (available information) Modifies Actual present environment (available information) Samples Modifies Samples Schema of present environment Cognitive map of nearby environment Directs Perceptual exploration Motion and travelling Directs 35

36 1 (av 5) förra nästa 36

39 4 (av 5) nästa förra 39

40 Våra förväntningar beror på sammanhanget 40

41 41

42 42

43 43

44 Våra förväntningar beror på vilka mål vi har 44

45 Harry Brignull 45

46 Uppgift 1 Räkna kolumnerna Uppgift 2 Räkna personerna Harry Brignull 46

47 Konsekvenser för design Undvik tvetydighet Tolkar alla användare skärmbilden på samma sätt? Var konsekvent Konsekvent utformning genom hela systemet för det lätt för användare att upptäcka och känna igen objekt. Förstå användarnas mål Vad är de ute efter? Som helhet och i varje steg i interaktionen? Lyft fram det viktiga. 47

48 Vårt seende söker struktur Gestaltperception: Vårt seende är holistiskt och ser hela former, figurer och objekt snarare än enskilda linjer, kanter och ytor. 48

49 Närhetslagen: Saker som är nära hör ihop 49

50 Likhetslagen: Saker som är lika hör ihop 50

51 Kontinuerlighetslagen: Delarna fortsätter 51

52 Slutenhetslagen: Delar av en form bildar en helhet 52

53 53 Figur och grund Designer Nathan Ford

54 Den gemensamma rörelsens lag gör att de som rör sig ihop hör ihop 54

55 VI SÖKER OCH ANVÄNDER OSS AV VISUELL STRUKTUR Exempel av Brandon Jones och Andy Rutledge

56 56 Storlek

57 57 Färg

58 58 Kontrast

59 59 Justering och upprepning

60 60 Justering och upprepning

61 61 Densitet och whitespace

62 62 Ryckig ögonbana

63 63 Lugn ögonbana

64 64 Konsekvent utformad grid

65 VÅRT PERIFERA SEENDE ÄR DÅLIGT Exempel av Marc Van Rymenant, Simplifying interfaces 65

66 66

67 Öka synligheten på ett objekt genom att Placera det där folk tittar Flytta det bort från andra objekt Flytta bort omgivande objekt Lägga visuell tyngd på det Reducera den visuella tyngden på omgivande objekt 67

68 Dra till sig uppmärksamheten på ett burdust sätt genom att En modal dialog kastas upp i ansiktet Spela ljud som startar scanning Blinka och skaka: rörelse uppfattas perifert och drar automatiskt till sig uppmärksamhet 68

69 69 VÅRT MINNE ÄR INTE PERFEKT

70 Vi använder hjälpmedel Bokmärken Vi gör högar när vi räknar Vi använder penna och pappersrutiner för att dividera och multiplicera Vi gör kategorier för att hålla reda på objekts status (inkorg, arbetshög, utkorg) 70

71 Informationsvittring Man har uppmärksamheten på sitt mål Man funderar inte mycket över instruktioner, det finns det inte uppmärksamhetsutrymme för Saker som inte har med ens mål att göra uppmärksammar man inte Man följer informationsspåret mot sitt mål och utvecklar t.ex. banner blindness När målet är uppfyllt avslutar man och glömmer att städa upp 71

72 Invanda banor Folk är vanemänniskor Att inte behöva komma ihåg går ofta fortare även om det är mer omständligt för system som används sällan Guida användare till de bästa banorna Hjälp erfarna användare att jobba snabbt 72

73 DET ÄR LÄTT ATT KÄNNA IGEN, MEN SVÅRT ATT KOMMA IHÅG 73

74 Recognition rather than recall Ikoner att känna igen 74

75 75 Känna igen var man är

76 Problemlösning och beräkning är svårt Låt folk se och upptäcka saker genom att få manipulera olika vyer på data snarare än att behöva räkna ut saker Använd datorn till det den är bra på: beräkningar 76

77 Ett par faktorer som påverkar lärande Vi lär oss göra saker bättre om gränssnittet är uppgifts-fokuserat, bekant, enkelt och konsekvent utformat Vi lär oss saker bättre när det inte är någon fara om det går fel 77

78 Interaktion är tidsbaserad Den kortaste paus vi kan höra: 1 millisekund (0,001 sekund) Det kortaste stimulus vi kan se: 5 millisekunder (0,005 sekund) Den kortaste automatiska reflexen: 80 millisekunder (0,08 sekund) Att bli medveten om vad vi ser: 100 millisekunder (0,1 sekund) Max. tidsavstånd för att direkt uppfatta orsak och verkan: 140 millisekunder (0,14 sekund) Att medvetet reagera på synintryck: 700 millisekunder (0,7 sekund) Maximal paus i samtal som inte upplevs som tystnad: 0,5-2 sekunder Uppmärksamhet på en sak: 10 sekunder Att fatta ett kritiskt beslut i en nödsituation. 100 sekunder 78

79 Responsiva system Säger till direkt att det har fått input Säger hur lång tid saker tar Ger dig möjlighet att göra annat medan du väntar Hanterar händelser på kö, på ett smart sätt Städar och gör låg-prioriterade saker i bakgrunden Förutser dina vanligaste handlingar 79

80 Tidsmässiga designkonsekvenser Det finns ett antal deadlines som ett interaktivt system måste kunna möta Feedback på den lilla tidsskalan Rätt information på rätt plats på den stora tidsskalan Fuska: Fejka tung grafik vid drag-n-drop/rörelse Arbeta i förväg genom pre-load Responsivitet kan vara avgörande (iphone vs. vissa Android-lurar) 80

81 Alltså, vad som gömmer sig bakom gränssnittsprinciper? Förväntningar Gestaltlagar Visuell struktur Uppmärksamhet Minne Handlingsbanor Tid 81

82 10 tumregler för användbarhet (Nielsen, 1993; övers. Ottersten & Berntsson, 2002) 1. Enkel och naturlig dialog 2. Använd ett naturligt språk 3. Minimera användarens minnesbelastning 4. Enhetlighet 5. Förse användaren med återkoppling 6. Förse användaren med klart markerade funktioner för att avbryta dialogen 7. Effektiv användning 8. Bra felmeddelanden 9. Förhindra fel 10.Hjälp och dokumentation 82

83 Dagens föreläsning Principer i gränssnitt 83

84