In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Eye Tracking in User Experience Design SoSe 2022
Kurs von Martin Pötter und Prof. Dr. Frank Heidmann
Der Kurs vermittelt das notwendige Grundlagenwissen für die Planung und Durchführung einer Eye Tracking Studie. Ziel ist es, in einem eigenen Projekt Eye Tracking als Evaluationsmethode zur Bewertung der Usability und User Experience eines digitalen oder analogen visuellen Mediums bzw. eines haptischen Objektes einzusetzen. Beispielhafte Projekte umfassen die Analyse einer frei gewählten Website, Software, Mobile App oder AR-Visualisierung. Ebenso ist es möglich, in anderen Kursen – oder frei – gestaltete Entwürfe und Prototypen oder dreidimensionale Objekte im Kurs zu evaluieren. Als Ergebnis dieses Kurses sollen das gewählte Testdesign, die Ergebnisse der Eye Tracking Studie sowie beispielhaft ausgestaltete Redesigns auf Basis der Eye Tracking Daten und ihrer Interpretation dokumentiert werden.
Im ersten Quartal 2022 wurde die neue, überarbeitete Website der Fachhochschule Potsdam nach vielen Entwicklungsmonaten präsentiert. Das war bitter nötig: die alte Webseite hatte große Usability-, Accessibility- und Navigationsprobleme. So war beispielsweise das Hauptmenü völlig unbrauchbar:
Um diesen und anderen Problemen die Stirn zu bieten, wurde eine Agentur damit beauftragt, die Hochschulwebseite neu umzusetzen und dabei möglichst viele der bestehenden Probleme aus dem Weg zu räumen. Diese neue Version hebt sich rein visuell klar von der Vorgängerversion ab.
Unsere Eye Tracking-Studie befasst sich mit dieser neuen Webseite. Wir wollen – grob gesagt – herausfinden, ob sie „funktioniert“. Aus einem vorherigen Kurs, fh-potsdam.de/ Ein Redesign, wissen wir aber, dass es zahllose relevante Zielgruppen gibt. Um die Auswertung der Studie zu erleichtern, empfiehlt es sich jedoch, jede Zielgruppe getrennt zu untersuchen. Deshalb haben wir uns im Rahmen dieses Semester-Projektes auf die aus unserer Sicht wichtigste Zielgruppe der Webseite fokussiert, die der Studierenden.
Um „herausfinden, ob sie funktioniert“ genauer zu definieren, haben wir unsere Untersuchung auf Hypothesen aufgeteilt. Diese Hypothesen sind durch qualitative Analysen der Webseite, in Verbindung mit einer Konkurrenzanalyse anderer Hochschul-Webseiten, entstanden. Zusammenfassbar sind sie in drei Annahmen:
Die einzelnen Elemente der Webseite sind zu groß. Hauptsächlich bezieht sich das auf Überschriften (H1 bis H3) und auf Bilder. Die Größe der Elemente hat mehrere Nebeneffekte, größtenteils zeichnet sich das aber in unnatürlich langen Scrollwegen ab. Heißt: die Nutzenden müssen erst lange über irrelevante und zu groß dargestellte Inhalte scrollen, bevor sie die Information erreichen, die sie suchen.
Die Navigationselemente sind inkonsequent. Obwohl es eine visuelle Verbesserung gegenüber der alten Webseite ist, ist das Hauptmenü weiterhin schwierig navigierbar. Das führt dazu, dass Probanden die gesuchten Seiten schlicht gar nicht finden – weder über die Suche, noch über das Hauptmenü. Teilweise werden interaktive Inhalte auch gar nicht als solche wahrgenommen, weil sie inkonsequent gestaltet sind.
Die gesamte Suche und Subnavigation sind zu voll. In Kombination mit dem ersten Punkt – zu große Elemente – sorgt das für ein unlesbares Interface. So zeigt die Suche beispielsweise unbegrenzt viele Suchergebnisse mit komplettem Titel oder nicht eindeutigen Bezeichnungen an und raubt so jede Möglichkeit, die Suche effektiv zu nutzen.
Um diese Hypothesen zu testen, haben wir mit sechs Probanden einen Eye-Tracking-Durchgang durchgeführt. Für diesen Durchgang haben wir acht realistische Szenarien identifiziert, denen Studierende, Mitarbeitende und weitere relevante Zielgruppen mindestens einmal während Ihrer Zeit an der Fachhochschule begegnen.
Vor allem die vier ausgezeichneten Szenarien entsprechen – aus Studierenden-Sicht – typischen Anwendungsbeispielen der Webseite und wurden mit allen Proband:innen durchgeführt.
Das Recruitment der Probandinnen hat im Hochschulkreis stattgefunden und hatte, abgesehen von einem möglichst durchmischten Studiengangsbild, nur die Anforderung, dass die oder der Proband:in keine Brille trägt, um optimales Tracking zu gewährleisten. Für die Planung des Test-Tages haben wir ein gemeinsames Dokument genutzt, in dem Änderungen am Ablauf und andere Informationen zu den Proband:innen geteilt werden konnten.
Für das Vorab-Testen der Hardware und der störungsfreien Einrichtung des Raumes (Rollos runter, Lichter aus, andere Störquellen identifizieren und weg räumen) haben wir am Testtag eine Stunde geplant, und für alle darauffolgenden Testzeiträume 30 Minuten. Für Nachbesprechungen und als Pufferzeit waren die Proband:innen aber im 45-Minuten-Rhythmus eingeteilt; eine Zeitplanung, die für uns gut funktioniert hat.
Die Proband:innen wurden im Vorfeld an eine zuständige Testleitung aufgeteilt, also einen von uns dreien. Dabei war uns wichtig, dass die Testleitung keinen persönlichen Bezug zu ihren Proband:innen hat. Bei den Tests wurden die Proband:innen in den Raum gebeten, nachdem die anderen beiden Testleitungen bereits im Kontrollraum saßen, um die Proband:innen möglichst wenig zu beeinflussen.
Bevor der eigentliche Test durchgeführt wurde, haben wir eine kurze Vorabfrage geführt, mit der wir grobe Informationen über unsere Proband:innen eingeholt haben. Der mündlich durchgeführte Fragebogen bestand aus den folgenden Fragen:
Angabe zum Testzeitraum zur Zuordnung
Außerdem haben wir um eine kurze Einverständniserklärung gebeten, die uns berechtigt, neben den Eye Tracking-Ergebnissen auch Fotos der Proband:innen in dieser Dokumentation zu nutzen. Hier stand natürlich allen Teilnehmenden frei, nur der Nutzung der Eye Tracking-Daten zuzustimmen und auf die Nutzung der Fotos und Videos zu verzichten.
Für das eigentliche Eye Tracking haben wir ein Leihgerät der Hochschule genutzt, eine Tobii Pro Fusion Bildschirmleiste mit einer Datenrate von 120 Hz. Die Bildschirmleiste war mit dem Test-Laptop verbunden und an einem 27 Zoll Monitor verbunden, vor dem die Proband:innen Platz genommen haben.
Die genutzte Software, Tobii Pro Lab, lief auf zwei Laptops, die ebenfalls zum Inventar des UX Labs gehören. Die Testleitung, die die Proband:innen durch die Kalibrierung des Eye Trackers und durch den Test geführt hat, saß während des gesamten Testes neben den Proband:innen und hat die Ergebnisse live auf dem Kontroll-Laptop verfolgt. Die beiden anderen Teammitglieder saßen im Kontrollraum des UX Labs und haben per Telefonat Hinweise oder Punkte, die die Testleitung übersehen hat, an den Kopfhörer im Ohr der Testleitung weitergegeben. So konnten wir schon ab Test 01 Fehler oder Missverständnisse im Testablauf unterbinden.
Mit allen Teilnehmenden wurde der gleiche Ablauf durchgeführt. Nach dem Fragebogen und einer groben Einführung, über welches Thema wir sprechen werden, wurden die Teilnehmenden vor dem Eye Tracker positioniert und gebeten, sich ab sofort nicht mehr zu bewegen und möchtest wenig zu reden.
Bevor der eigentliche Test ablief, wurde der Eye Tracker mit der inkludierten Software kalibriert. Dafür müssen die Proband:innen einem Punkt, der sich über den Bildschirm bewegt, mit den Augen folgen. Ist diese Kalibrierung erfolgreich, kann die Testleitung mit dem Test fortfahren. Das war bei uns immer der Fall, wir mussten die Kalibrierung nie wiederholen – auch nicht bei einem Probanden, der eine Brille trug.
Im Anschluss wurden alle Proband:innen durch die einzelnen Szenarien geführt. Dafür wurde in das Thema eingeleitet und dann eine konkrete Aufgabe gegeben, die die Teilnehmenden von der Startseite aus erfüllen sollten. Ein konkretes Beispiel für diesen Ablauf ist diese Abfolge, die die Testleitung den Teilnehmenden erklärt:
Einleitung → „Du bist Design-Studierende:r im zweiten Studienabschnitt. Es sind noch rund drei Wochen bis zum Start des Sommersemesters, und Du willst Dir schon mal Kurse raussuchen, die Du gerne machen möchtest. Dafür suchst Du das Vorlesungsverzeichnis für den zweiten Studienabschnitt.“
Task → „Finde auf der Webseite der Hochschule das Vorlesungsverzeichnis für den Fachbereich Design, konkret für den zweiten Studienabschnitt.“
Die Testleitung hat dann mehrere Merkmale beobachtet und schriftlich festgehalten. In diesem Kontext war für uns zum Beispiel wichtig, welchen Weg der Studierende nimmt (über die Suche, über das Hauptmenü, …) und wie viele Anläufe sie oder er braucht, um zum gewünschten Ziel zu kommen.
Damit der Eye Tracker nicht durch Unterhaltungen in seiner Genauigkeit gestört wird, haben wir die Proband:innen gebeten, während des Tests nicht zu reden. Um trotzdem die Gedanken und Entscheidungen zu verstehen, haben wir gemeinsam mit allen Proband:innen im Anschluss an den eigentlichen Test eine Wiederholung ihrer Aufnahmen durchgeschaut und die Teilnehmenden gebeten, zu begründen, warum sie an der jeweiligen Stelle nach der geforderten Information gesucht haben.
Bei den ersten Tests ist klar geworden, dass das »Problem Brille« in diesem Test-Kontext keine große Rolle spielt. »Problem Brille« bezieht sich dabei auf die technische Ungenauigkeit, die Eye Tracker haben können, wenn die Proband:innen eine starke Brille tragen. Das Ergebnis ist dann verfälscht und ungenau, und lässt sich nicht mehr gut mit den Ergebnissen der anderen (brillenlosen) Testteilnehmenden vergleichen. Beide Brillenträger:innen, die bei unserem Test mitgemacht haben, konnten ihre Brillen ohne jegliche Verzerrung der Testergebnisse benutzen.
Allerdings hat uns ein schwerwiegendes, technisches Problem getroffen; eines, das wir bis zur Dokumentation trotz ausführlichem Kontakt zum Tobii-Support nicht lösen konnten. Teile der Testergebnisse haben erfolgreich die Augenbewegungen der Teilnehmenden aufgezeichnet, aber nicht die dazugehörige Bildschirmaufnahme mit den Ergebnissen verknüpfen können. Das hat dazu geführt, dass rund zwei Drittel der Ergebnisse für uns unbenutzbar waren.
Auch eine längere, komplizierte Unterhaltung mit dem Support der genutzten Software war fruchtlos, und wir konnten mit nur zwei vollständigen Video-Dateien von Proband:innen arbeiten. Ärgerlich ist, dass wir die Daten zwar als Raw-Files haben, aber damit nicht arbeiten können, weil die Software versagt.
Das hat wenig Einfluss auf die Qualität unserer Handlungsempfehlungen, weil wir die qualitativen Ergebnisse und Heatmaps auch aus Audioaufnahmen und Notizen ziehen können. Eine praktische Untermalung mit Video-Ausschnitten der Proband:innen wäre aber natürlich ein Meinungsverstärker.
Wir sind im Vorfeld davon ausgegangen, dass die einzelnen Elemente der Webseite zu groß sind und unter anderem die Scrollwege zu lang werden, um zu untenstehenden Informationen zu gelangen. Diesen Effekt konnten wir in unserer Studie wiederfinden. Die plakative Gestaltung der Webseite führt jedoch auch dazu, dass zum Teil gar nicht mehr gescrollt wird. So zeigt die Heatmap der Startseite sehr deutlich, dass der Fokus wie erwartend auf dem Menü liegt, aber ansonsten kaum »neugieriges« Scrollen stattfindet.
In der Regel wird nicht über die vier Titelkacheln hinaus gescrollt und Inhalte darunter werden nicht wahrgenommen. Auf der Suche nach den Informationen, um die gestellten Aufgaben zu lösen, wird oft die »Lösung« mehrmals überlesen. Dies lässt darauf schließen, dass der mangelnde Weißraum sowie die überdimensionierten Elemente die Lesbarkeit erschweren und die gesuchte Information übersehen wird. Einer der Proband:innen brachte sein Bedürfnis bei der Nutzung der Webseite auf den Punkt: „Also ich hätte gefühlt gerne noch einen Meter zurück gehen können“.
Als schnelle Lösung empfehlen wir genau diese Möglichkeit: Herauszuzoomen und damit Text- und Bildelemente optisch auf eine übliche Lesegröße zu verkleinern. Leider ist dies in der aktuellen Version der Webseite nicht möglich, denn die Elemente werden nicht nur kleiner, sondern verschieben sich zusätzlich an die Außenseite ihrer Divbox (entsprechen ihrer programmierten Ausrichtung).
Manche Elemente reagieren gar nicht auf das Verkleinern der Seite und stehen dann in keinem Verhältnis mehr zu den anderen verkleinerten Elementen. Um also diese schnelle Lösung wirklich nutzen zu können, müsste die Programmierung der Webseite hier angepasst werden.
Des Weiteren gingen wir davon aus, dass die Navigationselemente zu inkonsequent gestaltet sind und somit das Navigieren durch die Seiten unnötig erschweren. Während unserer Untersuchung haben wir festgestellt, dass sowohl die Menü- als auch die Buttongestaltung der Webseite nur bedingt in der Benutzerführung helfen.
So haben wir beobachtet, dass das Menü nicht als statisches, aufklappbares Menü verstanden wird: „Den Pfeil, dass man das ausklappen kann, habe ich auch nur durch Zufall gefunden“, sagte ein Proband, und in der Regel nur in der obersten, sichtbaren Ebene genutzt wird. Die Unterseiten werden durch Anklicken des Hauptmenüs geöffnet, dort wird dann nach weiteren Verlinkungen zum Zielinhalt gesucht.
Es konnte festgestellt werden, dass sich einige Proband:innen über die verlinkten Unterseiten navigierten und dabei das Hauptmenü komplett außer Acht ließen.
Des Weiteren gibt es ein Sekundärmenü, was nur im Zusammenhang mit den Studiengängen auftaucht (beispielsweise auf der Master Design-Unterseite) und beim nach unten Scrollen an der Hauptmenüzeile andockt. Dieses Sekundärmenü wird während unserer Studie nicht wahrgenommen.
Die inkonsequente Buttongestaltung beziehungsweise Interactiondesign fällt vor allem im Kontenxt des Vorlesungsverzeichnisses auf. Aufgabe war es, das Vorlesungsverzeichnis für den zweiten Studienabschnitt im Fachbereich Design zu finden. Die Proband:innen fanden zwar die Seite auf der alle Vorlesungsverzeichnisse verlinkt sind, nahmen jedoch nicht oder nicht auf Anhieb den Link zum Vorlesungsverzeichnis des Fachbereichs Design wahr.
Im Banner, der die Verlinkungen zu den Vorlesungsverzeichnissen für die Fachbereiche der FHP enthält sind zwei verschiedene Verlinkungstypen zu erkennen: ein Link im Fließtext für den Fachbereich Design, gekennzeichnet durch Unterstreichung, und ein Button für alle weiteren Fachbereiche. In der Heatmap wird deutlich, dass die Proband:innen durch diese stark unterschiedliche Designgewichtung der Verlinkungen den Link im Fließtext nicht erkennen.
Eine geschickte, unkomplizierte Lösung wäre, einen Secondary Button für den Fachbereich Design einzuführen, der neben dem Hauptbutton für alle Fachbereiche steht. Hier würde, so in der Theorie, auf einen Blick beide Verlinkungen der Vorlesungsverzeichnisse gefunden werden können.
Die Überladung der Seite kann man an dem Vergleich der Ergebnisse von Aufgabe 3 und 5 erkennen. In beiden fragten wir nach Öffnungszeiten, einmal die des Dekanats, einmal die der Bibliothek. Man könnte erwarten, dass bei gleicher Struktur die Inhalte gleich schnell zu finden sind.
Dem war nicht so: Die Öffnungszeiten der Bibliothek wurden von allen Proband:innen beim ersten Anlauf gefunden. Die Öffnungszeiten des Dekanats vom Fachbereich Design hat keine einzige Testperson auf Anhieb gefunden; fünf von sechs Personen nicht einmal nach drei Anläufen. Nur eine der sechs Proband:innen hat es im dritten Anlauf geschafft; Und das auch nur per Zufall, wie die Person in der Nachbesprechung erklärte.
Das ist zwar einerseits eine Frage zur Konsequenz der Inhalte, allerdings haben wir zuerst nach der Öffnungszeiten des Design-Dekanats gefragt, die Ergebnisse können also nicht durch das Lernen eines bestimmten Patterns verfälscht worden sein. Gut sichtbar wird die extreme Fülle der Seite an der Heatmap der summierten Fixationen aller Proband:innen.
Die Heatmap der Bibliotheksseite zeigt einen deutlichen Fixationsschwerpunkt auf der gesuchten Information. Im Gegensatz dazu steht die Heatmap der Seite des Fachbereichs Design: Sie zeigt gar keine Verdichtung auf. Die Getesteten fokussierten neben dem Untermenü keine weiteren Informationen auf der Seite.
Das schwere Auffinden der Öffnungszeiten des Dekanats liegt daran, dass sie sich hinter einer Kachel versteckt. Auf der Kachel befinden sich viele Informationen, die teilweise auf weitere Seiten verlinken. Aber keine der Informationsinhalte verweist konkret auf Öffnungszeiten. Diese sind unerwarteter Weise hinter dem Namen der zuständigen Person verlinkt.
Unsere naheliegende Lösung ist, die Informationen eine Ebene höher zu stellen und, identisch zur Bibliothek, auf einer Kachel darzustellen.
Einige Male haben die Proband:innen nach der gestellten Aufgabe die Suche bemüht, um den fraglichen Inhalt zu finden. Jeder Testperson haben wir das einmal erlaubt. Danach sollten sie auf das Nutzen der Suche verzichten.
Dabei fiel auf, wie wenig hilfreich die Suche bei den Aufgaben war. Ein Proband kommentierte seinen Such-Versuch mit „Viel zu viel Text und überhaupt nicht das, was ich gesucht habe“.
Unser Vorschlag hier wäre, die Suchergebnisse im Dropdown auf fünf zu begrenzen und weitere Metadaten zu den einzelnen Ergebnissen anzuzeigen, wie Fachbereich und Bereich. Dass diese Informationen vorhanden sind, sieht man, wenn man in der Suche Enter drückt und auf der Übersichtsseite der Ergebnisse landet.
Während der Befragung der Proband:innen und in unserer späteren Analyse der Heatmaps sind uns weitere Schwierigkeiten der Webseite aufgefallen. Zum einen bemerkten viele der Proband:innen an, dass sie hinter den Bezeichnungen des Menüs und der Button zum Teil andere Inhalte erwartet haben. Dies führt zu einer längeren Suche und die Frustrationsrate stieg deutlich.
Des Weiteren ist uns in der Heatmap zum Vorlesungsverzeichnis aufgefallen, dass eine überproportionale Fixation auf dem Fachbereich STADT/BAU/KULTUR lag. Dies lässt sich damit begründen, dass der Fachbereich mit Versalien geschrieben ist und somit deutlich betont wird. Daneben fallen die anderen Fachbereiche, bzw. der Fließtext des Banners nicht mehr ins Gewicht und die Informationen gehen als nicht wichtig verloren. Da die Auszeichnung der Verlinkung des Vorlesungsverzeichnisses zum Fachbereich Design im Vergleich geringer betont ist, wird auch sie (zusätzlich zu obiger Buttonproblematik) nicht mehr als wesentliche Information wahrgenommen.
Neben den konkreten Handlungsempfehlungen, die sich entweder auf konkrete Verbesserungsvorschläge oder größere Problemfelder beziehen, sind uns einige allgemeinere Themen aufgefallen, die mit größeren Änderungen einhergehen würden. Teilweise beziehen diese Empfehlungen auch bereits genannte Problemfelder mit ein und sollen als Zusammenfassung dienen, falls unsere Forschungsergebnisse für die tatsächliche Verbesserung der Seite herangezogen werden sollten.
Grundsätzliche Handlungsempfehlungen für eine bessere Usability der Hochschulwebseite wären also:
Die Suchergebnisse übersichtlicher gestalten. Dies beinhaltet die eindeutige Benennung von Unterseiten und die konkrete Einordnung der Inhalte zu den Zielseiten. Die jetzige Darstellungsweise in Form einer unbegrenzten Liste ohne weitere Informationen neben dem Seitentitel, ist für die Suche über die Startseite ohne Nutzung der zweiten Suchseite praktisch unbenutzbar.
Unser Vorschlag aus ‘Annahme 3’ würde dieses Problem ohne zusätzlichen Aufwand beheben: Die einfache Integration der Bereiche bindet weitere bereits vorhandene Informationen ein. Es wäre also eine einfache, aber wirkungsvolle Lösung für die Suche.
Ein generell geltender inhaltlicher Seitenaufbau. Ein gutes Beispiel für dieses Problem ist der Vergleich zwischen den Öffnungszeiten der Bibliothek und die des Dekanats des Fachbereiches Design. Eine grundlegende Information wie die Öffnungszeiten sollten möglichst einfach zu finden sein, also einem (seitenweit) bekannten Pattern folgen. Wenn diese Information auf der einen Seite direkt unter dem Header in einer Kachel auf der linken Seite steht, dann sollte diese Information überall genau dort auffindbar sein.
Ein generell geltendes Seitenlayout, beispielsweise eine technische Vorgabe des gesamten Header-Bereiches, würde das bei allen Content-Arten erzwingen. So könnten Bearbeitende nicht entscheiden, ob die Kachel dort eingesetzt wird, sondern nur, welcher Inhalt angezeigt wird.
Ein navigierbares Hauptmenü einbauen. Wie die Proband:innen-Interviews gezeigt haben, wird das Hauptmenü quasi nicht als Navigationsmöglichkeit wahrgenommen. Das liegt vor allem an einem kleinen User Interface-Problem: Die Pfeile, die das mögliche Ausklappen signalisieren sollen, sind zu klein und stehen weit entfernt vom zugehörigen Menüpunkt.
Eine einfache Lösung wären Pfeile, die entweder größer sind, näher an der zugehörigen Information stehen oder die gleiche Linienstärke haben wie die Schrift. Eine Alternative wäre aber auch eine andere Interaktion, die beim Klick auf ein übergeordnetes Thema (also beispielsweise »Studium & Weiterbildung« oder »Hochschule & Karriere«) gestartet wird: Anstelle von einer vollflächigen Navigation zu der Unterseite für den Bereich, könnte das Untermenü aufgehen. Das würde allerdings nötig machen, dass die übergeordnete Unterseite als Startseite für diesen Bereich im Untermenü aufgenommen wird.
Wichtiger Content, der sich gerade auf der Unterseite befindet, sollte bestenfalls in eigene Unterseiten aufgeteilt werden, um den Nutzenden alle Informationen anzubieten.