10. Dialoge und Formulare zur Lösung von
zusammengesetzten Interaktionsaufgaben
zum Buch
Interaktive Systeme
Grundlagen, Graphical User Interfaces,
Informationsvisualisierung
Band 1
Bernhard Preim
Raimund Dachselt
Springer Verlag, 2010
Dialoge und Formulare zur Lösung von
zusammengesetzten Interaktionsaufgaben
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 2
Dialoge und Formulare zur Lösung von
zusammengesetzten Interaktionsaufgaben
Gliederung
•Dialogbestandteile
•Ebenen und Prinzipien der Dialoggestaltung
 Von der Aufgabe des Dialogs zur exakten Platzierung der
Dialogelemente
•Statischer Entwurf
•Dynamische Aspekte der Dialoggestaltung
•Formulareingabe
•Modale und nichtmodale Dialoge
•Zusammengesetzte Dialoge
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 3
Dialogbestandteile
Dialogkopf
Eingabefelder
• Eingabefelder für die Auswahl von Optionen
• Einfach- und Mehrfachselektion
• Texteingabefelder
• Eingabe numerischer Werte
Gruppierungskomponenten
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 4
Dialogbestandteile
Dialogkopf
• Geeignete Beschriftung (z.B. korrespondierender
Menüeintrag, Name des übergeordneten Dialoges)
Eingabefelder für das Setzen von „Schaltern“ und die Auswahl aus
wenigen Optionen
• Checkbox: Boolsche Variablen (1 aus 2)
• Radiobox: Auswahl 1 aus n (n meist < 8)
 Es muss deutlich sein, welche Radioboxen als Auswahl
zusammengehören!
 Am besten durch vertikale Gruppierung
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 5
Dialogbestandteile: Checkboxen und Radiobuttons
Checkboxes teilweise unpassend:
Radiobuttons (teils horizontal, teils als Matrix)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 6
Dialoggestaltung: Pushbuttons
• So groß wie nötig, keine raumfüllenden Pushbuttons
• Beschriftungen: Verben (Aktionen)
• Einheitlich ausrichten, Platzierung: rechts und unten.
• Visuelle Buttons (4 Zustände beachten)
Aktiv
Passiv (“ausgegraut”)
Maus over
Maustaste gedrückt
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 7
Dialoggestaltung: Pushbuttons
Ungünstig:
Günstig (Verben):
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 8
Dialogbestandteile: Listen
Listen zur Auswahl von Teilmengen:
Wichtige Aspekte:
• Statische vs. ausklappbare Listen
• Überschrift (Führungstext)
• Editierbarkeit
• Initiale Selektion
• Anteil bzw. Anzahl sichtbarer Einträge (4 … 12)
• Dimensionierung: horizontaler Platzbedarf orientiert sich am
längsten Eintrag
• Scrollen möglichst vermeiden. Vor allem horizontales und vertikales
Scrollen in einer Liste vermeiden.
• Listen mit unbekannter Länge (beim Benutzer installierte Fonts oder
Drucker)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 9
Dialogbestandteile: Listen
Beispiele für Listboxen
Links: Konsistenz zwischen mehreren Listen
Rechts: Voranstellen häufig benötigter Einträge
(Split-Menüs, Sears/Shneiderman, 1994)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 10
Dialogbestandteile: Listen
Temporär verfügbare Listen:
Dropdown-Listen
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
Popup-Listen
10 - 11
Dialogbestandteile: Listen
In-Place-Editing auf Basis von Listen (Windows
Systemsteuerung)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 12
Dialogbestandteile: Listen
Eine Liste zur Auswahl aus zwei Optionen (Abfahrt, Rückfahrt,
www.bahn.de, 2008)
Zwei Radiobuttons sind besser, www.bahn.de, 2009
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 13
Dialogbestandteile: Texteingabe
Texteingabe
Wichtige Aspekte:
• Konsistenzprüfung (z.B. Währungs- bzw. Datumsangaben)
• Autocomplete-Funktion
•
•
•
•
•
Führungstext, möglichst ein Wort („Adresse:“)
Standardwerte („Mustermann“, „TT.MM.YYYY“)
Dimensionierung: Geeignete Länge, ggf. mehrere Zeilen
Zahlen rechtsbündig
Interaktion mit Zwischenablage bzw. mit Cursortasten
unterstützen
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 14
Dialogbestandteile: Texteingabe
Struktur der Eingaben durch die
(nicht-editierbaren) Punkte fest
vorgegeben.
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 15
Dialogbestandteile: Eingabe numerischer Werte
Eingabe von numerischen Werten
Wichtige Aspekte:
• Wertebereich verdeutlichen
• Maßeinheiten anzeigen
• Genauigkeit beachten
• Exakte Zahleneingabe mit Pfeilen (inkrementell) und Slidern
kombinieren
• (Möglichst früh) Plausibilität überprüfen
(BLZ, PA-Nummer, …)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 16
Dialogbestandteile: Eingabe numerischer Werte
Beispiele für die numerische Eingabe
Inkrementelle Veränderung
Exakte Eingabe
Links: Borland Delphi Rechts: OSF/Motif
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 17
Dialogbestandteile: Eingabe numerischer Werte
Slider-Layout (Apple Macintosh)
Temporär eingeblendete Slider (CorelDraw bzw. Paintshop Pro)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 18
Dialogbestandteile: Eingabe numerischer Werte
Skalenbeschriftung. Qualitative Werteingabe.
Slider als einzige Eingabemöglichkeit, weil absolute Wertangabe
nicht sinnvoll.
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 19
Dialogbestandteile: Einstellen
von Intervallen und Winkeln
Intervalleinstellung:
• Intervallänge und Intervallzentrum
• Unter- und Obergrenze des Intervalls
• Winkeleinstellung:
 Kreisbogen für die “intuitive” Eingabe
 Bessere Stimulus-Response-Compatibility
Beschriftung des Dial-Widgets fehlt.
0-Grad, 30 Grad-Schritte
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 20
Dialogbestandteile: Rollbalken
Rollbalken zur Auswahl eines Ausschnittes
Wichtige Aspekte:
• Textuelle Beschreibung
(z.B. Kalender 1/98, 2/98)
thumb
• Größe des thumb-Widgets proportional
zur Größe des sichtbaren Bereiches
• „Blättern“ seitenweise, abschnittsweise
• Enhanced Scrollbars, Markierungen,
die auf das Vorkommen von Suchbegriffen
oder anderen wichtigen Informationen
hinweisen
zeilenweise blättern
seitenweise blättern
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 21
Dialogbestandteile: Rollbalken
Kombination mit innovativen Anzeigen (Apple iTunes)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 22
Dialogbestandteile: Gruppierungskomponenten
Zusammenfassung von Teilbereichen einer Bedienoberfläche
Ziel: ausgewogenes, symmetrisches Layout
Optische Mittel zur Gruppierung:
• Rahmen,
• Linien,
• Überschriften,
• farbliche Hinterlegung
Rotation X
Rotation Y
Rotation Z
Translation X
Translation Y
Translation Z
Rotation X
Rotation Y
Rotation Z
Translation X
Translation Y
Translation Z
Rotation
Rotation X
Rotation Y
Rotation Z
Abstand zwischen
Gruppen: > 0.5 cm
Translation
Translation X
Translation Y
Translation Z
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 23
Dialogbestandteile: Gruppierungskomponenten
Gestaltungsprinzipien:
• Gruppierung vorrangig vertikal (erleichtert Navigation)
• Leserichtung berücksichtigen
 Anordnung der Gruppen und Sortierung in den Gruppen
nach Abfolge der Bearbeitung
• Gestaltgesetze berücksichtigen
• Etwa 3-5 Elemente pro Gruppe
• Etwa 3-5 Gruppen pro Dialog (sonst Subdialoge)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 24
Dialogbestandteile: Gruppierungskomponenten
Beispiele: Microsoft Excel für Apple Macintosh
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 25
Ebenen und Prinzipien der Dialoggestaltung
Initiative:
• Eingaben durch die Benutzer
• Ausgaben durch das System
Konzeptionelle Ebene
• Objekte, die im Dialog manipuliert werden sollen (Bsp. Attribute
einer Linie)
Semantische Ebene
• Wertebereiche, Genauigkeit, Zulässige Eingaben
Syntaktische Ebene
• Zuordnung von Bedienelementen zu den Eingaben, Abhängigkeiten
Lexikalische Ebene
• Exakte Platzierung und Dimensionierung, Beschriftungen, Fonts, …
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 26
Ebenen und Prinzipien der Dialoggestaltung
Konsistenz
• Visuelle Konsistenz: Platzierung, Anordnung und Dimensionierung,
Farb- und Fonteinsatz
• Interaktionskonsistenz: Vorhersehbare Reaktionen
(Buttons
mit … aktivieren Subdialoge)
Orientierung der Reihenfolge von Aktionen an den Arbeitsabläufen
Benutzung von Standardwerten
• Minimierung von Benutzereingaben
• Benutzereingaben als Standardwerte für künftige Eingaben
Vollständigkeit gewährleisten
• Ggf. Subdialoge bilden wenn Funktionalität zu komplex
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 27
Dialoggestaltung: Wahl von Beschriftungen
bzw. Optionen
Fonts:
• Serifenlos (Arial, Helvetica) → Lesbarkeit
• Kursivschreibung und Unterstreichungen vermeiden!
Farben:
• Generell starke Kontraste sicherstellen
• Schwache Kontraste für nicht-aktivierbare Elemente
Doppelpunkte:
• Alle Beschriftungen vor einer Auswahl bzw. Texteingabe sollten mit
Doppelpunkt enden
• Kein Doppelpunkt vor einzelnen Checkboxes und Radiobuttons
• Groß- und Kleinschreibung entsprechend dem engl. Heading-Style: z.B.
“Region of Interest:”, “Image Size:”
(Orientiert sich an:
J. Johnson: GUI Bloopers. “Do’s and Don’ts of User Interface Design”, 2000,
W. Galitz: The Essential Guide to User Interface Design)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 28
Dialoggestaltung: Wahl von Beschriftungen
bzw. Optionen
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 29
Dialoggestaltung: Anordnung von Bedienelementen
Reihenfolge:
• von oben nach unten bzw. links nach rechts
(Beispiel: Load, Parameter, Save)
Strukturierung:
• Boxen, Abstände, Zwischenüberschriften
Layout:
• einheitliche Ausrichtung, Zwischenräume
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 30
Ebenen und Prinzipen der Dialoggestaltung
Trennung in:
• Dialogkopf
• Eingabebereiche
• Aktionsbuttons
Übersichtlichkeit durch:
• klare Strukturierung
• eindeutig unterscheidbare Symbole
• einheitliche Ausrichtung
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 31
Dialoggestaltung: Beispiele
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 32
Dialoggestaltung: Beispiele
Beispiele für vorwiegend visuelle Dialoggestaltung.
Visuelle Dialoggestaltung: Schwerpunkt auf der UPA 2009
Ziel: bessere Internationalisierung!
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 33
Dialoggestaltung: Beispiele
Visuelle Vorschaukomponenten. Nutzung des Matrixprinzips, um
Ausprägungen in zwei Designdimensionen darzustellen (Farbe und Stil).
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 34
Dialoggestaltung: Beispiele
Integration von Vorschaubereichen
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 35
Dialoggestaltung: Beispiele
Warnungen,
Message-boxen und
Frage-Antwort-Dialoge
werden teilweise
transparent dargestellt.
Ziel: Kontext soll nicht
komplett verdeckt werden.
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 36
Dialoggestaltung: Beispiele
Dialog: Format Zeichen in Microsoft Office Word.
Links: 1997, rechts: 2007
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 37
Dialoggestaltung: Trends
• Verstärkter Einsatz von Farbe (reine schwarz-grau-weiß
Dialoge gibt es praktisch nicht mehr)
• Teilweise: Nutzung von Transparenz
• Verstärkter Einsatz visueller Komponenten
• Integration von Vorschaubereichen
• Übergang zu Toolbars und Menüs (Multifunktionsleisten)
fließend
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 38
Dialoggestaltung: Dynamische Aspekte
Dynamische Aspekte: Skalierung von Dialogen
• Vorteil: Anpassung der Größe von Slidern, Listen,
Texteingabefeldern
• Nachteil: ausgewogenes Layout kann zerstört werden
• Strategie: Ober- und Untergrößen festlegen
• Abhängigkeiten zwischen den Eingaben
(Wenn Eingabe1 Bedingung1 erfüllt, ist Eingabe2 gesperrt)
• Temporäre Verdeckung von Dialogbausteinen
• Weiterleitung des Eingabefokus
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 39
Dialoggestaltung: Dynamische Aspekte
Ausklappbare/Reduzierbare Dialoge.
Layout kritikwürdig!
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 40
Dialoggestaltung: Dynamische Aspekte
Skalierbare Dialoge
(rechts unten)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 41
Dialoggestaltung: Dynamische Aspekte
Palettenartige Dialoge, bei denen
der Benutzer flexibel Teile einund ausklappen kann.
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 42
Formulareingabe
Wichtige Aspekte:
• Reihenfolge von Eingaben beachten (Vor- und
Zurückbewegen mit „tab“ bzw. „shift-tab“)
• Bequemes Ausfüllen mit der Tastatur unterstützen (Wechsel
zwischen Maus und Tastatur sind zeitaufwändig!)
• Einblenden neuer Formulare
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 43
Formulareingabe (Beispiel)
Anmeldung bei eBay
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 44
Formulareingabe (Beispiel 2)
Inline-Hilfe ergänzt Ausfüllhinweise
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 45
Formulareingabe (Beispiel)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 46
Formulareingabe
Formulareingabe eignet sich um so besser, je mehr der folgenden
Bedingungen erfüllt sind (vgl. Heinecke [2004]):
• Benutzer sind mit Papierformularen vertraut.
• Benutzer haben mindestens gute Schreibfähigkeiten.
• Daten sollen von Papierformularen übernommen werden.
• Anzeige bzw. Auswahl aus vordefinierten Werten ist wichtig.
• Freiheit bei der Eingabe ist begrenzt.
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 47
Zusammengesetzte Dialoge
• Teilen eines umfangreichen Dialogs in mehrere Unterdialoge
(Tabdialoge) bzw. Zerlegung einer Interaktionsaufgabe in
Teilaufgaben
• Umschalten zwischen den Dialogen über Tableiste
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 48
Zusammengesetzte Dialoge
Screenshots von PaintShop Pro
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 49
Zusammengesetzte Dialoge
Die Grenzen: mehrzeilige Leisten mit „Reitern“.
Screenshot von WinEdt
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 50
Zusammengesetzte Dialoge
Abhängig von einer Einstellung wird ein zusätzlicher Reiter
hinzugefügt – das geht nicht!
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 51
Zusammengesetzte Dialoge
Wichtige Aspekte:
• Wahl der Dialogtitel,
• Strukturierung in Teildialoge (da nur ein Teildialog sichtbar ist,
stehen Eingaben aus anderen Teildialogen nicht als visueller
Kontext zur Verfügung)
• Dimensionierung (gleiche Höhe aller Dialoge gewährleisten)
• Position der Tableiste einheitlich wählen
• Häufig benötigte Funktionen sollten immer sichtbar sein
(Save, Undo)
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 52
Zusammengesetzte Dialoge
Subdialoge als Tabdialoge oder als eigenständigen Dialog (eigenes
Fenster)
Bei eigenständigem Dialog: geeignet platzieren (nicht zu weit
entfernt, aber auch nicht über dem ersten Dialog)
Ungünstige Platzierung
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 53
Zusammengesetzte Dialoge
Ungünstige Platzierung
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 54
Zusammenfassung
Wichtige Aspekte bei der Gestaltung von Dialogen:
• Auswahl geeigneter Dialogelemente
• Statische Aspekte, wie Anordnung, Benennung, Farbgebung
und Strukturierung von Dialogelementen
• Dynamische Aspekte, wie Modalität, Eingabefokus,
Defaultwerte, Ausklappen von Dialogelementen,
Abhängigkeiten zwischen „erlaubten“ Eingaben
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 55
Literatur
W. Galitz (2007). The Essential Guide to User Interface Design, 3. Auflage, Wiley
A. Heinecke (2004). Mensch-Computer Interaktion, Fachbuchverlag Leipzig
© Bernhard Preim, Raimund Dachselt  Springer Verlag 2010
10 - 56
10. Dialoge und Formulare zur Lösung von
zusammengesetzten Interaktionsaufgaben
zum Buch
Interaktive Systeme
Grundlagen, Graphical User Interfaces,
Informationsvisualisierung
Band 1
Bernhard Preim
Raimund Dachselt
Springer Verlag, 2010

Powerpoint - Interaktive Systeme