![Page 1: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/1.jpg)
Entwurf der Benutzerschnittstelle:
Prinzipien und praktische Empfehlungen
Thomas Jung
![Page 2: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/2.jpg)
Praktisches Vorgehen
Berücksichtigung theoretischer Modelle• Anwendung von Prinzipien
– Unterschiedliche Benutzerprofile, Aufgabenprofile und Interaktionsarten
– Die 8 goldenen Regeln beim Entwurf der Benutzerschnittstelle
– Fehlervermeidung• Befolgen von praktischen Empfehlungen
![Page 3: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/3.jpg)
Berücksichtigung unterschiedlicher Benutzerprofile
• Anfänger• Durchschnittsnutzer• Experten
Prinzipien
![Page 4: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/4.jpg)
Anfänger
• Eigenschaften– Evtl. hohes Wissen bzgl. Aufgaben– geringes Wissen bzgl. der Schnittstelle– Ängste bzgl. Computernutzung
• Schnittstelle– Wenig Alternativen bei Menüsteuerung– Schrittweise Online-Tutorials– Ausführliches Feedback
Prinzipien Benutzerprofile
![Page 5: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/5.jpg)
Durchschnittsnutzer
• Eigenschaften– Kenntnis der Aufgaben und der Schnittstelle– Keine genaue Erinnerung an Menustrukturen, etc.
• Schnittstelle– Konsistente Menüsteuerung und Terminologie– Manuals für häufig genutzte Funktionen– Online-Hilfe
Prinzipien Benutzerprofile
![Page 6: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/6.jpg)
Experten
• Eigenschaften– Genaue Kenntnis der Aufgaben und Schnittstellen– Bestreben, Aufgaben schnellstmöglich zu erledigen
• Schnittstelle– Schnelle Antwortzeiten– Wenige Operationen, um Aufgaben zu erledigen– Makros, Shortcuts, etc.
Prinzipien Benutzerprofile
![Page 7: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/7.jpg)
Aufgabenprofile
Tätigkeit Abfrage Veränderung Recherche Evaluierung SystemBerufSchwester 0.14 0.11Arzt 0.06 0.04Oberschw. 0.01 0.01 0.04Annahme 0.26Verwaltung 0.07 0.04 0.04 0.01Forscher 0.08Programmierer 0.02 0.02 0.05
Prinzipien
![Page 8: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/8.jpg)
Entwurf der Benutzerschnittstelle
• Auswertung der Matrix– Häufige Aktionen durch Funktionstasten, etc.– Weniger häufige Aktionen durch Pulldown-Menüs mit Control-
Tasten-Kombination– Seltene Aktionen über mehrstufige Menüs
• Evtl. unterschiedliche Varianten für unterschiedliche Benutzergruppen
• Mehrstufige Benutzerschnittstelle für unterschiedliche Benutzerprofile
Prinzipien
![Page 9: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/9.jpg)
Wahl des geeigneten Interaktionsstils
• Direkte Manipulation• Menüselektion• Formulare• Kommandosprache• Natürliche Sprache
Prinzipien
![Page 10: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/10.jpg)
Direkte Manipulation
• Vorteile– ???
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 11: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/11.jpg)
Direkte Manipulation
• Vorteile– Visuelle Präsent. des
Aufgabenkonzepts– Erlernen einfacher– Merken einfacher– Vermeidung von
Fehlern– Unterstützt Erforschen
des Systems– Hohe subjektive
Zufriedenheit
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 12: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/12.jpg)
Direkte Manipulation
• Vorteile– Visuelle Präsent. des
Aufgabenkonzepts– Erlernen einfacher– Merken einfacher– Vermeidung von
Fehlern– Unterstützt Erforschen
des Systems– Hohe subjektive
Zufriedenheit
• Nachteile– Schwierig zu
implementieren– Erfordert Graphische
Anzeige und Zeigegerät (Mouse)
Prinzipien Interaktionsstil
![Page 13: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/13.jpg)
Menüselektion
• Vorteile– ???
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 14: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/14.jpg)
Menüselektion
• Vorteile– Verkürzt Lernphase– Vermindert
Tastaturbedienung– Strukturiert
Entscheidungsfindung– Einsatz von Dialog-
Management-Tools– Einfache
Fehlerbehandlung
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 15: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/15.jpg)
Menüselektion
• Vorteile– Verkürzt Lernphase– Vermindert
Tastaturbedienung– Strukturiert
Entscheidungsfindung– Einsatz von Dialog-
Management-Tools– Einfache
Fehlerbehandlung
• Nachteile– Unübersichtlichkeit
bei vielen Alternativen
– Behinderung häufiger Benutzer
– Erfordert Platz auf dem Bildschirm
– Erfordert hohe Displayrate
Prinzipien Interaktionsstil
![Page 16: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/16.jpg)
Formulare
• Vorteile– ???
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 17: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/17.jpg)
Formulare
• Vorteile– Einfache Dateneingabe– Mäßiger Lernaufwand– Unterstützung / Hilfe– Einsatz von Formular-
managementwerkzeugen
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 18: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/18.jpg)
Formulare
• Vorteile– Einfache Dateneingabe– Mäßiger Lernaufwand– Unterstützung / Hilfe– Einsatz von Formular-
managementwerkzeugen
• Nachteile– Erfordert Platz auf
dem Bildschirm
Prinzipien Interaktionsstil
![Page 19: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/19.jpg)
Kommandosprache
• Vorteile– ???
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 20: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/20.jpg)
Kommandosprache
• Vorteile– Sehr flexibel– Geeignet für
Experten– Unterstützt
Benutzerinitiative– Ermöglicht Makros
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 21: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/21.jpg)
Kommandosprache
• Vorteile– Sehr flexibel– Geeignet für
Experten– Unterstützt
Benutzerinitiative– Ermöglicht Makros
• Nachteile– Unzulängliche
Fehlerbehandlung– Erfordert Training und
Erinnerungsvermögen
Prinzipien Interaktionsstil
![Page 22: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/22.jpg)
Natürliche Sprache
• Vorteile– ???
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 23: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/23.jpg)
Natürliche Sprache
• Vorteile– Vermeidet Lernen der
Kommandosyntax
• Nachteile– ???
Prinzipien Interaktionsstil
![Page 24: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/24.jpg)
Natürliche Sprache
Prinzipien
• Vorteile– Vermeidet Lernen der
Kommandosyntax
Interaktionsstil
• Nachteile– Erfordert Dialog zum
Klären von Mehrdeutigkeiten
– Erfordert mehr Tastatureingaben
– Zeigt den Kontext nicht
– Unvorhersehbar
![Page 25: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/25.jpg)
Die acht goldenen Regeln beim Entwurf der Benutzerschnittstelle
• Konsistenz • Shortcuts • Informatives Feedback• Dialoge mit definierten Abschlüssen• Fehlervermeidung, einfache Fehlerbehandlung• Rücknahmemöglichkeit (UNDO)• Vorhersehbare Systemreaktionen• Keine Überforderung des Kurzzeitgedächtnisses
![Page 26: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/26.jpg)
Informatives Feedback
![Page 27: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/27.jpg)
Fehlerquote• Studie 1: Card et al. 1980
– Fehler oder Ineffektive Eingaben bei der Erledigung von Aufgaben mit Texteditor oder Betriebssystem bei erfahrenen Benutzern ?
<10% 10-20% 20-30% 30-40% 40-50% >50%• Studie 2: Brown and Gold 1987
– Fehler beim Erstellen von Spreadsheets bei erfahrenen Benutzern ?
<20% 20-40% 40-60% >60%
Prinzipien Goldene Regeln
![Page 28: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/28.jpg)
Fehlerquote• Studie 1: Card et al. 1980
– Fehler oder Ineffektive Eingaben bei der Erledigung von Aufgaben mit Texteditor oder Betriebssystem bei erfahrenen Benutzern ?
31%• Studie 2: Brown and Gold 1987
– Fehler beim Erstellen von Spreadsheets bei erfahrenen Benutzern ?
ca. 50%
Prinzipien Goldene Regeln
![Page 29: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/29.jpg)
Fehlervermeidung• Hilfreiche Fehlermeldungen
– „Rechte Klammer fehlt“ statt „Syntaxfehler“– „Menüauswahl bitte zwischen 1 und 6“ statt „Unzulässige
Eingabe“
• Syntaxgesteuerte Editoren– Eingabe „(„ „( _ )“
• Abruf von Eingabefolgen• Automatische Kommandovervollständigung• Verbot alphanumerischer Eingaben in Zahlenfeldern
Prinzipien Goldene Regeln
![Page 30: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/30.jpg)
Fehlervermeidung
Prinzipien
• Hilfreiche Fehlermeldungen– „Rechte Klammer fehlt“ statt „Syntaxfehler“– „Menüauswahl bitte zwischen 1 und 6“ statt „Unzulässige
Eingabe“
• Syntaxgesteuerte Editoren– Eingabe „(„ „( _ )“
• Abruf von Eingabefolgen• Automatische Kommandovervollständigung• Verbot alphanumerischer Eingaben in Zahlenfeldern
Goldene Regeln
![Page 31: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/31.jpg)
Praktisches Vorgehen
Berücksichtigung theoretischer ModelleAnwendung von Prinzipien• Befolgen von praktischen Empfehlungen
– zur Anzeige von Daten– zur Dateneingabe– zum Verhältnis von Automatisierung und
menschlicher Kontrolle
![Page 32: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/32.jpg)
Organisation des Anzeigegeräts (Smith Mosier ´86)
• Konsistenz– Terminologie und Symbolik erklärt !
• Effiziente Informationsaufnahme durch den Benutzer– Format vertraut und der Aufgabe angemessen– Bsp.: geeignete Abstände, ...
• Geringstmögliche Gedächtnisbelastung– Nichts merken müssen zwischen zwei Eingabemasken
• Kompatibilität von Anzeige und Dateneingabe– Ausgabefelder fungieren auch als Eingabefelder
• Flexibilität– Änderung des Sortierkriteriums bei der Darstellung
Text 13.45
Empfehlungen Smith Mossier
![Page 33: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/33.jpg)
Erwecken von Aufmerksamkeit (Smith Mosier ´86)
• Intensität Zwei Ebenen, die höhere nur selten• Markierung Unterstreichen, Boxen, Pfeile, oder * • - + x • Größe Bis zu Vier verschiedene Größen verwenden
• Fontauswahl Bis zu drei verschiedene Fonts• Inverse VideoBenutzen• Blinken 2 bis 4 Hertz (Kann Powerpoint nicht !)• Farben Vier Standardfarben, selten Zusatzfarben• Farbveränderung Selten Farbwechsel(Blinken)• Audio Weiche Töne für Erfolg, harte für Fehler
Empfehlungen Smith Mossier
![Page 34: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/34.jpg)
Dateneingabe (Smith Mosier ´86)
• Konsistenz– Ähnliche Handlungsabläufe, Trennungen, Abkürzungen,...
• Geringstmögliche Eingabeaktionen Höhere Produktivität, Weniger Fehlerquellen– Wechsel des Eingabemediums ist zu vermeiden
• Geringstmögliche Gedächtnisbelastung– Merken von Kommandosyntax vermeiden !
• Kompatibilität zwischen Eingabe und Anzeige– Gleiche Repräsentation
• Flexibilität– für unterschiedliche Benutzergruppen (Profile)
Empfehlungen Smith Mossier
![Page 35: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/35.jpg)
Beispiel: Einstellung eines Zeitintervalls
• Welches Interface ist besser ?
Empfehlungen
![Page 36: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/36.jpg)
Geeignetes Verhältnis zwischen Automatisierung und Kontrolle
• Wahrnehmung– niedriger Reize– bei Rauschen– von Unerwartetem
• Prinzipien und Strategien• Erfassen des Relevanten• Übertragen auf neue
Situationen• Auswege erfinden• Verallg. des Beobachteten• Subjektive Auswertungen
Empfehlungen Smith Mossier
• Messung / Erfassung– in beliebigen Bereichen– in numerischen Größen
• Speichern und Wiedergabe• Überwachen erwarteter Ereign.• Schnelle Antworten• Berechnungen und Deduktive
Ableitungen• Zuverlässige Wiederholungen• Große Informationsmengen über
lange Zeiträume
![Page 37: Entwurf der Benutzerschnittstelle: Prinzipien und praktische Empfehlungen Thomas Jung](https://reader035.vdokument.com/reader035/viewer/2022062521/570491c01a28ab14218d8a6c/html5/thumbnails/37.jpg)
Praktisches Vorgehen
Berücksichtigung theoretischer ModelleAnwendung von PrinzipienBefolgen von praktischen Empfehlungen
Entwurf der Benutzerschnittstelle