Usability Tests mit Google Analytics

Usability Tests gehören eigentlich zu den Stärken des Google Website-Optimierungstool. Doch für Seiten, in denen es um Inhalte und nicht um Aktionen, wie zum Beispiel das Einkaufen geht, ist Analytics eine gute Wahl. Im folgenden Artikel werde ich Erklären, warum man Usability-Tests machen sollte und wie man sie mit Analytics durchführt

Usability Test für Seiten mit Inhalten

Beim Website-Optimierungstool von Google geht es darum bestimmte Aktionen zu Optimieren. So kann man zum Beispiel gut testen, mit welchem Layout sich mehr Besucher anmelden. Doch bei einer Seite mit Inhalten geht es um andere Ziele.

So geht es dort zum Beispiel um die Besuchszeit und die Seitenaufrufe die ein Besucher macht. Und welches Tool ist dort besser geeignet als Google Analytics?

Warum sollte man Testen?

Man selbst denkt meistens, dass die Seite gut aussieht. Doch sie muss auch gut benutzbar sein. Zum Anderen muss sie zum Lesen und Wiederkommen anregen. Jeder Besucher hat seinen eigenen Geschmack. Wenn man also ein neues Design macht, sagen vielleicht welche rot gefällt mir nicht oder Ähnliches. Doch vielleicht finden 90 % der Benutzer die sich nicht gemeldet haben rot ganz gut.

Oft helfen auch Änderungen, die ein normaler Benutzer gar nicht bemerkt.

Was soll getestet werden?

Meiner Meinung nach sollte man nicht das komplette Layout verändern. Man sollte sich immer nur einen Teil der Seite aussuchen und ihn Testen. So erkennt man die Schwächen der Seite und kann diese Optimieren. Ich bin nun damit angefangen jede Woche einen Test durchzuführen. So macht man statt einem kompletten Redesign immer nur ein Bisschen. Irgendwann sieht die Seite dann ganz anders aus als vorher, aber die Besucher sind damit auf jeden Fall gut zufrieden.

Vielleicht ist es einigen von euch aufgefallen: Letzte Woche war das Layout auf SteviesWebsite bei 50% der Besucher links ausgerichtet und bei den anderen 50% war es zentriert. Das war natürlich ein Test:

SteviesWebsite Zentriert

SteviesWebsite Links

Zum Ergebnis des Tests komme ich später. Eine weitere Testidee könnte zum Beispiel das Herausfinden der optimalen Breadcrump sein.

Benutzerdefinierte Variablen

Der Test läuft über Analytic’s benutzerdefinierte Variablen. Hier wird eine Variable gesetzt, die die angezeigte Variante beschreibt. In meinem Test habe ich die Variable Aligment genannt. Als Werte gab es dabei left und center. Um diese Variable bei Analytics anzugeben müssen wir später den Tracking-Code ein bisschen verändern.

Testgruppe festlegen (mit PHP)

Wir brauchen ein bisschen PHP um den Test durchzuführen. Wer nun ein CMS verwenden, kann das ganze im Theme selbst einbauen. So hab ich das zum Beispiel bei WordPress gemacht.

Da ein Benutzer nicht bei jedem Seitenaufruf ein anderes Layout gezeigt bekommen soll, müssen wir das ganze in einer Session speichern. Dafür benötigen wir ein session_start was am besten ganz oben in der jeweiligen Datei eingebaut wird. Bei SteviesWebsite kommt noch dazu, dass es mehrere Subdomains gibt. Hier muss die Session diese auch berücksichtigen, so dass folgender Code dabei herauskommt (das stevieswebsite.de bitte ersetzen):

<?php
  ini_set("session.cookie_domain", ".stevieswebsite.de");
  session_start();
?>

Der nächste Code muss an der zu Testenden Stelle eingebaut werden. So habe ich zum Beispiel einen neuen StyleSheet im Head-Bereich eingefügt. Das ergibt folgenden PHP-Code:

<?PHP
  if($_GET['newalignpw'] == "meinpasswort"){
    $_SESSION['align'] = false;
  }
  if(!$_SESSION['align']){
    if(rand(2,3) == 2){
      $_SESSION['align'] = 'left';
    }
    else{
      $_SESSION['align'] = 'center';
    }
  }
  if($_SESSION['align'] == 'left'){
?>
    <link rel="stylesheet" href="http://stevieswebsite.de/tests/alignleft.css" type="text/css" />
<?PHP
  }
?>

In der Session Variable align wird das jeweilige Layout gespeichert. Also left oder center. Dieser wird durch das rand per Zufall zugewiesen, wenn er noch nicht vorhanden ist. Wenn ich per Parameter der Seite das newalignpw zuweise, wird die Variable neu zugewiesen – Das ist zum Testen. Denn schließlich wollt ihr doch beide Layouts vorher mal gesehen haben, oder? Wenn man nun ein neues Layout haben möchte, muss man folgende Seite öffnen (das Passwort wurde geändert):

http://stevieswebsite.de?newalignpw=meinpasswort

Da die Zenrierung bisher Standard war, habe ich, wenn die Variable align auf left steht, einfach einen zusätzlichen Stylesheet eingeblendet.

Tracking

Nun muss der Analytics-Code geändert werden. An dieser Stelle möchte ich euch darauf hinweisen, dass ihr die eigenen Besuche am besten nicht mitspeichert. Denn ihr verhaltet euch anders als die normalen Besucher. So wird der Test ungenauer. Wie das man das umsetzt, erfahrt ihr in meinem Artikel Analytics Tracking für Admin ausschalten.

Den Analytics-Code habt ihr wahrscheinlich alle am Ende eurer Seite eingebaut. Hier gibt es ein JavaScript Objekt namens pageTracker. Dieses bietet eine Methode um die benutzerdefinierte Variablen zu setzten. Hier müssen wir den Inhalt der Session-Variable einbauen:

var pageTracker = _gat._getTracker("UA-XXXXXX-X");
pageTracker._trackPageview();
pageTracker._setCustomVar(
   1,
   "Alignment",
   "<?php echo $_SESSION['align']; ?>",
   1);

Das Alignment ist der Name der Variable. Mit dem echo $_SESSION[‚align‘] wird entweder left oder center gespeichert. Die anderen beiden Variablen sind für diesen Test uninteressant. Beide sollten eins sein.

Auswertung in Google Analytics

Kommen wir nun zur Testauswertung in Google Analytics. Ich habe meinen Test eine Woche laufen gelassen. Den Zeitraum solltet ihr nach eurer Besucherzahl wählen. Wenn ihr einen genaueren Test wollt, müsst ihr den Test auch länger laufen lassen.

Um das Ergebnis zu bewundern müsst ihr in Analytics auf Besucher->Benutzerdefinierte Variablen gehen. Hier steht der Name eures Tests, was bei mir Alignment ist. Wenn ihr darauf klickt, könnt ihr die Werte begutachten. Bei mir kam das folgende Ergebnis dabei heraus:

Ergebnis Analytics Test

Vielleicht werdet ihr euch wundern, warum die Anzahl der Zugriffe dort nicht mit der vom Dashboard übereinstimmt. Die Zugriffe sind bei mir um einiges weniger. Das Problem liegt meiner Meinung nach daran, dass der Tracking-Code nicht überall ausgetauscht wurde.

Das Problem spielt bei dem Ergebnis jedoch keine Rolle. An der Anzahl der neuen Zugriffe kann man schon mal sehen, dass beide Test ungefähr die gleiche Ausgangsstellung hatten.

Wichtig für uns sind nun die Seitenzugriffe, die Besuchszeit und die Absprungsrate.

Hier schlägt sich bei mir das links-ausgerichtete Layout in allen Kategorien besser als das Zentrierte. Ein Besucher mit links ausgerichteten Layout besucht auf SteviesWebsite eine Seite mehr und bleibt auf allen Seiten eine Minute länger. Die Absprungsrate ist weniger repräsentativ, aber auch hier sind es immerhin 3% die weniger abspringen.

Auswertung auf dem Papier

Jeder Test sollte schön archiviert werden. Dabei ist es meiner Meinung nach das Beste, wenn man das Ganze gedruckt hat. In einem Ordner kann man dann die Tests reinlegen und sich hin und wieder mal alte Tests heraussuchen und überlegen, warum das eine Layout nun besser war als das Andere. Durch diese Erkenntnisse kann man dann neue Tests gestalten. Vergesst die Screenshots nicht!

Always Be Testing

So heißt der Titel eines Buches über das Website Optimiergstool, welches ich gerade lese. Der Titel lässt sich schön mit dieser Situation vergleichen. Mal sollte dauerthaft einen Test am laufen haben, denn verbessert sich die Seite stetig. Und wer hätte es anders gedacht, auch dein Verhalten auf dieser Seite wird gerade getestet. Und das ist auch gut so. Denn so wird die Seite an genau deine Verhältnisse angepasst.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Webdesign: Die optimale Breadcrumb schrieb am 03.01.2010:

[...] mal ein bisschen experimentieren. Das ganze Testet man am besten mit Usability-Tests: Usability Tests mit Google Analytics Kommentare (1)RSS-Feed für Kommentare zu diesem Artikel. [...]

whit3h4t schrieb am 03.01.2010:

der gedanke ist an sich nicht schlecht, jedoch denke ich das der zeitraum von lediglich einer woche nicht wirklich repräsentativ ist. das Ergebnis kann nach mehreren wochen schon ganz anders ausfallen. wir lassen unsere test mindestens über einen zeitraum von vier wochen laufen um erste erkenntnisse und schlüsse daraus zu ziehen. dennoch ein guter anfang sich wenigstens mit deinen besuchern auseinander zu setzen. immer weiter so

Stefan Wienströer schrieb am 03.01.2010:

Wie schon erwähnt, man muss den Zeitraum wählen den man für gut hält. Aber du hast Recht,man sollte etwas länger testen um auch ein gutes Ergebnis zu bekommen.

Mario Fischer schrieb am 04.01.2010:

Schöner Test und gut beschrieben - vielen Dank dafür. Die Zahlen lassen allerdings keinerlei Rückschlüsse darauf zu, welche Variante die bessere wäre. Das hat nicht nur mit dem Zeitraum zu tun, den Zahlen fehlt es an statistischer Signifikanz. Das müsste wesentlich (!) länger laufen. Warum hast Du den Test denn schon so bald abgebrochen?

Stefan Wienströer schrieb am 04.01.2010:

Weil sich die linke Variante konstant vorne gehalten hat dachte ich, dass sich so oder so nichts mehr ändert.

Andreas schrieb am 04.01.2010:

@Mario Fischer: ab wann wäre es denn Deiner Einschätzung nach signifikant geworden? Durch den Jahreswechsel kommen wohl weniger Besucher wie in anderen Vergleichszeiträumen, aber meiner Einschätzung nach muss der Test nicht um vieles länger laufen, damit er als signifikant eingestuft werden kann. Stefan hat es für sich als signifikant bereits eingestuft, da er keine wesentlichen Veränderungen mehr erwartet.

Andreas schrieb am 04.01.2010:

ich vergas: @Stefan: Lob für den sehr ansehlichen und einfachen Test!

Links der Woche (KW 01, 2010) - Affiliate-Marketing.de Blog schrieb am 08.01.2010:

[...] - Usability Tests mit Google Analytics Die Conversionrate einzelner Projekte ist stark abhängig von einer guten Usability. Stefan [...]

Kostenlos zur eigenen Heatmap (Usability) schrieb am 08.07.2010:

[...] Ergebnis kann auf einzelne Seiten gefiltert werden. So kann man zum Beispiel mit gleichzeitigen A/B Tests auch Landingpages und Co [...]

Daniel schrieb am 29.10.2010:

Hallo zusammen, vielen Dank für die ausführliche Beschreibung. Habe das Ganze gestern mit dem asynchronen Code umgesetzt: _gaq.push(['_setCustomVar', 1, 'Teaser', 'Mann', 2]); Jedoch gibt es an besagter Stelle bei Google Analytics keine Daten. Normalerweise hat man ja 24 Std. später die Auswertung des Vortages. Dauert es bei dieser Thematik länger bis was angezeigt wird? Oder ist dieses Thema mit dem asynchronen Code komplexer? Freue mich über jeden Hinweis.

Stefan Wienströer schrieb am 29.10.2010:

das kann manchmal etwas dauern. Wie lange wartest du denn schon?

Daniel schrieb am 30.10.2010:

Hallo, Danke für die Antwort. Das hat tatsächlich etwas gedauert: Vorgestern installiert, heute sind die Daten da. War etwas irritierend, weil sonst am nächsten Tag die Daten schon vorliegen. Aber Hauptsache ist ja, es funktioniert. Insofern allen ein schönes Wochenende.

Johannes Müller schrieb am 15.10.2015:

Klasse Artikel - aber ist das nicht eher ein A/B-Test als ein Usability Test? Unter Usability Test verstehe ich eher die Beobachtung eines Nutzers, der typische Aufgaben auf einer Webseite durchführt. Also qualitative, statt quantitative Forschung.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project