mmi 15 pc-ui - medien.ifi.lmu.de · butz, krüger: mensch-maschine-interaktion, kapitel 15 -...
TRANSCRIPT
![Page 1: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/1.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Mensch-Maschine-Interaktion
1
![Page 2: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/2.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Kapitel 15 - Graphische UI am PC• Personal Computer und Desktop Metapher • Das WIMP Konzept • Fenster und Leisten • Menü-Techniken • WYSIWYG
2
![Page 3: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/3.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Die Xerox Star Workstation (von 1981)
3
![Page 4: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/4.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Beispiel: Xerox Star User Interface (1982)
4h"p://www.youtube.com/watch?v=Cn4vC80Pv6Q
![Page 5: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/5.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Windows 1
5
Quelle: http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
![Page 6: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/6.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Comments on Mouse Usage in Windows 1• “Mice are nice ideas, but of dubious value for business users” (George
Vinall, PC Week, April 24, 1984) • “There is no evidence that people want to use these things.” (John C.
Dvorak, San Francisco Examiner, February 19, 1984) • “I was having lots of fun, but in the back of my corporate mind, I
couldn't help but think about productivity.” (George Vinall, PC Week, April 24, 1984)
• “Does the mouse make the computer more accessible, more friendly, to certain target audiences such as executives? The answer is no.” (Computerworld, October 31, 1983)
• “There is no possibility that this device will feel more comfortable to the executive than the keyboard. Because of its ‘rollability,’ the mouse has the aura of a gimmick…” (Computerworld, October 31, 1983)
• “The mouse and its friends are merely diversions in this process. What sounds revolutionary does not necessarily help anyone with anything, and therein lies the true test of commercial longevity.” (David A. Kay, Datamation, October 1983)
6
![Page 7: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/7.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Windows 2
7
Quelle: Wikipedia, http://en.wikipedia.org/wiki/Windows_2.0
![Page 8: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/8.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Windows 3
8
Quelle: http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
![Page 9: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/9.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
At the Same Time: Mac OS 6
9
"System6.0.8MacII" by Self made screenshot. http://en.wikipedia.org/wiki/File:System6.0.8MacII.png#mediaviewer/File:System6.0.8MacII.png
![Page 10: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/10.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Windows 95
10
Quelle: http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
![Page 11: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/11.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Der „Start“-Button von Windows 95
11
Quelle: http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
![Page 12: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/12.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Usability Probleme mit Windows 95
12
Quelle: http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
![Page 13: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/13.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Windows XP (2001)
13
Quelle: http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
![Page 14: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/14.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Vista, Windows 7, Windows 8
14
Vista: Aero Visual Style (2006)
Windows 7: Neue Tastbar (2009)
Windows 8: Kacheln - Konzepte von mobilen Benutzerschnittstelle für den Desktop PC (2012)
Quelle: http://blogs.msdn.com/b/b8/archive/2012/05/18/creating-the-windows-8-user-experience.aspx
![Page 15: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/15.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Kapitel 15 - Graphische UI am PC• Personal Computer und Desktop Metapher • Das WIMP Konzept • Fenster und Leisten • Menü-Techniken • WYSIWYG
15
![Page 16: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/16.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Icons
16
Quelle: http://en.wikipedia.org/wiki/Computer_icon
![Page 17: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/17.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Pointer
17
Helps to find your pointer: http://www.pointerpointer.com/
![Page 18: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/18.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Kapitel 15 - Graphische UI am PC• Personal Computer und Desktop Metapher • Das WIMP Konzept • Fenster und Leisten • Menü-Techniken • WYSIWYG
18
![Page 19: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/19.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Elemente eines Fensters für Desktop PC
19
![Page 20: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/20.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Window Decorations
20
![Page 21: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/21.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Kapitel 15 - Graphische UI am PC• Personal Computer und Desktop Metapher • Das WIMP Konzept • Fenster und Leisten • Menü-Techniken • WYSIWYG
21
![Page 22: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/22.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Pull-Down-Menüs
22
![Page 23: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/23.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Kontextmenü/Popup-Menü
23
![Page 24: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/24.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Von Tortenmenüs zu Marking Menüs
24
![Page 25: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/25.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Marking Menüs
25
![Page 26: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/26.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Kapitel 15 - Graphische UI am PC• Personal Computer und Desktop Metapher • Das WIMP Konzept • Fenster und Leisten • Menü-Techniken • WYSIWYG
26
![Page 27: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/27.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Grundprinzipien der Direkten Manipulation
27
Kontinuierliche Manipulation von Objekten und Aktionen1
2 Physikalische Aktionen statt Komanndospezifikationen
3 Schnelle Reversibilität von Aktionen
Ben Shneiderman
![Page 28: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/28.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
Vor- und Nachteile der DM
28
Pros Cons
versus
Leicht zu lernenFür Anfänger geeignet
Erfahren Benutzer profitieren von DMErfahrene Benutzer können schnell arbeiten
LernbarkeitBenutzer können im Verlauf der Zeit Expertenfähigkeiten erlangen
Übertreibung der MetapherEinige Benutzer strapazieren die Metapher der DM
Kann nicht auf alle Aufgaben angewendet werdenNicht alles lässt sich durch Manipulation von Objekten ausdrücken
BildschirmplatzDM benötigt mehr Aktionsfläche auf dem Bildschirm
16
Unmittelbare RückmeldungBenutzer können unmittelbar sehen, ob sich sich ihrem Ziel annähern.
Kann langsamer seinDie Manipulation der Maus ist nicht immer die schnellste Methode zur Interaktion
![Page 29: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/29.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
WYSIWYG
29
Quelle: http://en.wikipedia.org/wiki/WYSIWYG
![Page 30: mmi 15 PC-UI - medien.ifi.lmu.de · Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie Kapitel 15 - Graphische UI](https://reader030.vdocuments.net/reader030/viewer/2022040701/5d5e584b88c9932e2f8bd2e8/html5/thumbnails/30.jpg)
Butz, Krüger: Mensch-Maschine-Interaktion, Kapitel 15 - Grafische Benutzerschnittstellen am Personal Computer Folie
WYSIWYG?
30
Quelle: http://www.userfriendly.org/cartoons/archives/07jul/uf010526.gif