Benutzerschnittstellen User Interfaces (UI)

Johann Wolfgang Goethe-Universität
Professur für Graphische Datenverarbeitung
Fachbereich Informatik und Mathematik
Prof. Dr. Detlef Krömker
Benutzerschnittstellen
User Interfaces (UI)
UI: GUI, WEB-Schnittstellen
GUI: interaktive Graphische Benutzeroberfläche
Richtlinien zum Design und zur Entwicklung von
graphischen Benutzerschnittstellen
- Steuerung komplexer Softwaresysteme
- Bedienung von elektronischen Geräten
- (Handys, Palms, Automaten, Spielkonsolen , ….etc.)
Ashraf Abu Baker
[email protected]
UI-Design WS07/08
Folie 1
UI-Design WS07/08
Folie 2
Richtlinien zum Design von graphischen
Benutzerschnittstellen UI
WEB-Interfaces
Web-Seiten
Multimediale Inhalte (Graphiken, Animation, Flash-Filme,… etc.)
Richtlinien
Richtlinien:
Vorgaben, Empfehlung
Bilden für den Designer eine Basis für Design-Entscheidungen
Geben dem GUI-Entwickler Entscheidungshilfe bei der
Strukturierung, Gestaltung und dem Layouten von GUI
Fördern die Konsistenz von GUI bezüglich des Look and Feel
(Aussehens) und der Interaktions-Abläufe
UI-Design WS07/08
Folie 3
UI-Design WS07/08
Folie 4
Richtlinien
GUI-, Web-Design
Unterscheidung zwischen:
Erleichtern dem Nutzer die Orientierung und helfen ihm
sich innerhalb der Schnittstelle zurechtzufinden
Applikation-GUI-Design
WEB-Design
Teile der Richtlinien für die Gestaltung von Web-Inhalten lassen
sich auf die GUI-Entwicklung übertragen
Die Regeln für Entwicklung von GUI finden ebenfalls im
Webdesign Anwendung
Ben Benjamin :
“If you are a designer, you’ll be glad to know that the same rules
of design apply to the web as to print – or any other medium.”
UI-Design WS07/08
Folie 5
Anforderungen an UI
Zwei Anforderungen:
Funktionalität (functionality)
Ermöglicht den Benutzern, die Aufgaben durchzuführen,
für die UI erstellt wurde
UI-Design WS07/08
Folie 6
Anforderungen UI
UI sollen an die Bedürfnisse des Nutzers angepasst sein, nicht
umgekehrt
UI ermöglicht, dass
Benutzer die Aufgabe mit minimalem Lernaufwand, möglichst ohne
Fehler und in minimaler Zeit durchführen können
Benutzbarkeit (usability) Bedienungsfreundlichkeit
Ein Maß dafür, wie gut oder schlecht sich ein Nutzer in einer
Benutzerschnittstelle zurecht findet
Eine UI muss leicht erlernbar, effizient benutzbar und eine
geringe Fehlerrate aufweisen
UI-Design WS07/08
Folie 7
UI-Design WS07/08
Folie 8
Erste Schritte zum Design
Definiere die Hauptaufgabe, die die UI erfüllen soll
Identifiziere zusammenhängende Teilaufgaben
Identifiziere häufig durchgeführte Teilaufgaben
ggf. Unterteilung der GUI in kleine GUI-Einheiten
(Mini-GUIs), eine für jede Teilaufgabe
Identifiziere die Zielgruppe
Erstelle ein Konzept
UI-Design WS07/08
Folie 9
Identifikation der Zielgruppe
Professionelle Anwender
Legen Wert auf schnelle Bedienbarkeit
Erwarten, dass die UI ihre Aufgabe einfach und möglichst
schnell erfüllt
Eine Übervereinfachung der Bedienung macht die UI für sie
ineffektiv
Semiprofessionelle Anwender
Schüler, Angestellte ohne EDV-Ausbildung, etc.
Identifikation der Zielgruppe
Unerfahrene Anwender (Laien)
Kinder, Senioren, Personen mit wenig PC-Kenntnissen, etc.
- haben Probleme im Umgang mit der Maus
- Drag & Drop- Aufgaben sind für sie schwierig zu erledigen
- wissen nicht, wann ein Doppelklick statt eines einzelnen Klicks
nötig ist
- haben Probleme mit Timing bei Doppelklicken
- haben Probleme, den Überblick über viele Programmfenster zu
behalten
- wissen nicht, dass Icons visuelle Repräsentationen von Befehlen
(Unterprogrammen) sind
UI-Design WS07/08
Folie 10
Grundregeln für gutes GUI-Design
Vermeidung von Menüs aller Art (Pull-down, Pop-Up, und KontextMenüs)
Ihre Bedienung ist für ungeübte Benutzer umständlich
Benutzer muss sich merken, in welchem Untermenü „versteckt“ ist
Möglichst alle Befehle sollen über Buttons, Icons und Short-Cuts o.
ä. zugänglich gemacht werden, nicht nur über Menüs
Profiuser haben sich an bestimmte Arbeitsweisen gewöhnt (manche
arbeiten gerne mit der Maus und führen die Befehle über Icons oder
Schaltflächen aus, andere bevorzugen Short-Cuts)
- Wie viele Möglichkeiten gibt es eine Applikation oder ein Applet in Eclipse zu starten?
UI-Design WS07/08
Folie 11
UI-Design WS07/08
Folie 12
Grundregeln für gutes GUI-Design
Konventionen für Short-Cuts sollen eingehalten werden:
Strg+c = Kopieren
Strg+v = Einfügen
Strg+x = Ausschneiden
Strg+n = New
UI-Design WS07/08
Folie 13
Grundregeln für gutes GUI-Design
Fehlermeldungen möglichst in einer Statusleiste statt in
Dialogfeldern anzeigen
Grundregeln für gutes GUI-Design
Short-Cuts sollen so angeordnet werden, dass alle
Tasten mit einer Hand erreichbar sind
Beispiel für eine schlechte Tastenkombination: Alt.+7+*
Das Arbeiten mit Short-Cuts, die aus einer Kombination
der Tasten Strg, Umschalt und Alt. und einer der Tasten
a,s,d,>,<,y,x,c bestehen, hat sich als sehr komfortabel
erwiesen
Grund: Strg und Umschalt sind über die rechte und linke Hand
leicht erreichbar
UI-Design WS07/08
Folie 14
Grundregeln für gutes GUI-Design
Dialogfelder sind für den Benutzer lästig (weil ihre
Meldungen erst gelesen und verstanden werden
müssen, ehe sie weggeklickt werden können
Kritische Meldungen sollten rot eingefärbt und kursiv
formatiert werden
Statuslisten ziehen die Aufmerksamkeit des Benutzers
Müssen nicht weggeklickt werden
UI-Design WS07/08
Folie 15
Wenn kein Weg an Dialogfeldern vorbei geht, dann
biete die Option „Diese Fehlermeldung nicht mehr
anzeigen“ an
UI-Design WS07/08
Folie 16
Grundregeln für gutes GUI-Design
Grundregeln für gutes GUI-Design
Schlechtes Layout
Anzahl der Mausklicke reduzieren:
Je weniger Mausklicke durchgeführt werden müssen,
desto benutzerfreundlicher ist die GUI
Mauswege verkürzen:
GUI-Elemente (Schalflächen, Listen, Icons,
Eingabefelder ,etc.), die hintereinander angeklickt
werden müssen, sollten nebeneinander stehen
UI-Design WS07/08
Folie 17
Grundregeln für gutes GUI-Design
Noch besser
Java Look and Feel Design Guidelines:
http://java.sun.com/products/jlf/ed2/book/index.html
UI-Design WS07/08
Folie 19
Besser: Ausrichtung der Beschriftung und der Felder
UI-Design WS07/08
Folie 18
Grundregeln für gutes GUI-Design
Gruppierung von logisch zusammenhängenden GUIElementen:
Icons, die ein Menü widerspiegeln, sollen hintereinander
stehen und von anderen Icons getrennt werden
UI-Design WS07/08
Folie 20
Grundregeln für gutes GUI-Design
Schaltflächen zum Ausführen von Aktionen (Befehlen)
Klare Beschriftung
Grundregeln für gutes GUI-Design
Mehrfachauswahl:
Check-Boxen
Verwendung von Icons
Zur Auswahl einer aus mehren Alternative
können Optionsfelder verwendet
werden
Häufigste gewählte Option
als Standardoption voreinstellen
UI-Design WS07/08
Folie 21
Grundregeln für gutes GUI-Design
Spinner/Auswahllisten:
Für Eingaben aus einem eingeschränkten Wertebereich
Spinner unterstützen die Validierung
Drop-Down-Listen
Check-Boxen:
für Binärentscheidungen
UI-Design WS07/08
Folie 22
Menschliche Wahrnehmung
von Informationseinheiten
Menschen gehen bei der Suche nach relevanten Informationen
selektiv vor
Selektion anhand:
Aussehen
Strukturelle Organisation
Das menschliche Auge ordnet dabei alle Elemente einer
Informationseinheit nach einer „Wichtigkeitsskala“
Z.B. gefärbte bzw. gruppierte Elemente stehen vor schwarz-weißen
bzw. isolierten Elementen
UI-Design WS07/08
Folie 23
UI-Design WS07/08
Folie 24
Menschliche Wahrnehmung
von Informationseinheiten
Diese Tatsachen können genutzt werden, um
festzulegen, in welcher Reihenfolge der Nutzer
Elemente wahrnehmen und bearbeiten soll um ihn
durch die UI zu führen
Die Färbung und die visuelle Anordnung der Elemente
am Bildschirm kann hierfür als Mittel eingesetzt werden
Farbauswahl
Farbauswahl kann zur Visualisierung der
Zusammengehörigkeit von Informationseinheiten
verwendet werden
Durch geeignete Farbauswahl kann die Aufmerksamkeit
des Benutzers im richtigen Augenblick auf die richtige
Stelle gelenkt werden
Falsche Farbauswahl kann seine Konzentration auf die
wichtigen Elementen und Aufgaben verringern und
ihn bei seiner Arbeit behindern
UI-Design WS07/08
Folie 25
Farbauswahl/Visuelle Anordnung
UI-Design WS07/08
Folie 26
Farbauswahl
Farbe sollte nur sparsam verwendet werden, weil
Farbassoziation und Interpretation ist sehr subjektiv und kulturabhängig
(Weiß ist in Indien ein Zeichen der Trauer)
Unterschiedliche Farbpräferenzen
Farbenblindheit (10% der Männer und 2% der Frauen)
UI-Design WS07/08
Folie 27
UI-Design WS07/08
Folie 28
Schriftarten zur Kommunikation
mit den Benutzern
Serif (Times New Roman,
Lesbarkeit von Sans-Serif-Texten ist höher als Serif-Texte
verwende eher Sans-Serif-Schriftarten als Serif
haben am Anfang und am Ende jedes Strichs ein Füßchen
T (Time New Roman) mit
Schriftarten zur Kommunikation
mit den Benutzern
Sans-Serif (
T
, Helvetica,
,…)
Möglichst wenig unterschiedliche Schriftarten benutzen
TEXTE, DIE AUSSCHLIEßLICH AUS GROßBUCHSTABEN BESTEHEN,
SIND SCHLECHT LESBAR
haben keine Füßchen
Nicht zu viele Texteile fett formatieren
Serif-Schrifft = Groteskschrift
Fetter Text erregt zwar die Aufmerksamkeit
Häufiger Einsatz kann zur Verwirrung des Users
führen und setzt die optische Wichtigkeit der Formatierung herab
Sans-Serif = seriflos
Semi-Serif (Schriftfamilie Rotis)
Mittelform zwischen Serif und Sans-Serif
UI-Design WS07/08
Folie 29
Textfärbung
Dunkler Text auf hellem Hintergrund ist am besten lesbar
Häufiger Einsatz von kursiver Texteilen erschwert die Lesbarkeit des
Textes, insbesondere wenn das Antialiasing für Zeichen nicht eingeschaltet
ist
UI-Design WS07/08
Folie 30
Quellen und Referenzen
Vorlesung Human Computer Interaction (HCI) Prof.
Krömker WS 06/07
Heller Text auf hellem Hintergrund ist schwer lesbar
Dunkler Text auf dunklem Hintergrund ist sehr schlecht lesbar
UI-Design WS07/08
Folie 31
Zahlreiche Links zum Thema unter:
http://www.sum-it.nl/enguilin.html
UI-Design WS07/08
Folie 32