Richtlinien zum Design von graphischen ... · Multimediale Inhalte (Graphiken, Animation, Flash-Filme,… etc.) UI-Design WS07/08 Folie 4 Richtlinien Richtlinien: Vorgaben, Empfehlung

UI-Design WS07/08Folie 1

Ashraf Abu [email protected]

Johann Wolfgang Goethe-UniversitätProfessur für Graphische DatenverarbeitungFachbereich Informatik und MathematikProf. Dr. Detlef Krömker

Richtlinien zum Design und zur Entwicklung vongraphischen Benutzerschnittstellen


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.)


Richtlinien zum Design von graphischen

Benutzerschnittstellen UI

WEB-InterfacesWeb-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


Richtlinien

Erleichtern dem Nutzer die Orientierung und helfen ihm sich innerhalb der Schnittstelle zurechtzufinden


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.”


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


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


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


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


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.


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?



Konventionen für Short-Cuts sollen eingehalten werden:

Strg+c = Kopieren

Strg+v = Einfügen

Strg+x = Ausschneiden

Strg+n = New



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



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



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



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



Schlechtes Layout

Besser: Ausrichtung der Beschriftung und der Felder



Noch besser

Java Look and Feel Design Guidelines:

http://java.sun.com/products/jlf/ed2/book/index.html



Gruppierung von logisch zusammenhängenden GUI-Elementen:

Icons, die ein Menü widerspiegeln, sollen hintereinander stehen und von anderen Icons getrennt werden



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



Mehrfachauswahl:

Check-Boxen

Drop-Down-Listen

Check-Boxen:

für Binärentscheidungen


Spinner/Auswahllisten:

Für Eingaben aus einem eingeschränkten WertebereichSpinner unterstützen die Validierung



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


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


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


Farbauswahl/Visuelle Anordnung


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)


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


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


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


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

Documents

Richtlinien zum Design von graphischen ... · Multimediale Inhalte (Graphiken, Animation, Flash-Filme,… etc.) UI-Design WS07/08 Folie 4 Richtlinien Richtlinien: Vorgaben, Empfehlung