Transcript Kapitel 4 – Teil 1 - Lehrstuhl für Informations

Hard- und Software-Ergonomie
4. Windows, Icons, Menus, Pointers, Controls
Alexander Nolte
Informations- und Technikmanagement
Institut für Arbeitswissenschaft, Ruhr-Universität Bochum
www.imtm-iaw.rub.de
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
4
4
Einführung
• Richtlinien zur Gestaltung grafischer Nutzerinterfaces
• Praktische Beispiele zu deren Gestaltung
• Gilt alles nur für die Bedienung mittels Pointer (z.B. Maus)
• Auf kleineren Darstellungsflächen nur begrenzt
anwendbar (z.B. mobile Geräte)
• Neuere Ansätze für Gestenbasierte Interfaces in späterer
Einheit
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
2
4
4 Windows, Icons, Menus, Pointers and Controls
4.1
4.2
4.3
4.4
4.5
Beschriftung
Fenster
Menü
Gestaltung von Ikonen
Externe Control-Devices
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
3
4.1
Beschriftung - Schriftarten
Schriftbild
• Nicht mehr als 2 Schriftarten mit vergleichbarer
Buchstabengröße, Linienstärke etc.
– Zu jeder Schriftart einen Zweck zuordnen (z.B. Beschriftung von
Elementen und Meldungen). Eine Art soll vorherrschen!
• Nicht mehr als zwei Stilarten (Fett, Standard, kursiv); zwei
unterschiedliche „Gewichtungen“
• Maximal drei Schriftgrößen
Times Roman
• Niemals den Schrifttyp wechseln,
Times Italic
um Platz zu sparen!
Times Bold
Times Bold Italic
Times Shadow
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
4
Konsistenzregel
4.1
Consistency
• Ein konsistentes Regelwerk und eine konsistente
Hierarchie aufbauen, nach der Schriftart, -stil, -größe und
-gewicht verwendet werden
• Immer mit den vorhandenen Standardschriftarten arbeiten.
Solche Konsistenzregeln sind auch für andere Bereiche
wichtig, in denen vielfältige Auswahlmöglichkeit gegeben
ist:
Times Roman
• Gestaltung von Ikonen
Times Italic
• Abkürzungen von Kommandonamen
Times Bold
• Shortcuts und Accelerators
Times Bold Italic
• ...
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
Times Shadow5
GROSSBUCHSTABEN
4.1
 nur für Titel und Überschriften, ggf. für Untertitel
Groß/ Klein (Mixed-Case-Font) ist leichter lesbar Großbuchstaben ziehen mehr Aufmerksamkeit.
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
6
„Caption“ (Titel, Legenden, Überschriften)
First
Last
This
That
Who Cares
AMOUNT >>
4.1
Amount:
Amount:
Amount:
Amount:
Amount:
First:
Last:
This:
That:
Who Cares:
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
7
Caption II
4.1
• Alle „Controls“ müssen mit einem Caption versehen
werden!
• Verwendung einer für den Nutzer verstehbaren
Bezeichnung, keine Abkürzung
• Immer mit Doppelpunkt abschließen
• Einfach unterscheidbare Bezeichnung, Vermeidung von
nur geringfügigen Unterschieden („Zellen“, „Zeilen“).
• „Controls“ := alle Möglichkeiten, Eingaben zu machen
Minimaler Unterschied zwischen Synonymen
verschiedener Bereiche und maximaler Unterschied
zwischen Items im gleichen Bereich
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
8
4.1
Anordnung von Captions
- in Abhängigkeit von der Zahl der Datenfelder -
Sex:
Relation:
Female
Daughter
Names:
Deirda
Karin
Kim
Lauren
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
9
4.1
Vier Formen der Anordnung
A.
C.
Division:
Division
:
Department:
Department:
Title:
Title
:
D.
B.
Division:
Department:
Title:
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
Division:
Department:
Title:
10
4.1
Überschriften
Personnel
Manager:
Employees:
Payroll:
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
11
4
4 Windows, Icons, Menus, Pointers and Controls
4.1
4.2
4.3
4.4
4.5
Beschriftung
Fenster
Menü
Gestaltung von Ikonen
Externe Control-Devices
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
12
4.2
Fenster - relevante Komponenten
System Menu Button
Title Bar
Menu Bar
Window Sizing Buttons
Work Area
Split Bar
Status Bar
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
Scroll Bars
13
Arten von Fenstern
4.2
• Primary Window
• Secondary Window
–
–
–
–
–
Property Windows
Dialog Boxes
Message Boxes
Palette Windows
Pop-Up Windows
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
14
Arten der Anordnung von Fenstern
• Tiled (gekachelt)
4.2
+ alle sichtbar
- begrenzte Anzahl,
befremdliche Größen
• Überlappend
+ feste Größe und
Position möglich
- zu komplex
• Cascading
+ sehr übersichtlich
- Platz ist begrenzt
Wie wirken sich die Vor- und Nachteile bei sehr kleinen oder
sehr großen Bildschirmgrößen aus?
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
15
Dialog Boxes
4.2
Zu benutzen für:
• Kurze Mitteilungen
• Anforderung von steuernden Angaben, die
– schnell gemacht sind,
– sich nicht häufig ändern
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
16
Modal Dialogue Boxes vs.
modeless Dialogue Boxes
4.2
modal:
Dialog Box kann nicht verlassen werden
• Nachrichten werden ausgegeben
• Input ist gefragt
modeless:
parallele Bearbeitung möglich
 Achtung: Unnötige Restriktion vermeiden!
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
17
Darstellung von Dialog Boxen
4.2
Cascading, Expanding - kaskadierende oder erweitere
Eingabemöglichkeiten
Guidelines
• Ein Kommando-Button mit entsprechendem Label („...“)
muss zum weiteren Dialogfenster führen
• Kaskadierende Anordnung oder nach rechts oder unten
• Wichtige Information darf nicht verdeckt werden
• Dialogboxen müssen verschiebbar sein
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
18
Vor- und Nachteile bzgl. der Fenstergröße
4.2
Große Fenster - Vorteile
• Mehr Information darstellbar
• Lernerleichterung: Zusammenhänge und Querbezüge
erkennbar
• Weniger Steuerung bei der Navigation erforderlich
• Datenüberprüfung und Editieren fallen leichter
Nachteile:
• Längere Pointer-Strecken
• Fenster wirken überfüllt
• Mehr Fläche ist abzusuchen
• Wahrscheinlichkeit, dass Zusatzfenster etwas überdecken
müssen, steigt
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
19
Öffnen und Platzierung eines Fensters
4.2
Öffnen: im gleichen Zustand wie vor dem Schließen!
Platzierung:
• Das Fenster muss ganz sichtbar sein
• Fenster muss dort platziert sein, wo es zuletzt war
• Neu geöffnete Fenster:
– Dorthin, wo die Aufmerksamkeit zu erwarten ist (i.d.R. dort, wo der
Cursor ist)
– Leicht erreichbar
– Andere Fenster dürfen nicht verdeckt werden.
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
20
Fenster verschieben, Fenster schließen
4.2
• Die Position aller Fenster müssen verschiebbar sein
• Die Form des Pointers muss sich bei Verschiebemöglichkeit
ändern
• Das Fenster muss sich so wie der Pointer bewegen  Direkte
Manipulation
• Wenn sich das ganze Fenster verschieben lässt, dann muss
sich dessen Inhalt mit verschieben
• Schließen des Fensters: Mit dem Primary Window müssen
auch die Secondary Windows geschlossen werden.
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
21
4
4 Windows, Icons, Menus, Pointers and Controls
4.1
4.2
4.3
4.4
4.5
Beschriftung
Fenster
Menü
Gestaltung von Ikonen
Externe Control-Devices
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
22
4.3
Menüarten
• Hauptleiste
File
•
•
•
•
•
•
•
•
Edit
Options
Window
Helps
Pull-Down (Drop Down)
Cascading Menus (Drop Down)
Pop-Up
Tear-Off
Iconic
Pie Menus
Spaltenanordnung (zwei-dimensional)
Alphaslider
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
23
4.3
Organisation von Menüs
• Es muss immer ein Hauptmenü vorhanden und erreichbar sein
• Alle relevanten Items sind anzuzeigen, aber nur sie –
was passiert wenn Items nicht aktivierbar sind oder nur selten
relevant sind?
• Die Menüstruktur muss die Aufgabenstruktur widerspiegeln 
Aufgabenanalyse ist erforderlich: die effizienteste Abfolge und
die häufigsten Bearbeitungsziele müssen ausschlaggebend
sein!
• Anpassbarkeit: die Menüstruktur muss einfach veränderbar
sein!
• Anzahl der Items begrenzen
– 4 – 8 wenn keine logische Gruppierung sinnvoll ist
– Mehr nur mit logischer Gruppierung.
Unsinn von Adaptierbarkeit
VorlesungSinn
Hard- und
und Software-Ergonomie,
WS 2011/2012
am Beispiel von Menüs?
24
Gruppierung von Menü-Items - 1
4.3
• Herausforderung (hierarchische) Gruppierung der Items:
logisch und semantisch sinnfällig, klar unterscheidbar
• Menü-Einteilung ist in der Regel baumartig strukturiert,
• kann auch als zyklisches oder azyklisches Netz aufgebaut
sein.
 sinnvoll bei sozialen Beziehungen, Transportwegen,
Zitaten bei wissenschaftlichen Veröffentlichungen etc.
(Shneiderman, 299)
• Einteilung:
– Minimiere die Ähnlichkeit der Items innerhalb einer Kategorie
– Maximiere die Ähnlichkeit der Items zwischen Kategorien
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
25
Gruppierung von Menü-Items - 2
4.3
• Wenn es keine sinnfällige Unterteilung in Kategorien gibt
und mehr als acht Optionen wählbar sein müssen, dann
zufällige Gruppen wählen  gleicher Größe, 4-5 Items in
der Regel, nie mehr als 7
• Gruppierung durch Abstand oder Linien
• Direkter Zugang zu wichtigen oder häufig genutzten
Optionen
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
26
Benennungen der Items
4.3
• Ein Item darf nie denselben Namen wie der Menütitel
haben
• Jedes Item innerhalb der Menüstruktur darf nur einmal
vorkommen
• Identische Items in unterschiedlichen Menüs oder SubMenüs sollen identisch benannt werden!
• Items sollen nicht nummeriert werden
 Der Zugang via Tastenkombination wird dann jedoch
erschwert
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
27
Such- und Vergleichsbedingungen bei der
Auswahl von Items
Nutzervorstellung
Menüitem
Identität:
Inklusion:
4.3
Äquivalenz:
Problem:
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
28
Sinnvolles Ordnen und Ordnungskriterien
4.3
• Anordnung der Menüstruktur und Items so, dass sie
– eine logische Abfolge bietet
– rhythmisch ist und das Auge leitet
– die Cursor- und Augenbewegungsdistanzen klein sind
• Das Wichtigste und Häufigste steht links oben
• Flussrichtigung von links-oben nach rechts-unten
Kriterien der Anordnung
• Konvention (numerisch, physikalisch, zeitlich)
• Reihenfolge der Nutzung
• Häufigkeit
• Funktion
• Wichtigkeit
• allgemein zu speziell
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
29
4.3
Regeln zur Reihenfolgebildung
ja
ja
gibt es eine
übliche Reihenfolge?
nein
nach üblicher
Reihenfolge
nach Häufigkeit der
Benutzung
kurze
Liste?
ja
nein
gibt es Ähnlichkeiten,
Gleichheiten?
nein
nach Kategorien
gruppiert
nach alphabetischer
Reihenfolge
Gestaltungsrichtlinien zum Auswählen (choosing) und Organisieren der
Optionen auf einer Menüfläche.
in Anlehnung an Helander, S.217
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
30
Anordnung der Menüitems nach Galitz
4.3
• Ordne mögliche Optionen in ihrer natürlichen Anordnung an, oder:
• Bei Listen mit wenigen Optionen (7 oder weniger):
– Reihenfolge des Auftretens
– Häufigkeit des Auftretens
– Wichtigkeit
• Alphabetische Anordnung bei:
– Langen Listen (8 oder mehr Optionen)
– Kurze Listen, die keine offensichtlichen Muster oder
Häufigkeiten aufweisen.
• Potentiell zerstörerische Optionen sind von häufig
verwendeten Optionen zu trennen
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
31
Baumstruktur – Breite (breadth) vs. Tiefe
(depth) - 1
4.3
Bei baumartiger Anordnungen stellt sich die Frage, ob
Breite oder Tiefe vorzuziehen ist!
Die Empirie gibt - nach Shneiderman – der Breite des
Menübaums den Vorzug vor Tiefe
Bewertung anhand von Geschwindigkeit, Genauigkeit und
Shneiderman, 295 f
Präferenz
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
32
Menübaum - Beispielausschnitt
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
33
Baumstruktur – Breite vs. Tiefe - 2
4.3
• Zugriffszeit auf ein Item: T = D * (k + c * logb)
mit D:= Tiefe, b:= Breite, k & c sind Konstanten.
• Tiefe ist insbesondere bei Webseiten ein Problem! Beim
Navigieren gibt es mehr Gelegenheiten, Fehler zu machen
Einschränkungen:
• Zu viele Items in einem Menüfeld können den
Suchaufwand erhöhen, insbesondere wenn es keine
sinnfällige Anordnung gibt, und die Suche nicht nach dem
Identitätsprinzip erfolgt (das nicht alphabetisch geleitet
wird)
• WENN bei der Zusammenfassung in Gruppen wegen der
inhaltlichen Struktur mehr Tiefe naheliegend ist (z.B. bei
Fehlersuchbäumen, bei Wegverzweigungen etc.)
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
34
Zeiten bei Menü-Auswahlen
4.3
• Bei der Entscheidung für Tiefe statt Breite sind die Suchzeiten für ein
Item und die Antwortzeiten des Systems (insbesondere bei einem
Maskenwechsel) zu beachten. Außerdem muss häufig davon
ausgegangen werden, dass im Durchschnitt nicht mehr als die Hälfte
der Items einer Maske durchsucht werden.
Bei Suche und Auswahl kosten folgende Operationen Zeit:
• Aufnahme der durch ein Item dargestellten Information
• Vergleich der aufgenommenen Information mit dem Ziel
• Entscheidung, ob die Suche beendet wird
• Aktivierungszeit mit dem Eingabegerät
Sinnfällige Anordnung unter Berücksichtigung des Benutzerverständnisses und der Aufgabe bringt die besten Resultate.
Helander
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
35
Anordnung der Menüitems bei Dynamik
4.3
• Wenn sich das Nutzungsverhalten bzgl. der Optionen
ändert: NICHT die Reihenfolge ändern!
• Wenn sich ähnliche Items bei anderen Menüs
wiederholen: Anordnungs-Konsistenz beachten
• Bei variabler Länge: Konsistente relative Positionen
• Bei fester Länge: Konsistente Absolut-Positionen
Die Anordnungshinweise gelten nicht nur für
Menüs, sondern in allen Fällen, in den Listen
aufgestellt werden!
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
36
Defaults und nicht verfügbare Optionen
4.3
Defaults
• Anbieten, wann immer möglich
• Fett darstellen
Dynamic Labels
• Mit dem Kontext kann sich der Name ändern
 UNDO – UNDO CUT
Nicht verfügbare Optionen
• Grau oder blass darstellen
• Kein automatisches Hinzufügen oder Wegnehmen!
• Hilfe-Hinweise, wenn es doch aktiviert werden soll
Eine Ausnahme stellt die Option automatischer
Menüreduktion dar!
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
37
Tastatur-Äquivalente
4.3
• Zu jedem Item sollte es die Möglichkeit der Selektion via
Tastatur geben
• Es sollte der erste Buchstabe der Item-Benennung sein;
bei Duplizierung: einen anderen Buchstaben aus der ItemBenennung wählen, meistens den nächsten Konsonanten
 Konsistente Regeln der Wahl des Buchstabens bilden
• Der Buchstabe wird unterstrichen!
• Es können auch direkte Tastatur-Shortcuts angeboten
werden
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
38
Pull-Down Menüs
4.3
Angemessener Einsatz
• Für häufig gebrauchte Items, die in vielen Kontexten relevant
sind
• Eher kleinere Item-Zahl, wobei die textuelle Darstellung Sinn
macht
Vorteile
• Eine Menüleiste erinnert an das Vorhandensein
• Konsistente Platzierung, kein Platzbedarf, wenn nicht in
Gebrauch
• Leicht zu durchsuchen
• Vertikale Anordnung bringt beste Ergebnisse für das
Durchsuchen, Gruppieren und für die Darstellung mehrerer
Items
• Abkürzungen und Ikons sind darstellbar
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
39
Cascading und Pop-up Menus
4.3
Cascading Menus
• nicht für häufige Kommandos verwenden
• Nicht mehr als 3-Ebenen
Pop-up
• Für Optionen, die im Verlauf einer Aufgabe relevant
werden k ö n n e n .
• Anzeigen bis:
– die Auswahl getroffen ist
– eine Aktion außerhalb des Menüs erfolgt
– der Benutzer es wegschieben möchte
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
40
Weitere Menüarten - 1
4.3
Icon Menus
Icons sollen
• die Wiedererkennung unterstützen und die Selektion beschleunigen
• möglichst konkret sein
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
41
Weitere Menüarten - 2
4.3
Alpha-Sliders
Für das Durchsuchen großer Mengen alphabetisch angeordneter
Items (z.B. Adressen)
Thomas Herrmann
A C DE G H J KN O R S TV Z
Der obere Schieber springt in großen Schritten( z.B. je 40 Namen)
der kleine in Einzelschritten
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
42
Weitere Menüarten - 3
4.3
Transparente Menüs
Wahrnehmungspsychologisch problematisch!
Abb. aus Preim 1999
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
43
Neuere Entwicklung
• Zone Menus:
– Mehrstufige Interaktion
– Orientierungspunkt ermöglicht größere Breite
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
44
Neuere Entwicklung
• Flower Menus:
– Mehr als 8 Items auf
einer Ebene
– Leicht unterscheidbare
Gesten
Vorlesung Hard- und Software-Ergonomie, WS 2011/2012
45