Fraunhofer IAO, IAT Universität Stuttgart Gestaltungsprinzipien – heute und morgen WIMP (windows,...
-
Upload
dietlinde-gerlich -
Category
Documents
-
view
111 -
download
0
Transcript of Fraunhofer IAO, IAT Universität Stuttgart Gestaltungsprinzipien – heute und morgen WIMP (windows,...
Fraunhofer IAO, IAT Universität Stuttgart
Gestaltungsprinzipien – heute und morgenWIMP (windows, icons, menues, pointer)
WIMP-Prinzipien • Metapher (metaphors)• Direkte Manipulation (direct manipulation)• Sehen und Zeigen (see and point)
• Konsistenz (consistency)• WYSIWYG (What You See Is What You Get)• Benutzersteuerung (user control) • Rückkopplung und Dialog ( feedback and dialogue)• Vergebung (forgiveness)
• Ästhetische Integrität (aesthetic integrity)• Nichtmodalität (modelessness)
Anti-WIMP-Prinzipien• Realität (reality)• Delegation (delegate)
• Beschreiben und Befehlen (describe and command• Verschiedenheit (diversity)• Bedeutungsrepräsentation (represent meaning)• Gemeinsame Steuerung (shared controll)• System erledigt Details (system handles details)• Modellierung von Benutzeraktionen (model user actions)• Grafische Vielfalt (graphic variety)
• Umfangreichere Hilfestellung (richer cues)
/The Anti-Mac Interface, Gentner, Nielson ’96/
Fraunhofer IAO, IAT Universität Stuttgart
Umfeld der Benutzung (1)
WIMP-Benutzungsoberflächen• Benutzer haben keine vorherige Computererfahrung• Büroanwendungen
•Schwache Computer ( 128 k , RAM 6800 CPU)• Eingeschränkte Kommunikationsbandbreite (kleiner Bildschirm)
• Ein-Platz-Systeme, die unverändert bleiben, bis der Benutzer etwas ändert• Manipulation von Piktogrammen
Anti- WIMP-Benutzungsoberflächen• Benutzer sind mit Computern aufgewachsen (Post-Nintendo-Generation)• Arbeit, Spiel, gruppenbezogenes Arbeiten (groupware)• Leistungsstarke Computer (Multi-Gigabyte RAM, Cray on a chip RISC-Prozessoren)• Reichhaltige Kommunikation (Computer sieht den Benutzer, weiß wer er ist; große, hochauflösende Bildschirme, Tastatur-/Maus- Eingabe, neue Ein-/Ausgabegeräte• Vernetze Systeme, die einer konstanten Veränderung unterliegen • Sprache
/The Anti-Mac Interface, Gentner, Nielson ’96/
Fraunhofer IAO, IAT Universität Stuttgart
Umfeld der Benutzung (2)
WIMP-Benutzungsoberflächen
• Schwache Objektorientierung (kleine Anzahl großer Objekte mit wenigen Attributen)• >>Windows-Explorer<< (sichtbares Dateisystem) vereinheitlicht die Oberfläche und Dateien sind die grundlegenden Interaktions-Objekte• Durchsuche Deine Festplatte
• >>The Power to Be Your Best<<
Anti- WIMP-Benutzungsoberflächen
• Ausgeprägte Objektorientierung (große Anzahl kleiner Objekte und vielfältige Attributmengen)• Persönliche Informationswiedergewinnung (information retrievial) als vereinheitlichendes Prinzip mit atomaren Informationseinheiten als grundlegende Interaktions-Objekte• Information kommt zu Dir• Sie wollen nicht immer so hart arbeiten
/The Anti-Mac Interface, Gentner, Nielson ’96/
Fraunhofer IAO, IAT Universität Stuttgart
Generische Funktionen der direkten Manipulation
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Software-ErgonomieDirekte Manipulation: Pro und Contra
Pro: • Anfänger können die Benutzer des Systems sehr schnell erlernen, in der Regel durch eine Demonstration eines erfahreneren Benutzers.• Gelegenheitsbenutzer können die wesentlichen Begriffe und Bedienungsoperationen behalten.• Der Benutzer kann direkt sehen, ob seine Eingaben zu dem gewünschten Ergebnis führen, und er kann Veränderungen vornehmen. • Die Benutzung des Systems ist überwiegend angstfrei, da sich das System dem Benutzer verständlich darstellt und die Aktionen umkehrbar sind.• Der Benutzer gewinnt rasch Selbstvertrauen und Kompetenz, da er die Initiative ergreift, Kontrolle über das System ausübt und das Systemverhalten für ihn vorhersagbar wird. • Generische Funktionen werden über verschiedene Anwendungen hinweg konsistent gehandhabt.• Generische Funktionen erfordern nur die Kenntnis einer geringen Anzahl von
Bearbeitungsregeln.Die beiden ersten Vorteile können auch für ein konventionelles Menüsystem Die beiden ersten Vorteile können auch für ein konventionelles Menüsystem zutreffen.zutreffen.
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Software-ErgonomieDirekte Manipulation: Pro und Contra
Contra:
• Eine größere Sequenz von Teilhandlungen kann häufig nicht vollständig im Voraus festgelegt werden und vorwärtskontrolliert ausgeführt werden.
Dadurch können der langfristige Übungsfortschritt und die Effizienz von Experten beeinträchtigt werden.
• Hoher konzeptioneller Entwicklungsaufwand für die Detailgestaltung.Es müssen eine Aufgabenkompatible, handlungsdirekte und konsistente Modellwelt und Arbeitsoberfläche mit grafisch-räumlichen Aktionen und Darstellungen der Objektmanipulation konzipiert und gestaltet werden.
• Viele generische Funktionen können zu Effizienzverlusten führen, da komplexe Funktionen zusammengesetzt werden müssen. Außerdem erfordert dies einen höheren Planungsaufwand.
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
ZusammenhängeUnterschiede zwischen klassischen Oberflächen und Web-
Oberflächen
KriteriumGUI-SystemGestaltungs-RegelwerkGestaltungsspielraumDialogartenDialogmodiDialogtechnikenFenstertypen
StrukturierungsartenOrientierungsmöglichkeitenNavigationsformen
MedienKonsistenz innerhalb der AnwendungBenutzer
Effizienz
Klassischz.B. Windows-GUIz.B. Windows style guidedurch GUI-System
eingeschränktPrimär- und Sekundärdialogevorwiegend nicht-modaldirekte Manipulation/Menüsalle
ein- oder zweistufiger Baumi. Allg. implizitMenüs/Druckknöpfe
Text,Grafikgroßoft Experte
hoch
WebWeb-Browser, z.B Internet
Explorernoch nicht vorhandengroß, durch Benutzer
beschränkbarvorwiegend Primärdialogevorwiegend modalVerweise (links)/Menüsi. Allg. Arbeitsbereich desWeb-BrowsersMehrstufiger Baum oder Netzoft explizit, z.B. als BaumMaussensitive Texte,Bilder,Symbole, Druckknöpfe,z.T. Menüs, SuchfeldText,Grafik, Bilder, Animationoft geringoft Gelegenheitsbenutzer oderErstbenutzereher gering
Fraunhofer IAO, IAT Universität Stuttgart
Typischer Fensteraufbau bei Windows
/Balzert 2000/
Fenstertypen:
• Primärfenster (primary windows), in denen die Hauptaktivitäten des Benutzers (Primärdialoge) stattfinden und
•Sekundärfenster ( secundary windows), die der Eingabe von Optionen und der Durchführung sekundärer Aktivitäten dienen
(Sekundärdialoge)
Fraunhofer IAO, IAT Universität Stuttgart
Aufbau eines Web-Browsers
Dies ist die Arbeitsfläche des Web-Browsers
Anwendungs-menüknopf
Menübalken
Adressleiste bzw. Adressfeld
Statusleiste
Titelbalken/Titelleiste
Knopf für...
...Piktogrammgröße
...Vollbildgröße
...Browser schließen
Statusanzeiger
Symbolleiste mit Schaltflächen (Druckknöpfen) , teilweise mit Menüs (z.B. bei e-mail)
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Wichtige Aufgaben der Informationsgestaltung
auf dem BildschirmOptimierung der Belastungs-/Beanspruchungssituation
Berücksichtigung von Merkmalen und Bedürfnissendes Benutzers
Nutzung kognitiver Fähigkeiten und Fertigkeiten
Erkennen technischer und menschlicher Grenzen
Einbeziehung des Arbeitsumfeldes
Aufgabenorientierte Gestaltung
Verbesserung der Lernsituation
Flexibilität in der Darstellung
Benutzerpräferenzen ermöglichen
Gewährleistung des Erkennens und der Lesbarkeit
Konsistente Darstellungen
Fraunhofer IAO, IAT Universität Stuttgart
Allgemeine Gesichtspunkte der visuellen Informationsgestaltung
Bei der visuellen Wahrnehmung wird das angebotene Material sofort strukturiert
Bei der visuellen Wahrnehmung wird das angebotene Material sofort strukturiert
Eine geeignete Strukturierung kann
- überflüssige Suchzeiten vermeiden,- die Fehlerhäufigkeit verringern,- ein schnelles Lernen ermöglichen und- die Akzeptanz durch den Benutzer erhöhen
Eine geeignete Strukturierung kann
- überflüssige Suchzeiten vermeiden,- die Fehlerhäufigkeit verringern,- ein schnelles Lernen ermöglichen und- die Akzeptanz durch den Benutzer erhöhen
Nicht nur der ungeübte, sondernauch der geübte Benutzer mussauf visuelle Hilfen zurückgreifen können
Nicht nur der ungeübte, sondernauch der geübte Benutzer mussauf visuelle Hilfen zurückgreifen könnenInformationInformation
Fraunhofer IAO, IAT Universität Stuttgart
Prinzipien der Figur-Grund-Unterscheidung
Prinzipien der Binnengliederung (Gruppierung einzelner Objekte zu einem Makroobjekt)
Prinzip der Ähnlichkeit
Prinzip der Geschlossenheit
Prinzip der Nähe
Prinzip der guten Fortsetzung
Prinzip des gemeinsamen Schicksals
Größenkonstanz, Formkonstanz, Identitätskrise, Vordergrund/Hintergrund, Kontext und Wahrnehmung, Gestaltwahrnehmung
Prägnanz
Prinzipien der Gestaltpsychologie /Gruppieren
Fraunhofer IAO, IAT Universität Stuttgart
Eine Gestaltung nach den Prinzipien der Figur-Grund-Unterscheidung erhöht die Wahrscheinlichkeit, dass ein Objekt oder Makroobjekt als Figurwahrgenommen wird, während die übrigen Objekte in den Hintergrund treten.
Was wird eher als Figur wahrgenommen?
die kleinere Einheit vor einem größeren Hintergrund
die dunklere Einheit vor einem helleren Hintergrund
eine Einheit mit einer vertikalen oder horizontalen Hauptachse
eine symmetrische Einheit
eine Einheit mit konvexen, nach außen gewölbten Ränder
Figur-Grund-Unterscheidung
Fraunhofer IAO, IAT Universität Stuttgart
Größenkonstanz
Formkonstanz
Identitätskrise
Vordergrund/Hintergrund
Kontext und Wahrnehmung
Gestaltwahrnehmung
Visuelle Wahrnehmung
Fraunhofer IAO, IAT Universität Stuttgart
Einander ähnelnde oder gleichartige Objekte erscheinen eher als zusammengehörig,im Vergleich zu Objekten, die sehr unterschiedlich voneinander sind. Sie werden als eine Einheit oder Figur wahrgenommen. Die genannte Ähnlichkeit bezieht sich auf die statischen grafischen Variablen Form, Farbe, Richtung/Orientierung, Helligkeit und Größe der Einzelobjekte.
Gesetz der Ähnlichkeit
Fraunhofer IAO, IAT Universität Stuttgart
Gesetz der ÄhnlichkeitWebdesign
Fraunhofer IAO, IAT Universität Stuttgart
Objekte, die eine geschlossene Figur bilden, erscheinen zusammengehörig und werden als eine Einheit oder Figur wahrgenommen. Dabei wird Nichtvorhandenes bei der Wahrnehmung ergänzt. So wird etwa eine geometrische Figur erkannt, auch wenn sie nicht vollständig dargestellt ist.
Gesetz der Geschlossenheit
Fraunhofer IAO, IAT Universität Stuttgart
Die variierenden Grautöne erzeugen Rechtecke,die als Einheiten wahrgenommen werden.
Die horizontale Trennlinien ergeben eine 2. Gruppierung,die mit dem anderen nicht übereinstimmt (irreführend).
besser
Gesetz der Geschlossenheit
Fraunhofer IAO, IAT Universität Stuttgart
Objekte, die räumlich oder zeitlich beisammen liegen, erscheinen zusammengehörigund werden als eine Einheit oder Figur wahrgenommen.
Gesetz der Nähe
Fraunhofer IAO, IAT Universität Stuttgart
Gesetz der Nähe (Beispiele)
Fraunhofer IAO, IAT Universität Stuttgart
zwei einander schneidende Linien59 schwarze Punkte
Objekte, die räumlich oder zeitlich in einfacher, gesetzmäßiger oder harmonischer Kontinuität angeordnet sind, erscheinen zusammengehörig und werden als eine Einheit oder Figur wahrgenommen.
Gesetz der guten Fortsetzung
Fraunhofer IAO, IAT Universität Stuttgart
Gesetz der guten Fortsetzung
Die senkrechte Fluchtlinieerzeugt einen optischen Zusammenhalt
ermöglicht schnelles Lesen
besser:
Fraunhofer IAO, IAT Universität Stuttgart
Objekte mit gleicher Entwicklung oder Veränderung erscheinen zusammengehörig und werden als eine Einheit oder Figur wahrgenommen.(z. B.: Objekte, die die gleiche Bewegungsrichtung und Geschwindigkeit haben)
Gesetz des gemeinsamen Schicksals
Fraunhofer IAO, IAT Universität Stuttgart
Das Gesetz der guten Gestalt stellt eine Verallgemeinerung der Wahrnehmungsgesetze nach dem Prinzip der Prägnanz dar.
Prägnanz
Fraunhofer IAO, IAT Universität Stuttgart
Zuordnung Infoklassen- BildschirmbereicheStrukturierung der Arbeitsinformation
Vorgehensweise bei der Gestaltung von Bildschirmformularen
Groblayout
Informationskodierung
Feinlayout
Bildung von Informationsblöcken
evtl. sinnvolle Abkürzungen
Hervorhebungen undKennzeichnungen
visuelleGestaltungModalität: textuell, symbolisch, grafisch
Begriffswahl, Formulierung, Überschriften
Bündigkeiten, Blockabstände, TrennlinienGestaltung von Listen, Adressblöcken etc.
Fraunhofer IAO, IAT Universität Stuttgart
Gitter/ Raster
Der Arbeitsbereich des Fensters istdurch ein nicht sichtbares Gitterraster aufgeteilt.
Der Arbeitsbereich des Fensters istdurch ein nicht sichtbares Gitterraster aufgeteilt.
Empfehlung:Die Gittergröße sollte etwa 80 - 90% von der Größe des Fonts betragen, z.B: Font 10 Punkt, Gitter 8 Punkt (Achtung: Punkt
Empfehlung:Die Gittergröße sollte etwa 80 - 90% von der Größe des Fonts betragen, z.B: Font 10 Punkt, Gitter 8 Punkt (Achtung: Punkt Pixel)
Fraunhofer IAO, IAT Universität Stuttgart
Fenstergestaltung mit Hilfe eines Rasters
Fraunhofer IAO, IAT Universität Stuttgart
Gruppierung von Daten
Felder und andere Elemente, die sich logisch zu einer Einheit gruppierenlassen, werden bei vertikaler Anordnung im einheitlichen Abstand einer Gittereinheit angeordnet.Empfehlung: 2 -3 Einheiten
Felder und andere Elemente, die sich logisch zu einer Einheit gruppierenlassen, werden bei vertikaler Anordnung im einheitlichen Abstand einer Gittereinheit angeordnet.Empfehlung: 2 -3 Einheiten
Gruppen von Elementen werden möglichst durch Leerbereiche (anstelle von Trennlinien) voneinander getrennt.Empfehlung: Abstand = 4 Einheiten vertikal
Gruppen von Elementen werden möglichst durch Leerbereiche (anstelle von Trennlinien) voneinander getrennt.Empfehlung: Abstand = 4 Einheiten vertikal
Besteht ein Fenster hauptsächlich aus Feldbezeichnern und Ein-/Ausgabefeldern, dann sollte das Layout des Fensters möglichstzweispaltig aufgebaut werden.
Besteht ein Fenster hauptsächlich aus Feldbezeichnern und Ein-/Ausgabefeldern, dann sollte das Layout des Fensters möglichstzweispaltig aufgebaut werden.
Fraunhofer IAO, IAT Universität Stuttgart
Beispiele von Eingabefeldern
Feldbezeichnung:
Feldbezeichnung:
Feldbezeichnung
Feldbezeichnung
. . . .
Fraunhofer IAO, IAT Universität Stuttgart
Pushbuttons - 1Form und Größe der Pushbuttons sind innerhalb des jeweiligen Fenstersystems möglichst gleich.Empfehlung: innerhalb einer Anwendung maximal 3 Buttongrößen.
Form und Größe der Pushbuttons sind innerhalb des jeweiligen Fenstersystems möglichst gleich.Empfehlung: innerhalb einer Anwendung maximal 3 Buttongrößen.In einer Gruppe von Pushbuttons wird immer ein Button hervorgehoben. Diese Hervorhebung zeigt die Voreinstellung an, die auch mit der Enter-Taste aktiviert werden kann.
In einer Gruppe von Pushbuttons wird immer ein Button hervorgehoben. Diese Hervorhebung zeigt die Voreinstellung an, die auch mit der Enter-Taste aktiviert werden kann.Voreingestellt ist die vom Benutzer am häufigsten benötigte bzw. die ungefährlichste Aktion.Voreingestellt ist die vom Benutzer am häufigsten benötigte bzw. die ungefährlichste Aktion.
Pushbuttons, die ein Dialogfenster aktivieren, weisen analog zu Menüeinträgen in ihrer Beschriftung drei Punkte auf.
Pushbuttons, die ein Dialogfenster aktivieren, weisen analog zu Menüeinträgen in ihrer Beschriftung drei Punkte auf.
Pushbuttons werden nach Möglichkeit einzeilig am unteren Fensterrand oder einspaltig am rechten Fensterrand angeord- net.
Pushbuttons werden nach Möglichkeit einzeilig am unteren Fensterrand oder einspaltig am rechten Fensterrand angeord- net.
Fraunhofer IAO, IAT Universität Stuttgart
Häufig wiederkehrende Aktionen müssen durch die gleichen Pushbuttons, die sogenannten Standard-Pushbuttons, ausgelöst werden.
Häufig wiederkehrende Aktionen müssen durch die gleichen Pushbuttons, die sogenannten Standard-Pushbuttons, ausgelöst werden.
Pushbuttons - 2Die Anzahl der Pushbuttons innerhalb einer Gruppe: höchstens 7 Die Anzahl der Pushbuttons innerhalb einer Gruppe: höchstens 7
Pushbutton-Aktionen werden auch in das Menü des Fensters aufgenommen.Pushbutton-Aktionen werden auch in das Menü des Fensters aufgenommen.
In Dialogfenstern ist die übliche Reihenfolge von Pushbuttons: “OK“ (bzw. die auszulösende Aktion),“Abbrechen“,“Hilfe“. Weitere Pushbuttons werden zwischen “OK“und “Abbrechen“eingefügt. “OK“ sollte nach Möglichkeit durch bedeutungsvolle Funktionsnamen ersetzt werden.
In Dialogfenstern ist die übliche Reihenfolge von Pushbuttons: “OK“ (bzw. die auszulösende Aktion),“Abbrechen“,“Hilfe“. Weitere Pushbuttons werden zwischen “OK“und “Abbrechen“eingefügt. “OK“ sollte nach Möglichkeit durch bedeutungsvolle Funktionsnamen ersetzt werden.
Bestätigen eines Dialogschritts mit Schließen des Fensters
Abbrechen eines Dialogschritts mit Schließen des Fensters
OK
Abbrechen
Hilfe Aufrufen von kontextbezogenen Hilfeinformationen
Fraunhofer IAO, IAT Universität Stuttgart
FenstertitelEnthält das Fenster einen Ausschnitt aus dem Inhalt eines Objektes, so wird im Fenstertitel zusätzlich zum Namen des betroffenen Objektes der Name des aktivierten Teilausschnitts angegeben. Neue Komponenten werden links hinzugefügt.
Enthält das Fenster einen Ausschnitt aus dem Inhalt eines Objektes, so wird im Fenstertitel zusätzlich zum Namen des betroffenen Objektes der Name des aktivierten Teilausschnitts angegeben. Neue Komponenten werden links hinzugefügt.
Beispiele für Fenstertitel:
Risiko 01234Teilrisiko 50 - Risiko 01234Tarifierung xyz - Teilrisiko 50 - Risiko 01234Daten - Tarifierung xyz - Teilrisiko 50 - Risiko 01234
Beispiele für Fenstertitel:
Risiko 01234Teilrisiko 50 - Risiko 01234Tarifierung xyz - Teilrisiko 50 - Risiko 01234Daten - Tarifierung xyz - Teilrisiko 50 - Risiko 01234
Titel
Fraunhofer IAO, IAT Universität Stuttgart
Meldung in grafischen Benutzungsschnittstellen
Es sollten Lösungsvorschläge angegeben werden.Es sollten Lösungsvorschläge angegeben werden.
Es sollten Korrekturen in einem Eingabefeld möglich sein.Es sollten Korrekturen in einem Eingabefeld möglich sein.
Ein erneuter Versuch sollte möglich sein. Ein erneuter Versuch sollte möglich sein.
Abbrechen und Hilfe sollten zur Verfügung stehen.Abbrechen und Hilfe sollten zur Verfügung stehen.
Symbole sollten angemessen verwendet werden.Symbole sollten angemessen verwendet werden.
Eine voreingestellte Aktion sollte angeboten werden.Eine voreingestellte Aktion sollte angeboten werden.
Buttons sollten so eindeutig wie möglich bezeichnet werden.Buttons sollten so eindeutig wie möglich bezeichnet werden.
Ja/Nein-Entscheidungen sollten vermieden werden.Ja/Nein-Entscheidungen sollten vermieden werden.
Fraunhofer IAO, IAT Universität Stuttgart
Informationskodierung - Hervorhebung
Verschiedene Helligkeitsstufen / Graustufen / Fettdarstellung
Inversdarstellung
Blinken
Hervorhebung mit Hilfe der Schreibmarke (Cursor)
Veränderung des Schrifttyps (z.B. Helvetica, Times etc.) und der Schriftart (z.B. kursiv, schattiert etc.)
Farbe
Kennzeichnung durch halbgrafische und grafische Symbole z.B.:
====, ----, *******,
, , , , , , , ,
a
b
d
e s
r
fp
z
gi
Fraunhofer IAO, IAT Universität Stuttgart
Informationskodierung - Farbe
Begriffliche Gestaltung und Layout gehen vor Farbverwendung
Nicht mehr als 3 (max. 4) unterschiedliche Farben verwenden (Farbdarstellung und nicht ‘‘Buntdarstellung‘‘)
Feste Gestaltungsprinzipien zugrundelegen
Zeichenlesbarkeit beachten
Hintergrundfarben: blau, grünVordergrundfarben: gelb, rot
Pastellartige Farben für Dauereinsatz
Fraunhofer IAO, IAT Universität Stuttgart
Gestaltung von Icons / Piktogrammen
Klare und stabile Grundform;Klare und stabile Grundform;
Scharfer Kontrast des Piktogramms gegen den Hintergrund des Bildschirms;Scharfer Kontrast des Piktogramms gegen den Hintergrund des Bildschirms;
Farben sollten mit Überlegung eingesetzt werden für die Hervorhebung und Differenzierung von Ikonen;Farben sollten mit Überlegung eingesetzt werden für die Hervorhebung und Differenzierung von Ikonen;
Piktogramme sollten innerhalb eines Systems konsistent verwendet werden;Piktogramme sollten innerhalb eines Systems konsistent verwendet werden;
Technisch orientierte Piktogramme sind u.U. gegenüber Metaphern zu bevorzugen;Technisch orientierte Piktogramme sind u.U. gegenüber Metaphern zu bevorzugen;
Piktogramme sollten vorzugsweise für eine Klasse von Objekten und Operationen stehen und nicht für Einzelelemente;Piktogramme sollten vorzugsweise für eine Klasse von Objekten und Operationen stehen und nicht für Einzelelemente;
Möglichst keine kulturspezifischen Piktogramme verwenden!Möglichst keine kulturspezifischen Piktogramme verwenden!
Übersicht empirischer Ergebnisse zur Gestaltung von Piktogrammen
Übersicht empirischer Ergebnisse zur Gestaltung von Piktogrammen
Fraunhofer IAO, IAT Universität Stuttgart
Wesentliche Unterschiede zwischen Menüs und Kommandos (1)
Menüauswahl
Kommando-sprache
Wiedererkennen möglicher Eingaben
Erinnern möglicher Eingaben
Gedächtnis-Anforderung
Strukturierung des Dialogablaufs...
...mehr durch die Anwendung
...mehr durch den Benutzer
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Wesentliche Unterschiede zwischen Menüs und Kommandos (2)
Theoretisch sprechen folgende Gründe für die Menüauswahl:pro Menü• erleichtert das Lernen,• geringe Gedächtnisbelastung,• weniger Benutzereingaben erforderlich,• weniger Eingabefehler,• Unterstützung des Planungs- und Entscheidungsprozesses,• geeignet für Anfänger und Gelegenheitsbenutzer.
Gegen die Menüauswahl sprechen theoretisch folgende Gründe:contra Menü• belegt Bildschirmfläche,• schränkt die Flexibilität ein,• erfordert Navigation,• insgesamt langsamere Interaktion,• weniger geeignet für Expertenbenutzer
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Wesentliche Unterschiede zwischen Menüs und Kommandos (3)
Empirische Untersuchungen haben folgende Ergebnisse gebracht:Empirie• Es gibt keine eindeutige Evidenz für die Vorteile der Menüauswahl bei
Anfängern oder Gelegenheitsbenutzern.• Allgemeine Prinzipien können durch schlechte Gestaltung unwirksam werden.• Präferenz für Menü oder Kommando hängt vom Individuum, der Situation, der
Aufgabe und von der Gestaltung ab.
Kriterien für gut benutzbare Namen und Benennungssysteme sind:• Kodierbarkeit,• Suggestivität,• Unterscheidbarkeit,Systematik im Kontext.
Kodierbarkeit bedeutet, dass Namen leicht gelesen, artikuliert und erinnert werden.
Unterscheidbarkeit bedeutet, dass die Namen für verschiedene Referenzobjekte nicht verwechselbar sind. Sie ist abhängig vom Kontext der übrigen Namen.
Systematik im Kontext bedeutet erkennbare systematische Beziehungen zu den anderen Namen des Kontextes.
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Dialogführung mittels Menü (1)
Benennung der Menüoptionen - Die Formulierung soll so sein, dass die Menüoptionen klar von einander
abgegrenzt, verständlich und dem Benutzer vertraut und gebräuchlich sind.- Kurze und einheitliche Bezeichnung wählen.
Kaskadenmenüs- Möglichst nur zweistufig, maximal dreistufig.- Die jeweils übergeordnete Menüoptionen (auf der obersten Ebene: der
Menütitel) – Gruppennamen genannt – müssen für den Benutzer bedeutungsvoll, präzise und verständlich sein (z.B. Schriftart, Schriftgröße, Schriftstil).
- Die Inhalte der Gruppen sollen überschneidungsfrei sein- Die Wahl und Bezeichnung der Gruppen soll so sein, dass die untergeordneten
Menüs typische Mitglieder der jeweiligen Gruppe sind (Typikalität). Dadurch wird eine schnelle und genaue Selektion ermöglicht (z.B. werden unter Schrift die verschieden Schriftarten aufgeführt).
- Breite, flache Bäume mit drei Ebenen und jeweils etwa 8 bis 16 Optionen haben sich im Normalfall als optional herausgestellt.
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Dialogführung mittels Menü (2)
Grafische Gestaltung der Menüoptionen
- Die Menüoptionen sollen linksbündig angeordnet werden.- Wenn möglich, die Menüoptionen bildhaft oder analog darstellen (z.B. Schriftart
in entsprechenden Front darstellen) anstelle einer rein sprachlichen Beschreibung.
Menütitel (nur für pull-down-Menüs)
- Möglichst einheitliche Bezeichnung und Anordnung der Menütitel über alle
Anwendungen und Fenster hinweg.- Menütitel sollen kurz und prägnant formuliert werden.- Ein einheitlicher grammatikalischer Stil ist einzuhalten.- Ein Stichwort (z.B. Buchung) oder ein kurzer Satz mit Substantiv (z.B.
Buchungsart wählen) sind besser als eine lange Phrase (z.B. Wählen Sie eine Buchungsart). /Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Dialogführung mittels Menü (3)Anordnung eines pop-up-Menüs - Die Position des aufgeblendeten Menüs sollte rechts, nahe dem
aktiven Objekt sein und darf dieses nicht überdecken. Anordnung der Menüoptionen- Eine zufällige Anordnung ist zu vermeiden.- Alphabetische Anordnungen und funktionale Gruppierungen führen im
Vergleich zu einer zufälligen Anordnung zu kürzeren Auswahlzeiten.
Gestaltungsregeln für Menüs:
/Balzert 2000/
Häufigkeit/ Wichtigkeit
Funktionale Gruppierung
SemantischeÄhnlichkeit
Alphabetische Folge
Natürliche Folge
Fraunhofer IAO, IAT Universität Stuttgart
Dialoggestaltung (1)
Menübalken mit drop-down-Menüs
pop-up-Menüs
Das drop-down-Menü erscheint nach dem Anklicken des gewünschten Menütitels. Es wird eine zweistufige Funktions- bzw. Objekthierarchie vorausgesetzt. Die Menütitel bilden die oberste Hierarchiestufe.
Funktionsweise Das pop-up-Menü erscheint an der
aktuellen Bearbeitungsstelle auf dem Bildschirm, z.B.: gekoppelt mit dem Mauszeiger. Aufruf durch Maustaste (meist rechte Taste) oder Funktionstaste. Ist ein pop-up-Menü nicht geöffnet, dann ist es für den Benutzer unerreichbar.
Das Menü ist so lange zu sehen, bis eine Menüoption durch Anklicken selektiert wird oder ein Klick außerhalb des Menü erfolgt. Im aktuellen Kontext nicht selektierbare Menüoptionen sind grau dargestellt. Menüoptionen können dynamisch von der Anwendung geändert werden.Durch Kaskadenmenüs können eine oder mehrere Hierachiestufen hinzugefügt werden.
/Balzert 2000/
Menübalken (menu bar) selektierte Menüoption Menüoption (menu item) Es folgt ein Dialogfenster (Auslassungspunkte, ellipsis) Separator zur Gruppierung von Optionen
Menütitel
drop-down-Menü
mnemonisches Kürzel
drop-down= herunterfallen
pop-up = plötzlich auftauchen
Fraunhofer IAO, IAT Universität Stuttgart
Dialoggestaltung (2)
Reichweite einer Menüoption
Überlagert der Menübalken eines Unterfensters das Anwendungsfenster (MDI-Bedienung), dann wirken die Optionen auf die Anwendung insgesamt und auf das Unterfenster.
Haben Unterfenster keinen eigenen Menübalken, dann wirken die Optionen auf die gesamte Anwendung.
Gleichnamige Optionen können bei einer MDI-Bedienung unterschiedliche Wirkungen haben (abhängig von jeweils aktiven Fenster).
Beziehen sich auf das Objekt oder die Objektgruppe, bei der es aktiviert wurde.
Beziehen sich auf das Objekt oder die Objektgruppe, bei der es aktiviert wurde.
drop-down-Menüs pop-up-Menüs
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Dialoggestaltung (3)
drop-down-Menüs
pop-up-Menüs
Aktionsmenü
Eigenschaftsmenü
/Balzert/2000/
Fraunhofer IAO, IAT Universität Stuttgart
Dialoggestaltung (4)
Eigenschaften
drop-down-Menüs
pop-up-Menüs
- Menütitel ständig sichtbar
- Belegt ständig Platz
-Mauszeiger muss jeweils zum Menübalken bewegt werden
- Globaler Geltungsbereich der Optionen
- Unsichtbar, wenn nicht geöffnet
- Platzsparend
- Mauszeiger bleibt im Arbeitskontext
- Lokaler Geltungsbereich der Optionen
- Unsichtbar, wenn nicht geöffnet
- Platzsparend
- Mauszeiger bleibt im Arbeitskontext
-Lokaler Geltungsbereich der Optionen
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Dialoggestaltung (5)
Möglichkeiten zur Beschleunigung der Auswahl:
• Mnemonische Auswahl über die Tastatur• Auswahl über Tastaturkürzel (Accelerator keys, Short Cut keys)• Aufzeichnung von Makros• Kommandosprache• Symbolbalken mit Symbolen unterhalb des Menübalkens (Windows 98:
tool bar)• Aufführung der jeweils zuletzt benutzen Objekte• Aufführung der häufigsten zuletzt benutzen Objekte/Einstellungen• Auslagerung von Menüoptionen auf Arbeitsbereiche
/Balzert/
Fraunhofer IAO, IAT Universität Stuttgart
Interaktionselemente
Zur Ein- und Ausgabe von Informationen in Fenstern werden Interaktionselemente
(controls, widgets) verwendet, die aus drei Elementtypen bestehen:• Basiselemente zur Anzeige und Manipulation von Informationen• Elemente zur Erweiterung der Funktionalität der Basiselemente und• Gestaltungselemente zur Verbesserung des visuellen
Erscheinungsbildes und des Verhaltens.
Neben Standard-Interaktionselementen kann jeder Entwickler eigene Interaktionselemente (custom controls) konstruieren.Außerdem gibt es Bibliotheken (dynamic link libaries, DLL‘s), die spezifische Interaktionselemente enthalten.
/Jens & Partner 92 S. 162f./
Fraunhofer IAO, IAT Universität Stuttgart
Interaktionselemente im Überblick (Java-Begriffe in blau)
Knopf
Feld
Liste
Grafik
Register
Basiselemente
/Balzert 2000/
Datenfeld (entry field, edit field, text field)
Textfeld, Texte (entry field, edit field,multi-line edit field, text field)
Druckknopf, Schaltfläche (push button, command button, toggle button)
Einfachauswahlknopf, Optionsfeld (radio button, option button)Mehrfachauswahlknopf, Kontrollkästchen (check button, check boxes)
Auswahlliste, Listenfeld (list box, list)
Tabelle (table)
Baum, Strukturansicht (tree, tree view)
Piktogramm, Ikone (icon)
Regler, Schieberegler (slider)
Register, Notizbuch (tab control, property sheet, tabbed pane)
Fraunhofer IAO, IAT Universität Stuttgart
Elemente zur Erweiterung der Funktionalität der Basiselemente
/Balzert 2000/
Erweiterungs-elemente
Gestaltungs-elemente
Eigenentwickelte Elemente
Gekaufte Bibliotheken
Rollbalken (scroll bar)
Trenn-Balken (split bar)
Gruppenumrandung (group box)
Gruppenüberschrift (group heading)
Führungstext (field prompt, static text field)
Spaltenüberschriften (column headings)
z.B. m-aus-n-Auswahl
z.B. adaptives Feld
z.B. DLLs
Fraunhofer IAO, IAT Universität Stuttgart
E/A-Gestaltung (1)Einfachauswahlknopf (1-aus-m)
Synonyme Begriffe: Einfachauswahlknopf, Optionsfeld, radio button, option button, Java: radio button
Verwendungszweck:Dient der Auswahl einer unter mehreren Alternativen, die sich gegenseitig
ausschließen. Ausdiesem Grund treten treten diese Knöpfe nur in Gruppen auf. Eine 1-aus-m-Auswahl
wird oftbenötigt, um zwischen alternative Werten eines Parameters zu wählen und einen Werteinzustellen.
Aufbau:Ein Einfachauswahlkopf besteht aus zwei Teilen: Alternative 1
- Druckknopf, mit dem die zwei Zustände Ein/Aus gut unterscheidbar Alternative 2darstellbar sind (toggle button). Alternative 3
- Beschriftung oder Symbol, das die Auswahl beschreibt, die durch Betätigen des dazugehörigen Knopfes getroffen wird. /ISO 9241-17; / , EN ISO 9241-17;1998, /Sun 99/, /Wandmacher
93/
Fraunhofer IAO, IAT Universität Stuttgart
E/A-Gestaltung (2)Einfachauswahlknopf (1-aus-m)
Eigenschaften:
- Durch das Betätigen eines Knopfes aus der Knopfgruppe wird eine bestehendeandere Wahl innerhalb einer solchen Gruppe zurückgenommen.
- Dieses Verhalten entspricht den Stationstasten eines Radiogerätes. Zu einer Zeit ist genau eine Stationstaste gedrückt.
- Der Einfachauswahlknopf kann mit einem Zeigeinstrument oder über die Tastatur selektiert und betätigt werden.
- Der Benutzer ist nicht gezwungen einen Auswahlknopf zu selektieren.
- Texte und Grafiken, die zu einem Auswahlknopf gehören, können nicht ohne weiteres dynamisch verändert werden. Optionen können aber dynamisch auf ``grau`` gestellt werden.
/ISO 9241-17; / , EN ISO 9241-17;1998, /Sun 99/, /Wandmacher 93/
Hochformat
Querformat
Scheck
Überweisung
Lastschrift
Bar
Ausrichtung
Zahlung
Fraunhofer IAO, IAT Universität Stuttgart
E/A-Gestaltung (3)Einfachauswahlknopf (1-aus-m)
Gestaltungsregeln:• Die Beschriftung oder das Symbol ist auf gleicher Höhe rechts neben demjenigen Druckknopf
anzuordnen, mit dem es assoziiert werden soll. Es wird ein Abstand von0,3 cm zwischen Knopf und Beschriftung oder Symbol empfohlen.
• Eine spaltenweise Anordnung der Auswahlmöglichkeiten ist einer zeilenweisen Anordnung stets vorzuziehen. Es wird ein Abstand von 0,3cm zwischen den einzelnen Zeilen empfohlen.
• Die Höhe des Knopfes sollte zwölf Pixel, der Abstand zum nächsten Knopf fünf Pixel betragen /Sun 99/.
• Die Anzahl der Auswahlmöglichkeiten in einer Spalte soll nicht größer als sieben sein. Die Auswahl ist umso einfacher , je weniger Möglichkeiten angeboten werden.
• Die Anzahl der Auswahlmöglichkeiten soll in einer Anwendung nicht verändert werden.• Können in unterschiedlichen Dialogsituationen eine oder mehrere Alternativen nicht berücksichtigt
werden, dann sollen sie nicht weggelassen, sondern nur für den Benutzer nicht wählbar (disabled) gemacht werden.
• Mit Einfachauswahlknöpfen soll nur eine von vornherein bekannte Anzahl bekannter Alternativen ausgewählt werden können.
• Nur einsetzen, wenn die Alternativen bereits zum Zeitpunkt der Oberflächengestaltung bekannt sind und langfristig stabil bleiben.
• Menü-Knopf (option button):- Beim Anklicken öffnet sich ein pull-down-Menü. - Spart Platz, z.B. im Fließtext möglich.- Sichtbar ist die zuletzt selektierte Alternative. - Nicht mehr als 10 bis 12 Alternativen.
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
E/A-Gestaltung (4)Einfachauswahlknopf (1-aus-m)
Spezifische Ausprägungen:• Auswahlmenge (value set)Gruppe von rechteckigen aneinanderstoßenden Knöpfen, die Text oder
Grafikenthalten.- Gut geeignet für Alternativen, die am besten grafisch repräsentiert
werden (Farben, Muster, Zeichenwerkzeuge).- Die gewählte Alternative ist hervorgehoben.• Verwendung in Eigenschaftsmenüs- In Java werden Einfachauswahlknöpfe auch in Eigenschaftsmenüs
verwendet /Sun 99/.
A
/Balzert 2000/
X
Fraunhofer IAO, IAT Universität Stuttgart
Auswahl von Interaktionselementen für einzutippende Informationen
nein
Informationen (Daten/Texte) werden durch den Benutzer eingetippt
jaMehrzeilige Eingabe?
Eingabe meistens vorhersehbar? neinja
ja
nein
Platzeinsparung nötig?
Informationen in Gruppen zusammen- fassbar?
Kombiniertes Eingabefeld mit Klappliste (drop down Combo box, editable combo box)
mehrzeiliges Textfeld (multi line edit field, text area)
Register, Notizbuch ( notebook, tabbed pane)
Kombinations- feld (combo box)
einzeiliges Daten- oder Textfeld (single line edit field, text field)
ja nein
/Jens & Partner 92, S. 195/
Fraunhofer IAO, IAT Universität Stuttgart
Auswahl von Interaktionselementen für auszuwählenden Informationen
/Jens & Partner 92, S. 196/
Informationen werden durch den Benutzer ausgewählt
janein
ja
Mehrfachauswahl (n-aus-m)
nein ja
grafische Darstellung der Auswahloptionen
nein
Mehrfach-auswahlliste(multi selection list box)
neinjaPlatzeinsparung nötig?
ja
nein neinja
Kontinuierlicher
Wertebereich ?
Einfachauswahl (1-aus-m)
Variable Auswahlmenge?
ja nein
Sortierung der Alternativen auf, ab?
Drehfelfd (spin box)
Klappliste (drop down list box, noneditable combo box)
Auswahlliste (list box, list)
Regler (slider)
Auswahl-menge (value set)
Einfachaus-wahlknöpfe (radio buttons)
Mehrfach- auswahl -knöpfe (check box)
Fraunhofer IAO, IAT Universität Stuttgart
Erweiterungselemente
Ermöglichen die anforderungsspezifische Erweiterung der Funktionalität der Basiselemente.
Roll-Balken (scroll bar)Verwendungszweck:
Wenn nicht genügend Platz zur Verfügung steht, um in einem Interaktionselement alle Informationen für einen Benutzer gleichzeitig sichtbar darzustellen.
Ausprägungen:- Horizontale Roll-Balken- Vertikale Roll-Balken
Trenn-Balken (split bar)Verwendungszweck:
Unterteilt den Informationsbereich eines Interaktionselements in zwei Teile beliebiger Größe (panels). Beide Teile sind logisch voneinander unabhängig. Vorzugsweise für Tabellen eingesetzt, um entfernt liegende Teile parallel betrachten zu können.
Eigenschaften:- Besitzt eine Tabelle mit einem horizontalen Roll-Balken einen Trenn-Balken, dann
wird der Roll-Balken unterteilt.
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Gestaltungsmittel zur visuellen Gestaltung von Interaktionselementen (1)
Gruppenumrandung (group box)Verwendungszweck:
Zusammenfassung von Interaktionselementen zu Gruppen, um die logische Zusammengehörigkeit auszudrücken. Meist nötig bei Einfachauswahl- und Mehrfachauswahlknöpfen.
Eigenschaften:Umrandung mehrere Interaktionselemente.
Gruppenüberschrift (group heading)Verwendungszweck:Oberbegriff für logisch zusammengehörige Interaktionselemente. Meist nötig bei Einfachauswahl- und Mehrfachauswahlknöpfen.
Eigenschaften:Meist in Verbindung mit Gruppenumrandung.
Führungstext (field prompt, static text field, label)Verwendungszweck:
Erklärung, welche Bedeutung ein Eingabefeld hat und was eingetragen werden soll.Eigenschaften:
Manche GUI-Systeme stellen mit Static ein eigenes Interaktionselement dafür zur Verfügung, das auch dynamisch manipuliert werden kann.
/Balzert 2000/
o Vorne
o Hinten
Hilfslinien
Gruppenüberschrift
Gruppenumrandung
Fraunhofer IAO, IAT Universität Stuttgart
Gestaltungsmittel zur visuellen Gestaltung von Interaktionselementen (2)
Spezifische Ausprägung:Um dem Benutzer eine Anpassung an seine persönliche Terminologie zu ermöglichen, ist es in JANUS-Anwendungen möglich, dass der Benutzer die Führungstexte selbst dynamisch ändern kann, beispielsweise um Straße in Postfach zu ändern.
Spaltenüberschriften (column headings)Verwendungszweck:
Vor allem bei tabellarischen Darstellungen unentbehrlich.Eigenschaften:- Bei vertikalen Roll-Balken Anordnung außerhalb des Rollbereichs.- Bei horizontalen Roll-Balken müssen sich die Spaltenüberschriften
entsprechend mitbewegen. /Balzert 2000/
Bezeichner Ergonomischer Name
Adresse Strasse
Adresse PLZ
Adresse Ort
Adresse Postfach
Adresse PLZ/Ort
Adresse Ort
AdresseStrasse
Bezeichner ändern
PLZ Ort
Land Zusatz
Name Größe Typ Geändert am
Base Semiapp.exe
1,239 KB Dateiordner 20.12.1995
Fraunhofer IAO, IAT Universität Stuttgart
Orientierung
Kriterien für gute Orientierung
Ort-Weg-Modus-Modell : Wo bin ich? Was kann ich hier tun?Wie kam ich hierher?Wo
kann ich hin? Und wie komme ich dahin?
Ein Benutzer kann sich dann gut orientieren, wenn er jederzeit folgende Fragen beantworten kann:
• Was gibt es hier alles?• Wie ist die Struktur?• Wo befinde ich mich im Moment innerhalb der Anwendung?• Habe ich alles gesehen?Habe ich auch nichts wichtiges übersehen?• Wo sind die für mich relevanten Informationen?• Bin ich schnell erfolgreich?• Macht das Spaß oder ist es mühsam?
/Thissen 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Navigation
Kriterien für gute Navigation
Ein Benutzer kann gut navigieren, wenn er jederzeit folgende Fragen beantworten kann:
• Wohin kann ich gehen? Welche Wege gibt es hier?• Wie komme ich dorthin?• Wo bin ich schon überall gewesen?• Wie komme ich wieder zurück? Wie kann ich meinen Weg
zurückverfolgen?• Wie komme ich hier schnell wieder heraus?
/Balzert 2000/
Fraunhofer IAO, IAT Universität Stuttgart
Navigation
Eine gute Navigation besitzt folgende Charakteristika: • Die Navigation passt zu den Zielen, Erwartungen und dem Verhalten der Benutzer.• Die Navigationselemente sind nicht dominant. Navigation funktioniert intuitiv, ohne
dass sich der Benutzer mit ihr auseinandersetzen oder sie gar erlernen muss.• Die Navigationselemente sind sofort verständlich begreifbar. Ihre Bedienung muss
nicht gelernt werden. Sie sind dem Thema angepasst.• Die Navigation ist konsistent, d.h. sie zieht sich einheitlich durch die Anwendung.• Die Navigation bietet dem Benutzer alternative Wege, um zu einem Ziel zu
kommen.
Navigationselemente: Druckknöpfe bzw. Schaltflächen (buttons)Maussensitive Texte (hotwords)Maussensitive Bilder (hotspots)Konzeptionell ist zu entscheiden, ob Orientierung, Navigations- und Inhaltselemente streng voneinander getrennt dargestellt werden sollen, oder ob sie miteinander verwoben sein können. Durch eine klare Trennung können die Navigationselemente schnell erkannt werden. Der Zusammenhang mit den Inhalten ist aber nicht immer eindeutig und die Bereitschaft zum Navigieren wird reduziert.In klassischen Benutzeroberflächen werden die Navigationselemente in der Regel nicht von anderen Interaktionselementen unterschieden.
/Spool et all. 99/