4.2 Windows, Icons, Menus, Pointers, Controls (Teil 2)

Präsentation zum Thema: "4.2 Windows, Icons, Menus, Pointers, Controls (Teil 2)"—  Präsentation transkript:

1 4.2 Windows, Icons, Menus, Pointers, Controls (Teil 2)

2 4 Windows, Icons, Menus, Pointers and Controls
4.5 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

3 Icons: Erfolgsfaktoren
4.4 Icons: Erfolgsfaktoren Vertrautheit Klarheit und Einfachheit Konsistenz und Erwartungen des Nutzers Kontext und Aufgabenbezug Unterscheidbarkeit: es sieht anders aus als alle anderen Icons Es ist offensichtlich, was es bewirkt (Selbsterklärung vs. Wiedererkennung) 16 Pixel im Quadrat reichen aus, um es erkennbar darzustellen. Ist sowohl in schwarz-weiß als auch Farbe erkennbar Konsistenz unter verschiedenen Anwendungen Kontext: F bei Textstyles Selbsterklärung: Sportarten bei den olympischen Spielen Wiedererkennung: Undo-Button

4 4.4 A Successful Icon

5 Auswahl geeigneter Bilder
4.4 Auswahl geeigneter Bilder Verwende vorhandene Icons Bilder für Substantive, nicht für Verben, verwenden Möglichst traditionelle Bilder verwenden Bilder für Substantive = Abbildung von Gegenständen traditionell = Repräsentator für einen realweltlichen Gegenstand

6 Bilder neu entwerfen Möglichst vertraute und konkrete Formen verwenden
4.4 Bilder neu entwerfen Möglichst vertraute und konkrete Formen verwenden Visuell und konzeptionell klar zu unterscheidende Formen Einzigartige Eigenschaften eines dargestellten Objektes wiedergeben Nicht innerhalb einer Umrahmung darstellen Wenn Objekte dargestellt werden, dann einfach und klar Die verwendeten Formen sollten Teil einer Menge sein und sich aufeinander beziehen Die Formen sollten “ansprechend” ein. Bezug zum Kontext vs. Bezug zueinander

7 Art der Ausführung von Icons
4.4 Art der Ausführung von Icons Bei sich ändernden Größen muss die Form konsistent sein. Falls auch Eigenschaften dargestellt werden, dann diese möglichst sinnfällig und gut nachvollziehbar darstellen Stimmige Größe und Orientierung sowie perspektivische Darstellung verwenden. Icons sollten beschriftet sein

8 4.4 Zeichen-Definition De Saussure: „Ein Zeichen ist durch die Relation von Bezeichnetem und Bezeichnendem gegeben.“ Bezeichnendes Bezeichnetes „Baum“ Ikonizität := Hohe Übereinstimmung zwischen Bezeichnendem und Bezeichnetem.

9 4 Literatur zu Kapitel 4 Galitz, Wilbert O. (1998): The Essential guide to user-interface screen design. New York et al.: John Wiley. Helander, Martin (ed). (1988): Handbook of Human-Computer Interaction. Amsterdam, New York: North Holland. Preim (1999): Entwicklung interaktiver Systeme. Springer Shneiderman, Ben (2002): User Interface Design – Deutsche Ausgabe!

10 4 Windows, Icons, Menus, Pointers and Controls
4.5 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

11 Ein/ Ausgabe Instrumente (Device-based controls)
4.5 Ein/ Ausgabe Instrumente (Device-based controls) Trackball Joystick Graphic tablet Touch screen Anoto pen Mouse Steuerknopf Touchpad - Finger Keyboard

12 Mouse als hauptsächliches Eingabe-Instrument
4.5 Mouse als hauptsächliches Eingabe-Instrument Vor- und Nachteile + Direkte Beziehung zwischen Hand- und Pointerbewegung im Sinne von Richtung, Entfernung und Geschwindigkeit + Auswahlmechanismen sind integriert + Die Sicht auf den Bildschirm wird nicht verhindert (im Unterschied zum Touch Screen) - Indirekte Bewegung hinsichtlich der Bewegungsebene - Hand muss von der Tastatur genommen werden - Zusätzliche Oberfläche wird benötigt - u.U. lange Bewegungsabstände - Ein gewisses Maß an Augen-Hand-Koordination ist erforderlich Bewegungsebene: horizontal auf dem Tisch vs. vertikal auf dem Screen

13 4.5 Mouse Guidelines Bei zu kleinen Auswahlzielen sollte eine “hot zone” rund um das Objekt angeboten werden. Doppel-Clicks sollten nie als einzige Form der Aktivierung eines Items angeboten werden. Maus-Aktionen nicht mit Tastenanschlägen kombinieren. Nicht das Pointen bewegter Objekte verlangen. Hot zone = leicht neben das Objekt tippen und trotzdem treffen

14 Semantic pointing – smart clicking
Problem: Objekte sind zum Teil schwer zu manipulieren oder schwer zu treffen (insbesondere, wenn der Finger die Maus ersetzt) Semantic-Pointing: wenn man sich bestimmten Objekten nähert, verändert sich das Verhältnis zwischen Maus- und Pointer-Bewegung Smart-Clicking: mit jedem Click wird eine anderes Objekt, das innerhalb eines bestimmten Radius des Pointers liegt, selektiert Herausforderung: Wechsel nach Click darf nur erfolgen, wenn er nicht für Manipulationen benötigt wird. (z.B. Doppelclick) Semantic pointing: Force field (Xbox Shooter)

15 Vergleichskriterien zwischen Eingabe-Instrumenten
4.5 Vergleichskriterien zwischen Eingabe-Instrumenten Vertrautheit Exaktheit Platzbedarf Geschwindigkeit Zusammenhang zwischen Bewegung-Effekt Koordinationsanforderung Sichtbarkeit der Ausgabe Wechsel des Instrumentes Belastung

16 Auswahl Richtlinien (1)
4.5 Auswahl Richtlinien (1) Tastatur, wenn die Aufgabe vorsieht Viel Texteingabe und -veränderung Navigation zwischen einigen wenigen, diskreten Objekten Angebote eines zusätzlichen Instruments für Aufgaben des Zeichnens und Auswählens: Mouse: pointing, selecting, drawing, and dragging. Joystick: selecting and tracking. Trackball: pointing, selecting and tracking. Touch screen: pointing and selecting. Graphic tablet: pointing, selecting, drawing, and dragging. Mouse: drawing schwierig

17 Auswahl Richtlinien (2)
4.5 Auswahl Richtlinien (2) touch screen wenn: keine Gelegenheiten zum Üben. große, diskrete und verteilte Ziele geringe Nutzungshäufigkeit kaum Texteingabe erforderlich Augen und Handbewegung zwischen verschiedenen Stationen sind zu minimieren

18 Weitere Instrumente Data-Glove Data-Suite Eye-tracking Kraft-Sensoren
4.5 Weitere Instrumente Data-Glove Data-Suite Eye-tracking Kraft-Sensoren ... Kraft-Sensoren: Wii-Balanceboard

19 Klassifizierung von Zeigeinstrumenten (1)
4.5 Klassifizierung von Zeigeinstrumenten (1) 1-D 2-D 3-D frei beweglich geleitete Bewegung bew. Achsen beweglich bew. Achsen fixiert 1D: Slider Geleitete Bewegung: Digital-Joystick Rotation: Drehknopf; Translation: Bewegung ohne Drehung Rotation Translation unbegrenzt begrenzt

20 Klassifizierung von Zeigeinstrumenten (2)
4.5 Klassifizierung von Zeigeinstrumenten (2) unbegrenzt begrenzt homogene Bewegung vorgegebene Positionen Position beibehaltend Position verlierend Bewegungsträge keine Trägheit keine Rück- stellkraft kaum beweglich Homogen vs. vorgegebene Position = analog vs. diskret (Raster) Position beibehaltend: Gerät bleibt in der Position, wenn ich es loslasse Bewegungsträge: Trackball Rückstellung: Joystick, der in ursprüngliche Position zurückfährt Position registrierend: Knopf bleibt auf einer bestimmten Position stehen (z.B. Lautstärke beim Radio) Bewegung registrierend: Maus Kraft registrierend: Wii-Balanceboard Rückstellung Position registrierend Bewegung registrierend Kraft registrierend

21 Screen-Based Control Welche Controls gibt es? Wofür sind sie sinnvoll?
4.5 Screen-Based Control Welche Controls gibt es? Wofür sind sie sinnvoll? Wie sind sie zu gestalten? In welcher Situation ist welches Control zu verwenden? Buttons Text entry/ read-only Selection: Radio Buttons Check Boxes Palettes List Boxes (fixed / Drop down / Pop up) Combination Entry/ Selection: Combination box Attached Pop up Drop down Spin Boxes Spin-box: Textbox incl. up-down-control

22 Weitere Controls Weitere Controls Slider Notebooks Scrollbars
4.5 Weitere Controls Weitere Controls Slider Notebooks Scrollbars Toggle Switch Notebooks = Dialoge mit mehreren Reitern

23 Buttons: Zweck Aktionen starten Attributwerte ändern
4.5 Buttons: Zweck Aktionen starten Attributwerte ändern Dialogboxen öffnen  Alles, was sofort passieren soll.

24 Button Größe 4.5 zu groß OK Cancel Help Color Palette >> OK
zu unruhig Alignment points; Aber empfohlen OK Cancel Help Color Palette >> Schriftwechsel ist zu vermeiden

25 Buttons: Anordnung und Layout
4.5 Buttons: Anordnung und Layout Die Anordnung und Platzierung der Buttons muss bei verschiedenen Fenstern konsistent sein. Buttons nicht “dazwischenquetschen”. Buttons, die einen speziellen Zweck haben sollen besondere Plätze haben, z.B. Verlassen (unten) oder Erweiterung des Dialogs (rechts). Sie sollten nicht mit Buttons für andere Zwecke verwechselbar sein. Gleicher und angemessener Abstand zwischen zusammen gehörenden Buttons  Gruppierung durch Nähe.

26 Defaults (1) Default anbieten und hervorheben
4.5 Defaults (1) Default anbieten und hervorheben Im Falle einer destruktiven Aktion sollte der Default „Cancel“ sein.

27 Defaults (2) Reaktionen
4.5 Defaults (2) Reaktionen Der Default kann im Laufe der Interaktion wechseln  Adaption. Die Hervorhebung wechselt ggf. auf den Button, auf den der Pointer zeigt Die Enter-Taste aktiviert den hervorgehobenen Button, wenn nicht eine andere Control die Enter-Taste braucht Unterschied zw. Hervorhebung und Focus

28 Buttons - Sonstiges Tastatur-Beschleuniger anbieten
4.5 Buttons - Sonstiges Tastatur-Beschleuniger anbieten Buttons dürfen beim Scrollen nicht verschwinden nicht-verfügbare Buttons zurücktreten lassen Aktivierte Buttons kennzeichnen Buttons mit Wiederholmöglichkeit besonders darstellen Wiederholmöglichkeit: Locking-Symbol bei Tristatebuttons

29 Text Boxes Entry/Modification: Information Display/Read Only
4.5 Text Boxes Entry/Modification: Display/Read Only Information Anzuwenden, wenn die Möglichkeiten unbegrenzt sind, eine große Zahl schwer kategorisierbarer Items zu wählen ist oder die Länge stark schwankt. Wenn eine Selection list nicht möglich ist. Datum wäre auch als mehrere Select-Listen möglich.

30 Text Boxes - Anforderungen
4.5 Text Boxes - Anforderungen Klare Instruktionen, z.B. Erkennbarkeit optionaler Felder Logische Gruppierung Konsistente Begrifflichkeit der Caption Plausibilitätstest der Eingabe Anwendbarkeit der Fehlerkorrekturmöglichkeiten Erkennbarkeit bei Vollständigkeit der Eingabe Untergliederung der Eingabe, z. B. TTMMJJJJ Plausibilitätstest: -Adressen Städtenamen auch Shneiderman

31 Selection Controls: Radio Buttons
4.5 Selection Controls: Radio Buttons Bei 2-8 sich ausschließenden Optionen Vor-/Nachteile + leicht erreichbar und vergleichbar, von Nutzern bevorzugt - verbraucht Platz - begrenzte Zahl von Optionen Left Center Right Decimal Bar Alignment Was sind in dem Bild Defaults, Accelerators und Captions? Defaults, Accelerators und Captions nutzen - also vertikal anordnen und nicht verfügbare Optionen kennzeichnen

32 Radio Buttons: Proper Usage
4.5 Radio Buttons: Proper Usage Weitere Anwendungsindikatoren: Diskrete Optionen im Unterschied zu analogen Schwer zu erinnern Wenn die Alternativen eine textliche Beschreibung brauchen (statt Ikone) Leichter zu verstehen, wenn man alle Alternativen nebeneinander sieht Warum nicht Menüs oder Listboxen? Die Auswahl bleibt Kontext übergreifend stabil (im Unterschied zu Menüs, Listboxen) Analoge Optionen: z.B. Lautstärkeregelung Kontext und Bezug wird durch die Auswahl der Alternativen hergestellt

33 Check Boxes - Gestaltungshinweise
4.5 Check Boxes - Gestaltungshinweise Anwenden, wenn mehrere Alternativen gleichzeitig möglich sind Weitgehend analog zu Radio-Buttons auch nur eine Check Box kann sinnvoll sein Beschreibung der Auswahlmöglichkeiten, Anordnung und Organisation sind bei Check Boxes und Radio Buttons gleich Bei beiden Selektionsmechanismen: Defaults, nicht verfügbare Optionen und Accelerators beachten

34 Radio-Buttons und Check Boxes - Beschreibung der Auswahlmöglichkeiten
4.5 Radio-Buttons und Check Boxes - Beschreibung der Auswahlmöglichkeiten Nicht verfügbare Optionen grau oder blass darstellen Ggf. bei Radio-Buttons ein NONE-Auswahl anbieten wg. Klarheit z.B.: bei Internet Umfragen

35 Selection Method and Indication (1)
4.5 Selection Method and Indication (1) Pointing Die Auswahlzielfläche soll so groß wie möglich sein und sowohl Checkbox/ Radiobutton als auch die Beschreibung umfassen. Der selektierte Bereich ist hervorzuheben (highlighten), wenn der Cursor das sensitive Feld berührt und die Auswahl verfügbar ist. Bold Italic Underline

36 Check Boxes: gemischte Werte 1
4.5 Check Boxes: gemischte Werte 1 Wenn die Checkbox ein Attribut repräsentiert, für das ein selektiertes Objekt mehrere Werte aufweist, dann muss die Checkbox besonders gekennzeichnet Bold Italic Underline

37 Check Boxes: gemischte Werte
4.5 Check Boxes: gemischte Werte Schalten der Check-Boxes: 1. Selektion: Alles auf den Wert der Box setzen 2. Selektion: den Wert für alle Teile des Objektes zurücksetzen 3. Selektion: den gemischten Zustand wieder herstellen

38 4.5 Palettes Einsatz bei sich ausschließenden Optionen, für die es unmittelbar eine grafische Darstellung gibt.

39 4.5 List Boxes Liste – u.U. mit Scrollbar –, aus der selektiert werden kann Auswahl mit Pointer und Click, ggf. mit Anfangsbuchstaben Kein Text Entry Field Aber ggf. ein Feld zwecks Anzeige der Auswahl oder zwecks Eingabe neuer Listenelemente Einsatz für große Zahl von Optionen (Mehrfachauswahl möglich) Rechter Teil…

40 List Boxes - Vor- und Nachteile
4.5 List Boxes - Vor- und Nachteile + Optionenzahl nicht begrenzt (aber: nicht mehr als 40 Scrolldowns) + an alle Optionen wird erinnert + die Auswahl ist dauerhaft sichtbar - braucht viel Platz - scrolling wird benötigt - der Inhalt kann sich ändern - die Reihenfolge kann sich ändern Unterschied zu Menüs beachten

41 Single-Selection List Box vs. Multiple-Selection List Box
4.5 Single-Selection List Box vs. Multiple-Selection List Box Australia Canada England France Germany New Zealand Netherlands Destination: Single-Selection List Box Multiple-Selection List Box Bread Cereal Dairy Foods Desserts Drinks Fruit Meat, Fish and Poultry Vegetables Groceries:

42 Mögliche Ergänzungen einer Multiple-Selection List Box
4.5 Mögliche Ergänzungen einer Multiple-Selection List Box Bread Cereal Dairy Foods Desserts Drinks Fruit Meat, Fish and Poultry Vegetables Groceries: 3 selected Ausgabefeld, das die Zahl der Auswahl darstellt Text-Ausgabebox, die die getroffene Auswahl auflistet Button für Select All / Deselect Groceries Selected: Bread Dairy Foods Meat, Fish and Poultry

43 Weitere Ergänzungen einer List Box
4.5 Weitere Ergänzungen einer List Box Darstellung, die die häufigste Wahl wiedergibt

44 4.5 Drop-Down List Boxes Verwendung, wenn der Platz für eine dauerhaft gezeigte Liste nicht ausreicht, insbesondere, wenn mehrere Listen verfügbar sein sollen Es bedarf eines Feldes, das auf die Liste hinweist und die aktuelle Auswahl zeigt Icon-buttons müssen die Liste aufklappbar machen In das Feld kann nicht eingegeben werden (sonst Combination box) Sport: Tennis Horizontal: Left Horizontal: Set Right Centered Left Full

45 4.5 Combination Boxes Über die List-Box kommt ein Text Entry Feld, in das man Selektionen eingeben kann oder frei gewählte Optionen. Die Selektion via Anfangsbuchstaben sollte erhalten bleiben, wird z.T. aber vernachlässigt. Die List box kann in gewohnter Größe fest verbunden sein oder über Drop Down/ Pop up geöffnet werden.

46 Spin Boxes als besondere Combination Box
4.5 Spin Boxes als besondere Combination Box Selektion oder Eingabe wird vollzogen, indem mit dem Pointer auf die Richtungs-Buttons geklickt wird  eine Wert Änderung pro Klick . der gewünschte Wert eingegeben wird. Nachteil: Auswahlmöglichkeiten stehen nicht vergleichbar nebeneinander. Buttons zur Diskretisierung der Werte

47 Sliders 4.5 Shaft Arm Detent Buttons
Button für Feineinstellung; Alignment von Bildern in einer Präsentation Detent = Raster / Sperre Temparature: 65 Fahrenheit Scale Text Box

48 Gestaltung der Slider Scales
4.5 Gestaltung der Slider Scales Die komplette sinnvolle Bandbreite anzeigen Den niedrigsten, mittleren und höchsten Wert angeben Intervalle markieren, sofern sinnvoll Konsistente Inkremente Maßeinheiten austauschbar Falls relevant, den genauen Wert in einer zusätzlichen Box angeben Verstellbare Einrastpunkte anbieten

49 4.5 Notebook Für Information, die man logisch in mehrere Seiten unterteilen kann Tabs gestalten konstante Breite anbieten textliche oder grafische Labels auf eine Reihe beschränken

50 Kriterien zur Auswahl der Control-Form
4.5 Kriterien zur Auswahl der Control-Form Art der Daten Diskret vs. Kontinuum Verbal vs. bildlich vs. numerisch Sich ausschließende oder ergänzende Optionen Begrenzter vs. unbegrenzter Wertebereich Sehr kleine, mittlere oder sehr große Zahl an Optionen Texteingabe ist sinnvoll Feste oder variable Eingabelänge Anfälligkeit für Tippfehler / Präzisionsanforderung Aufwand des Tippens Vorhersagbarkeit Der Ordnung Der Intervalle zwischen numerischen Werten Inhalt der Optionen ändert sich nie, selten, öfter

51 Weitere Kriterien zur Auswahl
4.5 Weitere Kriterien zur Auswahl Ausreichend Platz vorhanden oder nicht Räumliche oder grafische Darstellung sinnvoll oder nicht Eigenschaften der Benutzer: Vertraut mit den Daten Übung mit Tastaturnutzung Erlernbarkeit der Daten und Eigenschaft der Aufgabe Häufige Nutzung Änderungshäufigkeit der Optionen

52 Wann soll man Text Entry anbieten
4.5 Wann soll man Text Entry anbieten Wenn der Umfang der Daten, aus denen auszuwählen ist, unbegrenzt ist ODER Die Daten dem Benutzer vertraut sind UND Nicht Tippfehler anfällig Weniger Anschläge als die Selektion und Tippen geübt Dann immer Text-Entry anbieten und ggf. mit Selektionsmöglichkeit kombinieren SONST unbedingt mit Selektionsmöglichkeit Combina-tion ver-wenden

53 Welche Form der Selection-Control
4.5 Welche Form der Selection-Control WENN kleine Zahl von Optionen UND Platz vorhanden DANN Radio-Buttons oder Check-Boxes SONST Pop-Up / drop down list WENN große Zahl von Optionen UND Platz vorhanden DANN präsente Liste SONST Pop-Up / drop down list

54 Weitere Regeln WENN Kein Platz ist
4.5 Weitere Regeln WENN Kein Platz ist UND Ordnung vorhersagbar UND Intervalle vorhersagbar DANN: Spin Buttons Diskrete Daten, sich ausschließend, grafisch darstellbar Palette Kontinuierliche Daten, räumlich Anordnung hilfreich, begrenzter Wertebereich, Werteveränderung vorhersagbar  Slider

55 Menü oder Buttons für Kommandos?
4.5 Menü oder Buttons für Kommandos? 7 oder mehr und hierarchische Gruppenstruktur möglich  Menü 6 oder weniger, häufige Nutzung und die ganze Anwendung eines Fensters betreffend  Buttons in a Window 7 oder mehr häufige Nutzung und die ganze Anwendung eines Fensters betreffend  Buttons in a Toolbar 2 = Kommandos, die das ganze Fenster betreffen 3 = Tool auswählen

56 Vergleich von Steuerungsmöglichkeiten
4.5 Vergleich von Steuerungsmöglichkeiten Filename Number Size Date Filename Number Size Date Radio button F N S D One Entry Area F, N, S, D 4 Entry Areas 1. Position: 2. Position: 3. Position: 4. Position: Auswahl der Reihenfolge der Optionen

57 Vergleich - Ergebnisse
4.5 Vergleich - Ergebnisse Preference Speed Direct Manipulation O O Selection. Icons. Radio Buttons Menus (Drop-down list boxes) Entry One entry area Four entry areas. Direct Manipulation: Per Drag-and-drop an die richtige Stelle ziehen Preference: Was fanden die Nutzer am Besten? Speed: gemessen

58 4.5 Weitere Ergebnisse Bis zu 30 Items können für Radio Buttons oder Check-Boxes (8 Ankreuzungen) sinnvoll sein. Eingabe von Werten: Spin Buttons am genauesten Text Entry Field bevorzugt, am schnellsten Entry Field + Radio-Buttons ist eine erwünschte Kombination, wenn nicht vordefinierte Eingaben möglich sind Others: