mmi 7 grundregeln - lmu münchen · butz, krüger: mensch-maschine-interaktion, ... ordner o1...
Post on 17-Sep-2018
237 Views
Preview:
TRANSCRIPT
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Mensch-Maschine-Interaktion
1
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
2
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Finde die Affordance!
3
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Don Norman: a brief quote on affordances
4
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Was ist verkehrt?
5
http://www.teknoblog.com/wp-content/uploads/2013/03/siemens-sx-1-170313.jpg
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Affordances in GUIs
6
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Social Affordances
7
http://www.buddhabarhotelprague.com/files/cms/sized/files/hotel/dining/buddha-bar-restaurant-gal-07-lounge-bar-1300x867.jpg
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
8
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Physikalische Constraints
9
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Logische Constraints
10
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Kulturelle Constraints
11
http://mietenstopp.blogsport.de/images/stop_zwangsraeumungen_ar_2010px.png
http://3.bp.blogspot.com/--rvZLZDzpik/T2C6VgYVq8I/AAAAAAAAAGA/EeT0FKmTHWk/s1600/recycling.jpg
http://www.nuernberg-hg.de/china/Bilder/shanghai9.jpg
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
12
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Welches Ventil regelt welche Flamme?
13
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Ein neueres Beispiel
14
https://www.youtube.com/watch?v=6pTZ4dJZnbU
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Woher kommt die Tastenanordnung?
15
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie 16
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Mappings & Gulf of Execution• ISO 2575
– 4.21 Nebelscheinwerfer – 4.22 Nebelschlussleuchte
17
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
18
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Arten von Konsistenz• Syntaktische Konsistenz • Semantische Konsistenz • Terminologische Konsistenz !
• Innere Konsistenz • Äußere Konsistenz
19
https://d13yacurqjgara.cloudfront.net/users/253122/screenshots/1179951/screenshot.jpg
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Eine überraschende Inkonsistenz…
20
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
21
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Bitte Warten!
22
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Sinnvolles Feedback? Fehlervermeidung??
23
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
24
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie 25
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Vermeidbare Fehler
26
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Aussagekräftige Fehlermeldungen…• bezeichnen das Problem möglichst spezifisch • bieten einen konstruktiven Lösungsvorschlag • sind höflich
27
http://www.verwaltung.uni-muenchen.de Stand 2010. Mittlerweile ersetzt durch leere Seite (!!! ;-)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
(nicht nur) Fehler rückgängig machen: Undo
28
http://static3.businessinsider.com/image/529e7e42ecad04c15ddfbba2/heres-how-to-undo-a-sent-email-in-gmail.jpg
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
29
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Interface Animationen in OSX
30
https://www.youtube.com/watch?v=KHYEbcqWtz4
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Interface Animationen in einem Spiel
31
https://www.youtube.com/watch?v=HTQbbrqNre0
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Fehlende Animation…
32
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
33
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Physikanaloge UI-Elemente
34
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Physikanalogie zu Ende gedacht: Bumptop
35https://www.youtube.com/watch?v=M0ODskdEPnQ
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
36
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Metapher ???
37
http://www.logomarket.de/images/P/17223.jpg
http://politik-digital.de/wp-content/uploads/Flaschenhals.jpg
http://cdn.maedchen.de/bilder/warum-wuerdest-du-ein-perfekt-gutes-herz-brechen-wollen-500x347-1339282.jpg
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Der Fernschreiber als Metapher
38
http://startup.nmnaturalhistory.org/content/images/artifacts/36_l.jpg
http://s7.computerhistory.org/is/image/CHM/102647895p-03-02?$re-zoomed$
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Der Schreibtisch als Metapher
39
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Spezialisierte Metaphern I
40
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Spezialisierte Metaphern II
41
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Microsoft: At home with Bob
42
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Beispiel: Data Mountain(Robertson, UIST‘98, Microsoft)
43
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
Beispiel: „Pile“ Metapher (Mander et al., CHI’92, Apple)
44
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie 45
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
15 Jahre später: “Flip 3D”, “Cover Flow”, “Stacks”
46
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
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
47
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 7 - Grundregeln für die UI Gestaltung Folie
OAI und AOI Modelle
48
Dateisystem
Ordner O2Ordner O1
Datei XYZ
Verschieben
BewegenO1 öffnen
XYZ selektieren
O2 öffnen
XYZ bewegen XYZ loslassen
top related