Boken. OBS! Konkret interaktion är inte bokens starka sida. OBS! Jag har skrivit fel kapitel i kursprogrammet Uppdaterad version kommer.

Storlek: px

Starta visningen från sidan:

Download "Boken. OBS! Konkret interaktion är inte bokens starka sida. OBS! Jag har skrivit fel kapitel i kursprogrammet Uppdaterad version kommer."

Ingrid Hedlund
för 8 år sedan
Visningar:

1 Interaktion 1

2 Boken Typer av interaktion (Kap 2.5) Typer av användargränssnitt (Kap ) Översikt, navigering och orientering (ej i boken) Felhantering (kort på sid 138) OBS! Konkret interaktion är inte bokens starka sida. OBS! Jag har skrivit fel kapitel i kursprogrammet Uppdaterad version kommer.

3 Typer av interaktion

4 Instructing Conversing Manipulating Exploring Fyra grundläggande typer av interaktion ta denna väldigt grova indelning med en REJÄL nypa salt. Verkligheten är oerhört mycket mer komplex.

5 Instructing Kommando-baserad interaktion, menyer, knappar etc.

6 Conversing The user has a dialog with the system

7 Manipulating The user interacts with objects by directly manipulating them

8 Exploring Virtual reality, augmented reality, ambient environments etc.

9 Typer av användargränssnitt

10 Typer av användargränssnitt Command-based WIMP and GUI Multimedia Virtual reality Information visualization Web Consumer electronics and appliances Mobile Speech Pen Touch Air-based gesture Multimodal Shareable Tangible Haptic Augmented & mixed reality Wearable Robotic Brain-computer

11 Kommandobaserad interaktion

12 Kommandobaserad interaktion

13 AutoCAD

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

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

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

17 UNIX

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

19 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

20 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

21 WIMP

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

23 WIMP Windows Icons Menues Pointing device

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

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

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

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

31 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

33 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

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 Missledande visuell representation Tidsödande byta styrdon

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

37 Fönster

38 Fönster

39 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 Att designa bra fönsterhantering är svårt!

40 Alt + Tab

41 Exposé (Mac OS X)

42 Windows Flip 3D

43 Windows 8 Bara ett fönster av samma program öppet på samma gång

44 Dialogrutor

45 Dialogrutor

46 Spara som i tidig Office-version

47 Spara som i Office Xp

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

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

50 Formulär

51 Formulä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

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

59 Generella riktlinjer för menyer

60 Presentera relevanta val

61 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

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

63 Dela in valen i naturliga grupper

64 Undvik väldigt långa listor

65 Använd genvägar

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

67 Drop-down-meny

68 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 samt för äldre människor

69 Pop-up-meny

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

71 Pajmeny

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

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

74 Menyer för långa listor: fisheye-meny Kan öka hastigheten. Inte alla uppskattar dem och de rekommenderas därför inte som defaultmeny.

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

76 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

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

78 Översikt, orientering och navigering

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

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

82 Översikt i Handbrake

83 Ö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

84 The F-shaped pattern

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

86 Orientering: var är jag?

87 Navigering: hur kommer jag dit jag vill?

88 Felhantering

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

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

91 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

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

93 Vad tycker ni om den här?

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