View
3
Download
0
Category
Preview:
Citation preview
UI-Design WS07/08Folie 1
Ashraf Abu Bakerbaker@gdv.cs.uni-frankfurt.de
Johann Wolfgang Goethe-UniversitätProfessur für Graphische DatenverarbeitungFachbereich Informatik und MathematikProf. Dr. Detlef Krömker
Richtlinien zum Design und zur Entwicklung vongraphischen Benutzerschnittstellen
UI-Design WS07/08Folie 2
Benutzerschnittstellen
User Interfaces (UI)
UI: GUI, WEB-Schnittstellen
GUI: interaktive Graphische Benutzeroberfläche- Steuerung komplexer Softwaresysteme
- Bedienung von elektronischen Geräten
- (Handys, Palms, Automaten, Spielkonsolen , ….etc.)
UI-Design WS07/08Folie 3
Richtlinien zum Design von graphischen
Benutzerschnittstellen UI
WEB-InterfacesWeb-Seiten
Multimediale Inhalte (Graphiken, Animation, Flash-Filme,… etc.)
UI-Design WS07/08Folie 4
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/08Folie 5
Richtlinien
Erleichtern dem Nutzer die Orientierung und helfen ihm sich innerhalb der Schnittstelle zurechtzufinden
UI-Design WS07/08Folie 6
GUI-, Web-Design
Unterscheidung zwischen:
Applikation-GUI-DesignWEB-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/08Folie 7
Anforderungen an UI
Zwei Anforderungen:
Funktionalität (functionality) Ermöglicht den Benutzern, die Aufgaben durchzuführen,für die UI erstellt wurde
Benutzbarkeit (usability) BedienungsfreundlichkeitEin 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/08Folie 8
Anforderungen UI
UI sollen an die Bedürfnisse des Nutzers angepasst sein, nicht umgekehrt
UI ermöglicht, dassBenutzer die Aufgabe mit minimalem Lernaufwand, möglichst ohne Fehler und in minimaler Zeit durchführen können
UI-Design WS07/08Folie 9
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/08Folie 10
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/08Folie 11
Identifikation der Zielgruppe
Professionelle AnwenderLegen 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 AnwenderSchüler, Angestellte ohne EDV-Ausbildung, etc.
UI-Design WS07/08Folie 12
Grundregeln für gutes GUI-Design
Vermeidung von Menüs aller Art (Pull-down, Pop-Up, und Kontext-Menü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/08Folie 13
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/08Folie 14
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/08Folie 15
Grundregeln für gutes GUI-Design
Fehlermeldungen möglichst in einer Statusleiste statt in Dialogfeldern anzeigen
Kritische Meldungen sollten rot eingefärbt und kursiv formatiert werden
Statuslisten ziehen die Aufmerksamkeit des Benutzers
Müssen nicht weggeklickt werden
UI-Design WS07/08Folie 16
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
Wenn kein Weg an Dialogfeldern vorbei geht, dann biete die Option „Diese Fehlermeldung nicht mehr anzeigen“ an
UI-Design WS07/08Folie 17
Grundregeln für gutes GUI-Design
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/08Folie 18
Grundregeln für gutes GUI-Design
Schlechtes Layout
Besser: Ausrichtung der Beschriftung und der Felder
UI-Design WS07/08Folie 19
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/08Folie 20
Grundregeln für gutes GUI-Design
Gruppierung von logisch zusammenhängenden GUI-Elementen:
Icons, die ein Menü widerspiegeln, sollen hintereinander stehen und von anderen Icons getrennt werden
UI-Design WS07/08Folie 21
Grundregeln für gutes GUI-Design
Schaltflächen zum Ausführen von Aktionen (Befehlen)
Klare Beschriftung
Verwendung von Icons
Zur Auswahl einer aus mehren Alternativekönnen Optionsfelder verwendet
werdenHäufigste gewählte Option als Standardoption voreinstellen
UI-Design WS07/08Folie 22
Grundregeln für gutes GUI-Design
Mehrfachauswahl:
Check-Boxen
Drop-Down-Listen
Check-Boxen:
für Binärentscheidungen
UI-Design WS07/08Folie 23
Spinner/Auswahllisten:
Für Eingaben aus einem eingeschränkten WertebereichSpinner unterstützen die Validierung
Grundregeln für gutes GUI-Design
UI-Design WS07/08Folie 24
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/08Folie 25
Menschliche Wahrnehmung
von Informationseinheiten
Diese Tatsachen können genutzt werden, umfestzulegen, 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
UI-Design WS07/08Folie 26
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 undihn bei seiner Arbeit behindern
UI-Design WS07/08Folie 27
Farbauswahl/Visuelle Anordnung
UI-Design WS07/08Folie 28
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/08Folie 29
Schriftarten zur Kommunikation
mit den Benutzern
Serif (Times New Roman, ���������haben am Anfang und am Ende jedes Strichs ein Füßchen�� � � � � �� � �
T (Time New Roman) mit
� � � � �
T
�
Sans-Serif (
� � �
, Helvetica, �������,…)haben keine Füßchen
Serif-Schrifft = Groteskschrift
Sans-Serif = seriflos
Semi-Serif (Schriftfamilie Rotis)Mittelform zwischen Serif und Sans-Serif
UI-Design WS07/08Folie 30
Schriftarten zur Kommunikation
mit den Benutzern
Lesbarkeit von Sans-Serif-Texten ist höher als Serif-Texte � verwende eher Sans-Serif-Schriftarten als Serif
Möglichst wenig unterschiedliche Schriftarten benutzen
TEXTE, DIE AUSSCHLIEßLICH AUS GROßBUCHSTABEN BESTEHEN, SIND SCHLECHT LESBAR
Nicht zu viele Texteile fett formatieren
Fetter Text erregt zwar die Aufmerksamkeit Häufiger Einsatz kann zur Verwirrung des Users führen und setzt die optische Wichtigkeit der Formatierung herab
Häufiger Einsatz von kursiver Texteilen erschwert die Lesbarkeit des Textes, insbesondere wenn das Antialiasing für Zeichen nicht eingeschaltet ist
UI-Design WS07/08Folie 31
Textfärbung
Dunkler Text auf hellem Hintergrund ist am besten lesbar
Heller Text auf hellem Hintergrund ist schwer lesbar
Dunkler Text auf dunklem Hintergrund ist sehr schlecht lesbar
UI-Design WS07/08Folie 32
Quellen und Referenzen
Vorlesung Human Computer Interaction (HCI) Prof. Krömker WS 06/07
Zahlreiche Links zum Thema unter:
http://www.sum-it.nl/enguilin.html
Recommended