Fraunhofer IAO, IAT Universität Stuttgart Gestaltungsprinzipien – heute und morgen WIMP (windows, icons, menues, pointer) WIMP-Prinzipien Metapher (metaphors)

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/


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



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



Generische Funktionen der direkten Manipulation

/Balzert 2000/


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/


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/


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


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)


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/


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


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


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


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


Größenkonstanz

Formkonstanz

Identitätskrise

Vordergrund/Hintergrund

Kontext und Wahrnehmung

Gestaltwahrnehmung

Visuelle Wahrnehmung


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


Gesetz der ÄhnlichkeitWebdesign


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


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


Objekte, die räumlich oder zeitlich beisammen liegen, erscheinen zusammengehörigund werden als eine Einheit oder Figur wahrgenommen.

Gesetz der Nähe


Gesetz der Nähe (Beispiele)


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


Gesetz der guten Fortsetzung

Die senkrechte Fluchtlinieerzeugt einen optischen Zusammenhalt

ermöglicht schnelles Lesen

besser:


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


Das Gesetz der guten Gestalt stellt eine Verallgemeinerung der Wahrnehmungsgesetze nach dem Prinzip der Prägnanz dar.

Prägnanz


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.


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)


Fenstergestaltung mit Hilfe eines Rasters


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.


Beispiele von Eingabefeldern

Feldbezeichnung:

Feldbezeichnung:

Feldbezeichnung

Feldbezeichnung

. . . .


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

Pushbuttons werden nach Möglichkeit einzeilig am unteren Fensterrand oder einspaltig am rechten Fensterrand angeordnet.


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


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


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.


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


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


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


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/



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/



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/


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/


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/


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


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



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/



drop-down-Menüs

pop-up-Menüs

Aktionsmenü

Eigenschaftsmenü

/Balzert/2000/



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/



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/


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


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)


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


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/



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



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/



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


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/


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)


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/


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


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


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/


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/


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/

Documents

Fraunhofer IAO, IAT Universität Stuttgart Gestaltungsprinzipien – heute und morgen WIMP (windows, icons, menues, pointer) WIMP-Prinzipien Metapher (metaphors)