Wie man A/B-Tests mit Schwerpunkten durchführt
Sind visuelles Design und A/B-Testing eine himmlische Verbindung oder die besten Feinde der Welt? Wir haben es uns zur Aufgabe gemacht, Designer und Optimierer einander näher zu bringen, damit sie visuell ansprechende Erlebnisse schaffen können, die auch konvertieren. Willkommen zurück zu unserer Blogserie Design-Prinzipien, die Sie A/B-Tests unterziehen sollten.
Letzte Woche sprachen wir mit Optimizely Design Manager Jeff Zych, um mehr darüber zu erfahren, wie Sie Farbkontraste nutzen können, um die Conversions zu steigern. Diese Woche habe ich mich mit Jon Saquing, dem Kommunikationsdesigner von Optimizely, zusammengesetzt, um mehr über Schwerpunkte im visuellen Design zu erfahren und darüber, wie Sie diese nutzen können, um ansprechende Erlebnisse zu schaffen.
Was sind Brennpunkte?
Brennpunkte sind interessante, hervorgehobene oder unterschiedliche Bereiche in einer Komposition, die die Aufmerksamkeit des Betrachters auf sich ziehen und halten. "Brennpunkte sind ein Ort, an dem das Auge in Ihrem visuellen Design ruht", sagt Jon. "In der visuellen Erzählung der Seite sind sie das Komma."
Im Idealfall führt Ihr visuelles Design den Betrachter auf subtile Weise zu den Brennpunkten, die um die Schlüsselbereiche herum angelegt wurden, in denen Sie möchten, dass der Besucher aktiv wird oder eine Aktion ausführt: eine CTA-Schaltfläche, ein Formularfeld oder ein anderes UI-Element.
Manchmal kann man Schwerpunkte setzen, indem man dem visuellen Element mehr Gewicht verleiht: Farbkontrast ist eine Möglichkeit, die Aufmerksamkeit auf sich zu ziehen und einen Schwerpunkt zu setzen. Brennpunkte können aber auch aufgrund der relativen Position, des umgebenden Kontexts oder der unterstützenden visuellen Bilder in Ihrem Design geschaffen werden.
Die Alternative zu einer Seite, die einzelne Schwerpunkte setzt, ist eine Seite, die die Aufmerksamkeit des Benutzers aufteilt und vielen verschiedenen möglichen Aktionen oder visuellen Elementen das gleiche Gewicht gibt. Manchmal ist dies sinnvoll, z.B. bei einer Hub- oder Indexseite, die je nach Zweck der Seite viele Schwerpunkte setzt. Wenn Sie jedoch versuchen, die Seite für Conversions zu optimieren, sollten Sie begrenzte Schwerpunkte setzen, um die Aufmerksamkeit und die Aktionen des Benutzers zu straffen.
Die Landing Page von Amazon verfügt über einen subtilen Schwerpunkt, hat den Fokus aber auf viele visuelle Elemente verteilt.
Brennpunkte mit Bildmaterial
Zunächst die Fotografie. Sie können einen Brennpunkt schaffen, indem Sie ergänzende Bilder verwenden, die die Aufmerksamkeit auf den interessanten Punkt lenken. Stellen Sie sich vor, dass Sie eine Schlagzeile oder eine Schaltfläche in die Blickrichtung einer Person oder an das Ende einer Reihe von Elementen setzen. Jon rät: "Die Fotografie ist ein visuelles Element mit hohem Risiko und hohem Gewinn. Achten Sie darauf, dass Sie Fotos überlegt und sinnvoll einsetzen. Jeder kennt Beispiele von Stockfotos, die das Ziel verfehlen und unauthentisch wirken."
Sowohl Evernote (oben) als auch Kissmetrics (unten) haben Menschen verwendet, die in die Richtung der primären Call-to-Action blicken, um einen visuellen Schwerpunkt zu setzen.
Neben der Fotografie können auch Illustrationen und Ikonographie zur Entwicklung von Brennpunkten verwendet werden. "Eine asymmetrische Komposition kann die Illusion von Bewegung erzeugen und die Aufmerksamkeit des Publikums erfolgreich auf einen bestimmten Punkt lenken", sagt Jon.
In diesem Design zeigt das Auto auf den Brennpunkt und lenkt den Blick auf den Text und die Call-to-Action.
Wenn Sie Illustrationen verwenden, um einen Brennpunkt zu konstruieren, achten Sie auf die Richtung der Elemente, ihre Ausrichtung, wenn Sie eine Serie verwenden, und die Ausgewogenheit der Elemente von links nach rechts auf einer Seite. Im obigen Beispiel erzeugt die Richtung des Autos ein Gefühl der Bewegung von links nach rechts auf der Seite und lenkt den Blick auf die Call-to-Action (die durch einen nach rechts zeigenden Pfeil und die Verwendung der gleichen Farbe Gelb noch verstärkt wird).
Brennpunkte mit negativem Raum
Wie beim Farbkontrast ist manchmal der umgebende visuelle Raum genauso wichtig wie das Element, auf das Sie die Aufmerksamkeit lenken möchten.
Negativer Raum - der visuelle Raum, der ein Motiv umgibt - ist eine weitere Möglichkeit, einen Brennpunkt zu schaffen. Wenn Sie viel negativen Raum in ein visuelles Design einfügen, wird die Unordnung, die das Auge des Publikums ablenkt, reduziert.
"Denken Sie an ein schön angerichtetes Gericht in einem guten Restaurant", sagt Jon. "Der weiße Raum lenkt Ihre Aufmerksamkeit auf das Essen und die Schönheit der Präsentation. Das Essen ist der Brennpunkt in der Mitte des negativen Raums."
Obwohl es verlockend sein kann, den negativen Raum mit anderen visuellen Elementen zu füllen, ist es wichtig, den Raum um ein Schlüsselelement herum zu erhalten, damit es im Vordergrund bleibt.
Platzieren Sie Schlüsselelemente innerhalb des natürlichen Lesemusters einer Seite - dem F-Muster. Wenn Sie Schwerpunkte innerhalb des natürlichen Lesemusters der Augen des Lesers setzen, ist es wahrscheinlicher, dass Sie seine Aufmerksamkeit erregen oder seine Konzentration an einem sehr logischen Punkt unterbrechen. Versuchen Sie, eine Überschrift, eine wichtige Information oder ein anderes interaktives Element in einer der horizontalen Linien des F-Musters auf Ihrer Seite zu platzieren.
Wie Sie die Wirkung von Focal Points testen können
Um Schwerpunkte als Teil eines digitalen Erlebnisses zu testen, ermitteln Sie zunächst das Hauptziel Ihrer Seite. Wählen Sie dann das/die Element(e) auf der Seite aus, die diesem Ziel am ehesten entsprechen. Vielleicht leiten Sie die Besucher auf eine Preisseite weiter, regen sie an, eine Produktkategorie zu durchstöbern, oder heben Inhalte hervor, die sie konsumieren sollen.
Verwenden Sie dann eine der oben aufgeführten Techniken, um einen Schwerpunkt in Ihrem visuellen Design zu setzen. Das kann bedeuten, dass Sie ein kreatives Element hinzufügen, wie z.B. Bilder, oder Sie könnten damit experimentieren, Elemente vom Hauptelement weg zu bewegen, um einen negativen Raum zu schaffen. Stellen Sie sicher, dass Sie Ihre Design-Hypothese dokumentieren. Zum Beispiel:
Wenn wir den negativen Raum um das E-Mail-Anmeldeformular auf der Homepage herum nutzen, werden wir die Conversions für dieses Element erhöhen, weil wir erfolgreich einen Schwerpunkt in der visuellen Gestaltung der Seite geschaffen haben.
Führen Sie dann Ihren Test durch. Wenn sich Ihre Kennzahlen verbessern, suchen Sie nach weiteren Möglichkeiten, Schwerpunkte in Ihren digitalen Erlebnissen zu setzen, insbesondere auf Seiten, die länger sind und zum Scrollen einladen. Wenn Ihre Conversion Rate nicht ansteigt, überlegen Sie, ob es Ihnen gelungen ist, Ihren Schwerpunkt erfolgreich vom Rest Ihres Designs abzuheben, und versuchen Sie eine andere Technik.
Fokuspunkte im Detail untersuchen
Schwerpunkte sind ein wesentlicher Bestandteil des visuellen Designs und ergänzen viele andere Konzepte, darunter Kontrast und visuelle Hierarchie. Wenn Sie mehr darüber erfahren möchten, wie Sie diese Prinzipien bei der Gestaltung anwenden, lesen Sie die folgenden Ressourcen:
