![Page 1: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/1.jpg)
Theorien zum Entwurf der Benutzerschnittstelle
Thomas Jung
![Page 2: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/2.jpg)
Einführung
• Ziele des Systementwurfs• Kriterien in Bezug auf die
Benutzerschnittstelle• Anwendungsszenarien• Menschlicher Faktor
![Page 3: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/3.jpg)
Ziele des Systementwurfs
• Funktionalität• Zuverlässigkeit
– Verfügbarkeit, Sicherheit, Integrität• Konformität
– Standardisierung, Konsistenz, Portabilität• Büdgetierung
– Zeit, Geld
Einführung
![Page 4: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/4.jpg)
Entwurf der Benutzerschnittstelle
• Lernaufwand• Benutzergruppe ?
• Benutzungsgeschwindigkeit• Fehlerrate
• Aufwand zur Korrektur
• Merkfähigkeit• Benutzungshäufigkeit ?
• Subjektive Zufriedenheit
Einführung
![Page 5: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/5.jpg)
Anwendungsszenarien
• Extrem gefährliche Bereiche• Fluglotsen, Kernkraftwerke, Militär, ...
• Industrie, kommerzielle Anwendung• E-commerce, Reservierungen, Produktion, ...
• Büro, Unterhaltung• Textverarbeitung, Spiele, E-mail, ...
• Explorative, Kreative, Kooperative Systeme• Web-Browsing, CAD, Musik, ...
Einführung
![Page 6: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/6.jpg)
Menschlicher Faktor
Einführung
Relevante Unterschiede beim Entwurf einer Benutzerschnittstelle ?
![Page 7: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/7.jpg)
Menschlicher Faktor
Physikalische Fähigkeiten Ergonomie• Kognitive -, Wahrnehmungsfähigkeiten • Charaktäre / Mentalitäten• Kulturelle -, Nationale Unterschiede• Behinderungen• Altersbedingte Unterschiede
Einführung
![Page 8: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/8.jpg)
Kognitive Prozesse(nach Ergnomic Abstracts)
• Kurzzeitgedächtnis• Langzeitgedächtnis und Lernen• Problemlösung• Entscheidungsfindung• Aufmerksamkeit• Suchen und Scannen• Wahrnehmung von Zeit
Einführung Menschlicher Faktor
![Page 9: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/9.jpg)
Einflußfaktoren(nach Ergnomic Abstracts)
• Emotionelle Erregung, Wachheit
• Müdigkeit• Perzeptuelle -, mentale
Belastung• Kenntnis der Ergebnisse• Monotonie und Lange Weile• Einschränkung der
Wahrnehmung
• Schlafentzug• Angst • Isolation• Alter• Drogen und
Alkohol• Tagesrhythmus
Einführung Menschlicher Faktor
![Page 10: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/10.jpg)
Charaktäre / Mentalitäten(nach Myers-Briggs)
extrovertiert introvertiert
intuitiv präzise
beobachtend beurteilend
denkendfühlend
Externe Stimuli, Action Gewohnte Muster, alleine Arbeiten
Routinearbeiten, sorgfältig, Anwendung von ErlerntemLösung neuer Probleme,
Erkennen neuer Zusammenhänge
Freude am Lernen Entscheidungsfreude, Planung der Aktivitäten
Ordnung, Formaler UmgangUnterhaltung Anderer, Zusammenarbeit
Einführung Menschlicher Faktor
![Page 11: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/11.jpg)
Kulturelle / Nationale Unterschiede• Buchstaben und Zeichen, Schreibrichtung• Datums- und Zeitformate• Zahlenformate, Währungen, Gewichte und
Maßeinheiten• Telefonnummern, Adressen, Namen und Titel• Rechtschreibung, Grammatik• Icons, Knöpfe, Farben, Sortierreihenfolge• Etikette, Metaphern, Formalität, Umgang
Einführung Menschlicher Faktor
![Page 12: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/12.jpg)
Entwurf der Benutzerschnittstelle
Theoretische Modelle
Prinzipien
praktische Empfehlungen
Verstehen
Konsequenz
Umsetzung
![Page 13: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/13.jpg)
Praktisches Vorgehen
• Berücksichtigung theoretischer Modelle– Prinzipien Guten Designs (Stufenmodell)– Hierarchische Zerlegung– OAI-Modell
• Anwendung von Prinzipien• Befolgen von praktischen Empfehlungen
![Page 14: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/14.jpg)
Stufenmodell(nach Norman)
• Formulieren des Ziels• Formulieren der Absicht• Festlegen der Aktion• Ausführen der Aktion• Wahrnehmen des Systemzustands• Interpretieren des Systemzustands• Auswerten der Ergebnisse
Vorgehen Theoretisches Modell
![Page 15: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/15.jpg)
Stufenmodell Probleme(Norman 1988)
• Kluft zwischen Benutzerabsichten und Systemmöglichkeiten• Kluft zwischen Systemrepräsentation und
Benutzererwartungen
• Formulieren des Ziels• Formulieren der Absicht• Festlegen der Aktion• Ausführen der Aktion• Wahrnehmen des Systemzustands• Interpretieren des Systemzustands• Auswerten der Ergebnisse
Vorgehen Theoretisches Modell
![Page 16: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/16.jpg)
Lösung: Prinzipien guten Designs(Norman 1988)
• Systemzustand und Alternativen sichtbar• Gutes konzeptionelles Modell, konsistente
Darstellung• Berücksichtigung der Beziehungen
zwischen den unterschiedlichen Aktionsstufen
• kontinuierliches Feedback
Vorgehen Theoretisches Modell
![Page 17: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/17.jpg)
Gutes Design: Konsistenz
• delete/insert character• delete/insert word• delete/insert line• delete/insert paragraph
• delete/insert character• remove/bring word• destroy/create line• kill/birth paragraph
• delete/insert character• remove/insert word• delete/insert line• delete/insert paragraph
Welches Kommandointerface ist schlechter ?
Vorgehen Theoretisches Modell
![Page 18: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/18.jpg)
Praktisches Vorgehen
• Berücksichtigung theoretischer ModellePrinzipien Guten Designs (Stufenmodell)– Hierarchische Zerlegung– OAI-Modell
• Anwendung von Prinzipien• Befolgen von praktischen Empfehlungen
![Page 19: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/19.jpg)
Hierarchische Zerlegung
• Einsatz von interaktiven Werkzeugen (User interface building tools)
• Rückgriff auf bewährte Widgets– Formulare, Fileselektoren, Menüs, ...– Benutzerverhalten analysiert und übertragbar
• Adäquate Anordnung der Widgets– im Einklang mit der üblichen
Benutzungsreihenfolge
Vorgehen Theoretisches Modell
![Page 20: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/20.jpg)
Object-Action Interface Model
Metapher Plan
KlicksPixel
AbsichtUniversum
SchritteAtome
Objekte Aktionen Objekte Aktionen
Aufgaben Schnittstelle
Vorgehen Theoretisches Modell
![Page 21: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/21.jpg)
Object-Action Interface Model (2)
• Aufgaben definieren und verfeinern (Objekte und Aktionen)
• Diskussion / Überarbeiten• Metapher(n) entwerfen und verfeinern• Umsetzen in konkrete Interaktionsschritte
– Verwenden von Widgets
Vorgehen Theoretisches Modell
![Page 22: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/22.jpg)
OAI-Modell: Beispiel Reisebüro
• Aufgaben– Universum: Gesamte Reise, Atome: Flugbeginn– Aufgaben: Reiseplanung, Schritte: Zug wählen
• Schnittstelle– Metaphern: Formular „Hinreise“, Pixel: OK-Button – Plan: Hinreise konfigurieren, Klicks: Button Press
Vorgehen Theoretisches Modell
![Page 23: Theorien zum Entwurf der Benutzerschnittstelle Thomas Jung](https://reader036.vdokument.com/reader036/viewer/2022081513/570491bf1a28ab14218d85d4/html5/thumbnails/23.jpg)
OAI-Modell: Weitere Beispiele ?
Vorgehen Theoretisches Modell