Kuratierte Linksammlung für Webdesigner und -entwickler.
So erzielst Du automatisch hohe Conversion Rates

Landingpage Optimierung – ganz automatisch dank Epsilon-Greedy

Das Verhalten von Nutzern ist nicht immer voraussagbar. Ein Webdesigner muss viel Erfahrung mitbringen, um den Webseiten-Benutzer durch die Seite zu lenken oder eine bestimmte Aktion zu provozieren. Doch egal wie viel Erfahrung der Designer mitbringt – ganz voraussagbar wird das Nutzer-Verhalten doch nicht.

Gerade bei Landingpages, wo es besonders wichtig ist, den Nutzer zur gewünschten Aktion zu lenken, müssen wir jedes Detail optimieren, sodass der Nutzer auch handelt. Hier benutzen viele den A/B-Test, da er einfach und schnell ist. Es gibt aber meistens noch eine bessere Variante.

Anzeige

In diesem Artikel stelle ich Dir diese Variante des Nutzer-Tests vor, die Epsilon-Greedy-Methode. Und das beste an dieser Methode ist: sie macht die Arbeit ganz automatisch, ohne dass Du die Daten jemals auswerten musst.

Sprungmarken:

Ausgangssituation: Welche Farbe soll unser Button haben?

Stellen wir uns einmal eine Landingpage vor. Die Zielsetzung dieser Landingpage ist es, den Nutzer zum Klick auf einen Button zu bewegen. Deshalb steht dieser Button natürlich im Mittelpunkt der Landingpage.

Nun können sich der Designer und der Kunde jedoch nicht einigen, welche Farbe der Button haben soll. Der Designer sagt, der Button müsse rot sein, um vom Nutzer sofort wahrgenommen zu werden. Der Kunde hat jedoch Angst, dass die rote Farbe den Nutzer eher abschreckt, als die Aufmerksamkeit zu erregen.

Um nun zu einer Einigung zu kommen, wollen die beiden einen Nutzer-Test veranstalten.

Kurz vorgestellt: A/B-Tests

Vermutlich weißt Du schon, was ein A/B-Test ist, aber ich gehe hier trotzdem noch einmal in Kürze darauf ein.

Wie der Name schon vermuten lässt, kann man mit einem A/B-Test Variante A und Variante B testen. Der einen Hälfte der Nutzer wird Variante A gezeigt, der anderen Hälfte Variante B. Nun wird gemessen, wie viele Nutzer bei Variante A auf den Button klicken und wie viele Nutzer bei Variante B auf den Button klicken. Das nennt man die Click-Through-Rate, kurz CTR. Wenn nun bei Variante A 5 von 100 Nutzern den Button klicken und bei Variante B 10 von 100 Nutzern, hat Variante A eine CTR von 5% und Variante B eine CTR von 10%. Variante B wäre also in diesem Beispiel optimaler, da mehr Nutzer den Button klicken.

Auf die Landingpage angewendet, könnten wir der einen Hälfte der Nutzer einen roten Button und der anderen Hälfte einen grünen Button anzeigen. Nach einer Woche oder einem Monat schauen wir uns die Auswertung an und zeigen danach nur noch die bessere Variante an.

Der A/B-Test hat allerdings drei gravierende Nachteile:

  1. Der A/B-Test ist mit einem Zeitaufwand verbunden. Am Ende einer Test-Phase muss man die Test-Ergebnisse auswerten und dann auf die bessere Variante vertrauen.
  2. Wenn es während der Testphase zu einem Messfehler gekommen ist oder sich das Nutzerverhalten einfach nach den Tests ändert, ist der A/B-Test umsonst gewesen, denn wir zeigen dann den Nutzern für immer die schlechtere Variante.
  3. Während der Testphase zeigen wir 50% aller Nutzer einen schlechten Button. Das heißt im Extremfall, dass der Kunde in dieser Zeit 50% weniger Kunden bekommt.

Die Epsilon-Greedy-Methode

Nun kommen wir zur Epsilon-Greedy-Methode.

Diese hat einige entscheidende Vorteile gegenüber A/B-Test:

  1. Die Auswertung geschieht automatisch. Wenn wir jetzt einen EG-Test beginnen, optimiert dieser sich selbst automatisch und für immer.
  2. Der Test läuft für immer. Wenn sich das Nutzerverhalten zu irgendeinem Zeitpunkt verändert oder ein Messfehler auftritt, korrigiert der Test sein Ergebnis automatisch.
  3. Wir können jederzeit eine oder mehrere Variante hinzufügen und der Test bindet diese automatisch in das Ergebnis ein.
  4. Während der gesamten Testphase wird den Nutzern zu 90% die optimale Variante angezeigt. Dieser Prozentsatz lässt sich außerdem beliebig definieren.

So funktioniert die Epsilon-Greedy-Methode

Doch wie funktioniert das? Im Grunde ist ein EG-Test nichts anderes, als ein etwas erweiterter A/B-Test. Er basiert ebenfalls darauf, den Nutzern verschiedene Varianten anzuzeigen und dann die Click-Throug-Rate zu bestimmen. Jedoch wird durch den EG-Test das Resultat kontinuierlich optimiert und die Vorgehensweise dementsprechend angepasst.

Schauen wir uns einmal an, wie genau der Epsilon-Greedy-Test abläuft. Als erstes werden die verschiedenen Varianten definiert:

VarianteAufrufeClicksCTR
Roter Button11100,00%
Blauer Button11100,00%
Grüner Button11100,00%

Am Anfang definieren wir für alle drei Varianten eine CTR von 100%, da wir am Anfang ja nicht wissen können, wie gut oder schlecht die Varianten funktionieren.

Dem Nutzer wird beim Epsilon-Greedy-Test immer der momentan optimale Button angezeigt.

Da momentan noch alle Button die gleiche CTR haben, wird einfach zufällig einer ausgewählt. Dem Nutzer wird jetzt zum Beispiel der Blaue Button angezeigt, er klickt jedoch nicht drauf.

VarianteAufrufeClicksCTR
Roter Button11100,00%
Blauer Button2150,00%
Grüner Button11100,00%

Nun liegen der grüne und der rote Button in Führung, sie haben momentan die beste CTR. Dem nächsten Benutzer wird nun entweder der rote oder der grüne Button angezeigt. Nehmen wir an, es wurde zufällig der grüne Button ausgewählt. Auch dieser Nutzer klickt nicht auf den Button.

VarianteAufrufeClicksCTR
Roter Button11100,00%
Blauer Button2150,00%
Grüner Button2150,00%

Dem nächsten Nutzer bekommt nun natürlich den roten Button angezeigt, dieser liegt momentan ja in Führung. Doch auch dieser Nutzer klickt nicht auf den Button.

VarianteAufrufeClicksCTR
Roter Button2150,00%
Blauer Button2150,00%
Grüner Button2150,00%

Da nun alle Buttons wieder die gleiche CTR haben, geht es immer so weiter.

VarianteAufrufeClicksCTR
Roter Button8112,50%
Blauer Button8112,50%
Grüner Button8112,50%

Es geht immer so weiter, bis schließlich ein Nutzer auf den Button klickt. Nun klickt ein Nutzer auf den blauen Button.

VarianteAufrufeClicksCTR
Roter Button8112,50%
Blauer Button9222,22%
Grüner Button8112,50%

Nun liegt der blaue Button vorne und wird allen Nutzern angezeigt. Aber was, wenn der blaue Button gar nicht die optimale Wahl ist? Der Epsilon-Greedy-Test wird diesen Fehler in diesem Fall schnell beheben. Nehmen wir an, der blaue Button ist wirklich suboptimal. Den Nutzern wird nun immer der blaue Button angezeigt.

VarianteAufrufeClicksCTR
Roter Button8112,50%
Blauer Button16212,50%
Grüner Button8112,50%

Allerdings hat in der Zwischenzeit kein Nutzer mehr den Button geklickt. Jetzt herrscht zwischen allen Nutzern wieder Gleichstand und es wird zufällig gewählt. Wie es der Zufall will, wird wieder der blaue Button angezeigt und der Nutzer klickt nicht auf den Button.

VarianteAufrufeClicksCTR
Roter Button8112,50%
Blauer Button17211,76%
Grüner Button8112,50%

Nun wird endlich wieder ein anderer Button angezeigt, nämlich der rote. Und siehe da, der Nutzer klickt auf den Button.

VarianteAufrufeClicksCTR
Roter Button9222,22%
Blauer Button17211,76%
Grüner Button8112,50%

So geht der Test für immer weiter, und immer wird den Nutzern der aktuell optimale Button angezeigt. Nach ein paar Tagen könnten die Daten nun so aussehen.

VarianteAufrufeClicksCTR
Roter Button587325,45%
Blauer Button21183,61%
Grüner Button19952,51%

Der rote Button hat sich als die beste Wahl herausgestellt und wird allen Nutzern angezeigt. Doch was, wenn sich nun der Geschmack der Nutzer ändert? In diesem Fall wird der rote Button weiterhin angezeigt, bis seine CTR wieder unter 3,61% gesunken ist. Nun werden die anderen Button auch wieder angezeigt und können ihre CTR steigern.

Um solche plötzlichen Schwankungen abzufangen und schnell zu korrigieren, und um den Test am Anfang möglichst schnell zu einem optimalen Ergebnis zu führen, wird noch eine kleine Änderung durchgeführt. Hier kommen die 90% ins Spiel, die ich bei den Vorteilen aufgeführt hatte.

Momentan werden 100% aller Nutzer den momentan optimalen Button zu Gesicht bekommen. Dadurch ändert sich die CTR bei den anderen Buttons nicht mehr. Um schneller eine Änderung zu bekommen und schneller ein Ergebnis zu ermitteln, wird nur 90% aller Nutzer der optimale Button angezeigt. Die restlichen 10% bekommen einen zufällig gewählten Button, so werden Veränderungen im Nutzerverhalten schneller bemerkt und ausgeglichen.

Demo anschauen

Jetzt, wo Du die Theorie verstanden hast, solltest Du Dir einmal die Demo zu Epsilon-Greedy anschauen:

Soweit zur Theorie, nun wenden wir die Epsilon-Greedy-Methode auf eine Landingpage an!

Umsetzung der Epsilon-Greedy-Methode

Als erstes benötigen wir eine Datenbank, um die Aufrufe zu zählen. Dazu legen wir eine neue Tabelle an:

idbigint(20) unsigned Auto-Inkrement
testvarchar(20)
keyvarchar(20)
viewsbigint(20) NULL [1]
actionsbigint(20) NULL [1]

In der Spalte »test« können wir dem Test einen Bezeichner geben, so können wir einfach mehrere Tests durchführen. In der Spalte »key« bekommt jede Variante einen eigenen Schlüssel. In den Spalten »views« und »actions« speichern wir, wie oft die Variante angezeigt wurde und wie oft sie Erfolg hatte.

Schritt 1

Nun erstellen wir unsere Landingpage.

<!DOCTYPE html>
<html>

<head>
	<title>Landingpage « Epsilon-Greedy</title>

	<link rel="stylesheet" type="text/css" href="style.css" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
	<h1>Dies ist eine Landingpage</h1>

	<p><?php for($i = 0; $i < 100; $i++) {
		$words = array('Lorem', 'ipsum', 'dolor','sit', 'amat', 'consecutor', 'tibi', 'tu', 'es', 'gabo');
		echo $words[array_rand($words)] . ' ';
	} ?></p>

	<p>
		<!-- Hier kommt der Button hin -->
	</p>
</body>

</html>

Schritt 2

Nun brauchen wir den PHP-Code, der das Zählen in der Datenbank und das Auswählen des zu zeigenden Buttons übernimmt.

Folgenden Code speichere ich in der Datei epsilon-greedy.inc.php.

<?php
	
	class EpsilonGreedy
	{
		private $db, $test, $options, $explore;

		public function __construct($test, $options = false, $explore = 0.1) {
			$this->db = new Mysqli('localhost', 'root', '31mathe31', 'epsilon-greedy');

			$this->test = $test;
			$this->options = $options;
			$this->explore = $explore;
		}

		public function view() {
			$clickThroughRates = array();

			foreach($this->options as $option) {
				$result = $this->db->query("SELECT * FROM choices WHERE `test` = '" . $this->test . "' AND `key` = '" . $option . "'")->fetch_object();

				if($result == null) {
					$this->db->query("INSERT INTO choices (`test`, `key`) VALUES ('" . $this->test . "', '" . $option . "')");

					$result = $this->db->query("SELECT * FROM choices WHERE `test` = '" . $this->test . "' AND `key` = '" . $option . "'")->fetch_object();
				}

				if($result->views == 0) {
					$clickThroughRates[$option] = 0;
				} else {
					$clickThroughRates[$option] = $result->actions / $result->views;
				}
			}

			if(rand(0, 100) / 100 <= $this->explore) {
				$choice = array_rand($clickThroughRates);
			} else {
				arsort($clickThroughRates);
				$best = reset($clickThroughRates);
				$winners = array();
				foreach($clickThroughRates as $key => $value) {
					if($value >= $best) {
						$winners[$key] = $value;
					}
				}

				$choice = array_rand($winners);
			}

			$this->db->query("UPDATE choices SET `views` = `views` + 1 WHERE `test` = '" . $this->test . "' AND `key` = '" . $choice . "'");
			return $choice;
		}

		public function action($option) {
			$this->db->query("UPDATE choices SET `actions` = `actions` + 1 WHERE `test` = '" . $this->test . "' AND `key` = '" . $option . "'");
		}
	}
	
?>
  • Dem Konstruktor können wir mit $test den Namen des Tests übergeben und mit $options ein Array von Varianten.
  • Der Parameter $explore definiert, wie häufig ein zufälliger Button angezeigt werden soll. In diesem Beispiel bleiben wir bei 10%.
  • Die Methode view() dient dazu, die anzuzeigende Variante zu ermitteln und dementsprechend den View-Counter der Variante zu erhöhen.
  1. Zuerst wird dazu die CTR aller möglichen Varianten ermittelt (Zeilen 16 – 32).
  2. Danach wird in 10% aller Fälle eine zufällige Variante ausgewählt (Zeilen 34-36), in 90% der Fälle wird das Element mit der besten CTR ausgewählt (Zeilen 36-47).
  3. Nun wird der View-Counter der gewählten Variante erhöht (Zeile 49) und die Auswahl zurückgegeben (Zeile 50).

Die Methode action() erhöht im Erfolgsfall den Action-Counter der Variante, die Erfolg hatte (Zeile 54).

Schritt 3

Nun müssen wir diese PHP-Klasse nur noch in unsere Landingpage einbinden.

<?php
	
	require_once('epsilon-greedy.inc.php');
	
?><!DOCTYPE html>
<html>

<head>
	<title>Landingpage « Epsilon-Greedy</title>

	<link rel="stylesheet" type="text/css" href="style.css" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
	<h1>Dies ist eine Landingpage</h1>

	<p><?php for($i = 0; $i < 100; $i++) {
		$words = array('Lorem', 'ipsum', 'dolor','sit', 'amat', 'consecutor', 'tibi', 'tu', 'es', 'gabo');
		echo $words[array_rand($words)] . ' ';
	} ?></p>

	<p>
		<?php

			$eg = new EpsilonGreedy('landingpageButton', array('green', 'red', 'blue'));
			$choice = $eg->view();

		?>
		<a href="target.php?option=<?php echo $choice; ?>" class="action <?php echo $choice; ?>">Registrieren</a>
	</p>
</body>

</html>
  1. In Zeile 26 initialisieren wir die Klasse und übergeben ihr direkt den Namen des Tests (landingpageButton) und die drei Varianten (green, red, blue).
  2. Danach können wir mit $eg->view() eine Auswahl treffen lassen.
  3. In Zeile 30 geben wir schließlich den Button aus.

Hierbei übergeben wir zum einen an die Ziel-Seite einen Parameter, der uns mitteilt, welcher Button angezeigt wird, zum anderen geben wir dem Button eine entsprechende Klasse, damit wir diesen auch per CSS anpassen können.

.action {
	display: inline-block;

	text-decoration: none;
	color: #000000;

	padding: 5px 10px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ie-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;

	font-size: 1.2em;
}

.action:hover {
	font-size: 1.25em;
}

.action.red {
	background: red;
	-webkit-box-shadow: 0px 0px 2px #991111;
	-moz-box-shadow: 0px 0px 2px #991111;
	-o-box-shadow: 0px 0px 2px #991111;
	-ie-box-shadow: 0px 0px 2px #991111;
	-ms-box-shadow: 0px 0px 2px #991111;
	box-shadow: 0px 0px 2px #991111;
}

.action.green {
	background: green;
	text-shadow: 1px 1px 0px #555555;
}

.action.blue {
	background: blue;
	color: yellow;
}

Mit diesem CSS gebe ich den drei Button-Varianten drei verschiedene Farben.

Schritt 4

Als letztes müssen wir noch überprüfen, ob der Button auch angeklickt wurde. Dies kann man zum einen über Ajax machen, in diesem Fall funktioniert es aber auch auf der Zielseite:

<?php
	
	require_once('epsilon-greedy.inc.php');

	if(isset($_GET['option'])) {
		$eg = new EpsilonGreedy('landingpageButton', array('green', 'red', 'blue'));
		$choice = $eg->action($_GET['option']);
	}

	header('Location: index.php');
	
?>

Ich rufe hier einfach die Methode action() auf und übergebe ihr den angeklickten Button-Namen. So sorgt die Klasse dafür, dass der Action-Counter erhöht wird.

  • Jetzt sind wir schon fertig. Beim Aufruf der Landingpage wird nun einer der Buttons angezeigt und der Epsilon-Greedy-Test läuft.


Epsilon-Greedy-Test optimiert automatisch

Was ist jetzt zu tun? Gar nichts, das ist das tolle am Epsilon-Greedy-Prinzip. Der Test läuft jetzt einfach für immer weiter und optimiert für immer weiter. Im Normalfall sollte ich schnell ein Favorit herauskristallisieren, der dann die meiste Zeit angezeigt wird, während die anderen nur etwa 10% der Zeit angezeigt werden. Sollte sich irgendwann das Nutzerverhalten ändern, wird der Epsilon-Greedy-Test das bald merken und weiter optimieren.

Hier kannst Du Dir den gesamten Code für einen Beispiel-Test herunterladen:

epsilon-greedy-demo.zip

Anpassen der Methode über den Explore-Parameter

Wie schon gesagt, wird momentan in 10% aller Fälle zufällig ein Button ausgewählt, um schneller zu einem Ergebnis zu kommen. Dieser Prozentsatz kann über den Explore-Parameter festgelegt werden. An dieser Stelle kann man das Prinzip noch etwas verfeinern.

Am Beginn des Test hat man noch keine verlässlichen Daten, deshalb macht es Sinn, den Explore-Parameter am Anfang recht hoch zu setzen. Dadurch werden am Anfang alle Buttons ausprobiert und man bekommt schneller Daten. Je mehr Daten man hat, desto geringer sollte der Explore-Parameter sein, damit die optimale Variante möglichst oft angezeigt wird.

Hier kann man also noch optimieren, aber ich kann Dich nur ermutigen, das selbst auszuprobieren. Also, wenn Du das nächste mal einen A/B-Test vorhast, denkt doch mal darüber nach, einen Epsilon-Greedy-Test zu machen.

Weiterführende Infos:

(Artikelbild von krobbie, CC-Lizenz)

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Lars Ebert
Lars Ebert

Lars Ebert ist ein junger Webdesigner und Programmierer aus Lüdenscheid. Er bloggt auf Advitum.de über Webdesign, PHP und Co, seit einiger Zeit schreibt er auch regelmäßig Gastartikel für diverse andere Blogs aus der Webdesign-Szene.

4 Antworten auf "Landingpage Optimierung – ganz automatisch dank Epsilon-Greedy"
  • Avatar

    Interessante Methode!

    Der Ansatz zu „schnelleren Änderung & Ermittlung eines Ergebnisses“, wo 90% aller Nutzer der optimale Button angezeigt wird und lediglich 10% einen zufällig gewählten Button zu sehen kriegen, hat imho zwei Nachteile, welche berücksichtigt werden sollten:

    1.) Bei der Demo wird deutlich, dass viele User vermutlich auf den „hier erfährst du mehr“ Button klicken – egal welche Farbe er hat. Bei der ersten Auslieferung (sagen wir zufällig grau), klickt der erste User auf den Button. Von diesem Moment an ist die Variante“grau“ gegenüber der Variante „rot“ oder „farbig“ im Vorteil und wird fortan in 90% der Fälle ausgeliefert. Bei einer CTR von annähernd 100% wird diese Variante nun immer im Vorteil sein. Hat man also sowieso eine hohe CTR, wird sich nicht unbedingt die „beste“ Variante durchsetzen, sondern einfach diejenige, die zu Beginn zufällig ausgewählt wurde. Dadurch hat man unter umständen auf einer weiss-grünen Seite einen blauen Button, obwohl ein Button in den Farben der restlichen Website stilistisch besser passen würde und auch annähernd 100% CTR erreichen würde.

    2.) High Frequency User bekommen in der Anfangsphase unter Umständen bei jedem Visit eine andere Button-Farbe angezeigt. Klicken sie beim ersten Besuch nicht auf den roten Button, wird er beim erneuten Besuch der Seite 2h später grün sein. Wird wieder nicht geklickt wird er blau – etc. Falls der Button also selten bis nie geklickt wird – oder aber egal welche Farbe immer geklickt wird – sieht der User jedes Mal eine andere Button-Farbe. Dies kann unter Umständen auch etwas „verwirren“.

    Ansonsten sehr lesenswert, Danke!

  • Avatar

    @bertschingers: Vielen Dank für deinen Kommentar. Natürlich ist auch die Epsilon-Greedy-Methode nicht perfekt und bietet keine absolute Garantie für optimale Ergebnisse.

    Zu Punkt 1 kann ich sagen: wenn die Variante grau tatsächlich schlechter ist als die anderen Varianten und nur durch Zufall oder einen Messfehler so eine hohe CTR hat, wird sich dies zeigen. Das ist ja der Vorteil von Epsilon-Greedy: die Views und Clicks werden auch weiterhin gezählt! Sollte Variante grau wirklich schlechter sein, wird die CTR automatisch weiter sinken. Da außerdem in 10% aller Fälle ein zufälliger Button angezeigt wird, können die anderen Varianten ihre CTR auch noch verbessern. So wird der „Fehler“ mit der Zeit automatisch korrigiert, Messfehler werden geglättet und die „beste“ Variante wird sich durchsetzen.

    Dies sieht man auch, wenn man die Statistik längere Zeit vergleicht! Die beiden anderen Varianten wurden regelmäßig mal wieder angezeigt, haben aber ihre CTR weiter verschlechtert. Die graue Variante hat die CTR jedoch kontinuierlich gesteigert.

    Zu Problem 2: Das ist richtig, doch diesen Nachteil hat man ja grundsätzlich auch bei A/B-Tests. Bei Epsilon-Greedy kann man jedoch den Explore-Parameter zu Anfang möglichst hoch setzen und bekommt so relativ schnell ein Ergebnis – der Nachteil tritt also nur eine sehr kurze Zeit auf.

    Außerdem kann man auch, genau wie bei A/B-Tests, in einer Session speichern, wenn einem Nutzer eine Variante angezeigt wird. Kommt er dann noch einmal auf die Seite, wird ihm wieder die gleiche Variante angezeigt. Das Problem wäre gelöst. Darauf habe ich aber der Einfachheit halber verzichtet.

Schreibe einen Kommentar

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

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige