Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Fraunhofer IAO, IAT Universität Stuttgart Gestaltungsprinzipien – heute und morgen WIMP (windows, icons, menues, pointer) WIMP-Prinzipien Metapher (metaphors)"—  Präsentation transkript:

1 Fraunhofer IAO, IAT Universität Stuttgart Gestaltungsprinzipien – heute und morgen WIMP (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/

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

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

4 Fraunhofer IAO, IAT Universität Stuttgart Generische Funktionen der direkten Manipulation /Balzert 2000/

5 Fraunhofer IAO, IAT Universität Stuttgart Software-Ergonomie Direkte 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 zutreffen. /Balzert 2000/

6 Fraunhofer IAO, IAT Universität Stuttgart Software-Ergonomie Direkte 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/

7 Fraunhofer IAO, IAT Universität Stuttgart 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

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

9 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 ) /Balzert 2000/

10 Fraunhofer IAO, IAT Universität Stuttgart 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 Aufgabenorientierte Gestaltung Verbesserung der Lernsituation Flexibilität in der Darstellung Benutzerpräferenzen ermöglichen Gewährleistung des Erkennens und der Lesbarkeit Konsistente Darstellungen

11 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, sondern auch der geübte Benutzer muss auf visuelle Hilfen zurückgreifen können Nicht nur der ungeübte, sondern auch der geübte Benutzer muss auf visuelle Hilfen zurückgreifen können Information

12 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

13 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 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 Figur-Grund-Unterscheidung

14 Fraunhofer IAO, IAT Universität Stuttgart Größenkonstanz Formkonstanz Identitätskrise Vordergrund/Hintergrund Kontext und Wahrnehmung Gestaltwahrnehmung Visuelle Wahrnehmung

15 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

16 Fraunhofer IAO, IAT Universität Stuttgart Gesetz der Ähnlichkeit Webdesign

17 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

18 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

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

20 Fraunhofer IAO, IAT Universität Stuttgart Gesetz der Nähe (Beispiele)

21 Fraunhofer IAO, IAT Universität Stuttgart zwei einander schneidende Linien 59 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

22 Fraunhofer IAO, IAT Universität Stuttgart Gesetz der guten Fortsetzung Die senkrechte Fluchtlinie erzeugt einen optischen Zusammenhalt ermöglicht schnelles Lesen besser:

23 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

24 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

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

26 Fraunhofer IAO, IAT Universität Stuttgart Gitter/ Raster Der Arbeitsbereich des Fensters ist durch ein nicht sichtbares Gitterraster aufgeteilt. 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 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 Fraunhofer IAO, IAT Universität Stuttgart Fenstergestaltung mit Hilfe eines Rasters

28 Fraunhofer IAO, IAT Universität Stuttgart 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 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 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. Besteht ein Fenster hauptsächlich aus Feldbezeichnern und Ein-/Ausgabefeldern, dann sollte das Layout des Fensters möglichst zweispaltig aufgebaut werden.

29 Fraunhofer IAO, IAT Universität Stuttgart Beispiele von Eingabefeldern Feldbezeichnung: Feldbezeichnung..

30 Fraunhofer IAO, IAT Universität Stuttgart Pushbuttons - 1 Form 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. 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 Fraunhofer IAO, IAT Universität Stuttgart Häufig wiederkehrende Aktionen müssen durch die gleichen Pushbuttons, die sogenannten Standard-Pushbuttons, ausgelöst werden. 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 OKund Abbrecheneingefü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 OKund Abbrecheneingefü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

32 Fraunhofer IAO, IAT Universität Stuttgart 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. 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 Teilrisiko 50 - Risiko Tarifierung xyz - Teilrisiko 50 - Risiko Daten - Tarifierung xyz - Teilrisiko 50 - Risiko Beispiele für Fenstertitel: Risiko Teilrisiko 50 - Risiko Tarifierung xyz - Teilrisiko 50 - Risiko Daten - Tarifierung xyz - Teilrisiko 50 - Risiko Titel

33 Fraunhofer IAO, IAT Universität Stuttgart 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 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 c d e s r f p j z g i

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

36 Fraunhofer IAO, IAT Universität Stuttgart Gestaltung von Icons / 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! Übersicht empirischer Ergebnisse zur Gestaltung von Piktogrammen

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

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

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

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

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

42 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 Semantisch eÄhnlichkeit Alphabetische Folge Natürliche Folge

43 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

44 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. drop-down-Menüspop-up-Menüs /Balzert 2000/

45 Fraunhofer IAO, IAT Universität Stuttgart Dialoggestaltung (3) drop-down-Menüspop-up-Menüs Aktionsmenü Eigenschaftsmenü /Balzert/2000/

46 Fraunhofer IAO, IAT Universität Stuttgart Dialoggestaltung (4) Eigenschaften drop-down-Menüspop-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/

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

48 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, DLLs), die spezifische Interaktionselemente enthalten. /Jens & Partner 92 S. 162f./

49 Fraunhofer IAO, IAT Universität Stuttgart Interaktionselemente im Überblick (Java-Begriffe in blau) Knopf Fel d Liste Grafik Register Basiselement e /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)

50 Fraunhofer IAO, IAT Universität Stuttgart Elemente zur Erweiterung der Funktionalität der Basiselemente /Balzert 2000/ Erweiterungs- elemente Gestaltungs- elemente Eigenentwickelt e 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

51 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. 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. /ISO ; /, EN ISO ;1998, /Sun 99/, /Wandmacher 93/

52 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 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. /ISO ; /, EN ISO ;1998, /Sun 99/, /Wandmacher 93/ Hochformat Querformat Scheck Überweisung Lastschrift Bar Ausrichtung Zahlung

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

54 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 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/. A /Balzert 2000/ X

55 Fraunhofer IAO, IAT Universität Stuttgart Auswahl von Interaktionselementen für einzutippende Informationen nein Informationen (Daten/Texte) werden durch den Benutzer eingetippt ja Mehrzeilige Eingabe? Eingabe meistens vorhersehbar? nein ja nein Platzeinsparun g 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) janein /Jens & Partner 92, S. 195/

56 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 ja nein ja Mehrfachauswah l (n-aus-m) neinja grafische Darstellung der Auswahloptionen nein Mehrfach- auswahllist e(multi selection list box) nein ja Platzeinsparung nötig? janein ja 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) Auswahl liste (list box, list) Regler (slider) Auswahl- menge (value set) Einfachaus- wahlknöpfe (radio buttons) Mehrfach- auswahl - knöpfe (check box)

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

58 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

59 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 Adresse Strasse Bezeichner ändern PLZ Ort LandZusatz Name Größe Typ Geändert am Base Semiapp.ex e 1,239 KB Dateiordner

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

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

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


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

Ähnliche Präsentationen


Google-Anzeigen