4 windows icons menus pointers controls n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
4. Windows, Icons, Menus , Pointers, Controls PowerPoint Presentation
Download Presentation
4. Windows, Icons, Menus , Pointers, Controls

Loading in 2 Seconds...

play fullscreen
1 / 45

4. Windows, Icons, Menus , Pointers, Controls - PowerPoint PPT Presentation


  • 66 Views
  • Uploaded on

4. 4. Windows, Icons, Menus , Pointers, Controls. 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)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '4. Windows, Icons, Menus , Pointers, Controls' - trula


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
einf hrung

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
4 windows icons menus pointers and controls

4

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

beschriftung schriftarten

Times Roman

Times Italic

Times Bold

Times Bold Italic

Times Shadow

Times Outline

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!
konsistenzregel

Times Roman

Times Italic

Times Bold

Times Bold Italic

Times Shadow

Times Outline

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
  • ...
grossbuchstaben

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.

caption titel legenden berschriften

4.1

„Caption“ (Titel, Legenden, Überschriften)

First Amount:

Last Amount:

This Amount:

ThatAmount:

Who CaresAmount:

AMOUNT >> First:

Last:

This:

That:

Who Cares:

caption ii

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

Minimaler Unterschied zwischen Synonymen verschiedener Bereiche und maximaler Unterschied zwischen Items im gleichen Bereich

anordnung von captions in abh ngigkeit von der zahl der datenfelder

Female

Sex:

Relation:

Daughter

Names:

Deirda

Karin

Kim

Lauren

4.1

Anordnung von Captions- in Abhängigkeit von der Zahl der Datenfelder -
vier formen der anordnung

A.

C.

Division :

Division:

Department:

Department:

Title :

Title:

D.

B.

Division:

Division:

Department:

Department:

Title:

Title:

4.1

Vier Formen der Anordnung
berschriften

Personnel

Manager:

Employees:

Payroll:

4.1

Überschriften
4 windows icons menus pointers and controls1

4

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

fenster relevante komponenten

4.2

Fenster - relevante Komponenten

System Menu Button

Title Bar

Menu Bar

Window Sizing Buttons

Work Area

Split Bar

Status Bar

Scroll Bars

slide14

4.2

Arten von Fenstern

  • Primary Window
  • Secondary Window
    • Property Windows
    • Dialog Boxes
    • Message Boxes
    • Palette Windows
    • Pop-Up Windows
slide15

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

Wie wirken sich die Vor- und Nachteile bei sehr kleinen oder sehr großen Bildschirmgrößen aus?

dialog boxes

4.2

Dialog Boxes

Zu benutzen für:

  • Kurze Mitteilungen
  • Anforderung von steuernden Angaben, die
    • schnell gemacht sind,
    • sich nicht häufig ändern
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!

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
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
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.
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.
4 windows icons menus pointers and controls2

4

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

men arten

4.3

Menüarten

File Edit Options Window Helps

  • Hauptleiste
  • Pull-Down (Drop Down)
  • Cascading Menus (Drop Down)
  • Pop-Up
  • Tear-Off
  • Iconic
  • Pie Menus
  • Spaltenanordnung (zwei-dimensional)
  • Alphaslider
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?

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
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
benennungen der items

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

such und vergleichsbedingungen bei der auswahl von items

Identität:

Äquivalenz:

Inklusion:

Problem:

Nutzervorstellung

Menüitem

4.3

Such- und Vergleichsbedingungenbei der Auswahl von Items
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
regeln zur reihenfolgebildung

ja

ja

nein

ja

nein

nein

4.3

Regeln zur Reihenfolgebildung

nach üblicher

Reihenfolge

gibt es eine

übliche Reihenfolge?

nach Häufigkeit der

Benutzung

kurze

Liste?

nach Kategorien

gruppiert

gibt es Ähnlichkeiten,

Gleichheiten?

nach alphabetischer

Reihenfolge

Gestaltungsrichtlinien zum Auswählen (choosing) und Organisieren der Optionen auf einer Menüfläche.

in Anlehnung an Helander, S.217

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

Bewertung anhand von Geschwindigkeit, Genauigkeit und Präferenz

Shneiderman, 295 f

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

Helander

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

Die Anordnungshinweise gelten nicht nur für Menüs, sondern in allen Fällen, in den Listen aufgestellt werden!

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

Eine Ausnahme stellt die Option automatischer Menüreduktion dar!

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
pull down men s

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
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
weitere men arten 1
Icon Menus

Icons sollen

die Wiedererkennung unterstützen und die Selektion beschleunigen

möglichst konkret sein

4.3

Weitere Menüarten - 1
weitere men arten 2
Alpha-Sliders

Für das Durchsuchen großer Mengen alphabetisch angeordneter Items (z.B. Adressen)

4.3

Weitere Menüarten - 2

Thomas Herrmann

A C DE G H J KN O R S TV Z

Der obere Schieber springt in großen Schritten( z.B. je 40 Namen) der kleine in Einzelschritten

weitere men arten 3

4.3

Weitere Menüarten - 3

Transparente Menüs

Wahrnehmungspsychologisch problematisch!

Abb. aus Preim 1999

neuere entwicklung
Neuere Entwicklung
  • Zone Menus:
    • MehrstufigeInteraktion
    • OrientierungspunktermöglichtgrößereBreite
neuere entwicklung1
Neuere Entwicklung
  • Flower Menus:
    • Mehrals 8 Items auf

einerEbene

    • Leichtunterscheidbare

Gesten