Menyer, formulär och dialogrutor

Storlek: px

Starta visningen från sidan:

Download "Menyer, formulär och dialogrutor"

Alf Abrahamsson
för 7 år sedan
Visningar:

1 Interaktion 2

2 Menyer, formulär och dialogrutor Konkreta typer av interaktion för direktmanipulation/wimp Kursboken Kap 6

3 Menyer

4 Tanken med att använda menyer i användargränssnitt Datorer är duktiga på att snabbt leverera visuell information och människor är duktiga på snabb visuell igenkänning! Ben Shneiderman

5 Single menus

6 Grundregel The categories should be comprehensible and distinctive so that users are confident in making their selections. Ben Shneiderman

7 Single menus: binär meny

8 Observera metaforen! Single menus: radio buttons

9 Single menus: check boxes

10 Singe menus: pull down menus

11 Shneiderman rekommenderar Bättre gråmarkera än ta bort => positional constancy

12 Shneiderman rekommenderar Använd genvägar

13 Single menus: pop-up menus

14 Pop-up menus Snabbare att nå än klassisk topp-placerad meny Speciellt lämpliga för large wall displays

15 Pop-up menus: pie menu

16 Popup menus: pie menu More rapid selection Selecting without visual attention Callahan et al (1988)

17 Single menus for long lists: fisheye menu

18 Fisheye menu Can improve speed Not liked by all: not recommended as default menu style Bederson, 2000

19 Fisheye menu

20 Single menus for long lists: iphone datepicker

21 Tree stuctured menus

22 Tree structured menus

23 Tree structured menus Bredd att föredra framför djup

24 Tree structured menus Bredd att föredra framför djup Djup: Tre nivåer (max fyra)

25 Tree structured menus Bredd att föredra framför djup Djup: Max tre nivåer Stor risk att användaren tappar orienteringen i menyer med stort djup

26 Riktlinjer för hur man organiserar menyer Gruppering Ordningsföljd Layout

27 Gruppering Create groups of logically similar items

28 Create groups of logically similar items Country > State > City

29 Gruppering Create groups of logically similar items Form groups that cover all possibilities

30 Form groups that cover all possibilities

31 Gruppering Create groups of logically similar items Form groups that cover all possibilities Make sure that items are nonoverlapping

32 Make sure that items are non-overlapping Entertainment Events?? Conserts

33 Make sure that items are nonoverlapping Entertainment Events Concerts Sports

34 Gruppering Create groups of logically similar items Form groups that cover all possibilities Make sure that items are nonoverlapping Use familiar terminology, but ensure that items are distinct from one another

35 Use familiar terminology, but ensure that items are distinct from one another Day och Night 6 A.M. to 6 P.M. och 6 P.M. to 6 A.M.

36 Ordningsföljd Vad göra när det inte finns en naturlig ordning? Gruppera relaterade objekt Alfabetisk ordning Mest använda objekten först Viktigaste objekten först

37 Ordningsföljd: relaterade objekt

38 Ordningsföljd: alfabetisk ordning

39 Ordningsföljd: adaptiva menyer

40 Adaptiva menyer De minst använda valen visas ej Klicka på pilen för att se dem Fungerar bra för en del användare Starkt ogillande hos vissa användare

41 Titlar Layout av menyer

42 Layout av menyer Namn på menyobjekt Använd känd terminologi Se till att namnen skiljer sig åt Använd koncisa namn Börja med nyckelord

43 Grafisk design Layout av menyer

44 Formulär och dialogrutor

45 Formulär och dialogrutor

46 Formulär Metafor: pappersformulär

47 Högerjustera titlar Formulär

48 Formulär Tillåt smidig navigering

49 Ge tydlig feedback Formulär

50 Ge tydlig feedback Formulär

51 Visuell organisation Dialogrutor

52 Dialogrutor

53 Dialogrutor med tabbar

54 Dialogrutor med tabbar Ofta effektiv metod Kan bli svårt för användaren att navigera

55 Översikt, orientering och navigering

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

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

59 Översikt: vad finns?

60 Översikt: vad finns? Lätt att missa möjligheten att använda presets Denna del tar väldigt mycket av användarens uppmärksamhet i anspråk

61 The F-shaped pattern

62 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.

63 Orientering: var är jag?

64 Navigering: hur kommer jag dit jag vill?

65 Navigering i ipad-tidning #1

66 Navigering i ipad-tidning #2

67 Felhantering

68 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)?

69 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 annars att något ej är reversibelt + man ska bara behöva ändra/reversera det som är fel) Överväg så kallade forcing functions

70 Kursboken Kap 8 Interaction devices

71 Interaction devices Keyboards and keypads Pointing devices Direct Indirect

72 Keyboards and keypads

73 The QWERTY layout

74 The QWERTY layout

75 The Dvorak layout

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

77 Tangentbordsknappar Konkav, sträv yta 12 mm

78 Tangentbordsknappar gram 3-5 mm

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

80 Profile of force displacement

81 Clickiness!

82 Pointing devices

83 Två kategorier Direct Indirect

84 Light pen

85 Light pen Relativt populär på 80-talet Intuitiv Problem med belastningsergonomi Omständig Ömtålig

86 Touchscreen Touch screen

87 Touch screen Intuitiv Robust Problem med belastningsergonomi Handen kan skymma Dålig precision Dålig taktil feedback

88 Touch screen Intuitiv Man interagerar direkt med informationen (direktmanipulation!)

89 Robust Touch screen

90 Touch screen Problem med belastningsergonomi

91 Touch screen Handen kan skymma

92 Dålig precision Touch screen

93 Dålig precision Touch screen

94 Touch screen Lift-off strategy för bättre precision 1. Peka på skärmen, markör dyker upp 2. Flytta markören 3. Lyft fingret

95 Lift-off strategy iphone

96 Lift-off strategy iphone

97 Lift-off strategy iphone

98 Lift-off strategy iphone

99 Touchscreen Dålig taktil feedback många föredrar ett fysiskt tangentbord

100 Touchscreen Olika typer av teknik Resistive Capacitive Surface acoustic-wave

101 Touchscreen Resistive touchscreens

102 Resistive touchscreens Billiga Går att peka med stylus, med handskar etc. Kan ge taktil feedback Låg känslighet Svårt implementera multitouch

103 Touchscreen Capacitive touchscreens

104 Capacitive touchscreens Högre känslighet Multi-touch Går ej att peka med stylus, handskar etc.

105 Direct pointing devices Stylus (pen-based interface)

106 Stylus (pen-based interface) Intuitiv Hög precision Omständig Mobila enheter kräver två händer

107 Mouse Indirect pointing devices

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

109 Trackball Indirect pointing devices

110 Så, vilket styrdon är bäst?

111 Det beror på......vem användaren är...vad användaren ska göra användningskontexten

112 Frågor?

Relevanta dokument

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

Grundläggande teori för användargränssnitt,del 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 527-528) Felhantering