Grundläggande teori för användargränssnitt,del 2

Transkript

1 Grundläggande teori för användargränssnitt,del 2

2 Innehåll Översikt, navigering och orientering (ej i boken) Typer av användargränssnitt (Kap 6) Styrdon (ej i boken) Fitts lag (kort på sidan ) Felhantering (kort på sid 138) Kursboken är tyvärr väldigt tunn vad gäller dessa aspekter

3 Översikt, orientering och navigering

4

5 Översikt: Vad finns? Orientering: Var är jag? Navigering: Hur kommer jag dit jag vill?

6 Översikt: vad finns? Ge användaren en översikt över vad produkten erbjuder Tätt kopplat till synlighet (Norman)

7 Översikt i Handbrake

8 Översikt i Handbrake Lätt att missa möjligheten att använda presets Denna del tar väldigt mycket av användarens uppmärksamhet i anspråk

9 The F-shaped pattern

10 The F-shaped pattern Hur vi läser webbinnehåll Nästan 70% av läsarens fokus ligger till vänster i vyn Det vanligaste läsmönstret: 1. Horisontell ögonrörelse #1 2. Horisontell ögonrörelse #2 3. Vertikal ögonrörelse 3.

11 Orientering: var är jag?

12 Navigering: hur kommer jag dit jag vill?

13 Exempel: Två olika designer av en ipadtidning

15 Typer av användargränssnitt

16 Kommandobaserad interaktion

17 AutoCAD

18 Kommandobaserad interaktion + Snabbt för vana användare

19 Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt

20 Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter

21 UNIX

22 Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande

23 Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande Hög felfrekvens

24 Kommandobaserad interaktion + Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter - Kräver träning och memorerande Hög felfrekvens Svårt att komma igång med

25 WIMP

26 The Xerox Star Interface Utvecklades 1973 av Xerox PARC i Palo Alto, Kalifornien Mål: användargränssnitt som alla kan klara av

27 WIMP Windows Icons Menues Pointing device

28 WIMP + Lätt att lära, lätt att minnas

29 WIMP + Lätt att lära, lätt att minnas Rikligt med feedback

30

31 WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande

32

33 WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ibland ta onödigt mycket skärmyta

34

35 WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner

36

37 WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation

38

39 WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande - Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation Tidsödande byta styrdon

40 Graphical User Interface (GUI) Vanliga GUI-komponenter Fönster Dialogrutor Formulär Menyer

41 Fönster

42 Fönster För att överkomma skärmens begränsade yta Översikt, navigering och orientering försvåras Att växla mellan olika fönster är en av de vanligaste operationerna när vi interagerar med ett datorsystem Genomsnittstiden för hur länge ett fönster är öppet och interageras med = 20 sekunder Att designa bra fönsterhantering är svårt!

43 Alt + Tab

44 Exposé (Mac OS X)

45 Windows Flip 3D

46 Dialogrutor

47 Spara som i tidig Office-version

48 Spara som i Office Xp

49 Dialogrutor Visuell organisation viktigt! Man pratar ibland om mappning av handlingssekvens dvs. att styra användarens uppmärksamhet och handlingar så att han/hon gör saker och ting i rätt ordning.

50 Dialogrutor med tabbar Utrymmeseffektiv metod Översikt, navigering och orientering försvåras (speciellt om flera rader av tabbar används)

51 Formulär Metafor: pappersformulär

52 Riktlinjer för formulär

53 Högerjustera titlar

54 Tillåt smidig navigering

55 Ge tydlig feedback när fält har fyllts i fel

56 Menyer

57 Menyer Bygger på principen att vi har lättare för att känna igen än att dra oss till minnes (recogntion over recall)

58 Generella riktlinjer för menyer

59 Presentera relevanta val

60 Bättre gråmarkera än ta bort Positional constancy: Saker och ting bör befinna sig där vi är vana vid att hitta dem

61 Lägg mest använda valen överst, minst använda nederst

62 Dela in valen i naturliga grupper

63 Undvik väldigt långa listor

64 Använd genvägar

65 Olika typer av menyer Drop-down-meny Cascading drop-down-meny Pop-up-meny Pajmeny Menyer för långa listor Adaptiva menyer

66 Drop-down-meny

67 Cascading drop-down-meny Ger tillgång till många val Kräver bra motorisk kontroll Kan vara omöjliga att använda för personer med funktionsnedsättning och äldre människor

68 Pop-up-meny

69 Pop-up-meny Snabbare att nå än topp-placerad drop-down-meny Speciellt lämpliga för large wall displays

70 Pajmeny

71 Pajmeny Går snabbare att välja Man kan välja utan att titta (muskelminnet) Callahan et al (1988)

72 Menyer för långa listor: fisheye-meny

73 Fisheye-meny Kan öka hastigheten. Inte alla uppskattar dem och de rekommenderas därför inte som defaultmeny. Bederson, 2000

74 Menyer för långa listor: iphone datepicker

75 Adaptiva menyer De minst använda valen visas ej Fungerar bra för en del användare men väcker starkt ogillande hos vissa användare Bör ej användas som defaultinställning

76 Ikoner Sid i kursboken Tas upp på föreläsningen Grafisk design nästa vecka

77 Andra typer av användargränssnitt Mobile Touch Air-based gesture Multimodal Haptic Mixed & augmented reality Virtual reality dessa kommer ni att studera i kurserna Avancerad interaktionsdesign och Virtual Reality i teori och praktik

79 Styrdon (ej i kursboken)

80 Styrdon Tangentbord Pekdon

81 Tangentbord

82 QWERTY-layout

83 QWERTY-layout

84 Dvorak-layout

85 QWERTY vs. Dvorak QWERTY: 150 ord/minut Dvorak: 200 ord/minut Mindre fel med Dvorak Ändå är QWERTY standard. Varför?

86 Tangentbordsknappar Konkav, sträv yta 12 mm

87 Tangentbordsknappar gram 3-5 mm

88 Följer man dessa riktlinjer så får man... Snabb input Låg felfrekvens Bra feedback

89 Pekdon

90 Pekskärm

91 Pekskärm Intuitiv Robust Problem med belastningsergonomi Handen kan skymma Dålig precision Dålig taktil feedback

92 Pekskärm Intuitiv Man interagerar direkt med informationen

93 Robust Pekskärm

94 Pekskärm Problem med belastningsergonomi

95 Pekskärm Handen kan skymma

96 Dålig precision Pekskärm

97 Lift-off strategy Teknik för bättre precision i pekskärmar 1. Peka på skärmen, markör dyker upp 2. Flytta markören 3. Lyft fingret

98 Pekskärm Dålig taktil feedback många föredrar ett fysiskt tangentbord

99 Pekskärm Olika typer av teknik Resistiva Kapacitiva

100 Resistiv pekskärm

101 Resistiv pekskärm Billig Går att peka med stylus, med handskar etc. Kan ge taktil feedback Låg känslighet Svårt implementera bra multi touch

102 Kapacitiv pekskärm

103 Kapacitiv pekskärm Högre känslighet Multi touch Går ej att peka med stylus, handskar etc.

104 Stylus

105 Stylus Intuitiv Hög precision Omständig Mobila enheter kräver två händer

106 Mus

107 Mus Billig Bra belastningsergonomi Hög precision Kräver en smula träning i början Omständigt flytta handen

109 Fitts lag En matematisk modell av finmotorisk kontroll

110 Fitts lag OK

111 Fitts lag Distance (D) OK Width (W)

112 Fitts lag Distance (D) OK T = tid att nå målet D = avstånd till målet W = målets bredd a, b = konstanter som beror på styrdonet Width (W)

113 Experiment

114 Vad säger Fitts lag? Det tar längre tid att nå små objekt som är långt bort Små ändringar i storlek hos små objekt spelar större roll än små ändringar i storlek hos stora objekt Det samma gäller för avståndet till objektet

115 Några konsekvenser av Fitts lag

116 Ge större storlek till objekt som används ofta

117 Placera objekt som används ofta nära markörens position Pop-up-menyer The Mini Toolbar

118 Objekt vid skärmkanten har oändlig målbredd!

119 Notera skillnaden!

120 The Quick Access Toolbar

121 Man pratar ibland om The Magic Corners

122 The Magic Corners: Win 95 vs. Win XP

123 Hur drar pajmenyer nytta av Fitts lag?

124 OBS! Kursbokens beskrivningar av Fitts lag är inte helt korrekta. Utgå från denna föreläsning istället!

126 Felhantering

127 Vad är ett fel? Handhavandefel Misstag (man tänker fel) Slip (man tänker rätt, men gör fel) Systemfel

128 Upptäckt-diagnos-åtgärd Hur lätt eller svårt är det att upptäcka felet/problemet och hur lång tid tar det? Hur lätt eller svårt är det att diagnostisera felet/problemet? Hur tydligt framgår det vilken åtgärd som är rätt (t ex klicka på undo-knappen eller ringa tekniker för service)?

129 Principer för god felhantering Synlighet (gör rätt saker synliga) Feedback (bra & begriplig) Vettig layout (rätt saker på rätt plats: mappning) Reversibilitet (markera om något ej är reversibelt + man ska bara behöva ändra/reversera det som är fel) Överväg så kallade forcing functions

130 Riktlinjer för design av felmeddelanden Upplys med artig ton användaren om vad han/hon behöver göra för att åtgärda felet. Undvik ord som FATAL, ERROR, INVALID etc. Undvik långa felkoder och stora bokstäver. Ljudfeedback ska användaren själv kunna ställa in, eftersom de kan orsaka förlägenhet hos honom/henne. Ge exakt information. Erbjud en hjälpikon med vilken användaren kan få kontextberoende hjälp. Erbjud information på olika nivåer så att kortare meddelanden kompletteras med längre förklaringar. Sid i kursboken

131 Vi avslutar föreläsningen med en riktig värsting