Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Funktioniert die neue Hochschulwebseite eigentlich? — Eine 👀-Studie

Funktioniert die neue Hochschulwebseite eigentlich? — Eine 👀-Studie

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.

Kontext

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:

gif001.gifgif001.gif

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:

Drei Annahmen

1. Zu groß

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.

2. Zu inkonsequent

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.

3. Zu voll

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.

Durchführung

Szenarien

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.

  • Die acht entwickelten Szenarien tragen diese Kurzbeschreibungen:
  • Eine Studieninteressierte macht demnächst Abitur und möchte sich über einen Studiengang informieren.
  • Ein Hochschulangehöriger sucht nach verschiedenen finanziellen Projektfördermöglichkeiten.
  • Ein:e derzeit Student:in sucht Kontaktmöglichkeiten und Öffnungszeiten für das für ihn zuständige Dekanat.
  • Eine hochschulexterne Person sucht nach der Adresse der Hochschule.
  • Ein:e Designstudent:in sucht nach dem aktuellen Vorlesungsverzeichnis für den zweiten Studienabschnitt.
  • Ein*e Student:in möchte die Öffnungszeiten der Bibliothek herausfinden.
  • Ein aktuell im Bachelorstudium befindliche:r Student:in überlegt, einen Master an der Hochschule anzuschließen. Dazu sucht er Kontaktdaten einer Person, die dazu beraten kann.
  • Ein:e Mitarbeitender:in will Informationen über die aktuelle Corona- und Home Office-Regelung herausfinden.

Vor allem die vier ausgezeichneten Szenarien entsprechen – aus Studierenden-Sicht – typischen Anwendungsbeispielen der Webseite und wurden mit allen Proband:innen durchgeführt.

Testumgebung

Organisation

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.

img002.pngimg002.png

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

  • „Wie gut findest du dich auf Webseiten zu recht, die du zum ersten Mal besuchst?“
  • „Hast du schon mal eine Website erstellt oder verwaltest du aktuell eine Website regelmäßig (z.B. einen Wordpress Blog)?“
  • „Welches Endgerät nutzt du normalerweise, wenn du im Internet etwas nachschauen willst?“

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.

img003.pngimg003.png

Hardware

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.

img004a.pngimg004a.png

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.

img005.jpgimg005.jpg

Durchführung

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.

img006.jpgimg006.jpg

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.

Technische Probleme

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.

Analyse & Auswertung

Annahme 1: zu groß

Schrift + Bildsprache zu massiv

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

img301.pngimg301.png

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.

gif009.gifgif009.gif

Annahme 2: zu inkonsequent

Menü

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.

gif010.gifgif010.gif

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.

gif011.gifgif011.gif

Button

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.

img302.pngimg302.png
img303.pngimg303.png

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.

img304.pngimg304.png

Subnavigation geht unter

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.

img201.pngimg201.png
img202.pngimg202.png

Unsere naheliegende Lösung ist, die Informationen eine Ebene höher zu stellen und, identisch zur Bibliothek, auf einer Kachel darzustellen.

img203.pngimg203.png

Annahme 3: zu voll

Suche grundsätzlich verbesserungswürdig

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.

gif210.gifgif210.gif
img211.pngimg211.png
img212.pngimg212.png

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

  • Denn nach dem ersten Buchstaben springt die Suche an und füllt den kompletten Bildschirm mit möglichen Ergebnissen.
  • Nach dem Fertig-Tippen des Begriffs ist zwar die Liste kürzer, aber wie am Beispiel-Suchbegriff „Studienorganisation„ deutlich wird, kann man sie teilweise gar nicht unterscheiden.

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.

img213.pngimg213.png

Weitere Funde

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.

img302.pngimg302.png

TL;DR Allgemeine Handlungsempfehlungen

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.

img213.pngimg213.png

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.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im Masterstudium

Betreuung

foto: Prof. Dr. Frank Heidmann foto: Martin Pötter

Zugehöriger Workspace

Eye Tracking in User Experience Design

Entstehungszeitraum

Sommersemester 2022