Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

4. Windows, Icons, Menus, Pointers, Controls

Ähnliche Präsentationen


Präsentation zum Thema: "4. Windows, Icons, Menus, Pointers, Controls"—  Präsentation transkript:

1 4. Windows, Icons, Menus, Pointers, Controls

2 Einführung Richtlinien zur Gestaltung grafischer Nutzerinterfaces
4 Einführung Richtlinien zur Gestaltung grafischer Nutzerinterfaces Praktische Beispiele zu deren Gestaltung Gilt alles nur für die Bedienung mittels Pointer (z.B. Maus) Auf kleineren Darstellungsflächen nur begrenzt anwendbar (z.B. mobile Geräte) Neuere Ansätze für Gestenbasierte Interfaces in späterer Einheit

3 4 Windows, Icons, Menus, Pointers and Controls
4.1 Beschriftung 4.2 Fenster 4.3 Menü 4.4 Gestaltung von Ikonen 4.5 Externe Control-Devices

4 Beschriftung - Schriftarten
4.1 Beschriftung - Schriftarten Schriftbild Nicht mehr als 2 Schriftarten mit vergleichbarer Buchstabengröße, Linienstärke etc. Zu jeder Schriftart einen Zweck zuordnen (z.B. Beschriftung von Elementen und Meldungen). Eine Art soll vorherrschen! Nicht mehr als zwei Stilarten (Fett, Standard, kursiv); zwei unterschiedliche „Gewichtungen“ Maximal drei Schriftgrößen Niemals den Schrifttyp wechseln, um Platz zu sparen! Times Roman Times Italic Times Bold Times Bold Italic Times Shadow Times Outline

5 Konsistenzregel Consistency
4.1 Konsistenzregel Consistency Ein konsistentes Regelwerk und eine konsistente Hierarchie aufbauen, nach der Schriftart, -stil, -größe und -gewicht verwendet werden Immer mit den vorhandenen Standardschriftarten arbeiten. Solche Konsistenzregeln sind auch für andere Bereiche wichtig, in denen vielfältige Auswahlmöglichkeit gegeben ist: Gestaltung von Ikonen Abkürzungen von Kommandonamen Shortcuts und Accelerators ... Times Roman Times Italic Times Bold Times Bold Italic Times Shadow Times Outline z.B. Seitenüberschrift, Kapitelüberschrift, Bulletpoint Bei Ikonen z.B. bezogen auf die Größe oder den Stil (glossy, etc.) z.B. gilt F1 immer für Hilfe Accelerators: Ziffern bei PowerPoint

6 GROSSBUCHSTABEN  nur für Titel und Überschriften, ggf. für Untertitel
4.1 GROSSBUCHSTABEN  nur für Titel und Überschriften, ggf. für Untertitel Groß/ Klein (Mixed-Case-Font) ist leichter lesbar - Großbuchstaben ziehen mehr Aufmerksamkeit.

7 „Caption“ (Titel, Legenden, Überschriften)
4.1 „Caption“ (Titel, Legenden, Überschriften) First Amount: Last Amount: This Amount: That Amount: Who Cares Amount: AMOUNT >> First: Last: This: That: Who Cares:

8 Caption II Alle „Controls“ müssen mit einem Caption versehen werden!
4.1 Caption II Alle „Controls“ müssen mit einem Caption versehen werden! Verwendung einer für den Nutzer verstehbaren Bezeichnung, keine Abkürzung Immer mit Doppelpunkt abschließen Einfach unterscheidbare Bezeichnung, Vermeidung von nur geringfügigen Unterschieden („Zellen“, „Zeilen“). „Controls“ := alle Möglichkeiten, Eingaben zu machen Eclipse: Window -> Preferences (Settings) File -> Properties (Settings) Maximaler Unterschied: Preferences und Properties nebeneinander Minimaler Unterschied zwischen Synonymen verschiedener Bereiche und maximaler Unterschied zwischen Items im gleichen Bereich

9 4.1 Anordnung von Captions - in Abhängigkeit von der Zahl der Datenfelder - Names: Deirda Karin Kim Lauren Sex: Relation: Female Daughter Alignmentpoints Gesetz der Nähe

10 Vier Formen der Anordnung
4.1 Vier Formen der Anordnung A. Division: Department: Title: C. Division : Department: Title : D. Division: Department: Title: B. Division: Department: Title: A: Alignmentpoints Weitere Möglichkeit: Felder gleich groß Anordnungen B und D sind die besten

11 4.1 Überschriften Personnel Manager: Employees: Payroll:

12 4 Windows, Icons, Menus, Pointers and Controls
4.1 Beschriftung 4.2 Fenster 4.3 Menü 4.4 Gestaltung von Ikonen 4.5 Externe Control-Devices

13 Fenster - relevante Komponenten
4.2 Fenster - relevante Komponenten System Menu Button Title Bar Menu Bar Window Sizing Buttons Work Area Split Bar Beschreiben, welche Komponenten es gibt… Dies kann als Standardanordnung gesehen werden… Status Bar Scroll Bars

14 Arten von Fenstern Primary Window Secondary Window Property Windows
4.2 Arten von Fenstern Primary Window Secondary Window Property Windows Dialog Boxes Message Boxes Palette Windows Pop-Up Windows Der „Speichern unter…“-Dialog ist ein Secondary Window… Bei Photoshop oder GIMP sind die Paletten ein Secondary Window…

15 Tiled (gekachelt) Überlappend Cascading
4.2 Arten der Anordnung von Fenstern Tiled (gekachelt) Überlappend Cascading + alle sichtbar - begrenzte Anzahl, befremdliche Größen + feste Größe und Position möglich zu komplex + sehr übersichtlich - Platz ist begrenzt Cascading ist der Spezialfall von überlappend… Wie wirken sich die Vor- und Nachteile bei sehr kleinen oder sehr großen Bildschirmgrößen aus?

16 Anforderung von steuernden Angaben, die
4.2 Dialog Boxes Zu benutzen für: Kurze Mitteilungen Anforderung von steuernden Angaben, die schnell gemacht sind, sich nicht häufig ändern Speichern unter…

17 Modal Dialogue Boxes vs. modeless Dialogue Boxes
4.2 Modal Dialogue Boxes vs. modeless Dialogue Boxes modal: Dialog Box kann nicht verlassen werden Nachrichten werden ausgegeben Input ist gefragt modeless: parallele Bearbeitung möglich  Achtung: Unnötige Restriktion vermeiden! Modal: Speichern unter…; wichtigen Nachrichten, die der Nutzer unter keinen Umständen verpassen darf Modeless: Farbpalette

18 Darstellung von Dialog Boxen
4.2 Darstellung von Dialog Boxen Cascading, Expanding - kaskadierende oder erweitere Eingabemöglichkeiten Guidelines Ein Kommando-Button mit entsprechendem Label („...“) muss zum weiteren Dialogfenster führen Kaskadierende Anordnung oder nach rechts oder unten Wichtige Information darf nicht verdeckt werden Dialogboxen müssen verschiebbar sein Cascading: zusätzlicher Dialog (Einstellungen…) Expanding: aktueller Dialog wird erweitert (Details…)

19 Vor- und Nachteile bzgl. der Fenstergröße
4.2 Vor- und Nachteile bzgl. der Fenstergröße Große Fenster - Vorteile Mehr Information darstellbar Lernerleichterung: Zusammenhänge und Querbezüge erkennbar Weniger Steuerung bei der Navigation erforderlich Datenüberprüfung und Editieren fallen leichter Nachteile: Längere Pointer-Strecken Fenster wirken überfüllt Mehr Fläche ist abzusuchen Wahrscheinlichkeit, dass Zusatzfenster etwas überdecken müssen, steigt

20 Öffnen und Platzierung eines Fensters
4.2 Öffnen und Platzierung eines Fensters Öffnen: im gleichen Zustand wie vor dem Schließen! Platzierung: Das Fenster muss ganz sichtbar sein Fenster muss dort platziert sein, wo es zuletzt war Neu geöffnete Fenster: Dorthin, wo die Aufmerksamkeit zu erwarten ist (i.d.R. dort, wo der Cursor ist) Leicht erreichbar Andere Fenster dürfen nicht verdeckt werden. Speichern unter… (es muss Verzeichnis geöffnet sein, in das als letztes gespeichert wurde) Neu geöffnete Fenster: üblicherweise an Standardposition (Mitte vom Bildschirm)

21 Fenster verschieben, Fenster schließen
4.2 Fenster verschieben, Fenster schließen Die Position aller Fenster müssen verschiebbar sein Die Form des Pointers muss sich bei Verschiebemöglichkeit ändern Das Fenster muss sich so wie der Pointer bewegen  Direkte Manipulation Wenn sich das ganze Fenster verschieben lässt, dann muss sich dessen Inhalt mit verschieben Schließen des Fensters: Mit dem Primary Window müssen auch die Secondary Windows geschlossen werden. Primary und Secondary Window: Photoshop und GIMP: Wenn man das Programm beendet schließen sich auch die Paletten.

22 4 Windows, Icons, Menus, Pointers and Controls
4.1 Beschriftung 4.2 Fenster 4.3 Menü 4.4 Gestaltung von Ikonen 4.5 Externe Control-Devices

23 File Edit Options Window Helps
4.3 Menüarten Hauptleiste Pull-Down (Drop Down) Cascading Menus (Drop Down) Pop-Up Tear-Off Iconic Pie Menus Spaltenanordnung (zwei-dimensional) Alphaslider File Edit Options Window Helps Pop-Up: Rechtsklick (kommt bei einer Aktion) Cascading: zur Seite, Ebene (Ansicht, Symbolleisten, …)

24 Organisation von Menüs
4.3 Organisation von Menüs Es muss immer ein Hauptmenü vorhanden und erreichbar sein Alle relevanten Items sind anzuzeigen, aber nur sie – was passiert wenn Items nicht aktivierbar sind oder nur selten relevant sind? Die Menüstruktur muss die Aufgabenstruktur widerspiegeln  Aufgabenanalyse ist erforderlich: die effizienteste Abfolge und die häufigsten Bearbeitungsziele müssen ausschlaggebend sein! Anpassbarkeit: die Menüstruktur muss einfach veränderbar sein! Anzahl der Items begrenzen 4 – 8 wenn keine logische Gruppierung sinnvoll ist Mehr nur mit logischer Gruppierung. Sinn und Unsinn von Adaptierbarkeit am Beispiel von Menüs?

25 Gruppierung von Menü-Items - 1
4.3 Gruppierung von Menü-Items - 1 Herausforderung (hierarchische) Gruppierung der Items: logisch und semantisch sinnfällig, klar unterscheidbar Menü-Einteilung ist in der Regel baumartig strukturiert, kann auch als zyklisches oder azyklisches Netz aufgebaut sein.  sinnvoll bei sozialen Beziehungen, Transportwegen, Zitaten bei wissenschaftlichen Veröffentlichungen etc. (Shneiderman, 299) Einteilung: Minimiere die Ähnlichkeit der Items innerhalb einer Kategorie Maximiere die Ähnlichkeit der Items zwischen Kategorien siehe Folie 8

26 Gruppierung von Menü-Items - 2
4.3 Gruppierung von Menü-Items - 2 Wenn es keine sinnfällige Unterteilung in Kategorien gibt und mehr als acht Optionen wählbar sein müssen, dann zufällige Gruppen wählen  gleicher Größe, 4-5 Items in der Regel, nie mehr als 7 Gruppierung durch Abstand oder Linien Direkter Zugang zu wichtigen oder häufig genutzten Optionen

27 4.3 Benennungen der Items Ein Item darf nie denselben Namen wie der Menütitel haben Jedes Item innerhalb der Menüstruktur darf nur einmal vorkommen Identische Items in unterschiedlichen Menüs oder Sub-Menüs sollen identisch benannt werden! Items sollen nicht nummeriert werden  Der Zugang via Tastenkombination wird dann jedoch erschwert

28 Such- und Vergleichsbedingungen bei der Auswahl von Items
4.3 Such- und Vergleichsbedingungen bei der Auswahl von Items Nutzervorstellung Menüitem Identität: Äquivalenz: Menüitem: Abbildung der Vorstellung eines Designers Äquivalenz: Synonym (Properties, Preferences) Inklusion: Nutzer sucht Kontoeinstellung; Item „Einstellungen“ Problem: Item: „Konten bearbeiten“; Nutzervorstellung: Geld einzahlen; Bietet Funktionen zur Bearbeitung des Namens / Adresse, etc. Identität: entspricht exakt den Nutzervorstellungen Äquivalenz: Nutzervorstellung unterschiedlich, ist aber das gleiche damit gemeint Inklusion: Nutezrvorstellung in Menüitem vorhanden (z.B. Benennung) Problem: Nutzervortstellung nur teilweise vom Menüitem abgedeckt Problem: Inklusion:

29 Sinnvolles Ordnen und Ordnungskriterien
4.3 Sinnvolles Ordnen und Ordnungskriterien Anordnung der Menüstruktur und Items so, dass sie eine logische Abfolge bietet rhythmisch ist und das Auge leitet die Cursor- und Augenbewegungsdistanzen klein sind Das Wichtigste und Häufigste steht links oben Flussrichtigung von links-oben nach rechts-unten Kriterien der Anordnung Konvention (numerisch, physikalisch, zeitlich) Reihenfolge der Nutzung Häufigkeit Funktion Wichtigkeit allgemein zu speziell Rhythmisch: gleiche Abstände Reihenfolge: Neu / Öffnen, Speichern, Schließen Funktion: Kopieren, Ausschneiden

30 Regeln zur Reihenfolgebildung
4.3 Regeln zur Reihenfolgebildung nach üblicher Reihenfolge ja gibt es eine übliche Reihenfolge? nach Häufigkeit der Benutzung ja nein kurze Liste? nein ja nach Kategorien gruppiert gibt es Ähnlichkeiten, Gleichheiten? nein nach alphabetischer Reihenfolge Lange Liste: Liste aller Städte Gestaltungsrichtlinien zum Auswählen (choosing) und Organisieren der Optionen auf einer Menüfläche. in Anlehnung an Helander, S.217

31 Anordnung der Menüitems nach Galitz
4.3 Anordnung der Menüitems nach Galitz Ordne mögliche Optionen in ihrer natürlichen Anordnung an, oder: Bei Listen mit wenigen Optionen (7 oder weniger): Reihenfolge des Auftretens Häufigkeit des Auftretens Wichtigkeit Alphabetische Anordnung bei: Langen Listen (8 oder mehr Optionen) Kurze Listen, die keine offensichtlichen Muster oder Häufigkeiten aufweisen. Potentiell zerstörerische Optionen sind von häufig verwendeten Optionen zu trennen

32 Baumstruktur – Breite (breadth) vs. Tiefe (depth) - 1
4.3 Baumstruktur – Breite (breadth) vs. Tiefe (depth) - 1 Bei baumartiger Anordnungen stellt sich die Frage, ob Breite oder Tiefe vorzuziehen ist! Die Empirie gibt - nach Shneiderman – der Breite des Menübaums den Vorzug vor Tiefe Grün = gut Von oben nach unten schlechter… Breite = Anzahl Optionen auf einer Ebene Bewertung anhand von Geschwindigkeit, Genauigkeit und Präferenz Shneiderman, 295 f

33 Menübaum - Beispielausschnitt

34 Baumstruktur – Breite vs. Tiefe - 2
4.3 Baumstruktur – Breite vs. Tiefe - 2 Zugriffszeit auf ein Item: T = D * (k + c * logb) mit D:= Tiefe, b:= Breite, k & c sind Konstanten. Tiefe ist insbesondere bei Webseiten ein Problem! Beim Navigieren gibt es mehr Gelegenheiten, Fehler zu machen Einschränkungen: Zu viele Items in einem Menüfeld können den Suchaufwand erhöhen, insbesondere wenn es keine sinnfällige Anordnung gibt, und die Suche nicht nach dem Identitätsprinzip erfolgt (das nicht alphabetisch geleitet wird) WENN bei der Zusammenfassung in Gruppen wegen der inhaltlichen Struktur mehr Tiefe naheliegend ist (z.B. bei Fehlersuchbäumen, bei Wegverzweigungen etc.) Identitätsprinzip: Nutzer sucht exakt nach dem Begriff „Einstellungen“

35 Zeiten bei Menü-Auswahlen
4.3 Zeiten bei Menü-Auswahlen Bei der Entscheidung für Tiefe statt Breite sind die Suchzeiten für ein Item und die Antwortzeiten des Systems (insbesondere bei einem Maskenwechsel) zu beachten. Außerdem muss häufig davon ausgegangen werden, dass im Durchschnitt nicht mehr als die Hälfte der Items einer Maske durchsucht werden. Bei Suche und Auswahl kosten folgende Operationen Zeit: Aufnahme der durch ein Item dargestellten Information Vergleich der aufgenommenen Information mit dem Ziel Entscheidung, ob die Suche beendet wird Aktivierungszeit mit dem Eingabegerät Sinnfällige Anordnung unter Berücksichtigung des Benutzer-verständnisses und der Aufgabe bringt die besten Resultate. Auf denen, die angezeigt werden, kann direkt gesucht werden. Der Rest muss erst exploriert werden. Inklusionsprinzip: Nutzer muss schnell erkennen, ob der eingeschlagene Weg ihn zum Ziel führt. Helander

36 Anordnung der Menüitems bei Dynamik
4.3 Anordnung der Menüitems bei Dynamik Wenn sich das Nutzungsverhalten bzgl. der Optionen ändert: NICHT die Reihenfolge ändern! Wenn sich ähnliche Items bei anderen Menüs wiederholen: Anordnungs-Konsistenz beachten Bei variabler Länge: Konsistente relative Positionen Bei fester Länge: Konsistente Absolut-Positionen Beispiel: Copy / Paste nicht vertauschen, nur weil Paste häufiger verwendet wird Einstellungen in verschiedenen Menüs ganz untern Relative Position = Reihenfolge ändert sich nicht Bei fester Länge z.B. ausgegraut Die Anordnungshinweise gelten nicht nur für Menüs, sondern in allen Fällen, in den Listen aufgestellt werden!

37 Defaults und nicht verfügbare Optionen
4.3 Defaults und nicht verfügbare Optionen Defaults Anbieten, wann immer möglich Fett darstellen Dynamic Labels Mit dem Kontext kann sich der Name ändern  UNDO – UNDO CUT Nicht verfügbare Optionen Grau oder blass darstellen Kein automatisches Hinzufügen oder Wegnehmen! Hilfe-Hinweise, wenn es doch aktiviert werden soll Optionen einstellen (z.B. Sprache) Hinweis, wie die Option aktiviert werden kann Eine Ausnahme stellt die Option automatischer Menüreduktion dar!

38 Tastatur-Äquivalente
4.3 Tastatur-Äquivalente Zu jedem Item sollte es die Möglichkeit der Selektion via Tastatur geben Es sollte der erste Buchstabe der Item-Benennung sein; bei Duplizierung: einen anderen Buchstaben aus der Item-Benennung wählen, meistens den nächsten Konsonanten  Konsistente Regeln der Wahl des Buchstabens bilden Der Buchstabe wird unterstrichen! Es können auch direkte Tastatur-Shortcuts angeboten werden Dateimenü: Alt+D

39 Pull-Down Menüs Angemessener Einsatz
4.3 Pull-Down Menüs Angemessener Einsatz Für häufig gebrauchte Items, die in vielen Kontexten relevant sind Eher kleinere Item-Zahl, wobei die textuelle Darstellung Sinn macht Vorteile Eine Menüleiste erinnert an das Vorhandensein Konsistente Platzierung, kein Platzbedarf, wenn nicht in Gebrauch Leicht zu durchsuchen Vertikale Anordnung bringt beste Ergebnisse für das Durchsuchen, Gruppieren und für die Darstellung mehrerer Items Abkürzungen und Ikons sind darstellbar Vergleich mit der aktuellen Register-orientierten Darstellung

40 Cascading und Pop-up Menus
4.3 Cascading und Pop-up Menus Cascading Menus nicht für häufige Kommandos verwenden Nicht mehr als 3-Ebenen Pop-up Für Optionen, die im Verlauf einer Aufgabe relevant werden k ö n n e n . Anzeigen bis: die Auswahl getroffen ist eine Aktion außerhalb des Menüs erfolgt der Benutzer es wegschieben möchte Cascading: Hide and show bei SeeMe Pop-up – z.B. Hilfetipps

41 Weitere Menüarten - 1 Icon Menus Icons sollen
4.3 Weitere Menüarten - 1 Icon Menus Icons sollen die Wiedererkennung unterstützen und die Selektion beschleunigen möglichst konkret sein

42 Weitere Menüarten - 2 A C DE G H J KN O R S TV Z Alpha-Sliders
4.3 Weitere Menüarten - 2 Alpha-Sliders Für das Durchsuchen großer Mengen alphabetisch angeordneter Items (z.B. Adressen) Thomas Herrmann A C DE G H J KN O R S TV Z Typisch für Navigationssysteme Der obere Schieber springt in großen Schritten( z.B. je 40 Namen) der kleine in Einzelschritten

43 Weitere Menüarten - 3 Transparente Menüs
4.3 Weitere Menüarten - 3 Transparente Menüs Wahrnehmungspsychologisch problematisch! Abb. aus Preim 1999

44 Neuere Entwicklung Zone Menus: Mehrstufige Interaktion
Orientierungspunkt ermöglicht größere Breite Zone and polygon menus: orientation point + gesture ermöglicht größere Menübreite auf einer Ebene

45 Neuere Entwicklung Flower Menus: Mehr als 8 Items auf einer Ebene
Leicht unterscheidbare Gesten Flower menus: mehr Gesten als Marking menus ermöglichen mehr Items auf einer Ebene Geht alles in Richtung Gesturebased Menus / NUI


Herunterladen ppt "4. Windows, Icons, Menus, Pointers, Controls"

Ähnliche Präsentationen


Google-Anzeigen