Wie wir unsere Website mit iMotions neu gestaltet haben – eine UX-Fallstudie

Ende 2018 startete das Marketingteam von iMotions ein Projekt zur Neugestaltung der Website, ausgehend von der Überzeugung, dass wir mit der iMotions-Software noch mehr tun könnten, um das Nutzererlebnis auf unserer Website zu verbessern.

Das Unbekannte anhand des Bekannten erklären

iMotions ist ein Softwareunternehmen, das eine Plattform und Tools für die Erforschung menschlichen Verhaltens anbietet, doch den Besuchern der Website war oft nicht klar, was das bedeutet. Wie erklärt man also eine Kategorie, die für viele neu und unbekannt ist?

Die Erforschung des menschlichen Verhaltens mithilfe von Biosensoren ist noch weitgehend unbekannt, sodass wir vor zwei Herausforderungen stehen: Zum einen müssen wir verdeutlichen, was diese Art von Forschung beinhaltet, und zum anderen müssen wir die technischen Aspekte erläutern, wie die iMotions-Software Forschern bei der Durchführung dieser Untersuchungen hilft.

Um beide Aspekte besser zu vermitteln, wollten wir unsere Navigationsstruktur verbessern und den Schwerpunkt auf eine klare Kommunikation legen. So können wir unsere Arbeit auf einfachere und verständlichere Weise erklären (und gleichzeitig eines der größten Probleme angehen, das wir mit unserer Website hatten – hohe Absprungraten).

Mit der Neugestaltung wollten wir die Komplexität für Besucher verringern, die nicht unbedingt über umfassende Erfahrung in der Verhaltensforschung verfügen. Darüber hinaus bitten uns Forscher aus den Bereichen UX und Usability bei iMotions häufig um Rat, wie sie User-Experience-Studien für Teile oder die gesamte Website durchführen können.

Auch wenn sich Anwendungsfälle und Studiendesigns je nach Forschungsfragen unterscheiden, wollten wir die Gelegenheit nutzen, die Funktionen der iMotions-Software für UX bei der Neugestaltung unserer Website zu nutzen und zu präsentieren – so schlagen wir zwei Fliegen mit einer Klappe!

Wir hoffen, dass Ihnen der folgende Überblick darüber, wie wir anhand von Daten aus Biosensoren Hypothesen aufgestellt und die neue Website imotions.com neu gestaltet haben, einige Anregungen für Ihre eigenen Studien zur Benutzererfahrung liefert. Wie bei jeder fundierten Untersuchung ist natürlich die Studienkonzeption von entscheidender Bedeutung, und da wir uns darauf beschränken, nur die relevantesten Ergebnisse hervorzuheben, sollte dies lediglich als Inspiration dienen.

Die Fragen der Studie

Als ersten Schritt haben wir uns zusammengesetzt und unsere Website unter die Lupe genommen, wobei wir uns notiert haben, was wir ändern wollten – und wie wir die Auswirkungen dieser Änderungen messen können. Wir kamen zu dem Schluss, dass unsere Botschaften und das Layout die wichtigsten Bereiche für Verbesserungen sind, und haben daher zwei Forschungshypothesen formuliert, die wir anhand von Biosensordaten überprüfen wollten:

• Ein intuitiveres Layout unserer Homepage mit eigenen Rubriken wird den Nutzern helfen, besser zu verstehen, was iMotions ist und wie diese Technologie in Wissenschaft und Wirtschaft funktioniert.
• Eine genauere Erläuterung der Vorteile und des Nutzens von iMotions sorgt für ein positiveres Erlebnis beim Besuch der Website und bietet klare Handlungsmöglichkeiten.

Darüber hinaus haben wir Fokusgruppen mit zwei Gruppen von Mitarbeitern bei iMotions und einer externen Kommunikationsagentur durchgeführt, um die Biosensordaten durch bewusste Rückmeldungen – wie Umfragen und Selbstauskünfte – zu ergänzen.

Wir haben die Gruppen gebeten, unser Markenversprechen aus ihrer Sicht zu formulieren und iMotions in einem Satz zu beschreiben. Diese Formulierungen halfen uns dabei, unsere Botschaften so zu schärfen, dass sie sowohl von Experten als auch von Neulingen in der Verhaltensforschung verstanden und angenommen werden.

Datenerfassung mit Biosensoren

Zur Datenerhebung haben wir Teilnehmer rekrutiert, die jeweils zwei Website-Präsentationen erlebt haben – eine für unsere alte Website und eine für ein Wireframe-Modell der neuen Website.

Während die Teilnehmer bestimmte, für die Studie ausgewählte Seiten durchlasen, erfassten wir ihre psychophysiologischen Reaktionen auf den Inhalt und das Layout mithilfe von Biosensoren. Konkret setzten wir Eye-Tracking, eine Analyse der Mimik (unter Verwendung der Affectiva-Engine) sowie die Messung der elektrodermalen Aktivität (EDA, auch bekannt als galvanische Hautreaktion oder GSR) mit einem Shimmer-Gerät ein.

Eye-Tracking würde uns wertvolle Kennzahlen zur visuellen Aufmerksamkeit liefern, wie beispielsweise Heatmaps und Fixationen, während FEA und EDA zusammen Aufschluss über Valenz und Erregung geben könnten – woraus wir ableiten könnten, welche Art von emotionalen Reaktionen die Website hervorruft.

Wichtigste Ergebnisse der ersten Stimuli-Reihe auf unserer alten Website

eine aggregierte Heatmap der Blickverläufe auf unserer alten Website

Bei der Analyse der Daten von Besuchern unserer alten Website stellten wir fest, dass bestimmte Daten der Biosensoren die aussagekräftigsten Erkenntnisse lieferten. Hier sind unsere Ergebnisse:

1. Der Blick der Teilnehmer wanderte über das Menü auf der Startseite, daher haben wir die gesammelten Daten zu Gesichtsausdrücken und der Hautleitfähigkeit für diese Momente exportiert, um genauer zu untersuchen, welche Emotionen sie zu diesem Zeitpunkt empfanden.
2. Eine negative Valenz, ermittelt anhand der Gesichtsausdrucksanalyse, trat im Durchschnitt am häufigsten auf, nämlich in 14 % der Fälle (bei den Befragten, bei denen diese Valenz über dem Schwellenwert von 10 lag). Hier ist die Aufzeichnung eines Befragten: Man beachte, dass sowohl seine gerunzelte Stirn – was mit Verwirrung in Verbindung gebracht werden kann – als auch seine Wut stark ausgeprägt waren, während er das Menü durchging:

Erstellung eines Wireframes

Auf Grundlage dieser Erkenntnisse haben wir einen Aktionsplan erstellt, damit die Nutzer auf unserer neuen Website von Anfang an durch unsere Kommunikation und das Layout besser geführt werden. Es war klar, dass beides auf der Startseite verbessert werden musste, um eine bessere Navigation, ein besseres Produktverständnis und einen optimierten Nutzerfluss zu ermöglichen.

Das Ziel bestand darin, durch eine benutzerfreundliche Verlinkung der Seiten Frustrationen zu vermeiden und den Besuchern zu ersparen, das gesamte Menü durchgehen zu müssen, um die wichtigsten Vorteile von iMotions zu erfassen.

Als wir ein Wireframe mit den konkreten Botschaften und dem UX-Design hatten, mit dem wir zufrieden waren, war es an der Zeit, denselben Datenerhebungsprozess erneut durchzuführen – wobei wir unseren Befragten dieses neue Wireframe-Modell vorlegten, das zeigte, wie unsere neue Website aussehen könnte.

Diese Ergebnisse erwiesen sich aus zwei Gründen als entscheidend: Erstens, weil sie aufzeigten, welche Aspekte der Homepage verbessert wurden und die wir noch stärker hervorheben können, und zweitens, weil einige Elemente nicht so aufmerksamkeitsstark waren, wie wir ursprünglich angenommen hatten.

Erregung und Valenz anhand von EDA und FEA

Zunächst verglichen wir das Ausmaß der emotionalen Bindung und der Erregung auf den beiden Websites, um sicherzustellen, dass wir – über die Erfassung der visuellen Aufmerksamkeit hinaus (auf die wir im nächsten Abschnitt näher eingehen) – auch verstanden, welche Reaktionen unsere Startseiten tatsächlich auf unbewusster Ebene hervorriefen. Entscheidend war dabei die Kombination aus der Messung der elektrodermalen Aktivität und der Analyse der Mimik.

Die durchschnittlichen EDA-Spitzenwerte pro Minute zeigen, wie in der obigen Grafik dargestellt, dass auf unserer alten Website eine stärkere Erregung zu verzeichnen war als auf unserer neuen Wireframe-Website. EDA-Spitzenwerte geben jedoch keinen Aufschluss über die positive oder negative Ausprägung (d. h. die Valenz) einer Emotion, sondern deuten auf eine Veränderung der emotionalen Intensität (d. h. der Erregung) hin. Wir haben daher mithilfe der FEA untersucht, wie lange bestimmte Emotionen im Durchschnitt gleichzeitig auftraten:

Betrachtet man die Daten dieser beiden Sensoren gemeinsam, so zeigt sich, dass die Erregung auf unserer alten Website intensiver und überwiegend negativ war, während die Nutzer auf unserer neuen Website insgesamt vielleicht weniger erregt (weniger verärgert!), dafür aber fröhlicher und positiver gegenüber der Website waren.

Erkenntnisse aus der Eye-Tracking-Analyse für die neue Website

Schließlich war es wichtig zu verstehen, wie sich die Nutzer auf dem Mockup der neuen Website bewegten, damit wir die Seite besser optimieren und ihren Blick lenken konnten, um die benötigten Informationen zu finden. Daher erstellten wir mit iMotions Eye-Tracking-Heatmaps zur visuellen Aufmerksamkeit der Nutzer auf der Startseite und extrahierten die Fixationsdaten.

Wir stellten fest, dass trotz relativ gleicher Textmengen in den einzelnen Abschnitten die Blickfixierungen nicht wie erwartet im oberen Bereich der Website bei unserem Slogan und Untertitel „Unpack Human Behavior with the world’s leading biosensor platform“ auftraten (39, siehe Abbildung 1 unten).

Bild 1: Bild im oberen Banner und Slogan, der die Anzahl der Eye-Tracking-Fixationen in den gelben „Haftnotizen“ anzeigt

Abbildung 2: Festlegungen im Abschnitt zur Softwarebeschreibung

Abbildung 3: Blickpunkte im Abschnitt „Für wen ist iMotions geeignet?“

Vielmehr gab es mehr Blickaufenthalte bei der Beschreibung der Software (Bild 2) und bei „Wer kann von iMotions profitieren?“ (Bild 3).

Dank der Kombination aus Eye-Tracking-, EDA- und FEA-Daten konnten wir unser Wireframe weiterentwickeln und um folgende Elemente ergänzen, was schließlich zu der Website imotions.com führte, die Sie heute sehen:

1. Wir wollten den ersten Bereich der Website, den die Besucher als Erstes sehen, etwas aufpeppen – deshalb haben wir ein Banner-Video integriert, um emotional und visuell das Interesse zu wecken und das Verständnis für die verschiedenen Sensorlösungen zu fördern.
2. Wir mussten genau darlegen, wie die iMotions-Software die Forschung in verschiedenen Branchen unterstützt, um den Nutzern dabei zu helfen, ihre eigenen Anwendungsfälle zu erkennen. Wir gingen davon aus, dass dies daran lag, dass unsere alte Website zu schnell auf das „Was“ einging, ohne zuvor das „Warum“ zu erläutern – daher haben wir branchenspezifische Seiten erstellt, auf denen Website-Besucher schnell Informationen über die Erforschung menschlichen Verhaltens und iMotions in ihnen vertrauten Begriffen finden können.

Fazit

Wir hoffen, dass dieser Anwendungsfall Ihnen als Inspiration für Ihre eigenen UX-Studien dient und Ihnen eine hilfreiche Vorlage für die Erfassung von Biosensordaten zur Optimierung von Websites bietet – sei es aus kommunikativer, navigatorischer, gestalterischer oder retrospektiver Sicht.

Der Einsatz der iMotions-Software für diese Studie bot uns nicht nur eine hervorragende Gelegenheit, den Nutzen unserer eigenen Software in der Praxis zu erleben, sondern half uns auch dabei, uns besser in die Lage unserer Kunden zu versetzen, sodass wir aus erster Hand sehen konnten, wie iMotions eine Vielzahl von UX-Herausforderungen lösen kann, mit denen unsere Kunden konfrontiert sind.

Wenn Sie mehr darüber erfahren möchten, wie iMotions bei UX- und Usability-Studien helfen kann, laden Sie sich hier unsere kostenlose UX-Broschüre herunter.