Visuelle Elemente bilden die emotionale Grundlage Ihrer Zielseiten.
Sie können dafür sorgen, dass Ihre Besucher zufrieden, informiert, motiviert oder beruhigt nach Hause gehen.
Und das Wichtigste: Sie können Ihre Konversionsraten steigern.
Aber wie genau können Sie visuelle Elemente in Ihre Zielseiten integrieren?
Es überrascht nicht, dass es viele Möglichkeiten gibt, visuelle Elemente zu verwenden – als Bilder, Videos und sogar GIFs.
In diesem Beitrag zeige ich Ihnen 16 kreative Möglichkeiten, visuelle Elemente auf Ihren Zielseiten zu verwenden. Ich zeige Ihnen auch, wie Sie jedes visuelle Element optimal nutzen, um bessere Konversionsraten aus Ihren Seiten herauszuholen.
Lassen Sie uns darauf eingehen.
Kapitel 1 – Als Bilder
So verwenden Sie visuelle Elemente normalerweise auf Ihren Zielseiten – als Bilder.
Bilder haben den doppelten Vorteil, dass sie Aufmerksamkeit erregen und Ihre Botschaft verstärken. Gleichzeitig sind sie einfach zu verwenden und schnell zu laden. Und die Ladezeiten von Seiten sind für die Benutzererfahrung von großer Bedeutung!
Wenn man noch die Tatsache berücksichtigt, dass Bilder leicht verfügbar sind, sich einfach bearbeiten lassen und ihre Erstellung (im Vergleich zu Videos) so gut wie nichts kostet, wird klar, warum sie die tragende Säule der Zielseiten sind.
Welche Art von Bildern können Sie also auf Ihren Zielseiten verwenden?
Hier sind einige Ideen für den Anfang:
Verwenden Sie Bilder von Personen
Es gibt drei Dinge, die Sie über die Verwendung von Bildern von Personen auf Ihren Zielseiten wissen müssen:
Durch dieses Verhalten sind Bilder von Personen ein besonders wirkungsvolles Mittel, um Empathie zu erzeugen, die Aufmerksamkeit zu fesseln und auf ein wichtiges Element unserer Landingpage zu lenken.
Zum Beispiel, eine Eye Tracking Studie einer Landingpage mit einem Baby zeigte, dass der Betrachter den Text auf der Seite fast ignorierte, wenn das Baby geradeaus blickte. Stattdessen galt die ganze Aufmerksamkeit dem Gesicht des Babys.
Wenn das Bild so verschoben wurde, dass das Baby dem Text zugewandt war, schauten die Besucher zuerst auf das Baby (d. h. das Gesicht erregte ihre Aufmerksamkeit). Dann folgten sie dem Blick des Babys und schauten auf den Text.
Dies ist ein großartiges Beispiel für unsere Tendenz, Gesichter wahrzunehmen und ihrem Blick zu folgen.
Sehen wir uns nun einige konkrete Möglichkeiten an, wie Sie Bilder von Personen auf Ihren Zielseiten verwenden können:
1. Helfen Sie den Besuchern, sich mit Ihrem Produkt zu identifizieren
Wenn Sie Besuchern zeigen, dass Ihre Kunden „genau wie sie“ sind, können Sie die Empathielücke überbrücken. Das bedeutet, dass sie sich leichter mit Ihren Produkten identifizieren und sich vorstellen können, wie sie diese verwenden.
Das Ergebnis? Höhere Konversionsraten.
Eine Möglichkeit hierzu besteht darin, auf Ihren Zielseiten entweder bestehende Kunden oder eine idealisierte Version des Kunden (basierend auf Ihren Personas) anzuzeigen.
Zum Beispiel diese Landingpage von Basislager zeigt ein Zitat einer tatsächlichen Kundin zusammen mit ihrem Bild:
Und hier ist ein Beispiel von Voyadas ein Modell zeigt, das einen idealen Zielkunden darstellt:
Wenn möglich, verwenden Sie einen echten Kunden und keinen idealen Zielkunden – das wirkt viel authentischer (zumindest für mich). Und wenn Sie Zweifel haben, führen Sie Split-Tests durch, um herauszufinden, was am besten funktioniert.
2. Stellen Sie eine Emotion dar, die Sie bei Ihren Besuchern spüren lassen möchten
Wie zeigen Sie, dass die Verwendung Ihrer Produkte den Menschen Freude macht?
Ganz einfach: Verwenden Sie ein Bild, das die gewünschte Emotion darstellt.
Dies ist ein Teil der modernen Werbung. In Autowerbungen sieht man glückliche Menschen, denn genau das wollen die Autohersteller in einem über ihre Autos vermitteln.
Es ähnelt den „Vorher“-Aufnahmen in TV-Infomercials. Sie sind voller unglücklicher, frustrierter Menschen, denn genau diese Emotionen möchte das Unternehmen verstärken.
Versuchen Sie daher bei der Verwendung von Personenbildern, eine Emotion darzustellen, die Sie bei Ihren Kunden hervorrufen möchten.
In diesem Beispiel von Freshdesksehen Sie ein lächelndes, glückliches Kind. Das Bild ist einzigartig genug, um unsere Aufmerksamkeit zu erregen (insbesondere die riesigen Brillengläser des Kindes). Und das Lächeln entspricht dem Gefühl des „Glücks“, das Freshdesk vermitteln möchte:
Hier ist ein komplexeres Beispiel für diesen „fröhlichen“ Bildtyp, mit freundlicher Genehmigung von HomeAway:
Sie sehen auf dem Bild die unterschiedlichsten Aktionen, aber die Menschen sind alle durchweg glücklich – genau dieses Gefühl möchte HomeAway Ihnen vermitteln.
3. Verwenden Sie Bilder, um Aufmerksamkeit zu erregen
Bestimmte Arten von Bildern erregen sofort unsere Aufmerksamkeit, insbesondere wenn sie gewagt oder dramatisch sind oder Wünsche ansprechen.
Dieses Beispiel aus Lyft verwendet ein Bild eines weiblichen Models:
Warum weil Untersuchungen zeigen, dass attraktive Gesichter unsere Aufmerksamkeit erregen.
Es ist wichtig zu wissen, dass dieser Ansatz auch nach hinten losgehen kann. Wenn der CTA nicht überzeugend genug ist, bemerkt ihn ein Besucher möglicherweise nicht und richtet seine Aufmerksamkeit ausschließlich auf das Modell.
Zum Beispiel in diesem Eye-Tracking-Studiehaben die Zuschauer das Produkt selbst kaum einmal angesehen:
Wenn Sie diesen Ansatz verwenden, stellen Sie sicher, dass Ihr CTA und Ihr Angebot stark genug sind.
Sie können auch die Blickverfolgung nutzen, indem Sie das Modell in Richtung Ihres CTA blicken lassen.
4. Verwenden Sie Bilder des Firmengründers
Die Verwendung von Bildern des Unternehmensgründers bewirkt zwei Dinge:
- Es macht die Marke menschlicher und identifizierbarer
- Es verbindet die Marke mit einem Individuum und überträgt so die Persönlichkeit des Individuums auf die Marke.
Das bekannteste Beispiel für den „Gründer als Image“ ist natürlich KFC. Das Bild des Colonels ist überall in jedem KFC zu sehen.
In kleinerem Maßstab werden Sie sehen, dass Blogger und Autoren oft ihre eigenen Bilder auf ihren Zielseiten verwenden.
Hier ist Noah Kagans OKDork:
Verwenden Sie Bilder des Produkts
Bevor Ihre Kunden ein Produkt kaufen, möchten sie natürlich wissen, wie es aussieht und funktioniert.
Aus diesem Grund sind Produktbilder auf Landingpages so beliebt. Sie präsentieren das Produkt (auch wenn es digital ist) und vermitteln Käufern ein Gefühl dafür, wie es funktioniert.
Sehen wir uns einige Möglichkeiten an, wie Sie Produktbilder auf Ihren Zielseiten verwenden können:
1. Zeigen Sie das Produkt im Einsatz
Dies ist die gebräuchlichste Art, Produktbilder auf Zielseiten zu verwenden. Sie zeigen, wie das Produkt aussieht und wie es verwendet wird.
Sie können entweder ein eigenständiges Bild des Produkts verwenden oder Personen zeigen, die es verwenden/tragen. Sie sollten die letzte Option wählen, wenn Sie möchten, dass die Leute das Produkt visualisieren (z. B. Verschluss oder Zubehör).
Zum Beispiel, Warby Parker zeigt Modelle, die seine Produkte verwenden:
In den obigen Beispielen ist das Design des Produkts nicht einzigartig genug, um sich zu behaupten. Aus diesem Grund wird ein Modell benötigt, das Ihnen bei der Visualisierung hilft.
Wenn Ihr Produkt einzigartig ist oder eine neue Lösung für ein Problem bietet, möchten Sie den Leuten auf Ihrer Zielseite zeigen, wie es funktioniert.
Zum Beispiel, die ursprüngliche Square-Landingpage zeigte, wie das Produkt funktionierte, denn damals war die Annahme von Karten über ein Telefon eine ziemlich revolutionäre Idee.
2. Zeigen Sie das Produkt allein
Wenn das Produkt kein Modell erfordert oder ein außergewöhnliches Design hat, das Sie präsentieren möchten, können Sie eine Landingpage wie diese von Nike:
Das produktzentrierte Design funktioniert hier, da es hilft, die einzigartigen Eigenschaften des Produkts hervorzuheben.
Und natürlich können wir nicht über produktzentrierte Landingpages sprechen, ohne zu erwähnen Apfel:
In beiden Fällen werden auf der Zielseite das Design und die Funktionen des Produkts hervorgehoben. Bei einem generischen Design würde das nicht funktionieren, bei Unternehmen wie Apple und Nike jedoch schon.
Auch die Lebensmittelindustrie folgt diesem Trend, obwohl sie dort meist eine „idealisierte“ Version des Produkts präsentiert. Auf dieser Landingpage von McDonalds sieht man nicht, wie die Burger tatsächlich aussehen, sondern eine Photoshop-Interpretation der Burger:
Ein weiteres Beispiel ist dieses Bild von Zenfoods das eine verbesserte Version des Essens zeigt:
Was aber, wenn Ihr Produkt weder hinsichtlich des Designs noch des Wertversprechens außergewöhnlich ist?
Unter diesen Umständen besteht eine gute Möglichkeit darin, den Schwerpunkt auf die Verpackung zu legen oder das Produkt im Kontext zu zeigen.
Zum Beispiel diese Landingpage von Winc zeigt das Produkt in seiner kompletten Verpackung. Die Verpackung ist Teil des Alleinstellungsmerkmals des Unternehmens, nicht der Wein. Und diese Landingpage hebt das hervor.
Ebenso Zielseite des Trunk Clubs stellt den „Koffer“ und nicht die einzelnen Kleidungsstücke zur Schau:
3. Visualisieren Sie ein digitales Produkt
Wenn Sie digitale Produkte verkaufen, gibt es drei Hauptmöglichkeiten, Bilder zu verwenden:
- Visualisieren Sie es als physisches Produkt, beispielsweise ein E-Book, das mit Photoshop so bearbeitet wurde, dass es wie ein physisches Buch aussieht.
- Visualisieren Sie den Inhalt. Dies funktioniert besonders gut bei Softwareprodukten, bei denen Sie die Benutzeroberfläche anzeigen können.
- Visualisieren Sie das Produkt im Kontext, d. h. zeigen Sie, wo und wie das Produkt verwendet wird.
Dies beispielsweise Landingpage von Unbounce zeigt ein eBook als physisches Buch:
Dies ist ein allgemeiner Trend bei Landingpages für E-Books, da es dabei hilft, das Produkt zu visualisieren. Es vermittelt auch den Eindruck eines höheren Wertes.
Bei Softwareprodukten wird normalerweise die Benutzeroberfläche des Produkts angezeigt, meist auf einem bestimmten Gerät (Laptop/iPad/Telefon).
Hier ist ein Beispiel aus Verkaufsgenie:
Eine weitere Alternative besteht darin, das Produkt in der tatsächlichen Verwendung durch eine Person zu zeigen. Dies stellt das Produkt in einen Kontext und hilft den Kunden, es besser zu verstehen.
Hier ist ein Beispiel:
Verwenden Sie abstrakte Bilder
In diesem Zusammenhang bezeichnet „abstrakte“ Bilder alle Bilder, die keinen klaren Bezug zum Produkt aufweisen.
Denken Sie an die „Heldenbilder“, die Sie sehen auf Unsplash.com. Diese Bilder funktionieren, weil sie schön anzusehen sind und die Aufmerksamkeit auf sich ziehen.
Hier sind einige Möglichkeiten, wie Sie abstrakte Bilder verwenden können:
1. Verwenden Sie Bilder von Landschaften
Ein Landschaftsbild oder andere nicht verwandte Bilder tragen nichts zu Ihrem Produkt bei. Und sie verstärken nicht die Emotionen, die Sie erzeugen möchten.
Es schafft jedoch einen interessanten Hintergrund für Ihren Text. Es erregt vielleicht nicht die gleiche Aufmerksamkeit wie ein Bild eines lächelnden Models, aber es sorgt auf jeder Seite für die entsprechende „Geschäftigkeit“.
Wenn es richtig gemacht wird, kann es auch mit dem Text auf der Seite gepaart werden, um den Lesern die Visualisierung zu erleichtern.
Auf der Zielseite von Kapost wird beispielsweise eine Straße angezeigt. Diese steht im Einklang mit dem Text auf der Seite – dem „Pfad“ zum erfolgreichen Inhalt.
Hinweis: Die Landingpage von Kapost ist nicht mehr online verfügbar.
2. Verwenden Sie einen abstrakten oder einfachen Hintergrund
Ein abstrakter oder schlichter Hintergrund hebt Ihren Text hervor und ergänzt gleichzeitig das Design Ihrer Seite. Da solche Hintergründe eine kleine Dateigröße haben, werden sie sehr schnell geladen. Dies kann für mobile Besucher und Benutzer mit langsamen Verbindungen nützlich sein.
Hier ist ein Beispiel aus Tolles Gespräch:
Der Hintergrund ist einfarbig und hilft dabei, den Text ins Rampenlicht zu rücken.
Hier ist ein weiteres Beispiel aus Mitro:
Kapitel 2 – Als Videos
Viele Menschen würden sich, wenn sie die Wahl hätten, einen Blogbeitrag lieber als Video ansehen, als ihn zu lesen.
Hier ist der Grund:
Videos verringern den Aufwand, den Besucher betreiben müssen, um Ihre Botschaft zu verstehen. Dies führt zu einem besseren Verständnis Ihres Angebots.
Für Vermarkter liegen die Vorteile von Videos auf der Hand. Sie helfen Ihnen, Ihre Produkte besser zu präsentieren. Außerdem helfen sie Ihnen, bessere Erzähltechniken (wie etwa Animationen) zu verwenden, um Ihre Geschichte zu erzählen.
Es gibt jedoch auch eine Kehrseite. Videos weisen zwei wesentliche Mängel auf:
- Sie schließen Benutzer mit niedrigen Netzwerkgeschwindigkeiten aus, insbesondere mobile Benutzer.
- Sie schließen Benutzer aus, die möglicherweise keine Kopfhörer/Lautsprecher verwenden können.
Trotz dieser Mängel verbessern Videos in der Regel die Conversion-Raten von Zielseiten, manchmal um bis zu 80 % laut einer Studie.
Es empfiehlt sich, eine Alternative zum Video einzubinden oder das Video nur anzuzeigen, wenn der Benutzer es per Klick auf eine Schaltfläche anfordert. So stellen Sie sicher, dass Sie keine Besucher verlieren.
Und obwohl die Produktion von Videos normalerweise teurer ist, hat die Technologie große Fortschritte gemacht. Es ist möglich, eine Kamera zu bekommen, die qualitativ hochwertige Videos aufnimmt, ohne viel Geld auszugeben. Darüber hinaus gibt es viele Tools, die die Videobearbeitung einfach (und kostengünstig) machen. Da Vinci Resolve ist ein gutes Beispiel.
Im Folgenden zeige ich Ihnen einige Möglichkeiten, wie Sie Videos auf Ihren Zielseiten verwenden können:
1. Zeigen Sie das Produkt in Aktion
Dies ist die häufigste Art, Videos auf Zielseiten einzusetzen – um zu zeigen, wie das Produkt aussieht und wie es funktioniert.
Gerade bei innovativen Produkten können Sie dieses Potenzial durchaus nutzen.
Hier ist ein Beispiel:
Locker verwendet Videos, um Benutzern einen Rundgang durch das Produkt zu geben. Da Slacks Ansatz zur Arbeitsplatzkommunikation so anders ist, erfahren neue Benutzer im Tour-Video alles, was sie über das Produkt wissen möchten:
Hier ist ein weiteres Beispiel aus IIos zeigt, wie das Produkt funktioniert:
Die meisten Benutzer möchten sich jedoch kein 10-minütiges Video ansehen. Beruhigen Sie sie, indem Sie die Länge des Videos angeben. Zum Beispiel: Swagbucksteilt den Benutzern mit, dass das Video genau „43 Sekunden“ dauert. Dies ist eine großartige Möglichkeit, ihren Widerstand zu verringern.
2. Verwenden Sie Videos als Hintergrund für Ihre Zielseite
Ein wachsender Trend beim Landingpage-Design besteht darin, Videos als Seitenhintergrund zu verwenden.
Dies verleiht dem Design eine tiefere Ebene emotionaler und visueller Komplexität. Es kann jedoch die Ladezeiten der Seite beeinträchtigen, daher empfiehlt es sich, für Ihre Videos ein Content Delivery Network oder eine dedizierte Video-Hosting-Plattform zu verwenden. Sie sollten auch eine statische Alternative für langsamere Verbindungen haben.
Eine Möglichkeit, Videohintergründe zu verwenden, besteht darin, ein Produkt im Kontext zu zeigen. Zum Beispiel: Touch Bistrozeigt sein POS-Produkt im Einsatz in einem Restaurant. Dies hilft den Kunden zu verstehen, wie das Produkt funktioniert.
Ein anderer Ansatz besteht darin, einen Hintergrund zu verwenden, der weder das Produkt noch seine Benutzer präsentiert, der Seite jedoch visuelle Komplexität verleiht.
Ein gutes Beispiel ist Workshops Zielseite.
Sie verwenden einen abstrakten Hintergrund, der der Seite eine dramatische Note verleiht und gleichzeitig die Aufmerksamkeit auf den Text lenkt:
3. Nutzen Sie Videos als Verkaufsinstrument
Beispiele für diesen Ansatz finden Sie auf Verkaufsseiten. Normalerweise handelt es sich dabei um einen Erzähler (sichtbar oder unsichtbar), der mithilfe eines Videos eine Verkaufspräsentation hält. Im Wesentlichen handelt es sich dabei um eine lange Verkaufsseite im Videoformat.
Zum Beispiel, Thrive-Themen verwendet auf den meisten seiner Produkt-Landingpages Videos. Diese Videos zeigen, wie das Produkt funktioniert und veranschaulichen sein zentrales Wertversprechen.
Nebenbei bemerkt bietet Thrive Themes eine Reihe von konvertierungsorientierten WordPress-Tools. Sie können sie verwenden, um Landingpages, ganze Websites, Opt-in-Formulare und mehr zu erstellen. Möchten Sie mehr erfahren? Sehen Sie sich meine Thrive Themes-Rezension an.
4. Nutzen Sie Video-Testimonials
Testimonials zeigen, dass das Produkt oder die Dienstleistung für andere einen echten Mehrwert bietet und bei Ihnen zu ähnlichen Ergebnissen führen kann. Sie sind eine großartige Form des sozialen Nachweises.
Video-Testimonials sind Text- und Audio-Testimonials überlegen. Während es einfach ist, ein falsches Text-Testimonial zu erstellen, sind Videos schwieriger zu fälschen, was zu höherem Vertrauen führt.
Wenn Sie Video-Testimonials verwenden, achten Sie darauf, dass Ihr Sprecher die folgenden Punkte anspricht:
- Herausforderungen, denen sie gegenüberstanden (und ihre erfolglosen Versuche, sie zu lösen)
- Wie sie Ihr Produkt gefunden haben/wie einfach es zu verwenden war
- Wie Ihr Produkt zur Lösung ihres Problems beigetragen hat
Scorpion Internet Marketing zeigt beispielsweise einen echten Kunden, der seine Erfahrungen mit der Firma bespricht. In einem wettbewerbsintensiven Bereich (Internetmarketing) mit geringer Glaubwürdigkeit verleiht dieses Video-Testimonial ihrer Botschaft Authentizität.
Kapitel 3 – Als GIFs
GIFs sind nichts Neues.
Sie wurden Ende der 1980er Jahre entwickelt und schnell von der Internet-Community angenommen. Ihre Verwendung als Marketingstrategie hat jedoch erst vor kurzem an Bedeutung gewonnen (danke, Buzzfeed).
Diese kleinen Animationen bieten einen „Mittelweg“ zwischen Bildern und Videos.
Sie sind kostengünstig zu erstellen und oft ansprechender als Standbilder. Neben der Interaktion können Sie mit diesen kleinen Animationen bei Ihren Besuchern auch gezielt eine bestimmte Emotion auslösen.
Hier sind einige einfache Möglichkeiten zur Verwendung von GIFs auf Ihren Zielseiten:
1. Verwenden Sie GIFs, um das Produkt und seinen Hauptnutzen zu demonstrieren
In einigen Fällen können Sie möglicherweise ein GIF verwenden, um Ihr Produkt und seine wichtigsten Vorteile zu präsentieren.
Dies ist in der Regel bei digitalen Produkten der Fall.
Beispielsweise Instapaper-Landingpage zeigt die Kernfunktion des Produkts – die Möglichkeit, „überall zu lesen“ – mit einem animierten GIF.
Ein GIF funktioniert in dieser Situation besser als ein Video, da es einfacher zu animieren ist. Und da das GIF nur eine begrenzte Anzahl an Farben hat, ist auch seine Dateigröße kleiner (denken Sie daran, dass die Seitenladezeiten wichtig sind).
2. Zeigen Sie das Produkt in Aktion
Bei diesem Ansatz funktioniert das GIF wie ein Autoplay-Video. Anstatt die Leute dazu zu bringen, bei einem Video auf „Play“ zu klicken, können Sie ein GIF verwenden, um Ihr Produkt in Aktion zu zeigen.
Da ein GIF eine relativ kleine Dateigröße haben muss, müssen Sie die Funktionen, die Sie zeigen, einschränken. Erwägen Sie, nur die wichtigsten Funktionen zu zeigen, anstatt eine vollständige Demo (wo ein Video am besten funktionieren würde).
Zum Beispiel, Visueller Website-Optimierer verwendet ein GIF, um zu zeigen, wie sein „visueller“ Optimierer funktioniert:
3. Machen Sie eine Seite optisch interessanter
Eine weitere Möglichkeit, GIFs zu verwenden, besteht darin, einer ansonsten einfachen Seite visuelle Komplexität zu verleihen. Das GIF ersetzt normalerweise ein statisches Element auf der Seite und macht es optisch interessanter.
Zum Beispiel diese Landingpage von Bank hätte einfach ein statisches Bild verwenden können (was einigen Benutzern je nach Standort oder Gerät angeboten wird), aber das GIF macht die Seite viel interessanter.
Alles zusammenfügen
Um Conversions zu erzielen, muss eine Landingpage optisch ansprechend und dynamisch sein.
Durch das Hinzufügen von GIFs, Bildern und Videos zu Ihrer Zielseite können Sie deren emotionale Wirkung erhöhen, Ihren Text oder CTA hervorheben und visuelle Komplexität hinzufügen.
Lassen Sie sich von den obigen Beispielen für die Gestaltung Ihrer nächsten Landingpage inspirieren. Was werden Sie erstellen?
