Wie du A/B Tests zur Optimierung deiner Webseite bis hin zur besten Version nutzt

23. Juli 2015 von Nico Puhlmann

A/B Testing - Optimiere deine Webseite ganz nach oben

Sicher stellst du dir wie viele Webseiten-Betreiber auch oft die Frage: Warum habe ich bei so vielen Besuchern nur so wenig Anfragen, so wenig Bestellungen oder so wenig Registrierungen? Warum ist meine Absprungrate so hoch und wieso die Besuchsdauer so gering? Um diese Fragen zu beantworten bleibt nach dem technischen Optimieren und der Kontrolle meist nur das Ausprobieren einer anderen Darstellung oder anderer Inhalte.

Bei solchen Änderungen solltest du dich aber auf gar keinen Fall einfach nur auf dein Bauchgefühl verlassen und die Änderungen nicht sofort online stellen!

Auch wenn du der Meinung bist, dass die neue Variante besser ist, als die vorhergehende, so kann dies ein gewaltiger Irrtum sein. Warum? Nun, du als Betreiber siehst die eigene Webseite wohl am meisten. Mindestens einmal am Tag wird die Webseite von dir angeschaut, auf Fehler überprüft und über Verbesserungen nachgedacht. Doch je öfters man sich die eigene Webseite anschaut, desto gewohnter und langweiliger wird sie. Da kommt eine Änderung gerade recht und bringt frische Luft in die Seite. Deshalb erscheint eine Änderung, wenn man von ihr überzeugt ist, meist sofort als bessere Version im Vergleich zur Original-Version. Um genau diesen Effekt des Irrtums zu verhindern und zu messen, ob die neue oder die alte oder etwa doch eine dritte Variante die bessere ist, kannst du einen A/B Test durchführen, der es dir ermöglicht, pro Variante den Erfolg auszuwerten und einen Sieger zu bestimmen. Somit kannst du Entscheidungen treffen, die auf Daten basieren und ganz genau feststellen, ob deine gemachte Änderung erfolgreich war oder nicht.

Doch was genau ist ein A/B Test und was bedeutet das?

Mit einem A/B Test, der auch Split-Test oder Experiment genannt wird, kannst du wie bereits beschrieben verschiedene Varianten oder Versionen deiner Webseite testen, um heraus zu finden, welche Variante die bessere Leistung erzielt. Bei einem A/B Test wird der Erfolg in Form einer Conversion jeder Version gemessen und anschliessend miteinander verglichen. Die Version mit den besten eindeutigen Ergebnis geht als Gewinner hervor und sollte ab dann genutzt werden. Das Ziel jedes A/B Tests ist es also, die benutzerfreundlichste Version einer Webseite zu finden, die die meisten Konversionen verzeichnet.

Unterscheide zu anderen Testarten

Das A steht meist für die Original-Version und das B für die neue optimierte Version. Natürlich kann man auch mehr als zwei Varianten testen, also einen A/B/C/D Test durchführen. Zu viele Varianten und Versionen sollten es allerdings nicht sein und es sollte optimalerweisse immer nur ein Merkmal geändert werden, damit man später genau weiss, welche Änderung Einfluss auf das Ergebnis hatte. Möchte man mehrere Elemente und Merkmale auf einmal ändern und diese untereinander variieren, handelt es sich hierbei um einen Multivariaten-Test. Der Unterschied zwischen A/B Tests und Multivariaten-Tests ist nämlich der, dass bei einem A/B Test pro Variante immer die selben Merkmale und Elemente geändert werden. Bei einem Multivariaten-Test hingegen werden Elemente und Merkmale definiert und diese Änderungen in allen Variationen gegeneinander getestet. Die beste Kombination aller Elemente gewinnt. Allerdings ist für einen solchen Test aufgrund der vielen Kombinationsmöglichkeiten viel mehr Traffic notwendig, als bei einem A/B Test. Zurück zum A/B Testing:

Was sollte man testen?

Testen kann man mit einem A/B Test im Prinzip alles, was auf der Webseite vorhanden ist. Layout, Buttons, Farben, Formen, Formulare, Texte, Bilder und sogar verschiedene Versionen einer ganzen Webseite. Und nicht nur Webseiten lassen sich testen, auch E-Mails, Banner, Werbeanzeigen und andere Werbekampagnen können mit einem A/B Test getestet werden. Das macht absolut Sinn und je mehr du testest, desto mehr optimierst du auch! Steigen wir aber erstmal in das Thema Testing ein. Die Elemente, bei denen das Testen am meisten Sinn macht und bei der Mehrzahl von Webseiten zur direkten Steigerung des Erfolges beiträgt, sind folgende:

  • Call To Actions (Buttons): Text, Farbe, Größe, Design, Position
  • Formulare: Anordnung, Anzahl und Größe der Felder
  • Überschriften & Untertitel: Wording, Länge, Design
  • Texte und Produktbeschreibungen: Länge und Wording
  • Bilder, Grafiken und Icons
  • Layout: Design, Anzahl und Anordnung der Elemente
  • Preise und Angebote
  • Testimonials & Siegel

Generell solltest du dir aber immer die Frage stellen: „Welches Element, welches Merkmal kann einen direkten Einfluss auf den Erfolg haben?“. Es kann sich dabei durchaus auch um andere Elemente als die hier aufgeführten handeln, das ist letztendlich immer abhängig von der Art der Webseite. Bei einem Webshop gilt es andere Sachen zu optimieren wie in einem Blog oder einem Online-Spiel.

Wie funktioniert ein A/B Test?

Wenn ein A/B Test gestartet wird, werden für diesen Test mehrere Varianten, mindestens jedoch zwei, bestimmt und zur Verfügung gestellt. Kommt ein Besucher auf deine Webseite wird aus diesen Varianten per Zufall eine ausgewählt und dem Besucher visuell dargestellt. Zusätzlich wird diese Variante in einem Cookie gespeichert, um sicher zu stellen, dass diesem Besucher immer nur ein und die selbe Variante angezeigt wird.

Erreicht der Besucher dann das Ziel in Form eines Verkaufes, einer Registrierung, Spende oder einer anderen Konversion, wird die beim Test gewählte Variante im Tracking der Conversion mit übergeben und im Datensatz des Besuchers gespeichert.

Bei der späteren Auswertung werden alle Besucher in die Analyse einbezogen, die am Experiment teilgenommen haben. Von diesen Besuchern wird für jede einzelne Variante die Anzahl der Teilnehmer und die Anzahl der Conversions, also diejenigen die das Ziel erreicht haben, miteinander verglichen und ausgewertet.

A/B Test Ablauf

Ein Gewinner steht dann fest, wenn genug Zeit seit dem Start des A/B Tests vergangen ist, eine Variante eine höhere Conversion-Rate aufweist und das Ergebnis zu mehr als 95% signifikant ist. Ab diesem Zeitpunkt sollte die Gewinner-Version auf der Webseite verwendet werden. Danach ist es sinnvoll, einen weiteren Test zu starten, um die Optimierung noch weiter zu perfektionieren.

Was benötige ich für einen Test?

Für einen A/B Test benötigst du zu allererst einmal ein Ziel, welches du verfolgst. Möchtest du die Aufenthaltsdauer oder Aktivitätszeit deiner Besucher erhöhen, die Absprungrate verbessern oder die Anzahl deiner Verkäufe oder Registrierungen erhöhen? Steht das Ziel fest, suche dir ein Element deiner Webseite heraus und begebe dich auf die Suche nach einer Idee, was du optimieren könntest. Stell dir Fragen wie „Warum ist die Anzahl meiner Verkäufe bzw. meine Conversion-Rate niedriger als der Standardwert?“, „Was könnte Einfluss auf die Anzahl meiner Verkaufe haben?“ oder „Warum werden die Warenkorb-Buttons so wenig geklickt?“. Mach dich auf die Suche nach Informationen zu diesem Thema und wie du es erreichen könntest, näher an dein Ziel heran zu kommen. Literatur, eine Recherche im Internet oder unsere Landing Page Tipps können dir dabei behilflich sein. Hast du ein Element und eine Möglichkeit gefunden, stelle als nächstes eine Hypothese auf. „Wenn ich die Farbe des Buttons von grau zu grün ändere, erhalte ich mehr Klicks als vorher.“ oder „Wenn ich das Layout meiner Landing Page etwas reduzierter gestalte, verkaufe ich besser.“. Danach geht es an den Test selbst, für den allerdings noch gewisse Vorgaben und Richtlinien erfüllt sein müssen, damit der Test zu einem echten Ergebnis kommt. Denn nichts ist schlimmer, als ein Test bei dem das Ergebnis nicht möglich oder gar verfälscht ist. Folgende Vorgaben sollten für einen A/B Test erfüllt sein, bevor ein Ergebnis bestimmt wird:

  1. Der Test sollte mindestens für 2 Wochen laufen

    Ein Test sollte lange genug laufen, damit genug Daten zur Auswertung vorhanden und das Ergebnis so signifikant wie möglich ist.

  2. Am Test sollten mindestens 1.000 eindeutige Besucher teilnehmen

    Je mehr Besucher am Test teilnehmen, desto besser, denn bei zu wenig Besuchern kann kein eindeutiges Ergebnis bestimmt werden. Die 1.000 ist dabei nur ein Richtwert und kann je nach Ziel und Länge des Tests variieren.

  3. Teste wenn möglich nur mit neuen Besuchern

    Es hat sich gezeigt, dass es besser ist, wenn man nur mit Besuchern testet, die deine Webseite zuvor noch nicht besucht haben. Gerade wenn man die Änderung später wieder rückgängig macht, kommt es sonst zu Verwirrungen bei deinen Stammbesuchern, die du so nur unnötig verschreckst. Solltest du Elemente testen, bei denen sich deine Nutzer vorher einloggen müssen, ist das natürlich etwas anderes. Hier solltest du allerdings behutsamer mit Änderungen vorgehen.

  4. Teste alle Varianten gleichzeitig und nicht nacheinander

    Man könnte natürlich auf die Idee kommen, verschiedene Varianten hintereinander zu testen. Das ist eine schlechte Idee, denn es könnten sich neben der Zeit noch andere Faktoren auf das Ergebnis auswirken. Ob es das Wetter, eine andere Veränderung an der Webseite oder eine neue Werbekampagne ist. Eine Test aller Varianten zur gleichen Zeit ist immer genauer und aussagekräftiger!

  5. Das Ergebnis sollte nicht vom Zufall beeinflusst und statistisch signifikant sein

    Es kann vorkommen, das es nur so wirkt, als würde ein Gewinner feststehen, eine Variante hätte also z.B. eine höhere Conversion-Rate als die andere. In Wirklichkeit steht aber kein klarer Sieger fest, denn das Ergebnis hätte auch per Zufall zustande kommen können. Soll heissen, beim nächsten Test würde das Ergebnis mit sehr hoher Wahrscheinlichkeit anders aussehen. Dies kann man mit einem Test der statischen Signifikanz umgehen. Hierbei werden die Ergebnisse von zwei Varianten auf Signifikanz geprüft, die bei einem erfolgreichen A/B Test mit Gewinner immer höher als 95% sein sollte.

  6. Ein Besucher sollte auf der gesamten Webseite immer die selbe Version angezeigt bekommen

    Sollte der Besucher nach einigen Minuten, Stunden oder Tagen deine Webseite wieder besuchen, sollte ihm immer dieselbe Variante angezeigt werden. Dies ist sehr wichtig, da ansonsten die Ergebnisse verfälscht werden und wertlos sind. Wenn das zu testende Element auf mehreren Unterseiten vorkommt, sollte auch hier immer nur die Variante angezeigt werden, die für den aktuellen Besucher für den Test gewählt wurde.

Nun, da du weisst welche Vorgaben ein A/B Test erfüllen muss, geht es an den Test selbst.

So führst du einen A/B Test auf deiner Webseite mit Stetic durch

Sind die Änderungen und die Varianten bestimmt, kannst du mit dem Test starten. Hierbei muss auf deiner Webseite ein zusätzliches Javascript-Snippet integriert werden, der den Test aktiviert und durchführt. Wenn du die aktuellste Versions unseres Tracking-Codes nutzt, kannst du unser bereits in deine Seite integriertes Javascript nutzen. Hierbei rufst du einfach im Stetic-Objekt die Funktion „ab“ mit drei Parametern auf:

  • Name des Tests
  • Varianten des Tests als Array
  • Callback-Funktion für das Umsetzen der Änderung

Als Name wählst du eine aussagekräftige Beschreibung deines Tests, damit du ihn später bei der Auswertung eindeutig identifizieren kannst. Die einzelnen Varianten sind zum einen die Bezeichnung der jeweiligen Variante, zum anderen wird eine Variante später an die Callback-Funktion übergeben. In der Callback-Funktion führst du jetzt per Javascript die Änderungen an deiner Webseite für die gewählte Variante durch. Zur Veranschaulichung hier ein sehr einfaches Beispiel, realisiert mit der Javascript-Library jQuery:

Einfaches Beispiel eines A/B Tests für einen CTA-Button mit jQuery


Bei der Ausführung der Änderung sind gerade mit jQuery nahezu unendlich viele Möglichkeiten vorhanden. Wenn du deine Tests lieber serverseitig oder manuell realisieren möchtest, kannst du auch einfach nur ein Event mit dem Namen "experiment" und den entsprechenden Parametern tracken. Unsere Dokumentation zu A/B Tests zeigt dir wie du das realisieren kannst und bietet zudem weitere technische Informationen zur Umsetzung.

Die Auswertung des Tests kannst du jederzeit unter dem Punkt A/B Test einsehen. Bedenke, das der Test mindestens 14 Tage laufen muss, bevor ein echter Gewinner feststeht. Hier wählst du einfach das Experiment bzw. den A/B Test aus, wählst das Event der Conversion und klickst auf „Bericht anzeigen“. Schon erhältst du das Ergebnis deines Tests.

 A/B Test Bericht

Du kannst jederzeit ein anderes Conversion-Event wählen, da die Auswertung in Echtzeit und anhand der Rohdaten erfolgt. So kannst du die Auswirkung des Tests auf alle Aktionen und Events auf deiner Webseite auswerten und sehen, welche Variante bei welchem Event erfolgreicher war. Um die Übersicht bei mehreren Tests zu behalten, kannst du dir die gewählten Einstellungen mit dem Button „Bericht speichern“ für später merken.

A/B Test im Conversion Funnel

Natürlich wäre es jetzt noch schön, die Ergebnisse des Tests über den gesamten Conversion-Funnel, also die Schritte bis hin zur Conversion, des A/B Tests auswerten zu können. Stetic bietet dir in den Auswertungen des Conversion Funnels die Möglichkeit, die Ergebnisse pro Variante des Tests anzuzeigen. Wähle hierzu einfach im Funnel-Bericht links in der Mitte anstatt dem Datum das Experiment aus. Und schon wird dir der Verlauf und die Ergebnisse des Funnels pro Variante deines Tests angezeigt. Natürlich ist auch diese Auswertung in Echtzeit und wird anhand deiner getrackten Rohdaten live berechnet. Damit ergeben sich ganz neue Möglichkeiten zur Auswertung deines Conversion-Funnels.

Conversion Funnel A/B Test

Segmentierung des A/B Tests

Eine weitere und sehr nützliche Möglichkeit der Auswertung deines Split-Tests bietet dir die Segmentierung. Hierbei kannst du deine Besucher nach den verschiedenen Varianten deines Tests nach Segmenten auswerten und untersuchen. So kannst du zum Beispiel herausfinden, wie die Verteilung der Traffic-Herkunft (Referer) oder der genutzten Browser der Besucher pro Variante war. Hierzu musst du einfach nur ein Event auswählen und anschliessend die Eigenschaft des Events für das Experiement. Eigenschaften von Events erkennst du an einem Dollarzeichen am Anfang. Danach folgt die Bezeichnung der Eigenschaft. In unserem Beispiel aus dem Screenshot wäre das „$experiment.Split Test“. Damit alle Varianten zur Auswahl vorhanden sind, solltest du dir erst die Auswertung des Tests anzeigen lassen. Alternativ kannst du die gewünschte Variante natürlich auch eingeben. Du wählst also aus:

– Event – ist gleich – order (Anstatt „order“ dein Conversion- oder ein anderes Event)
– $experiment.Split Test

..und klickst auf Bericht anzeigen.

A/B Test Segmentierung

Danach kannst du eine Variante wählen und über folgende Einstellung die genutzten Browser der Besucher für diese Variante auswerten:

– Event – ist gleich – order
– $experiment.Split Test – ist gleich – A
– Browser

segmentierung-ab-test-browser

Somit ergeben sich mit Hilfe der Segmentierung unendlich viele Möglichkeiten zur Auswertung, die du zur Optimierung deiner Webseite verwendet kannst.

Starte jetzt deinen ersten A/B Test

Anstatt sich nur auf dein Gefühl zu verlassen und zu denken, das die neue optimierte Version die bessere ist, kannst du mit Hilfe eines A/B Tests und den darauf folgenden Daten mit Gewissheit einen Gewinner küren, den du in Zukunft verwendest. So kannst du deine Webseite bis hin zur optimalsten und benutzerfreundlichsten Version verbessern. Denn am Ende zählt nur eines: der Erfolg deiner Arbeit. Deine Zeit und deine Arbeit sind aber viel zu schade für Änderungen nach Bauchgefühl. Also starte jetzt mit deinem ersten A/B Test und optimiere deine Webseite. Los geht’s! Wenn du Fragen hast oder uns etwas mitteilen möchtest, freuen wir uns immer über eine Nachricht über die bekannten Kanäle.

Dir gefällt dieser Beitrag?
Erhalte Updates. Kostenlos.

Noch keine Kommentare, sei jetzt der erste! ;)

Was denkst du?