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

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

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

4. 4.4 A Successful Icon

5. 4.4 Auswahl geeigneter Bilder • Verwende vorhandene Icons • Bilder für Substantive, nicht für Verben, verwenden • Möglichst traditionelle Bilder verwenden

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

7. 4.4 Art der Ausführung von Icons • BeisichänderndenGrößen muss die Form konsistentsein. • Falls auchEigenschaftendargestelltwerden, danndiesemöglichstsinnfällig und gut nachvollziehbardarstellen • StimmigeGröße und OrientierungsowieperspektivischeDarstellungverwenden. • Icons solltenbeschriftetsein

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.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. 4.5 Ein/ Ausgabe Instrumente(Device-based controls) • Trackball • Joystick • Graphic tablet • Touch screen • Anoto pen • Mouse • Steuerknopf • Touchpad - Finger • Keyboard

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

13. 4.5 Mouse Guidelines • Bei zu kleinen Auswahlzielen sollte eine “hotzone” 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.

14. Semanticpointing – 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)

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

16. 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, anddragging. • Joystick: selectingandtracking. • Trackball: pointing, selectingandtracking. • Touch screen: pointingandselecting. • Graphictablet: pointing, selecting, drawing, anddragging.

17. 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. 4.5 Weitere Instrumente • Data-Glove • Data-Suite • Eye-tracking • Kraft-Sensoren • ...

19. 4.5 Klassifizierung von Zeigeinstrumenten (1) 1-D 2-D 3-D frei beweglich geleitete Bewegung bew. Achsen beweglich bew. Achsen fixiert Rotation Translation unbegrenzt begrenzt

20. 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 Rückstellung Position registrierend Bewegung registrierend Kraft registrierend

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

22. 4.5 Weitere Controls Weitere Controls • Slider • Notebooks • Scrollbars • Toggle Switch

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

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

25. 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. 4.5 Defaults (1) • Default anbieten und hervorheben • Im Falle einer destruktiven Aktion sollte der Default „Cancel“ sein.

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

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

29. Entry/Modification: Display/Read Only Information Information 4.5 Text Boxes • 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.

30. 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 auch Shneiderman 312 - 317

31. Alignment Left Center Right Decimal Bar 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 Defaults, Accelerators und Captions nutzen - also vertikal anordnen und nicht verfügbare Optionen kennzeichnen

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

33. 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. 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. 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. Bold Italic Underline 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

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

40. 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 Multiple-Selection List Box Australia Canada England France Germany New Zealand Netherlands Groceries: Destination: Bread Cereal Dairy Foods Desserts Drinks Fruit Meat, Fish and Poultry Vegetables Destination: 4.5 Single-Selection List Box vs.Multiple-Selection List Box

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

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

44. Tennis Horizontal: Left Set Right Centered Left Full Sport: Horizontal: 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)

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

47. 0 10 20 30 40 50 60 70 80 90 100 110 120 130 4.5 Sliders Detent Shaft Arm Buttons 65 Fahrenheit Temparature: Scale Text Box

48. 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 • konstanteBreite anbieten • textliche oder grafische Labels • auf eine Reihe beschränken

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