Produkt-Update: Hover-Status gibt es seit der Erfindung der Maus, und das aus gutem Grund: Sie zeigen dem Benutzer, wo er klicken soll. Als A.S. Watson uns also bat, die Hover-Status der Hotspots zu verbessern, machten wir uns sofort an die Arbeit.
Während eines Zeitraums von zwei Monaten führten wir mehrere A/B-Tests durch, bei denen wir die Hotspots beim Hovern sichtbar machten. Auf diese Weise konnten wir die Klickrate um 96% erhöhen (CTR - d. h. das Verhältnis der Käufer, die von den wöchentlichen Online-Anzeigen auf den Online-Shop klicken).
Wir freuen uns, dieses Update endlich für alle verfügbar zu machen. Lesen Sie weiter, um mehr über das Update zu erfahren und wie Sie diese Vorteile nutzen können.
Bevor wir eintauchen, möchte ich einen kurzen Überblick über diesen Beitrag geben. Der erste Abschnitt erklärt den Hotspot-Hover-Status und wie Sie die Funktion aktivieren können. Er enthält auch einige Tipps, wie Sie den Hover-Status optimal nutzen können.
Im zweiten und dritten Abschnitt erfahren Sie mehr über die von uns durchgeführten Tests und unsere Theorie, warum die verbesserten Schwebezustände zu einer so deutlichen Verbesserung geführt haben.
1. Hotspots beim Hovern sichtbar
Die meisten von Ihnen sind wahrscheinlich mit dem Hotspot-Editor vertraut und wissen, wie Sie Rechtecke verwenden können, um anklickbare Bereiche (oder Hotspots) in Ihrem Online-Katalog zu erstellen.
Wenn ein Kunde in der Vergangenheit mit dem Mauszeiger über einen Hotspot fuhr, änderte sich der Mauszeiger und ein Tooltip wurde angezeigt:
Es gibt keinen Hinweis auf den anklickbaren Bereich, was dazu führt, dass der Nutzer nicht weiß, was er anklicken soll. Um dieses Problem zu lösen, haben wir es möglich gemacht, den Hotspot anzuzeigen, wenn die Kunden mit der Maus darüber fahren:
Wenn Sie diese Funktion aktivieren, geben Sie den Käufern ein genaueres Feedback darüber, was sie anklicken werden. Und im Fall von A.S. Watson, dies verbesserte ihre CTR um 96%.
Wir können zwar nicht garantieren, dass diese Verbesserung für alle gilt, aber wir raten Ihnen dringend, diese Funktion zu aktivieren und selbst zu testen.
Wie werden Hotspots beim Hovern sichtbar?
Die Funktion "Hotspots visible on hover" wird automatisch für alle neuen Gruppen aktiviert, die Sie erstellen. Für bestehende Gruppen müssen Sie sie aktivieren, indem Sie zu Viewer-Anpassung -> Hotspots -> Hotspot beim Hovern sichtbar.
Was ist bei der Aktivierung des Hotspot-Schwebezustands zu beachten?
- Wenn Sie diese Funktion aktivieren, werden die Hotspots für alle Kataloge in Ihrer Gruppe sichtbar, wenn Sie den Mauszeiger darüber bewegen. Dies gilt auch für Kataloge, die derzeit online sind. Es ist ratsam, diese Kataloge zu überprüfen, um sicherzustellen, dass die Hotspots richtig positioniert sind und gut aussehen.
- Der Schwebezustand hilft zwar dabei, den Klickbereich eines Hotspots sichtbar zu machen, ist aber keine Entschuldigung dafür, Hotspot-Symbole zu deaktivieren. Hotspot-Symbole erfüllen nach wie vor einen einzigartigen Zweck, da sie anzeigen, wo sich die Hotspots befinden.
- Hover-Status funktioniert nicht auf Smartphones und Tablets. Ein weiterer Grund, Hotspot-Symbole aktiviert zu lassen.
Bonus-Tipp:
- Um das beste Ergebnis mit dem Hotspot-Schwebezustand zu erzielen, sollten Ihre Hotspots richtig platziert werden. Wir haben einen Leitfaden geschrieben über wie man Produkte mit Hotspots kennzeichnet um Ihre Hotspot-Platzierung zu verbessern.
2. A/B-Test A.S. Watson
Wenn wir Änderungen an Publitas vornehmen, möchten wir sicherstellen, dass wir Ihnen und Ihren Kunden einen Mehrwert bieten. Deshalb haben wir zwei Tests durchgeführt, um den Wert von Hotspots zu überprüfen, die beim Hovern sichtbar sind. Der erste war ein A/B-Test mit einer wöchentlichen Anzeige, die 7 Tage lang lief:
| Testgruppe | % erhöht CTR |
|---|---|
| A - Kontrollgruppe | – |
| B - Verbesserter Hotspot-Schwebezustand | 99% |
Mit dem ersten Test erzielten wir einen Anstieg der CTR um 99% - viel höher als wir erwartet hatten. Da diese Ergebnisse sehr vielversprechend waren, beschlossen wir, einen weiteren Test durchzuführen. Der zweite Test lief über 21 Tage:
| Testgruppe | % erhöht CTR |
|---|---|
| A - Kontrollgruppe | – |
| B - Verbesserter Hotspot-Schwebezustand | 96% |
Auch hier waren die Ergebnisse viel besser als erwartet, was die Gültigkeit der ersten Testergebnisse bestätigte. Wir haben auch einige andere Interaktionsmodelle ausprobiert, z. B. das kurze Aufblitzen von Hotspots direkt nach dem Laden einer Seite. Keines dieser Modelle führte zu einem nennenswerten Anstieg der CTR im Vergleich zu den Hotspots, die beim Hovern sichtbar sind.
3. Wie konnte der Schwebezustand zu einer so deutlichen Verbesserung führen?
Ohne eine gesunde Portion Gedankenlesen ist es ziemlich schwierig, Einzelheiten zu ermitteln. Doch ein kurzer Blick auf Don Normans Usability-Heuristiken gibt uns ein paar Hinweise - eine freundliche Erinnerung daran, die Grundlagen von UX und Benutzerfreundlichkeit nie zu vergessen!
Unser UX-Spezialist Oliver McGough hat die 4 Punkte herausgearbeitet, die zeigen, warum Hover-States so wichtig sind:
1. Sichtbarkeit des Systemstatus
"Das System sollte die Nutzer durch angemessene Rückmeldungen innerhalb eines angemessenen Zeitraums stets über den aktuellen Stand der Dinge informieren.
Vor der Einführung von Hover-Zuständen überließen wir es dem Benutzer, klickbare Bereiche anzunehmen. Die einzige Aufforderung war ein kleines Hotspot-Symbol und ein Tooltip beim Hovern.
Wir wollten die schönen Kataloge unserer Kunden nicht mit klickbaren Hotspots überziehen, weil wir befürchteten, dass ein Eingriff in ihr Design sie und ihre Leser verärgern würde.
Warum sollten Kunden klicken, wenn nicht klar ist, was anklickbar ist?
2. Fehlervermeidung
"Noch besser als gute Fehlermeldungen ist ein sorgfältiges Design, das verhindert, dass ein Problem überhaupt erst auftritt. Entweder eliminieren Sie fehleranfällige Bedingungen oder Sie überprüfen sie und bieten dem Benutzer eine Bestätigungsoption an, bevor er die Aktion ausführt."
Hover-Status sind eine hervorragende Möglichkeit, eine Aktion zu bestätigen, bevor der Benutzer sie ausführt. Wenn die Maus über einem Hotspot schwebt, wird der Benutzer über den Klickbereich informiert und darüber, dass etwas passieren wird, wenn er klickt.
Die Nutzer können nun erkennen, welche Klicks zu welchen Aktionen führen, und sie können entscheiden, ob sie klicken wollen oder nicht. In der Vergangenheit mussten unsere Nutzer blindlings klicken, was dazu führen konnte, dass sie etwas anklickten, was sie nicht wollten.
3. Wiedererkennen statt Abrufen
"Minimieren Sie die Speicherbelastung des Benutzers, indem Sie Objekte, Aktionen und Optionen sichtbar machen. Der Benutzer sollte sich keine Informationen von einem Teil des Dialogs zu einem anderen merken müssen. Anweisungen für die Nutzung des Systems sollten sichtbar oder leicht abrufbar sein, wann immer es angebracht ist."
Wie bei der Fehlervermeidung dienen Hover-Zustände als sichtbarer Indikator für das, was passieren wird. Beim UX-Design wollen wir so wenig wie möglich für Interpretationen offen lassen.
Wir wollen effiziente und subtile Aktionen, die das Gesamterlebnis nicht beeinträchtigen. Effiziente Aktionen sorgen dafür, dass der Nutzer eher denkt "Ich könnte mir vorstellen, das zu kaufen" als "Was mache ich als Nächstes?".
Benutzerfreundlichkeit bedeutet, dass die mentale Belastung bei der Suche nach dem Weg durch das Erlebnis wegfällt. Dadurch wird mehr Kapazität für den Genuss des Erlebnisses freigesetzt. Hover-Zustände machen das Klicken und die Wegfindung viel instinktiver.
4. Ästhetisches und minimalistisches Design
"Dialoge sollten keine Informationen enthalten, die irrelevant sind oder selten benötigt werden. Jede zusätzliche Informationseinheit in einem Dialog konkurriert mit den relevanten Informationseinheiten und vermindert deren relative Sichtbarkeit."
Schließlich sind Schwebezustände ein hervorragendes Beispiel für minimalistisches Design. Wir vermitteln alle notwendigen Informationen durch eine kleine Änderung der Deckkraft. Bilder sagen vielleicht mehr als tausend Worte, aber unser subtiler Hover-Status sagt mindestens zwei..."HIER KLICKEN".
