Warum Animationen/Transitions gut für die Conversionrate sind

Du kennst das bestimmt auch. Du machst irgendetwas auf der Website und „Zack!“ – ohne Vorwarnung ist etwas passiert und Du hast keine Ahnung, was genau. Um diesem Problem entgegenzuwirken gibt es Animationen/Transitions. In diesem Blogeintrag zeigen wir Dir, was Animationen/Transitions überhaupt sind und warum sie bestens zum Steigern deiner Conversionrate geeignet sind.

Transitions – Was ist das überhaupt?

Transition ist an sich der „weiche“ Übergang zwischen einem Zustand der Website in einen anderen. Z.B. wenn Du über einen Button fährst und dieser dann seine Farbe von Blau zu Rot ändert. Realisierbar sind solche flüssigen Bewegungen durch Flash, JavaScript und seit neustem auch mit CSS3.

Einige Sachen die du über Animationen/Transitions wissen solltest:

Das Einbinden solcher Transitions kann, wenn sie gut integriert werden, die Conversions deutlich verbessern.

  1. Transitions fühlen sich natürlich an.

    Es ist mit Transitions genauso wie in der Natur. Nichts ist von hier auf jetzt da. Ein Baum, beispielsweise, braucht auch seine Zeit, um zu wachsen. Und so sollte es mit Ereignissen auf Websites auch sein. Sie sollen einen natürlichen Verlauf in sich haben und somit Ruhe in die Veränderung bringen.

    Hier ein Beispiel:

    ScrollingAnimated

    Zum Vergleich wie es nicht ausschauen sollte:

    ScrollingNoAnimation

    Quelle: http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

  2. Animationen lassen einen Vorgang schneller erscheinen als er eigentlich ist.

    Z.B. kann ein Ladebalken, der mit sich in entgegengesetzter Richtung bewegenden Wellen dargestellt wird, das Gefühl hervorrufen, dass er sich schneller bewegt als er es in Wirklichkeit tut.

    Dieser Effekt kann einem den Vorgang bis zu 10% schneller empfinden lassen als er eigentlich ist. Das hilft natürlich dabei, dass der User nicht so schnell abspringt, weil ihm die Wartezeiten zu lange vorkommen.

  3. Das menschliche Auge erfasst Bewegungen leichter und versteht somit besser, wenn etwas neues beginnt.

    Bestimmt ist Dir das auch schon einmal passiert: Du klickst etwas an und plötzlich lädt die Seite neu, sieht aus wie vorher, aber Du realisierst nicht, dass sich etwas verändert hat. Das kann dazu führen, dass der User denkt, er hätte etwas falsch gemacht und dann die Seite wieder verlässt, weil er sich unwohl fühlt. Ist diese Veränderung jedoch mit einer Animation herbeigeführt, kann der User diese leichter wahrnehmen und wird nicht von dem Gedanken, dass er einen Fehler gemacht hat verschreckt.

  4. Transitions erhöhen die Stickiness.

    Die Stickiness in Bezug auf Transitions besteht aus folgenden 4 Faktoren:

    Klarheit

    Die Animation muss klar erkennbar sein.

    Überraschung

    Eine überraschende Animation regt den User eher dazu an genauer hinzuschauen.

    Greifbarkeit

    Die Transition muss gut verständlich ablaufen – also eine Animation die einfach ohne Grund dem User hingeschmissen wird, ist nicht zu empfehlen.

    Gefühl

    Die Animation muss ein gutes Gefühl hinterlassen. Wenn der User schon durch die Animation überfordert wird, ist es wahrscheinlich, dass er die Seite wieder verlässt.

  5. Produktdarstellung mit Animationen

    Wenn ein Produkt ein besonderes Feature hat, wie z.B. die Möglichkeit, es in irgendeiner Form zu verändern, kann es eine gute Idee sein, diese durch eine Transition darzustellen.

    Eine Case Study von marketingsherpa zeigt, dass Dell es geschafft hat, nur durch das Einfügen eines animierten Vorganges, die Conversionrate um 103% zu erhöhen.

    Dell

Natürlich können Transitions auch einen schlechten Effekt hervorrufen, wenn sie nicht richtig verwendet werden.

1. Zu viel des Guten schadet nur. 

Wie bei den meisten Sachen im Leben ist es auch bei Animationen/Transitions schlecht es zu übertreiben. Wird der User mit Animationen bombardiert, hat das den gegenteiligen Effekt. Er wird sich bedrängt und unangenehm fühlen und die Seite unter Umständen sofort wieder verlassen und somit entsteht keine Conversion.

2. Qualität und Platzierung ist wichtig.

Bei schlechten oder schlecht platzierten Transitions kommt dem User die Seite möglicherweise unecht, künstlich und/oder störend vor, ohne wirklich mit den Finger drauf deuten zu können, warum.

3. Hier ein Beispiel für eine Schlechte Animation:

Quelle: http://www.theworldsworstwebsiteever.com/

Quelle: http://www.theworldsworstwebsiteever.com/

Die Animation bei diesem Ladebalken ist viel zu schnell und unruhig. Dazu kommt noch, dass Bewegung der Wellen in die falsche Richtung gehen.

Aus diesen Gründen empfehlen wir Dir, dass Du Animationen/Transitions unbedingt verwenden solltest, wenn sie sich in deinem Fall anbieten.

Du bist gefragt! Kommentare erwünscht.

  • Was sind deiner Meinung nach mögliche Gründe die für Animationen/Transitions sprechen?

  • Wie versuchst du aufgetretene Probleme zu beheben?

Teile doch deine Erfahrungen in den Kommentaren mit uns und unserem Eddie!
Oder hast du sogar bereits einen Blogbeitrag zu diesem Thema verfasst? Teile auch diesen mit uns in den Kommentaren, wir sind immer offen für weitere Ansichten! Wir freuen uns darauf!

 

Beitrag von: Michael

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>