/The Anti-Mac Interface, Gentner, Nielson ’96/ WIMP-Prinzipien

Präsentation zum Thema: "/The Anti-Mac Interface, Gentner, Nielson ’96/ WIMP-Prinzipien"—  Präsentation transkript:

1 Gestaltungsprinzipien – heute und morgen WIMP (windows, icons, menues, pointer)
/The Anti-Mac Interface, Gentner, Nielson ’96/ 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) 497

2 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 S.498 /The Anti-Mac Interface, Gentner, Nielson ’96/

3 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 S.498 /The Anti-Mac Interface, Gentner, Nielson ’96/

4 Generische Funktionen der direkten Manipulation
501 /Balzert 2000/

5 Software-Ergonomie Direkte Manipulation: Pro und Contra
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 zutreffen. 502 /Balzert 2000/

6 Software-Ergonomie Direkte Manipulation: Pro und 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. 502 /Balzert 2000/

7 Zusammenhänge Unterschiede zwischen klassischen Oberflächen und Web-Oberflächen
Kriterium GUI-System Gestaltungs-Regelwerk Gestaltungsspielraum Dialogarten Dialogmodi Dialogtechniken Fenstertypen Strukturierungsarten Orientierungsmöglichkeiten Navigationsformen Medien Konsistenz innerhalb der Anwendung Benutzer Effizienz Klassisch z.B. Windows-GUI z.B. Windows style guide durch GUI-System eingeschränkt Primär- und Sekundärdialoge vorwiegend nicht-modal direkte Manipulation/Menüs alle ein- oder zweistufiger Baum i. Allg. implizit Menüs/Druckknöpfe Text,Grafik groß oft Experte hoch Web Web-Browser, z.B Internet Explorer noch nicht vorhanden groß, durch Benutzer beschränkbar vorwiegend Primärdialoge vorwiegend modal Verweise (links)/Menüs i. Allg. Arbeitsbereich des Web-Browsers Mehrstufiger Baum oder Netz oft explizit, z.B. als Baum Maussensitive Texte, Bilder,Symbole, Druckknöpfe, z.T. Menüs, Suchfeld Text,Grafik, Bilder, Animation oft gering oft Gelegenheitsbenutzer oder Erstbenutzer eher gering Wird noch verbessert!!!!

8 Typischer Fensteraufbau bei Windows
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) 520 /Balzert 2000/

9 Aufbau eines Web-Browsers
Knopf für... ...Piktogrammgröße Anwendungs-menüknopf Titelbalken/Titelleiste ...Vollbildgröße ...Browser schließen Menübalken Statusanzeiger Dies ist die Arbeitsfläche des Web-Browsers Adressleiste bzw. Adressfeld Symbolleiste mit Schaltflächen (Druckknöpfen) , teilweise mit Menüs (z.B. bei ) 523 Statusleiste /Balzert 2000/

10 Wichtige Aufgaben der Informationsgestaltung auf dem Bildschirm
Optimierung der Belastungs-/Beanspruchungssituation Berücksichtigung von Merkmalen und Bedürfnissen des Benutzers Nutzung kognitiver Fähigkeiten und Fertigkeiten Erkennen technischer und menschlicher Grenzen Einbeziehung des Arbeitsumfeldes Benutzerpräferenzen ermöglichen Aufgabenorientierte Gestaltung Gewährleistung des Erkennens und der Lesbarkeit Verbesserung der Lernsituation Konsistente Darstellungen Flexibilität in der Darstellung

11 Allgemeine Gesichtspunkte der visuellen Informationsgestaltung
Bei der visuellen Wahrnehmung wird das angebotene Material sofort strukturiert Nicht nur der ungeübte, sondern auch der geübte Benutzer muss auf visuelle Hilfen zurückgreifen können Information 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

12 Prinzipien der Gestaltpsychologie /Gruppieren
Prinzipien der Figur-Grund-Unterscheidung Größenkonstanz, Formkonstanz, Identitätskrise, Vordergrund/Hintergrund, Kontext und Wahrnehmung, Gestaltwahrnehmung Prinzipien der Binnengliederung (Gruppierung einzelner Objekte zu einem Makroobjekt) Prinzip der Ähnlichkeit Prinzip der Geschlossenheit Prägnanz Prinzip der Nähe Prinzip der guten Fortsetzung Prinzip des gemeinsamen Schicksals

13 Figur-Grund-Unterscheidung
Eine Gestaltung nach den Prinzipien der Figur-Grund-Unterscheidung erhöht die Wahrscheinlichkeit, dass ein Objekt oder Makroobjekt als Figur wahrgenommen 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

14 Visuelle Wahrnehmung Größenkonstanz Formkonstanz
Vordergrund/Hintergrund Identitätskrise Kontext und Wahrnehmung Gestaltwahrnehmung

15 Gesetz der Ähnlichkeit
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.

16 Gesetz der Ähnlichkeit
Webdesign

17 Gesetz der Geschlossenheit
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.

18 Gesetz der Geschlossenheit
besser 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).

19 Gesetz der Nähe Objekte, die räumlich oder zeitlich beisammen liegen, erscheinen zusammengehörig und werden als eine Einheit oder Figur wahrgenommen.

20 Gesetz der Nähe (Beispiele)

21 Gesetz der guten Fortsetzung
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. zwei einander schneidende Linien 59 schwarze Punkte

22 Gesetz der guten Fortsetzung
Die senkrechte Fluchtlinie erzeugt einen optischen Zusammenhalt ermöglicht schnelles Lesen besser:

23 Gesetz des gemeinsamen Schicksals
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)

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

25 Vorgehensweise bei der Gestaltung von Bildschirmformularen
Groblayout Zuordnung Infoklassen- Bildschirmbereiche Strukturierung der Arbeitsinformation visuelle Gestaltung Bildung von Informationsblöcken Informationskodierung Modalität: textuell, symbolisch, grafisch Begriffswahl, Formulierung, Überschriften evtl. sinnvolle Abkürzungen Feinlayout Bündigkeiten, Blockabstände, Trennlinien Gestaltung von Listen, Adressblöcken etc. Hervorhebungen und Kennzeichnungen

26 Gitter/ Raster Empfehlung: Der Arbeitsbereich des Fensters ist
durch ein nicht sichtbares Gitterraster aufgeteilt. Empfehlung: Die Gittergröße sollte etwa % von der Größe des Fonts betragen, z.B: Font 10 Punkt, Gitter 8 Punkt (Achtung: Punkt Pixel)

27 Fenstergestaltung mit Hilfe eines Rasters

28 Gruppierung von Daten Felder und andere Elemente, die sich logisch zu einer Einheit gruppieren lassen, 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 Besteht ein Fenster hauptsächlich aus Feldbezeichnern und Ein-/Ausgabefeldern, dann sollte das Layout des Fensters möglichst zweispaltig aufgebaut werden.

29 Beispiele von Eingabefeldern
Feldbezeichnung: Feldbezeichnung: Feldbezeichnung Feldbezeichnung

30 Pushbuttons - 1 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. 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 werden nach Möglichkeit einzeilig am unteren Fensterrand oder einspaltig am rechten Fensterrand angeord- net.

31 Pushbuttons - 2 Die Anzahl der Pushbuttons innerhalb einer Gruppe: höchstens 7 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. Häufig wiederkehrende Aktionen müssen durch die gleichen Pushbuttons, die sogenannten Standard-Pushbuttons, ausgelöst werden. OK Bestätigen eines Dialogschritts mit Schließen des Fensters Abbrechen Abbrechen eines Dialogschritts mit Schließen des Fensters Hilfe Aufrufen von kontextbezogenen Hilfeinformationen

32 Fenstertitel 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. Titel Beispiele für Fenstertitel: Risiko 01234 Teilrisiko 50 - Risiko 01234 Tarifierung xyz - Teilrisiko 50 - Risiko 01234 Daten - Tarifierung xyz - Teilrisiko 50 - Risiko 01234

33 Meldung in grafischen Benutzungsschnittstellen
Es sollten Lösungsvorschläge angegeben werden. Es sollten Korrekturen in einem Eingabefeld möglich sein. Ein erneuter Versuch sollte möglich sein. Abbrechen und Hilfe sollten zur Verfügung stehen. Symbole sollten angemessen verwendet werden. Eine voreingestellte Aktion sollte angeboten werden. Buttons sollten so eindeutig wie möglich bezeichnet werden. Ja/Nein-Entscheidungen sollten vermieden werden.

34 Informationskodierung - Hervorhebung
Verschiedene Helligkeitsstufen / Graustufen / Fettdarstellung Inversdarstellung z j r c a Blinken i e s g b Hervorhebung mit Hilfe der Schreibmarke (Cursor) d p f 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.: ====, ----, *******, , , , , , , , ,

35 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ün Vordergrundfarben: gelb, rot Pastellartige Farben für Dauereinsatz

36 Gestaltung von Icons / Piktogrammen
Übersicht empirischer Ergebnisse zur Gestaltung von Piktogrammen Klare und stabile Grundform; Scharfer Kontrast des Piktogramms gegen den Hintergrund des Bildschirms; Farben sollten mit Überlegung eingesetzt werden für die Hervorhebung und Differenzierung von Ikonen; Piktogramme sollten innerhalb eines Systems konsistent verwendet werden; 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; Möglichst keine kulturspezifischen Piktogramme verwenden!

37 Wesentliche Unterschiede zwischen Menüs und Kommandos (1)
Gedächtnis-Anforderung Strukturierung des Dialogablaufs... Wiedererkennen möglicher Eingaben ...mehr durch die Anwendung Menüauswahl Kommando-sprache Erinnern möglicher Eingaben ...mehr durch den Benutzer 534 /Balzert 2000/

38 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 534 /Balzert 2000/

39 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. 534, 535,536 /Balzert 2000/

40 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. 527 /Balzert 2000/

41 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). 527 /Balzert 2000/

42 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: Alphabetische Folge Funktionale Gruppierung Häufigkeit/ Wichtigkeit SemantischeÄhnlichkeit Natürliche Folge 527 /Balzert 2000/

43 Dialoggestaltung (1) Menübalken mit drop-down-Menüs pop-up-Menüs
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ü pop-up = plötzlich auftauchen drop-down= herunterfallen mnemonisches Kürzel Funktionsweise 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. 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. 526 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/

44 Dialoggestaltung (2) drop-down-Menüs pop-up-Menüs
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. 526 /Balzert 2000/

45 Dialoggestaltung (3) drop-down-Menüs pop-up-Menüs Aktionsmenü
Eigenschaftsmenü drop-down-Menüs pop-up-Menüs /Balzert/2000/

46 Dialoggestaltung (4) drop-down-Menüs pop-up-Menüs Eigenschaften
- 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 525,526 /Balzert 2000/

47 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 528,529 /Balzert/

48 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. 592 /Jens & Partner 92 S. 162f./

49 Interaktionselemente im Überblick (Java-Begriffe in blau)
Datenfeld (entry field, edit field, text field) Feld 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) Knopf Mehrfachauswahlknopf, Kontrollkästchen (check button, check boxes) Basiselemente Auswahlliste, Listenfeld (list box, list) Liste Tabelle (table) Baum, Strukturansicht (tree, tree view) 593 Piktogramm, Ikone (icon) Grafik Regler, Schieberegler (slider) Register, Notizbuch (tab control, property sheet, tabbed pane) Register /Balzert 2000/

50 Elemente zur Erweiterung der Funktionalität der Basiselemente
Erweiterungs-elemente Rollbalken (scroll bar) Trenn-Balken (split bar) Gruppenumrandung (group box) Gestaltungs-elemente Gruppenüberschrift (group heading) Führungstext (field prompt, static text field) Spaltenüberschriften (column headings) z.B. m-aus-n-Auswahl Eigenentwickelte Elemente 593 z.B. adaptives Feld Gekaufte Bibliotheken z.B. DLLs /Balzert 2000/

51 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. Aus diesem Grund treten treten diese Knöpfe nur in Gruppen auf. Eine 1-aus-m-Auswahl wird oft benötigt, um zwischen alternative Werten eines Parameters zu wählen und einen Wert einzustellen. Aufbau: Ein Einfachauswahlkopf besteht aus zwei Teilen: Alternative 1 Druckknopf, mit dem die zwei Zustände Ein/Aus gut unterscheidbar Alternative 2 darstellbar sind (toggle button) Alternative 3 - Beschriftung oder Symbol, das die Auswahl beschreibt, die durch Betätigen des dazugehörigen Knopfes getroffen wird. 598 /ISO ; / , EN ISO ;1998, /Sun 99/, /Wandmacher 93/

52 E/A-Gestaltung (2) Einfachauswahlknopf (1-aus-m)
Eigenschaften: Durch das Betätigen eines Knopfes aus der Knopfgruppe wird eine bestehende andere 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. Ausrichtung Hochformat Querformat Zahlung Scheck Überweisung Lastschrift Bar 598 /ISO ; / , EN ISO ;1998, /Sun 99/, /Wandmacher 93/

53 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. 598 /Balzert 2000/

54 E/A-Gestaltung (4) Einfachauswahlknopf (1-aus-m)
Spezifische Ausprägungen: Auswahlmenge (value set) Gruppe von rechteckigen aneinanderstoßenden Knöpfen, die Text oder Grafik enthalten. 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/. X A 598 /Balzert 2000/

55 Auswahl von Interaktionselementen für einzutippende Informationen
Informationen (Daten/Texte) werden durch den Benutzer eingetippt ja Mehrzeilige Eingabe? Eingabe meistens vorhersehbar? 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) nein 609 /Jens & Partner 92, S. 195/

56 Auswahl von Interaktionselementen für auszuwählenden Informationen
Informationen werden durch den Benutzer ausgewählt ja nein Mehrfachauswahl (n-aus-m) grafische Darstellung der Auswahloptionen Mehrfach-auswahlliste(multi selection list box) Platzeinsparung nötig? Kontinuierlicher Wertebereich ? Einfachauswahl (1-aus-m) Variable Auswahlmenge? 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) 609 /Jens & Partner 92, S. 196/

57 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) 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. 608 noch ohne Abbildung! /Balzert 2000/

58 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) Oberbegriff für logisch zusammengehörige Interaktionselemente. Meist nötig bei Einfachauswahl- und Mehrfachauswahlknöpfen. Meist in Verbindung mit Gruppenumrandung. Führungstext (field prompt, static text field, label) Erklärung, welche Bedeutung ein Eingabefeld hat und was eingetragen werden soll. Manche GUI-Systeme stellen mit Static ein eigenes Interaktionselement dafür zur Verfügung, das auch dynamisch manipuliert werden kann. Gruppenüberschrift Hilfslinien Vorne Hinten Gruppenumrandung 610 (noch ohne Abbildung!) /Balzert 2000/

59 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. Adresse Strasse Bezeichner Ergonomischer Name Bezeichner ändern Adresse Strasse Adresse Postfach PLZ Ort Adresse PLZ Adresse PLZ/Ort Land Zusatz Adresse Ort Adresse Ort Name Größe Typ Geändert am Base Semiapp.exe 1,239 KB Dateiordner /Balzert 2000/

60 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? 540 /Thissen 2000/

61 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? 541 /Balzert 2000/

62 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. 541, 542 /Spool et all. 99/