Bauen für UX: Verbindung von Blicken mit UI-Objekten

Sie haben beschlossen, dass es an der Zeit ist, die Benutzereingabe (UI) mit Eye Tracking auszuprobieren. Vielleicht haben Sie die Eye Tracking-Technologie in Produkten von Sony, Meta oder Apple gesehen und sich gedacht: "Wäre es nicht toll, wenn...", während Sie sich die Steuerung von Anwendungen und die Interaktion mit Objekten durch Augenbewegungen vorgestellt haben. Schließlich gibt es nichts Schnelleres als einen Blick zu werfen, um einen Gegenstand auszuwählen.

Wenn Sie erst einmal mit der Blickeingabe experimentieren, werden Sie feststellen, dass es nicht wie bei der Gestaltung für eine Maus oder einen Touchscreen ist. Ihre Augen sind ständig in Bewegung. Selbst wenn sie ruhen (d. h. fixiert sind), gibt es kleine, unwillkürliche Bewegungen, über die Sie in Eye Movement: Arten und Funktionen erklärt .

Außerdem besteht immer eine gewisse Unsicherheit darüber, wohin der Benutzer tatsächlich schaut und wohin der Eye Tracker den Blick meldet. Das Ausmaß des Fehlers hängt sowohl von der Eye Tracking Hardware als auch von der Person ab, die verfolgt wird. Diese Eigenschaften der Augenbewegung und die Qualität des Eingabesignals stellen eine besondere Herausforderung bei der Entwicklung von blickgesteuerten Schnittstellen dar.

In diesem Artikel erfahren wir, wie das grundlegende UI-Konzept des Zeigens bei der Erstellung von Schnittstellen mit augenbasierten Eingaben besonders behandelt werden muss.

Worauf schaut der Nutzer?

Die grundlegende Funktion eines Eye Trackers besteht darin, dem System mitzuteilen, wohin der Nutzer schaut. Im Allgemeinen wird diese Information durch einen Vektor im Raum bestimmt, der vom Auge ausgeht, den Blickvektor . Der Blick des Benutzers kann den Anwendungen als Punkt auf dem Bildschirm, als Blickposition , zur Verfügung gestellt werden. Wenn sich der Blickvektor auf ein interaktives Element ausrichtet, wird es fokussiert.

Die einfachste Implementierung der Blicksteuerung für eine bildschirmbasierte Benutzeroberfläche würde darin bestehen, die Blickposition anstelle der Mausposition zu verwenden und dann einen Mechanismus zur Aktivierung, z. B. eine Geste oder einen Tastendruck, hinzuzufügen. Die einfachste Version der Blicksteuerung in 3D wäre ein Strahlenwurf aus dem Blickvektor statt aus dem Controller oder der Hand. Obwohl der Ansatz einfach ist, gibt es Gründe, warum der Blick nicht als Ersatz für eine handbasierte Zeigereingabe geeignet ist.

Schauen wir uns einige wichtige Unterschiede an:

Wie unterscheidet sich der Blick von der Maus oder der Berührung?

Geringste Auflösung und Stabilität - Gemessene Blicke können von den tatsächlichen Blicken um
mehrere Grad oder mehr abweichen. Genauso wie Touch-Benutzeroberflächen größere Widgets als mausgesteuerte Benutzeroberflächen benötigen, um Eingaben in Fingerspitzengröße zu ermöglichen, benötigen blickgesteuerte Benutzeroberflächen noch mehr Platz für jedes Widget. Bedenken Sie, dass eine typische Touchscreen-Tastatur so breit wie ein Smartphone ist, während eine typische blickgesteuerte Tastatur einen Tablet-Bildschirm in voller Größe überspannt.

• Stellen Sie sicher, dass die blickfähigen Steuerelemente groß genug sind und einen ausreichenden Abstand haben.

  Erfahren Sie mehr über Scene Design

Lücke zwischen menschlicher und Eingabeauflösung - Die Augen können sich auf winzige Details konzentrieren, genau wie ein Mauszeiger, aber Eye Tracking kann nicht die Genauigkeit einer Maus erreichen. Der herkömmliche Mauszeiger auf dem Bildschirm wäre für die Verwendung mit Blickeingabe ungeeignet, da er fast immer von der Stelle, auf die der Benutzer schaut, versetzt wäre und eine visuelle Ablenkung in der Nähe des Fokusbereichs darstellen würde. In jedem Fall muss den Menschen nicht gesagt werden, wohin sie schauen.

• Visualisieren Sie nur die Wirkung des Blicks. Visualisieren Sie dem Benutzer nicht die Blickposition.

  Erfahren Sie mehr über Visual Feedback

Eingabe ist sekundär zum Scannen - Der Blick neigt dazu, sich überall hin zu bewegen, da er in erster Linie visuelle Informationen scannt. Feedback- und Aktivierungsmechanismen sollten mit der Abtastaktivität kompatibel sein, um das Midas-Touch-Problem zu vermeiden, bei dem Benutzer Objekte unbeabsichtigt aktivieren, indem sie sie anstarren.

• Verwenden Sie die explizite Aktivierung, um versehentliche Aktionen zu vermeiden.

  Erfahren Sie mehr über Blicke mit expliziter Aktivierung

Eine ausführlichere Diskussion über UI-Design mit Eye Tracking finden Sie unter
Interaction Design Fundamentals .

Wie gehe ich am besten mit der Ungenauigkeit des Eye Trackers um?

Sie fragen sich vielleicht, wie Sie die Frustration des Benutzers vermeiden können, wenn die Genauigkeit des Eye Tracking gering ist und es keinen sichtbaren Zeiger gibt, der dem Benutzer bei der Selbstkorrektur hilft. Sehen wir uns verschiedene Techniken an, um mit ungenauen Blickinformationen umzugehen.

Lösung Nr. 1 - Größere, zentral gewichtete Ziele

Größere Ziele sind leichter zu fokussieren, allerdings besteht bei Blickpositionen in der Nähe des Randes immer noch die Gefahr, dass der Blick über das Ziel hinausgeht. Daher sollten sich die visuell auffälligsten Merkmale in der Mitte des Ziels befinden, um den Blick des Nutzers vom Rand wegzulenken.

Vorteile

• Einfach und intuitiv zu implementieren

Benachteiligungen

• Beeinflusst die Ästhetik der Benutzeroberfläche, da die Bedienelemente klobiger aussehen

• Verbraucht mehr Platz auf dem Bildschirm

• Geringere Effektivität bei größeren Entfernungen in 3D-Benutzeroberflächen - Ziele schrumpfen mit der Entfernung

Wann zu verwenden

Wenn das Design flexibel ist, ist dies eine einfache und robuste Lösung.

Lösung Nr. 2 - Erweitertes Treffergebiet

Die aktive Zone eines Blickziels wird unsichtbar vergrößert, um Blickpositionen zu erfassen, die knapp außerhalb der visuellen Begrenzung liegen. Diese Technik wird in 2D- und 3D-Schnittstellen verwendet, damit kleine oder unregelmäßig geformte Ziele leichter aktiviert werden können. Der erweiterte Bereich ist transparent, so dass sich die scheinbare Größe des Ziels nicht ändert.

Vorteile

• Unsichtbar, respektiert das visuelle Design

• Einfach zu implementieren durch Hinzufügen aktiver Ränder oder Vergrößern des 3D-Kollisionsnetzes

Benachteiligungen

• Nicht geeignet für überlappende oder eng beieinander liegende Ziele - der leere Raum um die Ziele wird zum interaktiven Gebiet

• Es ist schwierig, einen freien Raum um Objekte in 3D zu gewährleisten - transparente Kollisionsnetze im Vordergrund können sichtbare Ziele im Hintergrund blockieren

• Die richtige Skalierung von Rändern und Kollisionsnetzen erfordert Experimente

Wann zu verwenden

Aktive Ränder sind ideal für rasterbasierte 2D-Benutzeroberflächen ohne überlappende oder sich berührende Ziele. Es kann mit 3D funktionieren, wenn die Vorbehalte akzeptabel sind.

Lösung #3 - Sichtbare Blickrichtung

Obwohl aus den oben genannten Gründen problematisch, kann die Visualisierung der Blickrichtung unter bestimmten Umständen sinnvoll sein, z. B. wenn die Benutzeroberfläche Blickabweichungen toleriert.

Vorteile

• Die Rückmeldung der Nutzer stärkt im Allgemeinen die Nutzungsstrategien

Benachteiligungen

• Ablenkend und unnatürlich

• Kann Benutzer frustrieren, die größere Blickpositionsabweichungen haben

• Kann mehr Ärger machen als es wert ist

Wann zu verwenden

Selten, wenn überhaupt. Wenn das Interaktionsdesign von einer groben Schätzung des Blicks profitiert, z. B. um einen Bereich des Bildschirms hervorzuheben, kann die Anzeige eines Spotlight-Effekts um die Blickposition herum Feedback für UI-Vorgänge liefern und gleichzeitig die Ablenkung begrenzen. Der hervorgehobene Bereich sollte groß genug sein, um den tatsächlichen Blick des Benutzers zu erfassen.

Lösung #4 - Explizite Disambiguierung

Wie bei Bestätigungsdialogen wird der Benutzer zur Klärung oder Bestätigung aufgefordert, wenn das System sich der Absicht des Benutzers nicht sicher ist.

Vorteile

• Bewältigung schwieriger Fälle, in denen eine Zielclusterung unvermeidlich ist

• Vertraute Interaktionsmuster, die leicht erlernt werden können

• Potenzielles Unterscheidungsmoment bei guter Gestaltung

Benachteiligungen

• Komplexität von Design und Entwicklung

Wann zu verwenden

Ziehen Sie diese Technik in Betracht, wenn das Layout der visuellen Ziele nicht kontrolliert werden kann und UI-Dialogfunktionen verfügbar sind. Zur Klärung kann ein nicht-sichtbarer Eingabemechanismus wie Sprache oder Körpergesten verwendet werden. Außerdem kann kontextsensitives Verhalten mögliche Ziele identifizieren und filtern, um die Komplexität des Dialogs zu minimieren.

Lösung #5 - Algorithmus für maschinelles Lernen

Bei dieser Technik wird ein Algorithmus verwendet, der Blickeingaben und Szeneninformationen empfängt, um festzustellen, auf welches Objekt der Benutzer blickt. Der Algorithmus sollte idealerweise so abgestimmt sein, dass er eine Vielzahl von Szenarien mit Objekten unterschiedlicher Größe an verschiedenen Orten und möglicherweise in Bewegung bewältigen kann.

Vorteile

• Unsichtbar, respektiert das visuelle Design

• Keine UI-Einschränkungen in Bezug auf Mindestzielgrößen, freie Zonen oder überlappende Ziele

• Keine Notwendigkeit, die Designparameter für beste Ergebnisse zu optimieren

Benachteiligungen

• Zusätzlicher Rechenaufwand, der zusätzliche Ressourcen erfordern kann

• Der Algorithmus ist eine Blackbox und nicht unbedingt übertragbar

Wann zu verwenden

Wenn der Algorithmus verfügbar und rechnerisch für die Anwendung geeignet ist, lässt sich diese Lösung schnell implementieren und verbessert sofort das Benutzererlebnis. Eine Implementierung dieser Technik ist G2OM (Gaze to Object Mapping) von Tobii, das für Unity-Anwendungen verfügbar ist.

Zusammenfassung

Augengesteuerte Benutzerinteraktion ist eine natürliche Entwicklung der Vermenschlichung von Computererlebnissen. Natürliche menschliche Augenbewegungen und die variable Signalqualität von Eye Tracking-Geräten stellen neue Herausforderungen für ein effektives UI-Design dar. Designer und Entwickler können den Erfolg, die Effizienz und den Komfort der Benutzer verbessern, indem sie spezielle UI-Techniken für die Blickeingabe implementieren.