Tobias Roppelt

Interaktive Slideshow.

User Experience.

Das Problem: Wie schaffe ich es, dass die Websitebesucher das Angebot direkt, interaktiv testen können und das Gefühl bekommen, sofort personalisierte Ratschläge zu erhalten – ohne dass ich dafür aufwendig programmieren muss?

Eine interessante Lösung dafür ist eine interaktive Slideshow. Wie das aussehen kann, erfährst du in dieser Case-Study.

Was erwartest Du als Besucher, wenn Du den Starte-Hier-Button siehst?

Nimm dir eine Sekunde, um diese Frage wirklich zu beantworten.
.
.
.
Unabhängig davon, was auf dem Button steht, erwartest du vermutlich, dass du direkt zum Angebot weitergeleitet wirst. 

Der typische Website-Header ist uns schon längst in Fleisch und Blut übergegangen:

Button im Header klicken = zum Angebot kommen.

Das ist so normal für uns, dass wir gar nicht mehr darüber nachdenken, was auf dem Button eigentlich steht. Dieser Automatismus hat Vor- und Nachteile für die Kommunikation mit deinem potenziellen Kunden.

Vorteil: Wir haben die Chance, den interessieren Besucher nach dem Klick auf den Button angenehm überraschen. 

Wer die Überschrift und Unterüberschrift gelesen hat und dann auf „Starte hier“ klickt, bekommt genau das, was ihm versprochen wird: Er startet direkt damit, seine Gewohnheiten zu verändern.
(Dazu gleich mehr.) 

Nachteil: Generell klicken nur die Besucher auf den Button, die schon an deinem Angebot interessiert sind. Besucher, die nicht klicken, sehen die Überraschung erst gar nicht.

Die Idee ist allerdings, dass Besucher, die geklickt haben, das coole Erlebnis weitererzählen.
Falls das nicht klappt, kann man sich immer noch offensichtlicher Orte auf der Website für die Slideshow überlegen. Ein anderer Weg wäre explizit darauf hinzuweisen, dass man nach einem Klick überrascht wird. 

... was passiert jetzt beim Klick auf den Button?

*Trommelwirbel* … mein Gesicht erscheint … Tada!
Oder technischer ausgedrückt:
Es startet eine interaktive Slideshow, in der ich dich direkt berate, wie du den ersten Schritt gehen kannst, um deine Gewohnheiten zu verändern. Das Ganze in Aktion siehst du am Ende dieser Case-Study.

Die erste Seite der interaktiven Slideshow: Hi!

Ein Hauch von personalisierten Ratschlägen!

Nachdem kurzen Hi, geht es auch direkt los! Der User kann sich gleich ein Problem auswählen, für das er eine Lösung sucht. 
Es ist natürlich schwierig alle gängigen Probleme abzudecken, darum hilft es zu wissen, was die meisten Menschen so interessiert.
So oder so, bin ich mir allerdings sicher, dass sich so gut wie alle User etwas aussucht, selbst wenn keines der Probleme gerade auf sie zutrifft.

Nerd-Insights über das menschliche Verhalten:

Um dem User einen Überblick über den Prozess, sowie ein Gefühl von Fortschritt zu verschaffen, gibt es einen Prozessbalken, am unteren Ende der Slideshow.
Psychologisch gesehen ist das ziemlich nützlich, weil wir die Verlustaversion des Gehirns triggern. Wir haben schon Fortschritt gemacht, den wir nicht verlieren wollen!

Im ersten Schritt der interaktiven Slideshow hat der User die Wahl zu entscheiden, welches Problem, auf ihn zutrifft.

Next Step: Gedanken lesen!

Der User hat sich sein ganz persönliches Problem ausgesucht, jetzt ist unsere Zeit zu glänzen!
Wir geben dem User das Gefühl, dass wir sein Problem auch wirklich verstehen und wissen, was in ihm vorgeht.
(Genau das sollten wir eigentlich auch tun, wenn wir ein hochwertiges und funktionierendes Angebot haben.)

Warum tun wir das?

  • Beweisen, dass wir das Problem auch wirklich verstehen.
  • Unsere Kompetenz in diesem Bereich zeigen.
  • Vertrauen aufbauen. 
im zweiten Schritt kann der User sein Problem genauer spezifizieren.

Eine Lösung anbieten!

Nachdem der User sein Problem genau definiert hat, haben wir auch gleich eine Lösung für ihn parat! Wir geben ihm ein Tool an die Hand und eine Schritt-für-Schritt-Anleitung dafür, wie er das Tool benutzen kann. 

Außerdem können wir unsere Kompetenz beweisen, wie zum Beispiel hier, indem wir erklären, warum das Tool funktioniert.

Im dritten Schritt der interaktiven Slideshow, bekommt der User ein Tool an die Hand, das ihm hilft, seine Gewohnheiten zu verändern.

Einen Call-to-Action einbauen!

Der letzte Schritt ist dazu da, den Leser zu ermutigen, dass gerade gelernte sofort auszuprobieren.
Dadurch helfen wir ihm, sich langfristig an das neue Wissen zu erinnern und wir bringen ihn dazu,  gleich den ersten Schritt im Prozess zu gehen.

Dieser Schritt ist doppelt hilfreich, weil er a) den Leser dazu bringt einen Veränderungsprozess anzustoßen und b) weil die Wahrscheinlichkeit steigt, dass er dann mehr lernen und ausprobieren will.

Wie wir schon gelernt haben, wollen wir unseren Fortschritt ungern verlieren und bringen gerne etwas zu Ende, was wir angefangen haben.

(Auf der animierten Version dieses Slides, gibt auch noch eine kleine Überraschung!)

Im letzten Schritt wird der User dazu aufgefordert, sein neues Wissen gleich in die Tat umzusetzen!

Am Ende: Das ganze Angebot präsentieren!

Jetzt ist der User aufgeheizt. Die beste Zeit, um unser Angebot zu unterbreiten!

Die letzte Seite der interaktiven Slideshow mit dem Angebot.

Wie habe ich das umgesetzt?

Die interaktive Slideshow hab ich mit der wundervollen App von slides.com erstellt.
Schon die kostenlose Version erlaubt es dir ein HTML zu exportieren. Das kannst du dann zum Beispiel über ein iFrame in deine Seite einbinden


Schreibe mir gerne eine Nachricht, wenn es dich genauer interessiert.

Teile diese Case-Study!

Danke an.

Die Grundidee für interaktive Slideshows hab ich von Samuel Salzer und seinen Slideshows von Habit-Weekly. Vielen Dank dafür!

Interesse an einer Zusammenarbeit?