 | Abbildung 1.1 : Schema eines Mensch-Maschine Systems: Nutzungskontext, Benutzer, Aufgabe und Werkzeug (vgl. Wandmacher) |
|---|---|
 | Abbildung 1.2 : Komponenten menschlicher Informationsverarbeitung und Handlungssteuerung (vgl. Wandmacher) |
 | Abbildung 1.3 : Schematische Sicht der menschlichen Informationsverarbeitung (angelehnt an Eberleh und Streitz) |
 | Abbildung 2.1 : Frequenzspektrum des sichtbaren Lichts und spektrale Empfindlichkeit der Sinneszellen im Auge (schematisch für S-,M-,L-Zapfen und Stäbchen) |
 | Abbildung 2.2 : Links: Vereinfachtes Schnittbild des menschlichen Auges, Rechts: Verteilung der Sinneszellen in der Netzhaut in Abhängigkeit vom Winkel zur optischen Achse |
 | Abbildung 2.3 : Die Farben im HSV Farbraum, sowie die im Text genannten Farbkontraste. Dieses Bild ist im Schwarzweiß-Druck leider nicht sinnvoll darstellbar, dafür aber im verlinkten Bild auf der Webseite zum Buch (). |
 | Abbildung 2.4 : Links: Zur Akkommodation des Auges verformt sich die Linse und verändert damit die Entfernung, in der ein Objekt scharf dargestellt wird. Rechts: Als Vergenz wird bezeichnet, wie weit sich die Augen zueinander drehen müssen, um ein Objekt zu fixieren. |
 | Abbildung 2.5 : Beispiele für präattentive Wahrnehmung (a, b) und attentive Wahrnehmung (c): Im Bild c ist es deutlich schwerer, die eine Form zu finden, die nicht zu den anderen passt. |
 | Abbildung 2.6 : Beispiele zum Gesetz der Nähe (a), Gesetz der Ähnlichkeit (b) und Gesetz der Geschlossenheit (c) |
 | Abbildung 2.7 : Beispiele zum Gesetz der Einfachheit (a), Gesetz der guten Fortsetzung (b) und Gesetz der Verbundenheit (c) |
 | Abbildung 2.8 : Links: Vereinfachtes Schnittbild des menschlichen Ohrs, Rechts: Frequenzempfindlichkeit entlang der Gehörschnecke |
 | Abbildung 2.9 : Links: räumliches Hören mittels Zeitunterschied (ITD), Rechts: räumliches Hören mittels Lautstärkeunterschied (IID) |
 | Abbildung 3.1 : Die PRF einer leichten und einer schweren Aufgabe. Bei der leichten Aufgabe steigt die Performanz schnell an und flacht dann ab. Bei der schweren Aufgabe ist der initiale Anstieg der Performanz deutlich langsamer und kontinuierlicher (vgl. auch Wickens und Hollands). |
 | Abbildung 4.1 : Der ursprüngliche Versuchsaufbau zur Ermittlung von Fitts' Law (Originalabbildung aus): Ziel war es, abwechselnd die im Bild schraffierten Kontaktplatten zu treffen, ohne dabei die benachbarten weißen Platten zu berühren. |
 | Abbildung 4.2 : Verfolgen eines gebogenen Pfades S: die Geschwindigkeit und damit die benötigte Zeit hängt von der Breite W(s) ab. |
 | Abbildung 4.3 : Links: handgeschriebener Brief, Rechts: überlagerte Schriftabdrücke auf darunter liegendem Kohlepapier, Originalabbildung aus Guiard. |
 | Abbildung 5.1 : Das konzeptuelle Modell im Kopf des Designers und das mentale Modell im Kopf des Benutzers sollten möglichst übereinstimmen. Dazu muss das präsentierte Modell das konzeptuelle bestmöglich vermitteln. Vom implementierten Modell dürfen alle drei beliebig abweichen. |
 | Abbildung 5.2 : Die sieben Schritte bei der Ausführung einer zielgerichteten Handlung, adaptiert nach Norman |
 | Abbildung 6.1 : Berechnung der notwendigen Auflösung: Es gilt $\frac |
 | Abbildung 7.1 : Verschiedene Wasserhähne mit verschiedenen Affordances: Bei manchen ist die Bedienung leichter zu erkennen als bei anderen. Links: Objekthierarchie, Rechts: Aktionshierarchie zum Verschieben einer Datei von einem Ordner in den andern. |
 | Abbildung 7.2 : Verschiedene Mappings von Kochplatten zu Reglern: Das räumliche Mapping von links nach rechts passt, aber im linken Beispiel bleibt unklar, welche Regler zu den vorderen bzw. hinteren Platten gehören. |
 | Abbildung 7.3 : Räumliches Mapping: Das Tonband lief bei der Wiedergabe von links nach rechts am Tonkopf vorbei. Die Anordnung der Knöpfe für Rückspulen, Vorspulen und Wiedergabe orientiert sich bis heute an dieser Bewegungsrichtung. |
 | Abbildung 7.4 : Links: Eine Aufzugssteuerung, die in eklatanter Weise sämtliche denkbaren logisch erklärbaren Mappings verletzt. Rechts: eine Tür mit sehr fragwürdigen Affordances. |
 | Abbildung 7.5 : Inkonsistenz zwischen häufig verwendeten Arten von Zehnerblocks. Die Bilder zeigen von links nach rechts die Tastaturen eines Smartphone, eines Desktop-Computers, eines Taschenrechners und eines Geldautomaten. |
 | Abbildung 7.6 : Verschiedene Formen von Feedback, die uns in einer grafischen Benutzerschnittstelle mitteilen, dass wir warten müssen: Links die Sanduhr aus frühen Windows Versionen, in der Mitte der |
 | Abbildung 7.7 : Physikanaloge Bedienelemente aus 20 Jahren |
 | Abbildung 7.8 : Links: Pinsel, Stifte, Radierer etc. als Metapher in der Bildbearbeitung. Rechts: Tonspuren, Pegel und Regler in der Audiobearbeitung. |
 | Abbildung 7.9 : Microsoft Bob |
 | Abbildung 7.10 : Links: Objekthierarchie, Rechts: Aktionshierarchie zum Verschieben einer Datei von einem Ordner in den andern. |
 | Abbildung 8.1 : Kommandozeilen-Umgebungen in Windows, macOS und Linux. |
 | Abbildung 8.2 : Dialog- und Kommando-orientierte Fahrkartenautomaten des Münchner Verkehrsverbundes: am linken Automaten findet ein Bildschirmdialog statt, am rechten entspricht eine Taste genau einem Ticket. |
 | Abbildung 8.3 : Suchen und Browsen innerhalb der gleichen Benutzerschnittstelle, hier für eine Musiksammlung. Das Suchfeld oben rechts und die Listendarstellung erlauben gezieltes Suchen. Die CD-cover und die Einträge in der Seitenleiste links laden zum Stöbern ein. |
 | Abbildung 8.4 : Ein MCV Interface mit Brushing und Linking: PaperLens, Gewinner des Infovis Contest 2004. |
 | Abbildung 9.1 : Links: Das grundlegende MVC Entwurfsmuster, Rechts: mehrere |
 | Abbildung 9.2 : Ein ZUI für Präsentationen: Prezi. |
 | Abbildung 9.3 : Beispiel für 2 koordinierte Sichten, Fokus und Kontext |
 | Abbildung 9.4 : Fisheye-Darstellung einer Liste von Wörtern (Links) sowie eines Rasters von Quadraten (Rechts). Beim linken Beispiel wird echt Platz gewonnen, während das rechte Beispiel die Geometrie des Rasters erhält. |
 | Abbildung 10.1 : Links der Double-Diamond-Prozess, Rechts die Hauptelemente des User-Centered-Design: Evaluieren, Vergegenwärtigen, Verstehen und Designen (nach Norman und Benyon). |
 | Abbildung 11.1 : Zwei Beispiele für Likert-Skalen. Oben wird eine numerische Skala verwendet. Unten, zur Beantwortung der gleichen Frage, eine verbale Skala. |
 | Abbildung 11.2 : Beispiel eines semantischen Differenzials. Eine Aussage wird mithilfe von bipolaren Adjektivpaaren auf einer Skala bewertet. |
 | Abbildung 12.1 : Abstraktionsserie eines Stiers in Lithographien von Pablo Picasso. Diese Serie zeigt den Übergang vom |
 | Abbildung 12.2 : Papier-Prototyp eines mobilen Gerätes. Hier ist nicht nur der Bildschirminhalt, sondern gleich das ganze Gerät als Prototyp umgesetzt. Knöpfe und Schalter können einfach gezeichnet werden. |
 | Abbildung 12.3 : PopApp: ein Werkzeug zur Verwendung von Papier-Prototypen auf Smartphones, Tablets und Wearables. |
 | Abbildung 12.4 : Beispiel für den Beginn der Darstellung eines komplexen Handlungsablaufs in Form eines Comics. Die Handlung kann sich über verschiedene Geräte und Kontexte erstrecken und der Comic kann auch die Gedanken der Akteure darstellen. |
 | Abbildung 12.5 : Szene aus dem SUN Starfire Video Prototyp von 1992. Darin wurde ein komplettes Szenario mit viel Sorgfalt umgesetzt, das zeigt, wie man aus damaliger Sicht in Zukunft (2004) leben und arbeiten könnte. |
 | Abbildung 13.1 : Links: Prozentualer Anteil der gefundenen Probleme in Abhängigkeit von der Anzahl der Evaluatoren, Rechts: Verhältnis aus Nutzen und Kosten. Beide Diagramme zeigen nur den prinzipiellen Verlauf dieser Kurven. Die wirklichen Werte hängen immer von der konkreten Situation ab. |
 | Abbildung 13.2 : Histogrammdarstellung einer Verteilung über ordinalen Daten, hier der Drittel-Notenstufen einer Klausur (oben), der ganzen Notenstufen einer Klausur (Mitte) sowie nach bestanden oder nicht bestanden (unten). Unten lassen sich Prozentsätze ablesen, oben absolute Studentenzahlen. Alle beruhen auf den gleichen Daten. |
 | Abbildung 13.3 : Balkendiagramm zur Darstellung der Ergebnisse von Likert-Skalen, generiert mit . |
 | Abbildung 13.4 : Fehlerbalken zur Darstellung der Standardabweichung bei der aggregierten Darstellung einer Zahlenreihe durch ihren Mittelwert. |
 | Abbildung 14.1 : Hierarchie von Zielen nach Hassenzahl. Produkte sprechen oft nur die Ziele nahe der Welt an, das Gesamterlebnis wird jedoch durch alle drei Ebenen bestimmt. |
 | Abbildung 14.2 : Bilder aus dem Storyboard zu |
 | Abbildung 15.1 : Das Interface der Xerox Star Workstation (1981) mit den grafischen Elementen für Dokumente, Ordner und Ablagefächer sowie für die Werkzeuge Drucker, Taschenrechner und Papierkorb. |
 | Abbildung 15.2 : Grundlegende Elemente eines Fensters in einer heutigen Desktop-Umgebung. |
 | Abbildung 15.3 : Ein geschachteltes Pull-down-Menü und der Weg des Mauszeigers zur Auswahl eines Eintrags in der ersten Schachtelungsebene. |
 | Abbildung 15.4 : Links: ein Tortenmenü, Rechts: ein geschachteltes Tortenmenü, bei dem der Mauszeiger eine Spur hinterlässt (Marking Menu). |
 | Abbildung 16.1 : Replik einer der ersten Webseiten, angezeigt in einem heutigen Browser. |
 | Abbildung 16.2 : Aufbau eines Uniform Resource Locator (URL) aus Protokoll, Servername, Verzeichnis auf dem Server, Dateiname und einem optionalen Anker innerhalb der Seite. |
 | Abbildung 16.3 : Statisches Layout, in der Mitte in der optimalen Fensterbreite. Bei einem breiteren Fenster (oben) werden rechts und links leere Flächen ergänzt, bei einem schmaleren Fenster (unten) werden Inhalte abgeschnitten. |
 | Abbildung 16.4 : Responsives Layout: der Designer legt fest, wie die grundlegenden Elemente der Seite in verschiedenen Situationen angeordnet werden, und der Browser übernimmt das detaillierte Layout. |
 | Abbildung 16.5 : Navigationselemente einer Webseite: Links die hierarchisch aufgebaute Hauptnavigation, Oben der Breadcrumb Trail, Ganz oben die strukturell gleiche URL. |
 | Abbildung 17.1 : Resistiver Touch Sensor: Um die x-Position zu messen, wird an der unteren Schicht die Spannung U angelegt und oben ux ausgelesen, sobald durch Druck ein Kontakt entsteht. Es gilt $\frac |
 | Abbildung 17.2 : FTIR Touch Sensor: Licht wird seitlich durch IR-LEDs eingespeist und an der Grenzfläche Plexiglas-Luft totalreflektiert. Drückt ein Objekt die Silikonschicht an das Plexiglas, dann tritt dort Licht aus und erleuchtet das Objekt, das daraufhin im Kamerabild sichtbar wird. |
 | Abbildung 17.3 : DI Touch Sensor: Licht wird von unten durch die Plexiglasscheibe gestrahlt. Sobald ein Objekt die Oberfläche berührt oder ihr sehr nahe kommt, wird es davon erleuchtet und im Kamerabild sichtbar. |
 | Abbildung 17.4 : Bill Buxtons Modell der 3 Zustände für Maus (oben rechts), Single Touch (oben links) und einen Stift mit Taste (unten), in Anlehnung an Buxton. |
 | Abbildung 17.5 : Photohelix: Ein gemischt physikalisches und grafisches Interface mit unterschiedlichen Rollen für beide Hände. |
 | Abbildung 18.1 : Die Android Notification Bar wird zum Sammeln und Anzeigen von Notifikationen benutzt, um so die Unterbrechung während der Verwendung von anderen Applikationen des mobilen Gerätes zu reduzieren. |
 | Abbildung 18.2 : Visualisierungen, die über die Ausdehnung und Auflösung eines kleinen Bildschirms (Peephole) hinausgehen, können auf zwei Arten exploriert werden. Links ist ein statisches Peephole zu sehen, hinter dem sich der Hintergrund verschiebt, rechts ein dynamisches Peephole, das vor einem statischen Hintergrund verschoben wird. |
 | Abbildung 18.3 : Links: die Methode |
 | Abbildung 18.4 : Eine Menge von einfachen Gesten, die mit einem mobilen Gerät ausgeführt werden können und mit einer Erkennungsrate von 80 Prozent verhältnismäßig robust zu erkennen sind. |
 | Abbildung 18.5 : Beispiel von integrierter Sensorik in einem Smartphone - Hier am Beispiel eines frühen iPhone, welches bereits mehr als zehn Arten von Sensoren besaß. |
 | Abbildung 19.1 : Im Ubiquitous Computing interagiert jeder Benutzer mit einer Vielzahl von Computern, die in der Benutzerumgebung eingebettet sind. Dies steht im Gegensatz zum traditionellen Zentralrechnerparadigma, wo viele Benutzer mit einem Rechner interagieren und dem PC-Paradigma, welches für jedem Benutzer genau einen Rechner vorsieht. |
 | Abbildung 19.2 : Links das System Illuminating Clay, welches die direkte Manipulation eines Landschaftsmodells und die gleichzeitige Visualisierung von Simulationsergebnissen ermöglicht. Rechts der REACTABLE, ein interaktiver Syntheziser, der durch durch sein TUI und eine ansprechende Visualisierung besonders für Live-Auftritte geeignet ist. |
 | Abbildung 19.3 : Beispiele für Kartenvisualisierungen, die für Fußgänger entwickelt wurden. Links: ein früher Forschungsprototyp von 2003, Mitte: Nokia Maps, Version 4 von 2009, Rechts: Google Maps von 2014. |
 | Abbildung 19.4 : Beispiel für die grafische Adaptionsleistung des Fußgängernavigationssystems ARREAL aus dem Jahre 2000. Abhängig von der Positionierungsgenauigkeit und der Benutzergeschwindigkeit werden Benutzerposition und Umgebung unterschiedlich dargestellt. |
 | Abbildung 19.5 : Multimodale Interaktion mit dem mobilen Fußgängernavigationssystem M3I. Links: die kombinierte Verwendung von Gesten auf dem touchsensitiven Bildschirm mit Spracheingaben, Mitte: die Verwendung von Gesten mit dem Gerät selbst, Rechts: ein Ausschnitt der Grammatik, die bei der Spracherkennung in Abhängigkeit vom Kartenausschnitt vorausgewählt wird und so die mobile Erkennungsleistung verbessert. |
 | Abbildung 20.1 : Links: Ivan Sutherlands Sword of Damokles, das erste Head-Mounted Display. Rechts: Jaron Laniers Data Glove, ein frühes VR-Eingabegerät. |
 | Abbildung 20.2 : Viele hielten Google Cardboard bei seiner Einführung für einen Witz. Aus wenigen Kartonteilen und zwei Sammellinsen lässt sich eine Haltevorrichtung bauen, die aus jedem Smartphone ein HMD macht. |
 | Abbildung 20.3 : Aufbau eines prototypischen VR Systems auf Basis eines HMD mit Tracking und Interaktion |
 | Abbildung 20.4 : Aufbau einer Visualisierungsumgebung mit CAVE und Powerwall am Leibniz-Rechenzentrum in Garching bei München. |
 | Abbildung 20.5 : Links: Beispiel für ein 3D Eingabegerät (3Dconnexion SpaceNavigator) für Desktop VR. Rechts: ein omnidirektionales Laufband (Virtuix Omni) mit dem der Benutzer frei in der 3D Welt umherlaufen kann, ohne sich in der Realität vom Fleck zu bewegen. |
 | Abbildung 20.6 : Paul Milgrams \emph |
 | Abbildung 20.7 : Die Microsoft HoloLens: Ein optical see-through HMD mit integriertem Tracking und Rendering. |
 | Abbildung 20.8 : Links: Funktionsweise eines video see-through HMD. Rechts: Funktionsweise eines optical see-through HMD. |
 | Abbildung 20.9 : Drei Generationen von Mobile AR. Links: eines der ersten tragbaren Systeme Ende des letzten Jahrhunderts, Mitte: ein frühes, auf ARToolKit basierendes Handheld AR System, Rechts: ein neueres Smartphone-basiertes Handheld AR System. |
 | Abbildung 21.1 : Aufbau eines typischen VUI: Wird eine Anfrage gestellt, werden die Audiodaten im Rahmen der Spracherkennung zunächst in Wörter konvertiert. Anschließend interpretiert das VUI die Wörter hinsichtlich ihrer Bedeutung (Sprachverständnis). Im darauffolgenden Dialogmanagement entscheidet das VUI über die nächsten Systemschritte und stellt Suchanfragen oder verbindet sich mit den gewünschten Apps. Basierend auf diesen Aktionen generiert es die Antwort (Antwortgenerierung) und konvertiert diese abschließend wieder in Audiodaten (Sprachsynthese), die als Sprache ausgegeben werden. |
 | Abbildung 21.2 : Voice User Interfaces werden insbesondere auf sogenannten Smart Speakern eingesetzt. Diese kleinen Lautsprecher können Musik abspielen oder das Smart Home steuern. Abgebildet sind ein Amazon Echo Dot der 4. Generation (links), ein Apple HomePod mini (Mitte) sowie ein Google Nest Audio (rechts). |
 | Abbildung 21.3 : Beispielsätze, die Herausforderungen beim Sprachverständnis bilden. Sprache ist immer mehrdeutig und kontextbezogen. Menschen können aufgrund ihres Wissens um die Situation einer sprachlichen Äußerung deutlich mehr Information entnehmen als tatsächlich gesagt wurde. Es ist aber sehr schwierig, das einem VUI beizubringen. |
 | Abbildung 21.4 : VUI-Entwickler:innen definieren alle möglichen Gesprächsverläufe zwischen Benutzer:innen und VUIs mithilfe eines Flussdiagramms, um die Struktur der Dialoge des VUIs festzulegen. In dieser Abbildung ist beispielhaft der Gesprächsfluss für eine Anfrage, den morgendlichen Wecker zu stellen, dargestellt. |
 | Abbildung 21.5 : Menschen weisen Robotern, VUIs und anderen Technologien unterbewusst eine Persönlichkeit zu, da sie diese als soziale Akteure begreifen. Diese Technologien besitzen, ähnlich wie Menschen, bestimmte Merkmale, die diese Persönlichkeitswahrnehmung auslösen, wie in diesem Beispiel die Augen des Roboters WALL-E aus dem gleichnamigen Film. Diese Merkmale können bewusst gestaltet werden, damit eine gewünschte Persönlichkeit attribuiert wird. |
 | Abbildung 21.6 : Ein Amazon Echo Dot (Smart Speaker) der dritten Generation: Um Benutzer:innen zu signalisieren, dass der Sprachassistent das Wake Word gehört hat und bereit für die Anfrage ist, leuchtet eine runde Zierleiste blau auf. |
 | Abbildung 21.7 : Wenn Roboter und Avatare sehr menschenähnlich gestaltet sind, aber keine perfekte Imitation eines Menschen sind, reagieren Benutzer:innen negativ und mit einem Gefühl des Unwohlseins auf diese (Uncanny Valley). |
 | Abbildung 21.8 : Ein Beispieldialog zwischen der Autorin und Siri, angelehnt an Pearl, der verdeutlicht, dass heutige Konversationen mit Sprachassistenten nicht wirklich Unterhaltungen sind, wie wir sie von der Kommunikation unter Menschen kennen. |