VisualComputing: Benutzerschnittstellen

• DIN EN ISO 9241-10 (Grundsätze der Dialoggestaltung)
• DIN EN ISO 9241-11 (Gebrauchstauglichkeit)

• „Ein Dialog ist erwartungskonform, wenn er konsistent ist und den Fähigkeiten des Benutzers entspricht.“ (ISO)
•  Erwartungskonformes Verhalten: Oft als Prinzip des „minimalen Erstaunens“ (Principle ofLeast Astonishment) – umschrieben, zielt wiederum darauf,dass eine Anwendung ohne Furcht vor Bedienfehlernausprobiert werden kann.

Kenntnis potenzieller Benutzer und Ihre Aufgaben

• ist die Voraussetzung fpr alle anderen Prinzipien, umfassend mit dem Benutzer und seinen Kenntnissen befassen

Unterstützung beim Aufbau mentaler Modelle

• Eine durchgängige/gleichbleibende Bedienerlogik verwenden
• Eingabe der Benutzer und Systemänderungen immer 1:1 mappen (d.h. eine Eingabe führt immer nur zu einer Systemänderung)
• Stark verzögerte  Reaktion des Systems auf eine Eingabe behindern die Entwicklung eines mentalen Modells
• Eingaben linear auf die Auswirkungen mappen. Verschiebt man einen Regler, so erwartet man, dass sich die Änderungen im System linear dazu verhalten (z.B. Displayhelligkeit)

Terminologie der Benutzer verwenden

• Terminologie in der graphischen Benutzerschnittstelle sollte sich an der Terminologie und Denkweise der Anwender orientieren (Fachsprache der Benutzer)
• Dabei sollten alle verwendeten Begriffe korrekt aus der Sprache der Benutzer sein

Reduktion der kognitiven Belastung

• Wartezeiten vermeiden, damit Nutzer Infos nicht lange behalten müssen
• In einem Schritt nur eine Aufgabe bewältigen lassen, damit man sich nur auf eine Sache konzentrieren muss

Strukturierung der Benutzerschnittstelle

• Menschen verbreiten Infos am besten in Chunks (Chunks=Gruppierung von Elementes)
• Deswegen Dialoge und Schaltflächen der gleichen Kategorie entsprechend anordnen und zusammenfassen

Kombination visueller und textueller Beschreibungen

• Bilder ermöglichen schnelleres Erkennen und den Zugriff auf Funktionen
• Text ist wichtig um weitere Informationen zu bekommen
• Deshalb immer kombinieren (z.B. Bildunterschriften, Toolstips oder Multifunktionsleisten)

Sichtbarkeit von Systemzuständen und möglichen Interaktionen

• Systemparameter immer anzeigen (z.B. Bildunterschriften, Tooltipps oder Multifunktionsleisten)

Sichtbarkeit von Systemzuständen und möglichen Interaktionen

• Systemparameter immer anzeigen (z.B. Pinselgröße in PS)
• Nicht wählbare Funktionen ausgrauen oder in anderen Dialog auslagern
• Berechnungen, Wartezeiten visualisieren (Ladebalken, Ladeindikatoren)

Angemessene Rückkopplung

• System immer zeigen lassen, dass es die Eingabe des Benutzers verstanden hat (z.B. Buttonaussehen ändern wenn sie gedrückt worden sind und Ladebalken etc. anzeigen, wenn die Berechnung länger dauert)
• Skalierbare Rückkopplung: Nutzer entscheiden lassen, wie viele Infos er sehen will, z.B über anpassbare Interfaces oder ausklappbare Dialoge
• Erfahrene Nutzer erwarten, dass das System so arbeitet wie sie es wollen, deswegen brauchgen sienicht immer alle Infos visualisiert bekommen

Konsistenzaspekte

• Sprachliche Konsistenz (Terminologie)
• Strukturelle Konsistenz (Anordnung, Reihenfolge)
• Grafische Konsistenz (Farben, Fonts, 3D-Effekte, Linienstile)
• Interaktionskonstistenz: Verhalten bei Mausdruck oder bestimmten Tastaturkombinationen gleich halten

Ermöglichen sie es, Aktionen abzubrechen und rückgängig zu machen

• Das Zurücknehmen von Aktionen ermöglicht einen kreativen Problemlösungsprozess, was zu einem unbefangenem Ausprobieren führt
• Speichern von Zwischenergebnissen
• VIsualisieren der Änderungshistorie, weil nicht immer klar ist, was rückgängig gemacht werden kann (z..B. in Word, Änderung der Seitenränder)

Berücksichtigung von Fehlern

• Machen Sie es leicht, Fehler zu erkennen, zu diagnostizieren und zu beheben
• Unterstützt ebenfalls die Wahrnehmung und Interpretation des Systemzustandes
• Fehlermeldungen klare Texte ausgeben lassen (kein ‘Fataler Nullfehler’ oder so was)

Erwartungskonformes Verhalten

• Vermeiden Sie es, den Benutzer zu überraschen!
• Vorhersehbares Verhalten unterstützt die Ausführung einer Bedienführung
• ►Realisierungsbeispiele: Preview z. B. bei Bildverarbeitungsoperationen

Adaptierbarkeit und Adaptivität der Schnittstellen

• Machen Sie die Benutzerschnittstelle adaptierbar, d.h. dem  Nutzer die Möglichkeit geben das Interface so weit wie möglich an seine Vorlieben anpassen zu können
• Berücksichtigung von unterschiedlichen Benutzergruppen und Arbeitsumgebungen Wichtige Aspekte:
• ►"Denken Sie an Anfänger und Experten!"
• ►"Denken Sie an unterschiedliche Fähigkeiten der Benutzer!"
• ►"Denken Sie an unterschiedliche Hardware!"

Angenehme User Experience

►Angenehme erste Erfahrung

• Attraktive visuelle Gestaltung
• Moderne Farben
• Dezente Farbverläufe

Barrierefreie Gestaltung

►Barrierefreie Gestaltung bedeutet durch eine grafische Benutzeroberfläche einer möglichst breiten Bandbreite an Benutzern eine problemfreie Interaktion zu ermöglichen.

►Unterstützung von Benutzern mit:

• Eingeschränkten Sprachverständnis
• Farbsehschwächen
• Eingeschränkter visueller Warhnehmung
• Eingeschränkter Motorik
• Redundante Kodierung von Informationen
• Textuelle Alternativen zu Bildern (Synchronisation beachten!)

►Techniken: TextToSpeech, Negativkontraste, Lupen, Herausfiltern von Zittern der Maus, Höhe bei stationären Systemen beachten (Fahrkartautomaten)

Fokussierung bei der Interface Entwicklung

►Nach der 80:20 Regel verfahren

►Oft genutzte Funktionen zuerst ausarbeiten/implementieren und ausgiebiger testen

Nutzung von Beispielen zur Erklärung der Funktion

►Häufig genutzte Anwendungen oder Szenarien visualisieren, z.B. durch Animationen, Bildanleitungen

►Tutrial bei Erstbenutzung des Systems oder jederzeit über Hilfemenü abrufbar

• Ein System ist lernförderlich, wenn es den Nutzer beim Erlernen der Nutzung des interaktiven Systems unterstützt und anleitet
• Dabei soll er entsprechend seiner Fähigkeiten gefordert werden
• Andererseits soll er bei der Bedienung des Programms unterstützt werden, damit er seine Fähigkeiten und Qulifikationen gezielt und effektiv einsetzen kann

Prinzip der Erwartungskonformität

• Prinzip 7: Machen Sie die Systemzustände und mögliche Aktionen sichtbar und unterscheidbar
• Prinzip 8: Stellen Sie eine erkenntbare Rückmeldung sicher! Unterstützt die Warhnehmung und Interpretation des Systemzustandes

• Langeweile
• Wartezeit
• Soziale Isolation (sich von anderen abgrenzen. z.B. im Zug oder Bus)

"We shape our tools and thereafter our tools shape us."

CLI: Command Line Interface

• Prozess: Statisch
• Interaktion: Getrennt
• Verhalten: Gerichtet
• Paradigma: Erinnerung

GUI: Graphical User Interface

• Prozess: Reagierend
• Interaktion: Indirekt
• Verhalten: Explorativ
• Paradigma: Wiedererkennung

NUI: Natural User Interface

• Prozess: Reagierend
• Interaktion: Direkt
• Verhalten: Kontextuell
• Paradigma: Intuition

OUI: Organic User Interface

• Prozess: Fließend
• Interaktion: Umfassend
• Verhalten: Antizipativ
• Paradigma: Synthese

• Ästhetik: Die Ausführung von Aufgaben wird feierlich zelebriert (bubble smartphone screen)
• Direkte Manipulation: "what you see ist what you get/what you do is what you get
• Entfaltung durch Scaffolding: Funktionalität wird schrittweise entfaltet (Dropdown Menü)
• Interaktion von Kontext: Selbstlokalisierung in Raum und Zeit
• Übernatürliche Fähigkeiten: Die physikalischen Möglichkeiten werden überschritten (Ein Auseinanderziehen der Finger auf Papier hat natürlich keine Auswirkungen, auf dem Smartphone kann man so meist zoomen)
• Soziale Interaktion: Benutzer werden zur gemeinsamen Nutzung motiviert
• Prinzip der Räumlichkeit: Inhalte werden durch Objekte dargestellt
• Nahtlosigkeit: Die direkte Manupilation erzeugt nahtlose Übergänge (nahtlos zwischen verschiedenen Inhalten hin und her "switchen")

Computer als Person

• Der Computer wird als Assistent oder Diener verstanden, Steuerung über Befehle. der Computer ersetzt Menschen
• Interaktion: Sprachkommandos, Text und Sprachschnittstellen, Texteingabe (Beispiele: Microsoft Clippy, Apple Siri, Konsolenprogramme)

Computer als Werkzeug

• Der Computer gibtuns neue Möglichkeiten. Das Werkzeug überzeugt durch Nützlichkeit und Benutzerbedarf. Camputer machen uns effizient
• Interaktion: Metaphern "Der Desktop", graphische Benutzerschnittstellen (Beispiele: Microsoft Office, Email, Dateien und Ordner

Computer als Medium

• Der Computer dient zu unserer Unterhaltung. Das Medium begeistert uns. Spielerisch erleben wir die Interaktion mit den Computern
• Interaktion: Webseiten, Online Shops für Inhalte, Hybride Interfaces GUI/NUI (Beispiele: Youtube, Wii, iTunes

Computer als organisches Material

• Der Computer ist Teil unserer natürlichen Umgebung. Die Interaktion verläuft geräuschlos und nahtlos
• Vorläufer: Nike~, RFID, NFC, GPS, oyester Card

Computer als Infrastruktur

• Der Computer und der Zugang zu Informationen sind Dienste. Der Computer ist physiklaisch und greifbar.
• Vorläufer: Intelligente Umgebungen, Biometrik, organische Intrafaces, Glucosesensoren, Sensoren in Textilien, Pflanzen auf Twitter (Überwachung)

Computer als soziale Währung

• Der Computer und die Informationsnutzung sind ein Abbild der sozialen Identität: "Ich bin was ich konsumiere"
• Vorläufer: Appale Fanboys Super Hipster, Facebook, Linkedin, Check-In auf Fourscquare, digitale Kluft (digitales Leben =/= Realität)

• Wo wird die Anwendung verwendet
• Wann wird die Anwendung verwendet
• Tatsächlich kann man in den Kontext noch sehr viel mehr Punkte miteinbeziehen (Wetter, Neigung des Geräts, Kalendereinträge etc.)

• Schaffen Sie moible Benutzerschnittstellen, welche einzigartig sind. Beispiel: Shazam
• Berücksichtigen Sie in Ihrer mobilen Benutzerschnittstelle eingeschränkte Aufmerksamtkeit und Unterbrechungen, im mobilen Kontext ist man oft abgelenkt und wechselt zwischen der realen und der virtuellen Welt (dip in, dip out)
• Reduzieren Sie die kognitive Anstrengung und die Benutzungshürden in der mobilen Benutzerschnittstelle. Durch Ablenkungen des Kontextes/der Umgebung ist der Arbeitsspeicher des Menschen (das Kurzzeitgedächtnis) schnell gefüllt, also Anforderungen an die Aufmerksamkeit an das System reduzieren.

Shazam oder SoundHound sind einzigartig mobile Anwendungen, weil es sie so auf anderen Sysem nicht gibt, bzw. die Anwendung in anderen als mobilen Kontexten nicht logisch wäre (z.B. zu Hause kennt man die Musik auf seinem Rechner). Diese Programme machen Anwendung von speziell in mobilen Geräten verbauten Hardware (Bsp.: Mikrofon)

1) Scrolling
→ nur bestimmter Ausschnitt wird in konstanter Größe dargestellt
2) Overview und Detail
→ Überblickansicht mit geringer Komplexität
3) Multiple koordinierte Ansichten
→ verschieden komplexe Darstellungen mit unterschiedlichen Inhalt in
mehreren Fenstern
4) Zoomable User Interface
→ stufenloses Zoomen von Inhalten
5) Fokus und Kontext
→ ähnlich Overview und Detail, aber die vereinfachte
Überblicksdarstellung erfolgt direkt in der normalen Ansicht (z. B.
Durch Ausgrauen oder transparent Setzen)

Konvergenz allgemein:

• Die geräteübergreifende Nitzung eines Systems auf verschiedenen Geräten. Die Medien bzw. Systeme die wir auf den Geräten nutzen, sind in der Regel geräteunabhängig

Konvergenz der Technik

• Zusammenspiel zwischen Android Tablet und Android Smartphone. Kovergenz der Technik bedeutet, dass verschiedene Geräte auf ähnlichen Technologien aufbauen. Hier sorgt die ähnliche Technik für eine konvergente Gerätenutzung. Beispiel: Drahtloses Interenet, Bluetooth, Android

Konvergenz der Medien

• Anschauen einer TV Sendung, gleichzeitiges Folgen der Show auf Twitter und das Herunterladen einer iPad-App. Konvergenz der Medien entsteht, wenn Inhalte für verschiedene Geräte und Interaktionsformen aufbereitet werden. Beispiel: Pandora, Netflix, Bravo TV

Konvergenz der Aktivitäten

• Ausführen der gleichen Aktivität auf unterschiedlichen Geräten. Die Konvergenz der Aktivitäten ermölicht das Asuführen einer AKtivität unabhängig vom Gerät. Fokus liegt auf der intuitive Unterstützung der Aktivitäten auf allen Geräten und in allen Nutzungskontexten. Beispiel: Email, Webbrowser, Suche

Kohären(coherence)

• Kombination aus speziellen Benutzungsschnittstellen für einzelne Geräte und geräterübergreifender Konsistenz (Beispiel: Evernote)

Synchronisiert

• Das Konzept greift die Synchronisierung mobiler Geräte mit dem Desktop Rechner auf: Durch das Konzept werden Inhalte geräteübergreifend auf dem aktuellen Stand gehalten (Beispiel: Amazon Kindle)

Geteilt

• Das Konzept nutzt mehrere Geräte (Bildschirme) für die Darstellung von einem komplexen Inhalt

Umschalten (device shiftig)

• Konzept verschiebt das Benutzererlebnis von einem Gerät zu einem anderem Gerät: Benutzer können intuitiv über die Gerätegrenzen hinweg mit Inhalten interagieren

Komplementär (complementary)

• Aus dem Zusammenspiel von zwei oder mehreren Geräten entsteht ein gemeinsames Benutzererlebnis: Jedem Gerät wird in dem komplementären Konzept eine eigene Rolle zugewiesen. Die verschiedenen Rollen(Geräte) ergänzen sich dabei gegenseitig. (beispiel: Fernsehbedienung(Handy) und Fernseher(Desktop Anwendung)

Simultan

• Basiert auf der Gleichzeitigkeit der Gerätenutzung: Die einzelnen Benutzerschnittstellen sind getrennt. Das verbundene Benutzererlebnis setzt sich aus den eizelnen Benutzererlebnissen zusammen. Die Perspektiven der Benutzungsschnittestellen auf die Inhalte sind unterschiedlich (z.B. Spielen auf der Konsole und unterstützende Anwendung auf dem Handy (z.B. Smartglass))

⇒Zusammenfassung
1) Kohärent: “Evernote”, Zusammenhängendes Look & Feel
2) Synchronisiert: “Kindle”, aktuelle Anknüpfungspunkte
3) Geteilt: “Dollar”, Aufteilung von Inhalten
4) Umschalten: “AirPlay”, Verschieben von Inhalten
5) Komplementär: “Scrabble”, Ergänzende Rollen
6) Simultan: “Fussball”, Verschiebung (Echtzeit-) Perspektiven

• Kohärent (und Synchronisiert)

• Computerdearstellung, Ähnlichkeit mit Realität
• Illusion erzeugen, dass diese Umgebung real ist
• Darstellung 3 dimensional
• ►Bewegungen führen zu veränderter Darstellung
• ►mit der Umgebung kann direkt interagiert werden
• Zusammensetzung aus interaktiven Computersimulationen
• Tracking von Position und Aktion: Positionsbestimmung und Interpretation
• künstliches Feedback an Benutzer ⇒ Simulation soll als real erscheinen
• Gefühl der Immersion und Präsenz

Die Darstellung und gleichzeitige Wahrnehmung der Wirklichkeit und ihrer physikalischen Eigenschaften in einer Achtzeit computergenerierten, interaktiven und virtuellen Umgebung

• Morton Heiligs Sensorame (1956): Bei diesem System wurde ein Proband vor einem Bildschirm gestzt auf dem ein Film lief. Passend zum FIlm konnte das System unterschiedliche Sinne ansprechen, wie das Gehör über Soundausgabe, die Haut durch das Erzeugen von Wind oder die Nase durch Freisetzen von Gerüchen
• Ivan Sutherland: ►1965 Idee einer interaktiven Computeranwendung, die ein visuelles, auditives und haptisches Feedback geben sollte. 1968 stellte er ein mechanisch getracktes VR System mit HMD Ausgabe vor. _{►Gilt als Erfinder und Wegbegleiter der VR}
• Fred Brooks: ►Entwickelte in den späten 60ern die Ansätze von Stuherland weiter. ►VR Anwendungen müssen sich mit den Problemen der jeweiligen Anwendungsdomäne auseinandersetzen
• Flugsimulatoren als erste VR Anwendung Anfang der 70er

Displaykonzept in VR:

• Stationäre Displays. Diese Displays sind fest an einem Ort installiert. Ein Beispiel hierfür ist die Cave. Die angezeigten Inhalte reagieren auf die Aktionen des Benutzers
• Tragbare Displays (HMD, Kopf). Das Display bleibt immer vor den Augen. Die Inhalte verändern sich mit der Kopfbewegung (z.B.HMD)
• Tragbare Displays. Inhalte verändern sich bei Bewegung (z.B. Tablet). Je nach Anwendung muss man die Anzeige auf die Position/Rotation des Anzeigegeräts und der Postion und Blickrichtung des Benutzers anpassen (z.B. wenn das Gerät reagieren soll, als schaue man durch ein Fenster)

• VIsuelles Feedback: Die Interaktion der Nutzer wird eben diesen über Bildschirme angezeigt
• Auditives: Manche Anwendungen geben bei bestimmten Aktion einen Ton aus
• Haotisches: Feedback über die Nerven oder die Haut. Das lässt sich z.B. über Exoskelette regelen, die die Bewegung einschränken oder vibrierende Teile am Körper des Nutzers
• Weniger verbreutet sund vestibulare (Balance), Geruchs-, oder Geschmacksfeedback Systeme

• Jedes Anwendungsgebiet hat spezielle Anforderungen an das Tracking
• Bei der Auswahl der verschiedenen Tracking Arten spielen immer folgende Argumente gegeneinander: Präzision, Interferenz-Unanfälligkeiten (siehe eMagnetisches Tracking), Recihweiten und Einschränkungen (Kabel, Bauten etc.)
• Das Tracking ist ein zentraler Bestandteil von AR. Je exakter die Umgebung und alle realen Objekte getrackt werden können, desto besser lassen sich die virtuellen Objetzt in die Umgebung einfügen und desto besser ist letztendlich die Illusion.

• Je nach Anwendung muss ein VR System ein Set von Gesetzen definieren, die in dieser Welt gelten
• Diese können 1:1 aus der realen Welt übernommen sein, z.B. die Schwerkraft oder das Blockieren des Gehens durch Hindernisse
• Es können aber auch eigene Gesetze definiert werden, die es einem z.B. ermöglichen zu fliegen ider dem Nutzer einen Röntgenblick zu geben

• Physikalisch: Bewegung des Körpers (wie in der echten Welt)
• Mitfahren: Nutzer bewegt sich auf vordefiniertem Pfad (keine/geringe Freiheit(
• Durchfliegen: VOllständige Freiheit in allen Dimensionen
• Welt bewegen: Welt greifen und verschieben
• Welt skalieren: Skalierung der Welt und wieder und Weiterskalierung mit Fokus auf einen anderen Punkt, als den, an dem man sich gerade befand
• Setzen lassen: Automatische Navigation zum Ziele (Teleport)

• Selektion von Objekten (mit oben genannten Werkzeugen)
• Manipulation von Objekten (realitätsnah oder realitätsfern (wie z.B. Teleportation)
• Navigation (Wegfindung + Bewegung)

• Es gibt kaum etablierte Interaktionskonzepte für VR
• Man überträgt meist Interaktionsparadigmen aus anderen Systemen un das VR System, das nutzt dessen Möglichkeiten aber mit unter nicht vollständig aus
• Direkte Manipulation: Orientierung an der Realität (Beispiel: Greifen, Bewegen)
• Physikalische Interaktion: Nutzung von bekannten Eingabegeräten (Beispiel: Maus, Tastatur, Joystick)
• Virtuelle Interaktion: Eingabegeräte sind Teil der VR (Beispiel: Slider, Buttons, eingeblendet in der 3D Welt)
• Agentenbasierte Interaktion: Kommunikation über den Agenten, meistens der PC (Beispiel: Planetenname auussprechen um dort hinzufliegen)

• Im Deutschen auch erweiterte/angereicherte Realität, beschäftigt sich mit der Anreicherung und Erweiterung unserer realen Welt durch compurergenerierte Objekte
• Während Virtual Reality eigenständig neue Welten mit eigener Physik schafft, knüpft Augmented Reality direkt an unserer Umgebung an
• Ein AR System fügt dabei in Echtzeit virtuelle Objekte in die wirkliche Welt ein
• Typischer Ablauf:

1. Reale Objekte werden mit der Kamera erfasst
2. Virtuelle Objekte werden vom Computer erzeugt
3. Zusatzobjekte werden positioniert und dargestellt

Unter erweiterter Realität (engl. Augmented Reality) versteht man die computergestütze Erweiterung der Realitätswarhnehmung. Diese Informationen kann alle menschlichen Sinnesmodalitäten  ansprechen. Häufig wird jedoch unter erweiterter Realität nur die visuelle Darstellung von Informationen verstanden, also die Ergänzung von Bildern oder Videos mit computergenerierten Zusatzinformationen oder virtuellen Objekten mittels Einblendung/Überlagerung.