Effektives Testing: Ein Element für Dutzende Seiten ändern!

Eins der kostbarsten Dinge im Geschäftsleben ist Zeit. Man hat auch im eCommerce selten genug davon. Aus genau diesem Grund ist es wichtig, A/B- und multivariate Tests in der Conversion-Optimierung so effektiv und zeitsparend wie möglich zu organisieren. Bei einem Testing für einen Onlineshop ist das bisweilen schwierig, weil solch ein Onlineshop oftmals Dutzende, vielleicht Hunderte ähnlicher Produktseiten besitzt.

Nun möchte man vielleicht eins der immer wiederkehrenden Elemente der Produktseiten verändern, um die Auswirkungen auf die Conversion-Rate zu testen. Dann kann man sich beispielsweise überlegen, für jede einzelne Seite eine Original- und eine Testseite zu erstellen, was allerdings etwas aufwändig ist. Deshalb entscheidet man sich eventuell besser doch für eine Alternative. Aber welche?

Die Ausgangssituation

Der Onlineshop X hat ein Standarddesign für alle Produktseiten mit einem grünen „Jetzt kaufen – Button“. Der Shopbesitzer möchte nun prüfen, ob derselbe Button in Rot eventuell mehr Signalwirkung besitzt und die Conversion-Rate steigert, weil er verstärkt zum Produktkauf animiert.

Das Testproblem

Selbst ein kleiner Onlineshop hat bisweilen einhundert und mehr Produkte, für die jeweils eine Produktseite besteht. Es wäre also sehr mühsam, jede einzelne dieser Seiten so zu verändern, dass nun neben der Originalseite eine mit rotem „Jetzt kaufen – Button“ als Testvariante existiert. Alternativ sucht man sich als Shopbesitzer eventuell nur eine Produktseite aus, die eines Kassenschlagers, der häufig gekauft wird, und erstellt nur für diese eine Seite eine Testvariante.

Man hat bei einhundert Produktseiten dann 99, die genau gleich bleiben, und die eine, bei der die potenziellen Käufer während des Tests auf die Originalseite oder die Testvariante geführt werden. Das ist durchaus ein gangbarer Weg, um den Produktseiten-Test für den Onlineshop zu realisieren. Allerdings ist auch er eventuell schwierig:

Wird nur eine einzige von einhundert Produktseiten für einen Test genutzt, kann es lange dauern, bis die erforderliche Menge an Besuchern zusammenkommt, die für einen aussagekräftigen Test notwendig ist.

Die Lösung

Testen Sie nicht einzelne Seiten, sondern einzelne Templates. Gerade in einem Onlineshop sieht die HTML-Struktur einzelner Seiten immer sehr ähnlich aus. Zwar ändern sich Bilder und Texte – die Struktur jeder Produktdetailseite ist aber die selbe. Mit gut gemachter DOM-Manipulation können Sie auf vielen Seiten die wiederkehrenden Elemente und Strukturen einmal für alle Seiten zu verändern.

Das bedeutet: Sie sparen Zeit und Arbeit und haben die Gewissheit, einen wirklich aussagekräftigen Test in einer vernünftigen Zeitspanne durchzuführen.

Der Test wird hierdurch auch deutlich aussagekräftiger:

1. Sie erhalten repräsentative Testergebnisse, da alle Produkte in den Test einbezogen werden.

2. Sie haben mehr Daten, wodurch diese schneller valide werden.

Das Gute für Nicht-Programmierer: Die Änderungen lassen sich mit Tools wie Optimizely nach dem WYSIWYG – Prinzip durchführen, also ohne HTML und Konsorten auch nur annähernd zu begreifen. Man ändert etwa die Position des Produktbildes praktisch wie in einem Grafikprogramm, definiert die zu testenden Seiten und legt los. Schön, wenn Dinge so einfach sind!

Tipps für die Praxis

In der Praxis braucht es manchmal jedoch ein wenig Technik-Wissen. Achten Sie insbesondere auf die folgenden Punkte:

• Sind wirklich alle Templates gleich? Oft gibt es für einige besondere Produkte auch besondere Templates. Qualitätssicherung müssen Sie groß schreiben und Ihre Testkonfiguration ausgiebig testen. Einzelne Seiten, bei denen der Test nicht funktioniert, schließen Sie einfach vom Test aus.

• Achten Sie auch Browserkompatibilität. DOM-Manipulation in einer solchen Stufe kann manchmal nicht in allen Browsern kompatibel sein.

• Machen Sie es sich nicht zu einfach. Viele Tools bieten Funktionen an, mit denen HTML-Elemente nur sehr oberflächlich umpositioniert werden (beispielsweise “Move” in Optimizely). Dies bringt meist mehr Probleme als Vorteile. Haben Sie immer einen Blick auf das generierte HTML und nutzen Sie lieber “Rearange”, um Elemente im HTML-Gerüst zu verschieben.