Split-Tests mit CSS-Stylesheets

Veröffentlicht: 2021-07-19

Der schnellste Weg, eine Website umfassend zu testen, besteht darin, innerhalb eines Website-weiten Experiments mutige Änderungen am Cascading Style Sheet (CSS) vorzunehmen.

Warum CSS-Stylesheets wichtig sind CSS-Split-Testing-2

Die CSS-Hauptdatei einer Website ist ein zentraler Bezugspunkt, der die gemeinsamen Stile, Positionen und Verhaltensweisen aller Elemente auf jeder einzelnen Webseite steuert.

In der CSS-Hauptdatei befinden sich die Einstellungen für alle Schriftarten, Ränder, Farben, Ausrichtungen und vieles mehr. Es ist die wichtigste Datei auf den meisten Websites mit Vorlagen und kann das Aussehen einer Website mit nur einer winzigen Änderung drastisch ändern.

Site Wide Split-Tests, die Sie jedes Mal durchführen sollten

Es gibt viele gemeinsame Elemente auf einer Website, die eine große Rolle dabei spielen, wie einfach die Website zu lesen, zu verwenden, zu navigieren, Calls-to-Action hervorzuheben und alle wichtigen Informationen anzuzeigen.

Wenn ein Benutzer entscheidet, ob er Kontakt aufnehmen oder vielleicht auf einer Website einen Kauf tätigt, kann einer der oben genannten Faktoren ein entscheidender Faktor sein, um diese Conversion zu stoppen. Im Folgenden sind einige wichtige Überlegungen zu Site-weiten Elementen aufgeführt:

Call-to-Action-Schaltflächen

Alle Online-Conversions beginnen mit einer Call-to-Action (CTA)-Schaltfläche, einem Link oder einem Widget. Die Größe, Farbe, der Wortlaut und die gleichmäßige Position dieser CTAs haben einen großen Einfluss auf die Konversionsraten. Bestimmte Farben von CTA-Buttons können sich beispielsweise zu sehr in den Hintergrund einfügen oder den Benutzer unbewusst davon abhalten, sie anzuklicken, je nachdem, was er als negative Farbe empfindet. Auch der Text, der auf Links und Schaltflächen verwendet wird, macht einen Unterschied. Wenn Sie beispielsweise die Schaltfläche „SENDEN“ eines Formulars einfach in „SENDEN“ ändern, erzielen Sie bessere Ergebnisse, da „Senden“ als eindringliches Wort wahrgenommen wird. Weitere Informationen hierzu finden Sie im ultimativen CTA-Leitfaden hier auf VWO.com.

Für die Schaltflächen "Jetzt kaufen" wird eine leichte Variation von Grün verwendet. Kombination 2 ergab 1,5% mehr Produkte, die in den Warenkorb gelegt wurden als die ursprüngliche Kombination 1
Für die Schaltflächen „Jetzt kaufen“ (hervorgehoben) wird eine leichte Variation von Grün verwendet. Kombination 2 ergab 1,5% mehr Benutzer, die Produkte in den Warenkorb legten als die ursprüngliche Kontrolle, Kombination 4 war 1,4% schlechter

Schriftgröße

Dieses selten getestete Element spielt für viele Benutzer eine große Rolle bei der Barrierefreiheit. Schriftarten sind für manche Benutzer oft zu klein zum Lesen, daher müssen sie möglicherweise die Zoomfunktion verwenden, wenn sie damit vertraut sind, aber dies ist auf mobilen Geräten nicht immer möglich oder einfach. Auch zu große Schriftgrößen können schädlich sein, da sie die Lesegeschwindigkeit verlangsamen können, insbesondere auf den mobilfreundlichen Versionen von Websites. Lesen Sie hier auf imarc.com mehr über die Wissenschaft hinter Schriftgrößen.

Schriftart

Auch hier wird der Schriftstil auf vielen Websites selten getestet, er scheint in der ersten Designphase der Entwicklung entschieden und dann auf vielen Websites vergessen zu werden. Verschiedene Schriftarten haben unterschiedliche Lesbarkeitsstufen. Außerdem sind einige Schriftarten nur auf bestimmten Geräten verfügbar und einige werden auf bestimmten Geräten bei bestimmten Größen ohne Font-Rasterung wirklich schlecht angezeigt. Sie können eine Schriftartenfamilie verwenden, um eine Reihe von Schriftarten zu verwenden, beginnend mit Ihrem Favoriten bis hin zu einfacheren Schriftarten wie Arial, die immer auf jedem Gerät vorhanden sind Neue Schriftarten können über JavaScript oder einen Dienst wie Google-Schriften. Mehr erfahren Sie in diesem Beitrag auf TypeWolf.com zu den Top Ten der Webfonts 2016.

Schriftstil

Schriftstile wie Zeilenhöhe, Unterstreichung, Fettdruck, Farbe und Ränder wirken sich ebenfalls auf die Zugänglichkeit und Lesbarkeit aus. Links werden eher angeklickt, wenn sie blau und unterstrichen sind, was von Google und eBay im Laufe der Jahre akribisch getestet wurde, wobei Google 2016 sogar schwarze Links testete. Wenn Links nicht klar als Links auf Ihrer Website hervorstechen , dann sollten sie getestet werden und Sie werden feststellen, dass sie nach einer Änderung oft ein größeres Engagement zeigen.

Die Conversions stiegen um 1,9 % durch einfaches Ändern der Schriftart auf dieser Website
Die Conversions stiegen um 1,9 % durch einfaches Ändern der Schriftart auf dieser Website

Hintergrundfarben

Oft werden Websites auf einem weißen Hintergrund erstellt, aber wenn Sie sich Ihre Lieblingsnachrichten-Website oder Social-Media-Plattform ansehen, ist es oft ein leichter Blau- oder Grauton. Hintergrundfarben können bestimmte Bereiche der Webseite hervorheben, z. B. eine Informationsbox oder ein Aktionsbanner. Außerdem kann die Hintergrundfarbe die Marke oder den Typ des angezeigten Produkts verstärken und diese Korrelation verbessert die Konversionsraten, da der Inhalt relevanter erscheint. Erfahren Sie in diesem Artikel auf Jimdo.com mehr über Farbpsychologie für Websites und sehen Sie, wie Farben wie Orange ein gutes Geschäft bedeuten (denken Sie an Amazon) und Blau für Neutralität und Technologie (denken Sie an Facebook oder Twitter).

Elemente neu positionieren oder ausblenden

Die CSS-Datei steuert die Ränder und Abstände für alle gängigen Elemente auf den Webseiten und ermöglicht es Ihnen auch, bestimmte Elemente mit dem Befehl „display:none“ vollständig zu entfernen. Sie können dies beispielsweise nutzen, indem Sie versuchen, vertikal verschwendeten Speicherplatz zu reduzieren, unnötige Informationen zu entfernen, den Abstand zwischen wichtigen CTAs zu ändern oder mit dem Entfernen bestimmter Inhaltsblöcke zu experimentieren. Manchmal ist weniger auf Webseiten besser (Keep-it-simple-dumm-Prinzip) und es empfiehlt sich, zu sehen, wie viel von einer Webseite entfernt werden kann, während die Conversion-Rate verbessert wird.

Das Engagement wurde um mehr als 16 % verbessert, als Inhalt zu dieser Seite hinzugefügt wurde
Die Interaktion mit Inhalten auf Kategorieseiten wurde um über 16 % verbessert.

Plattformen für das Split-Testen von CSS-Dateien Site-Wide

Es ist wirklich wichtig, Vorlagen auf einer Website für jeden einzelnen Benutzer konsistent zu halten, wenn er von Seite zu Seite wechselt. Es könnte nachteilig (und sicherlich ein schlechtes Experiment) sein, wenn nur eine Seite A/B-Split getestet wurde, während andere gleich blieben.

Um die CSS-Dateiänderungen von Seite zu Seite für jeden einzelnen Benutzer konsistent zu halten, ist eine spezielle Split-Testing-Software erforderlich. Leider können die kostenlosen "Content-Experimente" von Google Analytics diese Arten von Split-Tests nicht berücksichtigen. Hier sind einige Tools, die Sie möglicherweise verwenden möchten:

  • Visual Website Optimizer (VWO) – vwo.com – Wir haben festgestellt, dass dies die am einfachsten zu implementierende Split-Testing-Software ist. Es verarbeitet alle Arten von Split-Tests auf HTML, CSS oder JavaScript und generiert bei Bedarf auch User-Heatmaps. Preisstrukturen finden Sie hier
  • Optimizely –Optimizely.com – Dies verarbeitet auch alle Arten von Split-Tests auf HTML, CSS oder JavaScript und kann bei Bedarf einige sehr fortgeschrittene Split-Tests durchführen. Preisinformationen finden Sie hier

Fazit

Das Einrichten eines Site-weiten CSS-Split-Tests ist einfach und effektiv, aber Sie benötigen möglicherweise 15 Minuten Hilfe von einem Entwickler, wenn Sie mit CSS nicht vertraut sind.

Sobald die Website über die richtigen Schriftarten, Stile und CTAs verfügt, können Sie sich auf die wichtigsten Zielseiten der Website und andere Nischenelemente konzentrieren. Dies erhöht die Konversionsraten und macht die Website viel effektiver, ohne dass zusätzlicher Traffic erforderlich ist.

Wenn Sie Hilfe bei Ihrem benötigen, zögern Sie nicht, uns zu kontaktieren.