Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung. Mensch-Maschine-Interaktion

Transkript

1 Folie 1 Mensch-Maschine-Interaktion

2 Folie 2 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

3 Folie 3 Finde die Affordance!

4 Folie 4 Don Norman: a brief quote on affordances

5 Was ist verkehrt? Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie 5

6 Folie 6 Affordances in GUIs

7 Folie 7 Social Affordances

8 Folie 8 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

9 Folie 9 Physikalische Constraints

10 Folie10 Logische Constraints

11 Kulturelle Constraints Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie 11

12 Folie12 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

13 Folie13 Welches Ventil regelt welche Flamme?

14 Folie14 Ein neueres Beispiel

15 Folie15 Woher kommt die Tastenanordnung?

16 Folie 16

17 Mappings & Gulf of Execution ISO Nebelscheinwerfer 4.22 Nebelschlussleuchte Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie17

18 Folie18 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

19 Folie19 Arten von Konsistenz Syntaktische Konsistenz Semantische Konsistenz Terminologische Konsistenz! Innere Konsistenz Äußere Konsistenz

20 Folie20 Eine überraschende Inkonsistenz

21 Folie21 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

22 Folie22 Bitte Warten!

23 Folie23 Sinnvolles Feedback? Fehlervermeidung??

24 Folie24 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

25 Folie 25

26 Folie26 Vermeidbare Fehler

27 Folie27 Aussagekräftige Fehlermeldungen bezeichnen das Problem möglichst spezifisch bieten einen konstruktiven Lösungsvorschlag sind höflich Stand Mittlerweile ersetzt durch leere Seite (!!! ;-)

28 Folie28 (nicht nur) Fehler rückgängig machen: Undo

29 Folie29 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

30 Folie30 Interface Animationen in OSX

31 Folie31 Interface Animationen in einem Spiel

32 Folie32 Fehlende Animation

33 Folie33 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

34 Folie34 Physikanaloge UI-Elemente

35 Physikanalogie zu Ende gedacht: Bumptop Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie35

36 Folie36 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

37 Folie37 Metapher???

38 Folie38 Der Fernschreiber als Metapher

39 Folie39 Der Schreibtisch als Metapher

40 Folie40 Spezialisierte Metaphern I

41 Folie41 Spezialisierte Metaphern II

42 Folie42 Microsoft: At home with Bob

43 Folie43 Beispiel: Data Mountain (Robertson, UIST 98, Microsoft)

44 Folie44 Beispiel: Pile Metapher (Mander et al., CHI 92, Apple)

45 Folie 45

46 Folie46 15 Jahre später: Flip 3D, Cover Flow, Stacks

47 Folie47 Kapitel 7 - Grundregeln für die UI Gestaltung Affordances Constraints Mappings Konsistenz und Vorhersagbarkeit Feedback Fehlertoleranz und Fehlervermeidung Interface Animation Physikanalogie Metaphern als Basis für UI Object-Action Interface Modell

48 Folie48 OAI und AOI Modelle Dateisystem Verschieben Ordner O1 Ordner O2 O1 öffnen O2 öffnen Bewegen Datei XYZ XYZ selektieren XYZ bewegen XYZ loslassen