Blogartikel

1min. Lesezeit

„Above the Fold“ vs. „Below the Fold“: Zählt das heute immer noch?

„Above the fold“ bleibt ein wichtiger Bestandteil im Design von Webseiten, auch wenn dieser Begriff mit jedem Jahr komplexer wird. Webseiten, die ihren Benutzern eine gute Experience bieten wollen, sollten dieses Konzept immer noch verstehen und berücksichtigen, auch wenn es nicht mehr als so entscheidend gilt, wie es einmal war.

Was ist „above the fold“?

Das Konzept „above the fold“ reicht Jahrhunderte zurück bis hin zu den Anfängen der Druckerei. Zeitungen wurden gefaltet, sobald sie im Zeitungskiosk ankamen, da sie auf großen Blättern gedruckt wurden. Somit war nur die obere Hälfte der Zeitung für Passanten direkt zu sehen.

Die Zeitungsindustrie verstand schnell, dass sie Schlagzeilen, Inhalte und Bilder auf der oberen Hälfte der Titelseite präsentieren mussten, um Aufmerksamkeit zu erregen. Dieses Grundprinzip gilt auch für digitale Inhalte.

Webseiten haben natürlich keinen fühlbaren Knick wie Zeitungen, der „fold“ bezieht sich hier auf die Scrollbarkeit.

Alles was nicht unmittelbar sichtbar ist und scrolling benötig, wird als „below the fold“ gesehen. Leider ist die digitale Version von „above the fold“ nicht ganz so einfach zu definieren wie die gedruckte Version.

Dimensionen

Für eine Webseite sollte demnächst über deren Dimensionen und wie diese auf den Leser wirken nachgedacht werden. Nicht alle Screens sind gleich. Zusätzlich wird jede Seite durch die weite Verbreitung von Tablets und Smartphones in sehr verschiedenen Ausführungen angezeigt. Weitere Themen sind hier Bildschirmauflösungen und Browser Plug-Ins.

Die Dimensionen von Smartphones sollten hierbei besonders berücksichtigt und durchdacht werden, vor allem da deren Nutzung seit 2016 die von Desktops übertrifft. Smartphones, genauso wie ihre Screens, werden in verschiedensten Formen und Größen produziert; im Gegensatz zur einheitlichen Zeitung ist der „fold“ hier ein sehr viel schlechter definierbares Konzept.

Online Tools zur Definition von „above the fold“ Platzierung

Es gibt viele kostenlose Online-Tools die Sie benutzen können, um Ihre Webseite visuell zu testen und einzelne Aspekte an verschiedenen Stellen bezogen auf den „fold“ zu platzieren. Sie sind sehr hilfreich um eine greifbare Idee des Layouts zu erhalten, zeigen aber nur eine oberflächliche Präsentation der Webseite und keine ausführliche Analyse. Daher wird empfohlen, eine vollständige Websiteoptimierung durchzuführen.

Best Practices

Auch wenn es keine festen Regeln für „above the fold“-Platzierung gibt, können ein paar Best Practices als hilfreiche Guidelines dienen. Manche davon basieren auf gesundem Menschenverstand, wie zum Beispiel die Platzierung des interessantesten Inhaltes „above the fold“. Andere Empfehlungen beziehen sich auf die bereits genannten Dimensionen wie zum Beispiel die standardisierte 1.000 Pixel breite/ 600 Pixel hohe „fold“-Größe bei 1,024/768px Screens. Die meisten Bildschirmgrößen sind heute allerdings größer, daher ist eine entsprechende Anpassung Ihrer Webseite wichtig.

Man sollte auch im Hinterkopf behalten, dass Best Practices nicht in Stein gemeißelt sind. Webseiten wurden lange wie die Titelseite einer Zeitung designt, was zu einer Art Schablone wurde und dazu geführt hat, dass die meisten Seiten gleich aussehen. Neuentwicklungen wie vertikales Scrolling (oder Klicken) bedeuten, dass das Konzept von „above the fold“ sprichwörtlich auf den Kopf gestellt wird und sich das Nutzererlebnis sehr viel natürlicher anfühlt.

Manche Webseiten haben das „above the fold“ Konzept komplett aufgegeben und Seiten designt, die überhaupt keinen Inhalt unterhalb des „folds“ haben, und somit das Problem komplett gelöst. Diese „kompakten“ Designs sind ästhetisch für das Auge und passen für alle Bildschirmgrößen.

https://designmodo.com/scrolling-web-design/

Einer der größten Fehler von Webseiten ist, wenn sie einen „False Bottom“, also ein falsches Ende der Seite anzeigen. Dabei bietet eine Seite mehr Informationen, die durch Scrolling erreicht werden können; dass diese Informationen existieren ist für den Besucher aber nicht sichtbar. Das ist der Worst Case. Ein „fold“ muss kein Hindernis sein, er sollte natürlich fließen und den Besucher einnehmen.

Call To Actions „above“ oder „below the fold“?

Eine der Mythen im „above the fold“-Design ist die Best Practice, einen Call to Action (CTA) immer so zu platzieren, dass er sofort sichtbar ist. Dies ist, wie vieles rund um dieses Thema, eine Vereinfachung des Konzepts. Wo ein CTA platziert werden sollte hängt von mehreren Faktoren ab, entscheidend zum Beispiel von:

  • Überzeugten Besuchern
  • Unsicheren Besuchern, die Ihr Produkt kennen – oder wenn die Proposition einfach ist
  • Unsicheren Besuchern, denen eine komplexe Proposition gezeigt wird

Überzeugte Besucher sind diejenigen, die sehr wahrscheinlich auf den CTA reagieren, da sie schon vor dem Besuch der Webseite ihre Entscheidung zum großen Teil bereits getroffen haben. Hier haben bekannte Marken Vorteile, ein überzeugter Besucher braucht wenig Informationen über ein Produkt oder einen Service. In diesen Fällen hat die Platzierung eines CTAs über dem „fold“ eher praktische Gründe.

Im Fall von unsicheren Besuchern, die den CTA einfach verstehen oder etwas Vorwissen über das Produkt oder den Service mitbringen, ist die Platzierung des CTAs über dem „fold“ aus den oben bereits erwähnten Gründen im allgemeinen Best Practice, auch wenn die informativen Inhalte hier auch wichtig sind.

Für unsichere Besucher, die mit einer komplexen Proposition konfrontiert werden, wie einem Produkt oder Service, das für sie nicht offensichtlich vorteilhaft ist, ist die Platzierung des CTAs über dem „fold“ nicht ausreichend. Sie benötigen eine tiefergehende Erklärung, warum sie dem Call to Action folgen sollen. Hier kann die Positionierung zu Beginn aufdringlich wirken.

Einfach gesagt sollte der CTA dort platziert werden, wo der Besucher am ehesten überredet werden kann, die gewünschte Aktion durchzuführen.

Platzierung von Werbung

Es sollte immer klar sein, dass der Großteil der Aufmerksamkeit „above the fold“ gerichtet sein wird, egal wie taktisch Sie Ihre Webseite designen. Sollte man daher, um Werbeeinahmen zu erhöhen, diesen Bereich mit Werbung pflastern? Die Antwort ist nein. Google Algorithmen bestrafen dieses Verhalten schwer, Sie könnten damit das Ranking Ihrer Webseite stark beschädigen, wenn Sie nicht vorsichtig sind. Zusätzlich können Sie so wichtige Informationen nicht nur „below the fold“ schieben, sondern potentiell auch über die Geduld des Besuchers hinaus.

Die Platzierung von Werbung ist eine komplexe Balance, welches Wissen über Bounce Rates, sowie Analysen von Engagements und Nutzerverhalten erfordert. Diese Entscheidungen werden am besten getroffen, wenn man die richtigen Daten zur Hand hat.

Warum „above the fold“ wichtig ist

An diesem Punkt sollte klar geworden sein, dass das „above the fold“-Design wichtig und unverzichtbar, gleichzeitig aber auch komplex ist. Daher sollte man Ratschlägen, die von Absoluten sprechen, misstrauisch gegenüber treten. Man kann sicherlich sagen, dass die heutigen Nutzergewohnheiten sich stark von denen aus der Anfangszeit des Internets unterscheiden. In den 1990ern lasen die meisten „Surfer“ selten unterhalb der „fold“, durch langsame Verbindungsgeschwindigkeiten und sich langsam aufbauenden Webseiten. Heutzutage benutzen User viel eher das Scroll-Rad ihrer Maus.

Dies führt glücklicherweise dazu, dass vollgestopften Seiten, bei denen die Informationen über dem „fold“ gehäuft werden, aussterben. Heutzutage sind minimalistische, elegante Designs, die dem Besucher erlauben selber zu entdecken, was die Seite zu bieten hat, viel häufiger.

Eine kürzlich durchgeführte Google-Studie hat gezeigt, dass Werbung, die „above the fold“ liegt, eine Sichtbarkeit von 73% erreicht, während die „below the fold“ nur 44% erreicht. Hier sollte allerdings berücksichtigt werden, dass Inhalt, der den Besucher abholt, diese Lücke stark verkleinert, und Werbung hierfür ein Hindernis sein kann. Wie bei diesem Thema bereits üblich, sind Kontext und Balance die wichtigsten Faktoren, die es zu beachten gilt.

 

Blogartikel

min. Lesezeit

Wie die Erstellung von Personas helfen kann, Ihre Webseite zu personalisieren

Personas sind eines der wichtigsten Marketinginstrumente, die ein Unternehmen in der gegenwärtigen Zeit hat. Es ist umfassend genug, sodass es nicht diverse Ressourcen benötigt, wie sie für die Personalisierung erforderlich sind. Trotzdem ist es spezifisch genug, um Designteams zu informieren und die Aufmerksamkeit und Loyalität der Kunden zu gewinnen. Es benötigt kreatives Denken, konkrete Daten und ein tiefes Verständnis von Kundenmerkmalen, Anforderungen und Erwartungen.

Was ist eine Persona

Eine Buyer-Persona ist eine umfangreiche, fiktive Figur, die ein Unternehmen aus Daten erstellt und die sich auf die Bedürfnisse, Wünsche, Merkmale und Ziele seiner Kunden beziehen. Obwohl eine Persona keine echte Person ist, basiert sie auf realen Eigenschaften der Kundenbasis eines Unternehmens und kann abhängig von der durchgeführten Untersuchung auch potenzielle Kunden umfassen.

Personas schränken im Wesentlichen die Parameter ein und verstärken den Fokus der Geschäftspraktiken auf die spezifischen sowie umfassenden Bedürfnisse ihrer Kunden. Dies geschieht, indem Hauptgruppen gebildet werden, die die Hauptnutzer einer Webseite und deren Bedürfnisse repräsentieren.

Persona vs. Kognitive Stile

Es besteht eine gewisse Verwirrung zwischen der Definition eines kognitiven Stils und der einer Persona. Dies wird weiter verwirrt durch die Tatsache, dass nur wenige Definitionen des kognitiven Stils miteinander vereinbar sind und dass zwischen diesem Konzept und dem von Personas einige Überschneidungen bestehen.

Wie zuvor beschrieben, sind Personas umfangreiche, fiktive Figuren, die helfen, die Parameter für verschiedene Aspekte eines Unternehmens und dessen Zielgruppe oder Kundenbasis zu definieren. Kognitive Stile hingegen sind Denkstile, ein Persönlichkeitsmerkmal, wenn man so will, das beschreibt, wie eine Person bestimmte Informationen wahrnimmt. Als solches ist es deutlich komplexer und individueller. Im Gegensatz zu Personas sind kognitive Stile fest verdrahtet und daher unveränderlich. In der Praxis hat eine Person wenig mit kognitiven Stilen zu tun, jedoch können kognitive Stile die Erstellung einer Persona, neben anderen Daten, beeinflussen.

Vorteile durch das Erstellen von Personas

Personas zu erstellen hat viele Vorteile, wenn das richtige Forschungsniveau durchgeführt wurde.
In gewisser Weise sind Buyer-Personas eine Methode der Vereinfachung.

Wenn ein Unternehmen einmal die umfangreichen Bedürfnisse und Erwartungen seiner Kunden verstanden hat, kann es dementsprechend handeln. Durch diese Einschränkung der Parameter kann die Aufmerksamkeit auf relevante Bereiche mit spezifischen Ideen gerichtet werden.

Beispielsweise kann das Design einer Webseite von Wireframe bis zum Farbschema mit den richtigen Daten verfeinert werden, um das gesamte Designteam darüber zu informieren, was erforderlich ist. Währenddessen können neue Ideen unter Berücksichtigung der Kundenbedürfnisse verfolgt werden, anstatt Ideen zu implementieren, die auf Vermutungen und einem reinen Bauchgefühl basieren.

Arten von Personas

Buyer-Personas werden normalerweise in verschiedene Arten unterteilt und hängen stark von den Zielen des Unternehmens ab, das sie erstellt. Es gibt einige Überschneidungen bei Personas, jedoch gibt es vier am häufigsten definierte Personas:

  • Goal Personas
  • Role Personas
  • Engaging Personas
  • Fictional Personas

Goal Personas

Eine der einfachsten, jedoch wichtigsten Personas, ist die zielorientierte Persona. Diese sagt überwiegend vorher, was der Kunde in einem Produkt oder einer Dienstleistung sucht. Die zielorientierte Persona wurde zu einem bestimmten Grad bereits auf Grundlage von Daten definiert. Die Persona selbst (die Art der Persona, die von der Gruppe definiert wurde), das Szenario (welches im Wesentlichen die Erzählung der Interaktion beschreibt – wo, wie und warum) und das Ziel selbst, das die Motivation und Bedürfnisse der Persona darstellt.

Role Personas

Die Persona, die von den vier Rollen am stärksten von Daten abhängt, ist die Rollen Persona. Es gibt einige Überschneidungen mit der Ziel Persona, da sie sehr verhaltensorientiert ist, jedoch aus einer anderen Perspektive betrachtet. In gewisser Hinsicht ist die rollenbasierte Persona eine empathischere Sichtweise, wenn sie die Rolle des Nutzers betrachtet und nicht dessen Wünsche und Probleme, mit denen er konfrontiert wird. Was benötigt zum Beispiel die Rolle der Persona? Wie genau wird das Produkt genutzt und in welcher Umgebung? Was sind die Belastungen und die Anforderung der Personarolle im Geschäftsalltag? Diese Persona benötigt sowohl qualitative als auch quantitative Daten und muss daher sehr spezifisch sein. In diesem Sinne kann es sich auch auf die Personalisierung auswirken. Mehr dazu später.

Engaging Personas

Eine der Gefahren beim Erstellen von Personas ist die Tendenz, diese in einen Stereotyp zu verwandeln. Ein Stereotyp ist die Verwendung von Annahmen, um Personen oder sogar Gruppen basierend auf vorherigen Ideen und nicht auf Daten, in gewisse Cluster zu stecken. Genau das Gegenteil von dem, was Personas sind. Anspruchsvolle Personas stellen grob gesagt, einen Mix aus der rollen- und zielbasierten Persona dar und werden von den Designer dazu genutzt, die Persona zu vervollständigen, um einen runden Charakter zu bilden. Die einnehmende Persona ist die einfühlsamste der Personas. Sie wird durch die Beschreibung der Gefühle und Hintergründe erstellt, während Geschichten geschaffen werden, die den Designern helfen, Ideen zu formulieren, die die Kunden auf einer tieferen Ebene ansprechen.

Fictional Personas

Zwar sind alle Personas in dem Sinne fiktiv, dass sie Charaktere sind, die erstellt wurden, um Hauptgruppen zu repräsentieren, sie basieren jedoch auf konkreten Daten. Fiktive Personas hingegen werden anhand des UX-Designs erstellt und basieren auf ihren Erfahrungen mit Kunden. Von fiktiven Personas wird grundsätzlich angenommen, dass sie auf einer fundamentalen Ebene fehlerhaft sind, da bei ihrer Erstellung diverse Annahmen mit einbezogen werden. Allerdings kann durch die Einbeziehung des Designteams in den Entscheidungsprozess eine gewisse Weisheit erreicht werden, sodass diese wahrscheinlich nicht in den Daten auftauchen.

Wie werden Personas erstellt?

Es ist eine Sache zu verstehen, wie Personas funktionieren, jedoch eine völlig Andere zu verstehen, wie Personas erstellt werden. Wie bei allem, was zu Beginn komplex erscheint, ist es wichtig, das Ganze Schritt für Schritt anzugehen.

Wo fängt man an?

Kunden-Personas sollten ganz zu Beginn eines Projektes erstellt werden. Dies erfordert etwas Planung, aber wie bei der vielfach verwendeten Analogie eines Hausbaus, sollte als erstes das Fundament gebaut werden, nicht das Dach.

Wie es generell zu Beginn bei der Planung eines Projektes ist, ist die Definition der Ziele wichtig. Dadurch wird wiederum definiert, welche Art und wie viele Personas benötigt werden. Jedes Projekt ist einzigartig, aber die eine feste Regel in Bezug auf Personas ist die Einbeziehung der Hauptgruppen für die Internetseite. Außerdem sollte bedacht werden, dass Personas keine wirklichen Individuen sind, sondern fiktiv erstellte Individuen, die diese Hauptgruppen repräsentieren.

Von hier an dreht sich alles um Forschung. Finden Sie heraus:

  • Wie verhalten sich Ihre Kunden?
  • Wer sind diese?
  • Warum nutzen sie Ihre Webseite?
  • Was sind ihre Erwartungen?

Woraus besteht eine Kunden-Persona?

Jede Kunden-Persona besteht aus verschiedenen Eigenschaften, die bis zu einem gewissen Grad von dem Unternehmen, den Zielen des Projekts und dem Zweck der Webseite abhängen. Es gibt jedoch einige bewährte Elemente, die beim Erstellen von Personas allgegenwärtig bleiben.

Als erstes gibt es die Persona Gruppe, die die Arbeitsrolle enthalten kann, wie zuvor beschrieben. Dazu gehören Verantwortlichkeiten und Probleme, mit denen eine Person möglicherweise im Alltag konfrontiert wird. Ein weiterer wichtiger Faktor wird die Demographie sein. Diese beinhaltet das Alter, Nationalität, Geschlecht, Identität und den Familienstand. Ziele sind eine wichtige Säule bei der Erstellung von Personas, da sie die zuvor genannten inhärenten und statusbasierten Merkmale verfeinern und weiter personalisieren, sodass Sie eine genauere Persona erstellen können. Zuletzt kann auch die Umwelt ein großer Faktor sein, insbesondere wenn die Dienstleistung international ist.

Best Practices für das Erstellen von Käufer Personas

Auch wenn jedes Projekt unterschiedlich sein mag, gibt es einige Anwendungstipps, die für fast jedes Projekt relevant sind. Zunächst einmal, Personas sind fiktiv. Diese jedoch so real wie möglich und dadurch so verständlich wie möglich zu gestalten, bedeutet, dass sie dem Designteam dabei helfen werden, sich bei der Entwicklung der Webseite an der Persona zu orientieren, für die sie die Website erstellen.

In der Regel ist es am besten, drei bis fünf Personas (manchmal bis zu sieben) pro Projekt zu erstellen, da diese Anzahl das Spektrum an Eigenschaften enthält, das erforderlich ist, um tatsächliche und potenzielle Kunden zu repräsentieren.

Einer der häufigsten Fehler bei der Erstellung von Personas besteht darin, in die Stereotypisierung überzugehen. Das ist zu einem gewissen Grad auch nachvollziehbar, da versucht wird, eher mit allgemeinen als mit individuellen Merkmalen zu arbeiten. Wie zuvor bereits erwähnt sind Stereotype Annahmen, die gedankenlos sind und auf Tendenzen beruhen, sowohl implizit als auch explizit. Generalisierungen sind jedoch nicht explizit Stereotype und werden bei Personas durch konkrete Daten gebildet.

Beispiele

Jede Persona sollte einen Namen erhalten, der zu ihr passt. Sie können auch ein typisches Profilbild hinzufügen, das die Persona im weitesten Sinne darstellt.

Die Persona sollte vollständig und glaubwürdig sein, das bedeutet jedoch nicht, dass sie komplexe psychologische Profile entwickeln müssen. Personas reichen von ziemlich umfangreich bis sehr detailliert, sollten jedoch niemals über das Verständnis Ihres Teams oder das Verständnis Ihrer Kunden hinausgehen. Vermeiden Sie es daher, zu persönlich zu werden.

User persona

Achten Sie auf die Verwendung des Profilbildes, um ein Gefühl für den Charakter zu erzeugen.

 

Buyer persona example

Der detaillierte Abschnitt über das Kaufverhalten unterstützt E-Commerce-Experten bei der Erstellung präziser, sowie detaillierterer Informationen, um auf einer tieferen Ebene zu informieren.

 

Buyer persona example for retail

Personas können einem Unternehmen helfen, sich auf Gruppen zu beziehen, die nicht unbedingt ihre eigenen sind. Auf diese Weise kann ein Unternehmen über Millennial Kunden informiert werden, unabhängig davon, ob sie zu derselben Generation gehören oder nicht.

Wie verwende ich Personas

Nachdem Sie Käufer Personas erstellt haben ist der nächste Schritt, diese zu implementieren. Dies beinhaltet die Vermeidung einiger Fallstricke, die das gesamte Projekt entgleisen oder zumindest die Bemühungen zu einer Zeit- und Ressourcenverschwendung machen können.

Die erste Hürde tritt häufig auf, bevor das Projekt in Gang gesetzt wurde. Für einige gibt es ein inhärentes Misstrauen gegenüber Personas, in der Regel von Stakeholdern oder dem Management, die der Meinung sind, dass Menschen nicht durch die breiten Grundzüge definiert werden können, die zur Erstellung von Personas gehören. Dies ist an sich ein Missverständnis: Personas sollen nicht wie bei Personalisierungstechniken als Individuen erscheinen, sondern sind hilfreiche Parameter, auf die sich Ideen fokussieren können. Eine Möglichkeit, um dies vermeiden, ist die Darstellung der riesigen Datenmenge, die in die Erstellung der einzelnen Persona und in die Denkprozesse, aus denen sie entstehen, einfließt.

Fundamentale Missverständnisse darüber, was eine Persona ist und wie sie implementiert werden sollte, ist für das UX-Designteam besonders giftig. Eine der schlimmsten Fehler bei der Implementierung von Personas ist der Versuch, eine zuvor erfolgreiche Persona für ein neues Projekt zu verwenden. Dies ist genauso als würde man versuchen, einen quadratischen Stift in ein rundes Loch zu stecken, es funktioniert einfach nicht. Personas mögen umfangreich und repräsentativ sein, aber sie sind auch einzigartig.

Personas in der Web-Personalisierung

Wie bereits erwähnt, sind Personas keine Personalisierung. Obwohl es einige Überschneidungen gibt und ihre Ziele ähnlich sind, wird bei genauerer Betrachtung jedoch klar, dass die beiden gegensätzlich sind. Allerdings können Personas ein äußerst hilfreicher erster Schritt zum Verständnis der komplexen Welt der Personalisierung sein und, was noch wichtiger ist, ein erster Schritt in diese Richtung.

Wie können Personas für die Personalisierung genutzt werden?

Da es sich bei der Personalisierung um ein mehrstufiges Konzept handelt, ist zu Starten oft ein produktiver Ansatz auf dem Weg zur vollständigen Implementierung. Personas sind eine tolle Möglichkeit dafür, da sie die Vorgehensweise spezifizieren, ohne auf die komplexen Details der Personalisierung einzugehen, wie beispielsweise sehr kleine Daten, Datenschutzbestimmungen und Content.

An dieser Stelle wäre es wohl hilfreich, die Unterschiede zwischen Personas und Segmentierung festzustellen. Die Personalisierung der Zielgruppensegmentierung ist ein weiterer Schritt auf dem Weg zur Personalisierung. Es ist spezifischer als eine Person und dadurch komplexer und detailgetreuer bei der Verwendung von Daten. Beispielsweise kann eine Persona verschiedene Eigenschaften und Bedürfnisse einer Gruppe beschreiben (möchte Informationen über vegane Lebensmittelprodukte) während die Segmentierung diese Gruppe weiter unterteilt (möchte Informationen über biologische oder glutenfreie vegane Produkte).

Der Lebenszyklus einer Persona

Buyer Personas sind nicht das Gerüst des Hauses, sie sind die Dekoration, und als solche müssen sie sich mit der Zeit ändern. Viele Dinge können den Lebenszyklus einer Persona beeinflussen. Änderungen in Technologie, Mode, Wirtschaft und Demografie können Änderungen der Persona Profile erforderlich machen. Daher ist es wichtig, stets auf dem Laufenden über jegliche Änderungen zu sein, die erforderlich werden könnten.

Das persona-basierte Konzept der Mass Customization

Die „Mass Customization“ hat in den letzten Jahren enorm zugenommen und bietet Kunden die Möglichkeit, Produkte an ihre Bedürfnisse und ihren Geschmack anzupassen, und ist besonders im Modeeinzelhandel beliebt. Es wächst jedoch als Konzept, da immer mehr Menschen nach Personalisierung suchen, als Ausdruck von Individualität.

Personas sind eines der wichtigsten Instrumente, um Mass Customization Plattformen zu erstellen, da sie spezifisch genug sind, um zu informieren und gleichzeitig umfassend genug, um ein Gefühl der Individualität zu bewahren. Personas können erstellt werden, um die Parameter einer Mass Customization Plattform einzugrenzen, damit diese für den Hersteller handhabbar sind, während sie gleichzeitig die Auswahl bieten, die sich die Kunden im Jahr 2018 wünschen.

Blogartikel

8min. Lesezeit

Umsatz pro Besucher: Definition, Formel & Best Practice

Umsatz pro Besucher (Revenue per Visitor = RPV) ist ein extrem effektiver Weg zu messen, wie Ihre Online-Umsätze performen. Unter den zahlreichen Business-Metriken ist er einer der umfassendsten, da eine große Zahl von Blindspots abgedeckt werden, die in vielen anderen Daten-Metriken stecken.

Was bedeutet Umsatz pro Besucher?

Umsatz pro Besucher ist eine Möglichkeit, die durchschnittlichen Einnahmen pro Besucher Ihrer Webseite genau zu bewerten.

Die Berechnung erfolgt in dem die gesamten Einnahmen durch die Anzahl der Besucher in einer bestimmten Zeitspanne geteilt wird. Wenn zum Beispiel Ihre Einnahmen von Januar bis März 20.000€ betragen und sie in dieser Zeit 5.000 Besucher angelockt haben, wäre der RPV 4€. Der RPV funktioniert anders als die Conversionrate (CVR), auch wenn es eine ähnliche Metrik ist, die teilweise dieselben Daten benutzt. Wir werden sehen, dass die CVR nicht so genau ist wie der RPV, und dadurch ein Business in eine Sackgasse führen und sowohl Website-Design als auch Marketingkampagnen beeinflussen kann.

Warum werden Unique Visitors benutzt?

In der Kalkulation des Umsatzes pro Besucher wird nicht die Gesamtzahl der Besucher auf Ihrer Webseite verwendet. Stattdessen werden nur Unique Visitors gezählt, wobei jedes Individuum als ein einzelner Besucher zählt. Anders gesagt werden Besucher gezählt, nicht Besuche. Der Grund liegt darin, dass fast alle Besucher, die zum ersten Mal auf eine Seite kommen, nämlich mehr als 99%, keinen Kauf tätigen werden. Typischerweise vergleichen Nutzer zunächst die Preise und Angebote auf einer anderen Seite oder wollen über ihre Kaufentscheidung noch einmal nachdenken, vor allem wenn diese teuer ist.

Dies kann Ergebnisse stark verdrehen und zu falsch-negative Daten über den pro Besucher erzielten Umsatz führen. Auf der anderen Seite kann es sein, dass Sie durch wiederkehrende Besucher viele Einnahmen generieren, diesen Trend dokumentieren wollen und daher alle Besucher benutzen. Dies hängt auch davon ab, welches Produkt Sie verkaufen und ob Sie sowohl individuelle Gewohnheiten als auch den Umsatz tracken wollen.

Warum sollte ich Umsatz pro Besucher benutzen?

Der RPV ist für diejenigen, die Online-Verkäufe messen wollen, als Metrik sehr viel genauer und aufschlussreicher als die Conversionrate (CVR).

Tatsächlich haben viele Metriken, die im E-Commerce benutzt werden, große Blindspots die zu falschen Entscheidungen durch akkurate, aber unvollständige Daten führen können.

Einfach gesagt trackt die Conversionrate die Prozentzahl der Besucher Ihrer Webseite, die einen Kauf tätigen. Wenn das Produkt oder die Produkte, die Sie verkaufen, den gleichen Preis haben, würde dies ein ganzheitliches Bild über die Performance Ihres Unternehmens liefern. Die meisten E-Commerce Plattformen verkaufen jedoch Produkte von unterschiedlichem Wert. Eine Conversionrate von 3% für einen Fidget Spinner von 2€ zum Beispiel ist ziemlich schlecht; für ein Sofa mit einem Wert von 1000€ ist sie sehr erstrebenswert. Was Sie also brauchen ist eine Metrik, die den durchschnittlichen Bestellwert (Average Order Value = AOV) in Betracht zieht.

Der durchschnittliche Bestellwert ist die durchschnittliche Einnahme, die pro Besucher gemacht wurden. Der bereits erwähnte Fidget Spinner hat einen AOV von nur 6 Cent, das Sofa jedoch einen von 30€. Warum wird also nicht diese Metrik benutzt, um zu berechnen, wie viel ein Unternehmen pro Besucher verdient? Nur weil die Conversionrate einen eingebauten Blindspot hat, heißt das nicht, dass sie eine Metrik ohne Wert ist. Woher wollen Sie wissen, ob Ihre Webseite ihr Potential voll ausschöpft, wenn Sie nur den AOV beachten? Zusätzlich beeinflusst eine niedrige Conversionrate direkt das Ranking Ihrer Webseite. Je tiefer das Ranking desto weniger wahrscheinlich ist es, dass Kunden Sie finden werden. Die Antwort hierauf? Man kombiniere beide Metriken. So entstand der RPV.

Wie man den Umsatz pro Besucher verbessert

Es gibt viele Methoden und Ideen, die dabei helfen, den durchschnittlichen Umsatz pro Besucher zu verbessern; jedoch passt nicht jeder dieser Tipps automatisch zu jeder Situation. Tatsächlich ist ein niedriger RPV nicht immer ein Zeichen für eine schlecht performende Seite. Viel Traffic, der niedrigere Verkäufe und somit einen niedrigen RPV generiert zum Beispiel, kann zu mehr Verkäufen über längere Zeit führen. Daher ist es oft Good Practice, jede Metrik proportional zu anderen Daten zu sehen.

Trotzdem besteht wenig Zweifel an der Stärke und den Erkenntnissen, die der Umsatz pro Besucher bietet. Dazu gehören:

  • Upsells
  • Empfehlungen
  • Bonus-Programme
  • Warenkorberinnerungen
  • Live Chat
  • Optimierung

Upselling

Upsells sind eine Methode, bei der Upgrades oder zusätzliche Produkte zusätzlich zum ursprünglichen Kauf vorgeschlagen werden, und ist seit Anbeginn von Handlungsbeziehungen eine bewährte Methode im Verkauf. Ein Verkäufer im Bereich Technik würde zum Beispiel vorschlagen, 50€ zusätzlich für einen schnelleren Prozessor auszugeben, wodurch eine rasche Überalterung des Laptops in der nahen Zukunft vermieden werden könnte. Oder vielleicht beinhaltet das nächst-höhere Modell, dass nur 70€ mehr kostet, ein kostenloses Upgrade zum neusten Betriebssystem.

Upsells sind ein Balance-Akt, bei dem es wichtig ist dem Kunden das Gefühl zu geben, dass sie etwas Wertvolles erhalten oder es vielleicht dumm wäre, nicht ein wenig mehr auszugeben. Laut einer Studie von Predictive Intent erhöhen Upsells im E-Commerce Business Verkäufe um mehr als 4% und ist 20-mal so effektiv wie nicht passende Empfehlungen.

Empfehlungen

Trotz unserer vorherigen Aussagen sind Empfehlungen ein sehr effektiver Weg um den Umsatz zu erhöhen. Es gibt wenig Zweifel, dass das einfache Suggerieren von anderen Artikeln den Wert des gesamten Warenkorbs erhöht. In welchem Umfang hängt von der Effektivität des Recommendation-Engines ab. Dies kann ein Knackpunkt für kleine Unternehmen mit wenig oder keinen Daten über ihre Kunden sein, denn je mehr Informationen Sie haben, desto besser funktionieren Empfehlungen; ein bisschen gesunder Menschenverstand kann hier allerdings schon Wunder wirken.

Passende Empfehlungen, die zum aktuellen Kauf passen führen zum Beispiel eher zu höheren Gesamtkaufpreisen. Wenn jemand einen Laptop kauft wird das Vorschlagen einer kabellosen Maus oder eines externen Laufwerks wahrscheinlich bessere Ergebnisse erzielen als Stereozubehör.

Bonusprogramme

Es ist schwierig genug, Kunden zu finden; wenn Sie ihre Aufmerksamkeit endlich haben ist es wesentlich eine gute Kauferfahrung und Anreize für eine Wiederkehr zu bieten. Bonusprogramme sind dafür besonders geeignet.

Ähnlich wie Supermarkt Treuepunkte regen diese Systeme Kunden dazu an, auf eine E-Commerce Webseite zurück zu kehren anstatt zu Konkurrenz zu gehen, indem man eine Rückkehr lohnenswert macht. Treuepunkte sind dabei nur eine Methode um Loyalität zu fördern. Exklusive Angebote für wiederkehrende Besucher haben sich als sehr effektiv erwiesen, wenn sie richtig angewandt werden. Das kann besonders in der Weihnachtszeit nützlich sein, wenn Unternehmen am ehesten neue Kunden gewinnen können.

Warenkorberinnerungen

Der Umsatz pro Besucher kann durch diejenigen, die den Kauf mittendrin abbrechen stark verringert werden. Manche Schätzungen zu Warenkorbabbrüchen liegen bei fast 70%. Es gibt viele Gründe, warum dies passieren kann; einige, wie ein zu langer Checkout-Prozess, können durch ein Re-Design von Teilen der Webseite gelöst werden. Was auch immer der Grund ist, es ist möglich einige dieser Fehlschläge in Erfolge umzuwandeln.

Einfache Apps und Email-Kampagnen können diese leicht ablenkbaren User in Großkunden verwandeln; diese Lösungen sind außerdem sehr kosteneffektiv. Das Aufsetzen solcher Apps und Kampagnen ist in der Regel mit geringem Aufwand verbunden und kann zu loyalen Kunden führen, die regelmäßig kaufen.

Live Chat

Abhängig von der Größe eines Unternehmens kann ein Live-Chat Feature den Umsatz in überraschender Weise erhöhen. Zunächst haben Kunden mehr Vertrauen in Webseiten, die eine einfach zu bedienende Kundenservice-Plattform bieten; ein Live-Chat ist hier die praktischste online Ressource.

Weiterhin suchen Kunden nach Absicherung oder mehr Informationen über ein Produkt, vor allem bei größeren Anschaffungen. Diese Absicherung macht es nicht nur wahrscheinlicher, dass ein Verkauf stattfindet, sondern auch, dass Rücksendungen und unbefriedigende Erfahrungen stark reduziert werden.

Außerdem können Sie durch Upsells oder besondere Angebote, die dem Kunden persönlich angeboten werden, zusätzliche Umsätze generieren. Vergessen Sie nicht, auch Ihre Chat-Lösung A/B zu testen. Die Ergebnisse werden Sie überraschen!

Optimierung

Conversion Optimierung ist der Schlüssel zu Best Pratices im E-Commerce und der genauste und datenorientierteste Aspekt für das Verständnis einer gut performenden Webseite. Hierzu gehören zum Beispiel Heatmaps, anhand derer Unternehmen sehen können, mit welchem Teil des Seiteninhalts am meisten interagiert wird oder das Testen von verschiedenen Versionen einer Webseite um festzustellen, welches Setup am Besten funktioniert. Das versteht man unter A/B-Testing.

Optimierung stellt Daten, die über simple Metriken hinausgehen und erlaubt es einem Unternehmen, die Daten auf einem höheren Level zu analysieren und einen Kontext für anderweitig kalte, zusammenhanglose Zahlen zu bieten.

Umsätze im Jahresvergleich kalkulieren

Der Umsatz einer Webseite über ein Jahr ist vergleichsweise einfach zu errechnen. Der Umsatz von Unternehmen A im Jahr 2014 war zum Beispiel 200€ und 2015 250€. Einfach 200€ von 250€ abziehen, übrig bleiben 50€. Danach wird der Gesamtgewinn durch die Ursprungszahl von 2014 geteilt (50 geteilt durch 200), was 0,25 ergibt. Zum Schluss muss diese Zahl mit 100 multipliziert werden, was Ihnen ein Wachstum von 25% gibt.

Für Jahresübergreifende Kalkulationen müssen Sie Excel verwenden, da diese Berechnung, wie Sie sich vorstellen können, nicht ganz so simpel ist. Diese Methode funktioniert für alle Wachstumsberechnungen von mehr als einem Jahr

Jahr Einnahmen
2014 200€
2015 250€
2016  350€

Um das Gesamtwachstum von 2014 bis 2016 zu berechnen, benutzen Sie einfach die oben genannte Formel; allerdings benötigt eine jahresübergreifende Berechnung drei Schritte. Benutzen Sie zunächst die Endjahreszahlen von 2016 und teilen Sie diese dann durch die jährlichen Zahlen von 2014 (350 geteilt durch 200 = 1,75)

Blogartikel

9min. Lesezeit

Wie eine Customer Journey Map die User Experience verbessert

Eine Customer Journey Map ist eine visuelle Darstellung der Interaktion eines Kunden mit einem Unternehmen oder einer Website. Sie wird verwendet, um zu definieren, welche Teile dieses Prozesses nicht reibungslos funktionieren, um so das Erlebnis für den Kunden zu verbessern. Bei richtiger Anwendung kann es zu Kundenbindung, positiver Mundpropaganda und einem effizienteren Geschäftsmodell führen.

Customer Journey Definition

Der Begriff Customer Journey bezeichnet die Reise eines (potenziellen) Kunden über verschiedene Kontaktpunkte, d.h. vom ersten Kontakt bis zum Kauf eines Produktes oder einer vergleichbaren, vorab definierten Handlung wie z.B. eine Anfrage, Registrierung oder Bestellung. Dabei werden alle Touchpoints (Berührungspunkte) des Kunden mit der Marke, dem Produkt oder der Dienstleistung, die er bis zur Conversion hatte, berücksichtigt. Zur besseren Übersicht kann die Customer Journey in Form einer Customer Journey Map visualisiert werden.

Was ist eine Customer Journey Map?

Die Customer Journey Map ist ein (meist) visuelles Werkzeug, das Unternehmen hilft, zu verstehen, was ein Kunde durchlebt, wenn er ein Produkt oder eine Dienstleistung von ihnen kauft. Es beschreibt in klaren, prägnanten und visuellen Begriffen die Reise, die jeder Kunde wahrscheinlich durch Käuferpersönlichkeiten und Benutzerdaten erleben wird.

Käuferpersönlichkeiten bilden das Herzstück einer Customer Journey Map und sind umfassende Darstellungen, die als fiktive Charaktere dargestellt werden und auf konkreten Daten und Kundenfeedback basieren. In der Regel erstellt jedes Projekt zwischen drei und sieben Käuferpersönlichkeiten, von denen jede ihre eigene Customer Journey Map benötigt.

Der Zweck der Customer Journey Map besteht darin, so klar wie möglich zu verstehen, was ein Kunde bei der Nutzung Ihrer Website oder Dienstleistung erwartet. Es wird Ihnen auch helfen, die Elemente zu verbessern, die nicht optimal funktionieren, nicht einfach zu navigieren sind und Ihnen zeigen, wie Sie das gesamte Kundenerlebnis verbessern können.

Jede Persona und damit auch die Customer Journey Map selbst sind nicht als perfekte Darstellung der tatsächlichen Interaktionen gedacht. Vielmehr handelt es sich um Mapping der Erfahrung aus der Perspektive jeder Persona. Es ist jedoch zu beachten, dass komplexere Informationen auf der Map möglicherweise auch Text erfordern.

Die Map selbst hebt „Touchpoints“ hervor, die spezifische Phasen der Interaktion des Kunden mit einem Unternehmen sind. Jeder dieser Berührungspunkte – zum Beispiel die Suche nach einem Produkt, die Recherche eines Contents, der Kauf des Produkts, das Warten auf die Lieferung und die Rückgabe bei Unzufriedenheit – kann aus Kundensicht als negativ, neutral oder positiv bewertet werden.

Customer Journey Maps erfordern verschiedene Forschungstechniken, die auf Daten, Kundenfeedback und kreatives Denken setzen. Daher sind keine Maps gleich und jede ist von vielen verschiedenen Faktoren abhängig, die nicht pauschal vereinfacht oder stereotypisiert werden können.

Customer Journey

Wem nutzt eine Customer Journey Map?

Es gibt viele Gründe, warum eine Costumer Journey Map für ein Unternehmen nützlich sein kann. Das Marketing ist heute stark auf den Einzelnen ausgerichtet, die Personalisierung gewinnt in fast allen Bereichen an Bedeutung.

Das bedeutet, dass die Kundenzufriedenheit für ein Unternehmen wichtiger denn je ist und an Loyalität in einem Ausmaß gebunden ist, das es bisher nicht gegeben hat. Die Kunden sind anspruchsvoller, wissen um ihre Möglichkeiten und sind bereit, sich zu informieren.

Durch die Zuordnung jedes der zuvor genannten Berührungspunkte kann eine gut gestaltetes Template für die Customer Journey Map alle Probleme aufzeigen, die Kunden im Prozess der Interaktion mit einem Unternehmen haben könnten. Sie kann auch dazu beitragen, eine Beziehung zu einer Organisation, einem Produkt, einer Dienstleistung oder einer Marke aufzubauen. Dies kann über mehrere Kanäle und über längere Phasen erfolgen.

Sobald eine Template für eine Customer Journey Map erstellt wurde, kann das gesamte Unternehmen den Kunden an der Spitze des Entscheidungsprozesses halten. Mit dem Fokus auf den Kunden und seine Benutzererfahrung (UX) können alle Schwachstellen und Hürden innerhalb der Berührungspunkte der Timeline ausgebügelt werden.

Zusammenführung aller Aspekte des Unternehmens

Ein weiterer Nutzen der Customer Journey Map ist die Zusammenführung aller Abteilungen eines Unternehmens mit Fokus auf das Kundenerlebnis. Zunächst einmal können alle Abteilungen beauftragt werden, jene Fragen zu definieren, mit denen Kunden konfrontiert werden, wenn sie mit ihnen zu tun haben. Das ist durchaus „nicht mal eben erledigt“, da viele Abteilungen möglicherweise nicht an den Umgang mit Kunden gewöhnt sind. Doch die Entscheidungen, die sie treffen, können einen signifikanten Einfluss auf die UX haben. Durch die Schaffung eines allgemeinen Verständnisses, wie sich jeder Touchpoint auf die UX im gesamten Unternehmen auswirkt, können Entscheidungen aus einer empathischeren Perspektive getroffen werden.

Traditionelles Marketing endet am Point of Purchase, aber das Kundenerlebnis hört nicht unbedingt dort auf. Ein Beispiel: vielleicht war der Kauf nicht zur vollen Zufriedenheit des Kunden und er möchte die Ware zurückgeben. Abteilungen, die nicht an Touchpoints vor dem Kauf beteiligt sind, spielen nun eine zentrale Rolle. Wie einfach ist es für den Kunden, die Rückgabeinformationen auf einer Website zu finden? Wenn sie Informationen über die Lieferung oder die Abholzeiten benötigen, wie hoch ist die Wahrscheinlichkeit, dass sie eine Antwort erhalten, die sie zufrieden stellt? Das erfordert Voraussicht und eine Richtlinie, die die Kundenzufriedenheit in den Mittelpunkt von Design und Organisation stellt.

So erstellen Sie eine Customer Journey Map

Templates für Customer Journeys erscheinen auf den ersten Blick komplex, aber es gibt einige bewährte Methoden, die den Prozess erheblich vereinfachen können.

Darunter:

  • Personas bilden
  • Definition von Berührungspunkten
  • Ausrichtung der Ziele auf jeden Berührungspunkt
  • Entscheiden wo diese Ziele liegen und wo sie nicht erreicht werden
  • Priorisierung von Änderungen

Personas bilden

Personas zu bauen ist an sich eine Methode, auf die wir an dieser Stelle nicht näher eingehen werden, aber im Großen und Ganzen ist dies sicherlich der zeitaufwändigste Teil des Prozesses. Sie erfordert detaillierte Forschung, einschließlich qualitativer und quantitativer Daten, und ist die Grundlage für den gesamten Prozess. Eine Persona ist ein hochgradig relativer und abgerundeter fiktiver Charakter, verallgemeinert aber nicht stereotyp.

Definition von Berührungspunkten

Alle Beispiele für die Darstellung von Customer Journeys sind einzigartig. Denn jeder Sektor, jede Branche, jedes Geschäftsfeld und jede Website ist bis zu einem gewissen Grad einzigartig. Daher ist es unwahrscheinlich, dass Berührungspunkte auf einer Map gleichermaßen für eine andere Map funktionieren. Tatsächlich muss jedes Unternehmen seine Käuferpersönlichkeiten und Kundenkarten anpassen, wenn sich sein Geschäft wandelt. Auch geringe Änderungen können tiefgreifende Auswirkungen auf die Vorlage für die Customer Journey Map haben.

Wie bereits beschrieben, sind Touchpoints Orte auf der Map, an denen der Kunde mit Ihrem Unternehmen oder Ihrer Website interagiert. Diese sollten sorgfältig überdacht werden und alle Aspekte des Unternehmens einbeziehen. Bei der UX kann es stets sein, dass Sie von dem Input scheinbar unbeteiligter Abteilungen überrascht werden.

Ausrichtung der Ziele auf jeden Berührungspunkt

Je nach Art der Map wird dies oft als der schwierigste Teil des gesamten Prozesses angesehen. Die Definition basiert auf den zuvor beschriebenen Daten und muss auf die zuvor definierten Touchpoints abgebildet werden.

Der Hauptgrund für die Komplexität ist, dass die Kundenziele bei der Gestaltung von Websites weitgehend übersehen werden. Aufmerksamkeit erregende Elemente, Upselling und Website-Engagement werden über die Benutzerfreundlichkeit und Effizienz einer Website gestellt. Die richtige Balance zu finden, ist entscheidend für die Stärke einer Customer Journey.

Entscheiden wo diese Ziele liegen und wo sie nicht erreicht werden

Da Sie nun Ihre Daten, das Template für die Customer Journey Map, Touchpoints und Ziele haben, ist es an der Zeit, alles zusammenzufassen und genau zu definieren, wo die UX die Erwartungen erfüllt und wo die Dinge verbessert werden können. Es ist wichtig zu beachten, dass das Mapping von Stärken fast so wichtig ist wie die Definition von Schwachstellen. Einige Elemente der Customer Journey können auf andere Bereiche ausgedehnt werden.

Priorisierung von Änderungen

Sie werden nun sicherlich mehr als einen „toten Winkel“ in Ihrer Customer Journey festgestellt haben. An dieser Stelle ist es wichtig, zu priorisieren, auf welche Berührungspunkte zuerst reagiert werden soll. Gelegentlich wird das ganz offensichtlich sein, z.B. sollte ein schwacher Check-Out-Prozess, bei dem Kunden ihre Warenkörbe mit einer höheren Rate als normal verlassen, priorisiert werden. Doch nicht alle Schwachstellen werden so einfach zu definieren oder priorisieren sein.

Eine der besten Möglichkeiten, um zu definieren, welche Teile einer Website geändert werden müssen, ist die Kosteneffizienz einer Seite. Das Optimieren der wichtigsten Aspekte der Website, basierend auf konkreten Daten, A/B-Tests und anderen Methoden, kann zu sofortigen Ergebnissen führen.

Best Practices

Jede Website ist anders, doch es gibt ein paar allgemeingültige Aussagen, die auf alle zutreffen. Bei den Customer Journeys geht es um Vereinfachung, und das Gleiche gilt für die Maps selbst. Der Sinn der visuellen Gestaltung einer Karte besteht darin, dass es leicht ist, Themen zu verstehen, die leicht hervorgehoben und umgesetzt werden können. Diese Karten sind keine komplexen Collagen, sie können sogar kaum mehr sein als farbcodierte, lineare Linien mit Punkten als Berührungspunkt. Wie auch immer Sie die Karte aufbauen, sie sollte leicht verständlich sein.

Customer Journey Map Beispiele

Die Vorlagen für Customer Journeys sind vielfältig, einige erscheinen wie Kunstwerke, andere sind ganz simpel, aber solange sie klar und prägnant sind, können sie in den verschiedensten Gestaltungsformen nützlich sein.

Customer Journey Map Beispiele

Diese Customer Journey Map für die Wohltätigkeitsorganisation „The Samaritans“ konzentriert sich auf den Zweck der Wohltätigkeitsorganisation selbst.

Beachten Sie, dass der Text sehr visuell ist und es daher leicht macht, sich auf das Bild der Karte selbst zu beziehen.

Weiteres Beispiel customer journey

Dies ist ein Beispiel für eine Map, die den Eindruck einer Reise vermittelt und nicht einer linearen UX. Das verstärkt die Ansichtsweise, dass eine Customer Experience selten einfach als eine Reise von A nach B zu definieren ist.

Digital Experience

Blogartikel

11min. Lesezeit

15 kostenlose Bootstrap Landingpage Templates

2018: Landingpages sind überall! Es fällt schwer im Web auch nur einen Schritt zu tun, ohne auf einer auffälligen Webseite zu landen, die nach Ihrer Email-Adresse, einer Anmeldung oder Ihren Kontaktinformationen fragt.

Die Wahrheit ist: das Landingpage-Format funktioniert und bleibt einer der besten Wege, um qualifizierte Leads zu generieren.

Es ist allerdings nicht so einfach sich durch den Dschungel von Lösungen zu kämpfen, die anbieten, Landingpages einfach und schnell zu erstellen.

Zur Erinnerung, eine Landingpage ist eine Seite Ihrer Webseite, auf der Ihre Nutzer ‚landen‘ und die so designt wurde, dass sie für einen bestimmten Zweck konvertiert: für einen erfolgreichen Verkauf, um eine E-Mail Adresse zu erhalten, für eine Registrierung, um ein Video anzuschauen, usw.
Landingpages sind zu einem wichtigen Tool zur schnellen Generierung von Verkäufen geworden, besonders zu einem Zeitpunkt an dem A/B-Testing essentiell ist, um seine Ideen und Konzepte schnell anhand der Besucherreaktionen zu testen.

Wir wollen Ihnen Zeit sparen und präsentieren hier eine Auswahl von 15 Bootstrap-Templates zur schnellen und einfachen Erstellung von Landingpages.

Als Bonus sind diese Bootstrap-Templates kostenlos.

Sollten Sie ein CMS verwenden, haben wir für Sie auch eine Auswahl an WordPress Landingpage-Templates und andere Beispiele zum Landinpage-Design.

REGNA

One page bootstrap landing page template

Regna ist ein Bootstrap-basiertes Landinpage-Template, das klar und einfach anpassbar ist.
Als einfach nutzbare One-Page-Seite ist es ideal für alle Arten von Agenturen und Business Services.
Wir mögen vor allem das vorgefertigte Menü, dass schnell an ihr Business angepasst werden kann.

Insgesamt ist die Präsentation klar und direkt, was vor allem für die Firmen perfekt ist, die eine leicht zugängliche Seite haben wollen, die die Präsentation von Services, Kunden, Team etc. direkt auf den Punkt bringt.

Das Browsing ist geschmeidig und komplett responsive auf allen Geräten.

Zur Vorschau von Regna

Zum Download von Regna

SAILOR

Corporate bootstrap landing page template

Sailor ist das perfekte Bootstrap-Template für Firmenkunden Landingpages.

Das Design lässt sich einfach anpassen und hat viele Features wie zum Beispiel Transition-Animationen, voreingebaute Farbpaletten usw.

Dieses komplett responsive Template ist ideal um Ihre Firma, Ihr Kundenportfolio, Ihre Geschichte usw. vorzustellen.

To preview Sailor

To download Sailor

Bell

Quick start your bootstrap landing page template

Bell ist das ultimative rundum-sorglos Paket, damit Sie schnell Ihre neue Landingpage erstellen können.

Es ist einfach zu beherrschen, 100% Smartphone-freundlich und passt sich an fast alle Arten von Projekten (außer E-Commerce) an, wie zum Beispiel Agenturen, Immobilien, Industrie, Bauwesen, Finance, Consulting, Haushaltsservice usw.

Das Design ist modern und elegant, und die Übergänge und Scroll-Animationen sind genau abgestimmt. Zusammengefasst ist es ein Must-Have!

Zur Vorschau von Bell

Zum Download von Bell

MediLab

Bootstrap landing page template for medical industry

MediLab ist ein Muss für Firmen des medizinischen Sektors, Kliniken und allen Bereichen, die mit Gesundheit und Medizin zusammenhängen.

Dieses einfach anpassbare Bootstrap-Template ist 100% responsive und enthält alle Funktionalitäten, die der medizinische Sektor braucht: Terminvergabe, Anzeige von Patienten-Testimonials, Kartenanzeige, Öffnungszeiten etc.

Zur Vorschau von MediLab

Zum Download von MediLab

Laura

Bootstrap landing page template for photographs

Laura ist ein Template, dass vor allem für Photographen, Webdesigner, Startups und Firmen, die visuell durch Story-Telling auf ihrer Landingpage kommunizieren wollen, interessant ist.

Das Bootstrap-Template ist einfach zu erlernen, anpassbar und mobil-freundlich, egal auf welchem Gerät.

Wir mögen vor allem die (anpassbare) Farbauswahl und die geschmeidige Navigation, die es einfach macht, auf der Landingpage zu browsen und das Leistungsversprechen klar herüberzubringen.

Zur Vorschau von Laura

Zum Download Laura

Maundy

Coming soon bootstrap landing page template

Maundy ist ein Landingpage-Template das speziell für „Coming Soon“-Seiten designt wurde.

Damit ist es perfekt für die Fälle, wo Sie an einem Produkt arbeiten (zum Beispiel einer Crowdfunding Kampagne), aber gleichzeitig immer noch eine Landingpage haben wollen, die E-Mail Adressen oder Registrierungen sammelt.

Das klare, einfache und elegante Template hat das perfekte Countdown-Feature um ein bevorstehendes Event oder die Veröffentlichung Ihres zukünftigen Services/Produktes anzukündigen.

Zur Vorschau von Maundy

Zum Download von Maundy

Bethany

Modern bootstrap landing page template

Bethany ist ein einfach zu bedienendes, modernes und minimalistisches Bootstrap-Template.

Es ist ideal für Webdesigner, kreative Agenturen, und Berufszweige, die mit Gestaltung, Photographie oder Entwicklung zu tun haben.

Es ist 100% responsive und integriert interne Templates um Formen, Buttons oder eine maßgeschneiderte Navigation zu erstellen.

Zur Vorschau von Bethany

Zum Download von Bethany

Instant

Bootstrap landing page template for freelances

Instant ist das perfekte Bootstrap WordPress-Theme für Freelancer.

Es enthält drei einfachen und eleganten Seiten, die es Ihnen ermöglichen, schnell eine Homepage, eine Kontakt- oder Informationsseite und eine Portfolioseite zu erstellen, um Ihre Erzeugnisse zu präsentieren.

Es ist einfach anpassbar und erlaubt es Freelancer eine Seite zu haben, die ihre Aktivitäten vorstellt.

Zur Vorschau von Instant

Zum Download von Instant

Stylish Portfolio

Bootstrap landing page template for portfolio

Stylish Portfolio ist ein ultra-modernes Template und designt, um Ihre Kreationen zu präsentieren.

Dieses geschmeidige und klare Landingpage-Template ist ideal für Agenturen und Freelancer aller Arten (Web, Photographie, Design, usw.)

Es ist 100% responsive, hat ein durch jQuery verbessertes Scroll-Feature und sein Footer enthält ein Google Maps Modul das ideal ist, um Ihren Kunden Ihren Standort anzuzeigen.

Zur Vorschau von Stylish Portfolio

Zum Download von Stylish Portfolio

New Age

Bootstrap landing page template for mobile app

New Age ist das perfekte Bootstrap-Template für alle Entwickler mobiler Apps.

Es ist gezielt designt, um die Features einer App zu präsentieren; das Template ist 100% mobil-freundlich und das Browsing ist geschmeidig und intuitiv.

Es enthält fertige „App Store“ und „Play Store“ Buttons sowie CTAs, die Ihre Nutzer zum Download Ihrer App anregen.

Das glatte, moderne Design kann einfach an Ihre App-Farben angepasst werden, Logo und Features können schnell hinzugefügt werden.

Zusammengefasst ist dieses Template ein Muss für jedes mobil-basierte Business.

Zur Vorschau von New Age

Zum Download von New Age

Clean Blog

Bootstrap landing page template for blogging

Clean Blog ist ein Template, dass mit Bootstrap 4 erstellt wurde.

Es hat einfach anpassbare Elemente und ist 100% responsive und ist somit perfekt, um einen Blog zu starten.

Das Template ist einfach nutz- und veränderbar und ist die perfekte Unterstützung für Blogger, die eine verlässliche und höchst anpassbare Basis für den Start ihres Blogs wollen.

Es enthält ein Kontaktformular in PHP mit einer Bestätigungsfunktion und einem Footer mit schon integrierten Links zu sozialen Netzwerken.

Zur Vorschau von Clean Blog

Zum Download von Clean Blog

Butterfly

Bootstrap landing page template for SaaS startup

Butterfly ist ein allumfassendes Template für Startups und Firmen, die Software oder SaaS-Lösungen anbieten.

Neben seiner glatten und professionellen Navigation enthält das Template Unterseiten von Services sowie eine Präsenttion des Portfolios, des Teams und Kundenfeedbacks auf einer einzigen Seite.

Es enthält vorgefertigte Kontaktformulare und hervorstechende CTA-Designs, um zukünftige Kunden anzulocken.
Das moderne und elegante Design macht die Vorstellung Ihres Angebots glasklar und präzise.

Zur Vorschau von Clean Blog

Zum Download von Clean Blog

Tempo

Bootstrap landing page template example

Tempo ist ein einfaches aber effektives Landinpage-Template.

Es ist einfach anpassbar und enthält verschiedene Farb-Schema und alle anderen Features, die man von einer effektiven Landingpage erwartet, die Ihre Lösung, Services und Kunden präsentiert und selbstverständlich auch die Möglichkeit bietet, mit Prospects in Kontakt zu treten.

Durch seine komplette Responsivität passt es sich gut an Tablets und mobile Geräte an und enthält zusätzlich fortgeschrittene Features wie Image-Slider usw.

Zur Vorschau von Butterfly

Zum Download von Butterfly

Company

Bootstrap landing page template for SMBs

Company ist ein universelles Template, das perfekt zu kleinen und mittleren Unternehmen aus allen Branchen passt.

Es ist einfach zu bedienen, 100% responsive und erlaubt es Ihnen, Ihre Dienstleistungen einfach und wirkungsvoll zu präsentieren.

Es ist eine gute Wahl für das Handwerk, Juristen oder persönliche Services.

Es enthält fortgeschrittene Kontakt-Features und erlaubt es Ihnen, einen integrierten Blog und eine News-Seite zu erstellen, was perfekt für die Akquise neuer Kunden ist, oder um über Ihre Marke zu sprechen.

Zur Vorschau von Company

Zum Download von Company

Delicious

Bootstrap landing page template for restaurant

Wir können diesen Artikel nicht beenden ohne eine verlässliche und einfach aufsetzbare Lösung für Restaurant Besitzer vorzustellen!

Delicious ist das perfekte Template für Restaurants, Bars, und Catering & Wein-Businesses.

Es funktioniert mit HTML5, CSS 3 und BootStrap 3 und beinhaltet fortgeschrittene Features, um dynamische Effekte zu erstellen.

Kreativ und modern stellt das elegante Design die Atmosphäre Ihres Restaurants nach und zeigt Ihre Speisekarte.

Eine kostenpflichtige Option (9€ lebenslang) erlaubt es Ihnen, ein Reservierungsmodul zu integrieren, dass einwandfrei mit PHP/Ajax funktioniert.

Zur Vorschau von Delicious

Zum Download von Delicious

Haben Sie Ihr ideales Landingpage-Template gefunden? Lassen Sie es uns in den Kommentaren wissen. Und vergessen Sie nicht, egal welches Template Sie auswählen, es ist essentiell dieses zu testen um zu sehen, ob es Ihre Conversions positiv beeinflusst.

Wenn Sie A/B-Testing noch nicht kennen, können Sie auch unser entsprechendes Whitepaper herunterladen.

Werfen Sie einen Blick hinter die Kulissen! Wie Erkenntnisse aus der Psychologie Ihre Conversion Rates steigern, erfahren Sie in diesem E-Book.

Blogartikel

10min. Lesezeit

5 kluge Beispiele: Knappheit & Dringlichkeit im Marketing für mehr Conversions

Wir haben es alle schon einmal erlebt.

Der Muttertag steht an und da möchte man natürlich rechtzeitig das passende Geschenk besorgen. 

Leider weiß man jedes Jahr auf’s Neue nicht so genau, wo man ein gutes Geschenk bestellen kann.

Sie surfen also durch einige Webseiten und stoßen auf diesen wunderbaren Blumenstrauß.

Sie scrollen nach unten und sehen die Botschaft: „Muttertag: Jetzt bestellen für pünktliche Lieferung.“

Und genau das ist es: Sie wissen, dass Sie jetzt bestellen müssen, damit der schöne Strauß Ihre Mutter rechtzeitig am Muttertag erreicht.

Dieser Druck, den Sie dabei verspüren?

Das nennt man im Marketing Dringlichkeit.

Dringlichkeit wird vielfach in Marketing-Kampagenen eingesetzt, um Conversions zu steigernKnappheit und Dringlichkeit finden in vielen Marketingkampagnen Anwendung, um das Engagement der User zu steigern und Conversions zu erhöhen: Es funkioniert einfach.

Schauen Sie sich nur Black Friday an: Laut TechCrunch hat allein dieses Ereignis im November 2017 mehr als 5 Milliarden Dollar an Online-Verkäufen eingebracht.

Im Grunde genommen drängen uns dringende Situationen zum schnellen Handeln, und Knappheit löst Angst aus, was auch dazu führt, dass wir schnell reagieren. Erfahren Sie mehr über die Kaufangst.

In die richtigen Hände gelegt, können diese Methoden E-Commerce- und Online-Unternehmen dabei helfen, ihre Umsätze zu steigern und den Umsatz zu steigern.

Bevor wir uns mit den besten Praktiken befassen, lassen Sie uns einen kurzen Blick auf die Psychologie hinter Knappheit und Dringlichkeit werfen.

Die Psychologie hinter der Dringlichkeit verstehen

Die Dringlichkeit ist ein psychologischer Auslöser, der tief in unserem Gehirn verwurzelt ist: Er bezieht sich auf die menschliche Verlustabneigung oder das sogenannte Fear-of-Missing-Out (FOMO).

Wissenschaftlich gesehen ist Dringlichkeit ein zeitbasiertes Konzept, das uns zu schnellem Handeln veranlasst.

Ähnlich wie das Knappheitsprinzip ist FOMO eine Art soziale Angst, die durch den „Wunsch definiert ist, ständig mit dem verbunden zu bleiben, was andere tun“ (Quelle).

Wenn etwas (ein Angebot, ein Rabatt…) ausläuft, prüfen wir automatisch, ob wir bereit sind, diese Gelegenheit verstreichen zu lassen – aus Angst, dass wir sie verpassen.

Die Psychologie hinter der Knappheit verstehen

Ähnlich wie bei der Dringlichkeit ist die Knappheit ein psychologischer Auslöser, der die Quantität nutzt, um uns schnell handeln zu lassen.

Knappheit bedeutet laut wissenschaftlicher Literatur einfach, dass wir einen höheren Wert auf Objekte legen, die knapp oder selten sind (Quelle).

Ebenso löst Knappheit auch unseren FOMO-Instinkt aus: Wenn etwas ausläuft, würden wir auch die Vor- und Nachteile eines Kaufs berücksichtigen, bevor es zu spät ist.

Interestingly, scarcity plays all kinds of roles in our lives: a 2009 study consisted in showing pictures of a man to a cohort of women in a dating perspective. Half of the cohort was told that the man was taken and the other half that we has single.

Interessanterweise spielt Knappheit alle möglichen Rollen in unserem Leben: In einer Studie aus dem Jahr 2009 hat man einer weiblichen Testgruppe Bilder eines Mannes gezeigt. Der Hälfte der Frauen wurde gesagt, dass der Mann single sei und der anderen Hälfte, dass er in einer festen Beziehung sei.

Die Ergebnisse waren überaus interessant: Die Single-Frauen hatten mehr Interesse an dem bereits vergebenem Mann.

Nun, da wir die psychologische Grundlage für Dringlichkeit und Knappheit abgedeckt haben, finden Sie hier die besten Praktiken, um sie im Marketing konkret anzuwenden.

Best Practices für Dringlichkeit und Knappheit im Marketing

Knappheit und Dringlichkeit sind zweifellos mächtige Techniken, um die Conversion zu erhöhen.

Sie sollten jedoch mit Vorsicht verwendet werden, da aufdringliche Methoden schnell zu einem Risiko für Ihre Markentreue werden können.

„Fake“ Knappheit und Dringlichkeit vermeiden

Dringlichkeit zu schaffen ist gut, Missbrauch ist schlecht.

Einige Anbieter geben wirklich alles und bieten das ganze Jahr über Sale-Angebote an, was das Gefühl vermittelt, dass alles zu jeder Zeit ein Schnäppchen ist und keine wirkliche Knappheit/Dringlichkeit herrscht.

Diese Methode funktioniert jedoch nicht.

Aktuellen Untersuchungen zufolge schneiden Knappheitstaktiken nicht gut ab, wenn sie als manipulativ wahrgenommen werden.

"Fake" Dringlichkeit funktioniert nicht
Es sieht aus, als sei hier alles im Angebot

Wenn alles im Angebot ist, merken Ihre Kunden, dass nichts wirklich echt ist und Sie werden bald an Glaubwürdigkeit verlieren.

Als Faustregel gilt: Zeigen Sie nur echte Angebote an und missbrauchen Sie sie nicht: Ab und zu ein Sonderangebot ist viel effektiver.

Die richtige Wortwahl einsetzen

Wir sind ständig mit Verkaufs- und Werbeangeboten konfrontiert: Es ist schwer, gefälschte Verkäufe von echten Schnäppchen zu unterscheiden.

Um nicht zu aufdringlich zu klingen, versuchen Sie, nicht zu viele blinkende Banner zu verwenden und echte Schnäppchen mit ansprechenden Worten hervorzuheben.

Ihre Besucher sollten auf den ersten Blick ein echtes Schnäppchen erkennen können.

Starker Call to Action verwenden

Ähnlich wie bei der Wortwahl sollte Ihr Call to Action einen echten Nutzen darstellen und die Dringlichkeit/Knappheit betonen.

So ist es beispielsweise üblich, den Restbestand anzugeben, um den Knappheitstrieb auszulösen.

Nutzen Sie Dringlichkeits- oder Knappheitsbotschaften in Ihren CTAs
Quelle: Walmart

Personalisierte Botschaften

Die Erstellung personalisierter Botschaften ist ein wichtiger Trend im digitalen Marketing im Jahr 2018.

Ob im B2C oder B2B, die Personalisierung bringt große Vorteile und insgesamt bessere Conversions.

Weil es so effizient ist, könnte das Hinzufügen von Hinweisen auf Knappheit und Dringlichkeit zu Ihren personalisierten Nachrichten Ihre Umsätze drastisch steigern.

Hier sind ein paar Tipps, die Sie verwenden können, um personalisierte Nachrichten mit Knappheitsbotschaften zu einzusetzen:

  • Zusätzliche personalisierte Produktvorschläge
  • Dynamische Texteingabe
  • E-Mail-Kampagnen mit Marketing-Automatisierung
  • Kontextbezogenes Targeting

Möchten Sie mehr über diese erfahren? Mehr zu unseren Marketingkampagnen und Personalisierungslösungen, um Ihren Zielgruppen starke Botschaften zu vermitteln.

5 Beispiele aus der Praxis für Knappheit und Dringlichkeitstaktiken zur Steigerung der Conversions

Booking.com

Wie Booking.com Dringlichkeits-Marketing einsetzt Wie Booking.com Dringlichkeits-Marketing einsetzt

Booking.com ist gut darin, bei seinen Besuchern ein Gefühl der Dringlichkeit auszulösen: Es wird angegeben, wie oft ein bestimmtes Hotel innerhalb von 12 oder 24 Stunden gebucht wurde.

Als Besucher wird Ihnen die Popularität eines bestimmten Hotels suggeriert: Das lässt User schneller handeln.

Außerdem zeigt Booking.com clevere Botschaften an, um die Dringlichkeit zu verstärken („Verpassen Sie das nicht“ oder „Hohe Nachfrage!“)

Mit Hilfe von Knappheitsmethoden kann Booking.com den internen Wettbewerb stärken, um seinen Kunden einen besseren Service zu bieten.

OnePlus

OnePlus ist ein Smartphone-Unternehmen, das innerhalb weniger Monate berühmt wurde, indem es ausschließlich auf Knappheit setzte.

Einfach ausgedrückt, kam OnePlus auf eine brillante Idee: ein Smartphone zu entwickeln, das man nur kaufen konnte, wenn man eingeladen war.

Das ist richtig, Sie konnten es nicht in irgendeinem Geschäft kaufen und Sie konnten es nur auf deren Website bestellen.

Durch die Schaffung eines Gefühls der Exklusivität, löste OnePlus eine massive “Angst etwas zu verpassen” aus, die sich innerhalb der Technik-Community stark ausgebreitet hatte.

Ihre mutige Marketingkampagne basierte grundsätzlich und größtenteils auf dem “Knappheitsprinzip” und führte zu einem enormen Verkauf von 1 Millionen Einheiten und insgesamt 25 Millionen Webseitenbesucher.

Sushi Shop

Sushi Shop

In der Lieferservice-Branche ist es eine große Herausforderung, verspätete Auslieferungen zu vermeiden. Denn der durchschnittliche Arbeitnehmer legt meistens nur eine halbe Stunde für die Mittagspause ein (Quelle).

Marketer bei SushiShop (französischer Marktführer im Bereich Sushi-Lieferservice) wollten das Dringlichkeits-Marketing ausprobieren, um zu sehen, ob es in ihrer Branche, positive Ergebnisse einbringen könnte.

Vor diesem Hintergrund haben wir (AB Tasty) der Marke geholfen, eine “Stressmarketing-Taktik” einzuführen, die auf dem Dringlichkeitsprinzip basiert.

Wir haben einen „Sticky Banner“ in ihrer mobilen App implementiert, um Kunden währen der Mittagszeit zur Vorbestellung aufzufordern: Die Idee dahinter war, dass durch die Vorbestellung eine rechtzeitige und pünktliche Auslieferung gewährleistet werden konnte.

Die Resultate waren sehr positiv: Es führte zu einem 3%-Anstieg der Bestellbestätigungen.

Amazon.com

Quelle: Amazon

Als größtes E-Commerce Unternehmen der Welt ist Amazon eine offensichtliche Wahl, wenn es um Beispiele zum Einsatz von “Dringlichkeit” und “Knappheit” geht.

Zusätzlich zu einer nahezu perfekten Produktseite und Produktübersichtsseite hat Amazon eine “Today´s Deals” Rubrik, in der limitierte Angebote angezeigt werden.

Ihre Produktliste zeigt geschickt Ersparnisse an, um den Preisunterschied hervorzuheben.

Quelle: Amazon

Zu guter Letzt sind einige Produkte nur in begrenzter Menge verfügbar. In diesem Fall wurden 33% bereits beansprucht.

Dadurch schafft Amazon ein echtes Gefühl von Knappheit und Dringlichkeit, ohne dabei zu aufdringlich zu sein.

Basecamp

Basecamp ist eine berühmte Kommunikations- und Projektmanagement-Software, die dafür bekannt ist, das Team-Leben zu erleichtern.

Neben seiner raffinierten visuellen Identität, verwendet Basecamp clevere “Dringlichkeits-Taktiken”, die einem das Gefühl geben, etwas zu verpassen, wenn man Basecamp nicht verwendet.

Dringlichkeits-Marketing im Beispiel bei Basecamp

Sie geben reelle Zahlen aus Kundenstatistiken preis, die das Gefühl wecken, auch selbst davon profitieren zu können.

Zusätzlich geben sie an, wie viele Unternehmen sich seit letzter Woche angemeldet haben.

Social proof Beispiel von Basecamp

Auf der Seite “Echte Ergebnisse” zeigt Basecamp eine riesige Anzahl von Kundenbewertungen an: So viele, als würde die ganze Welt es nutzen: das triggert definitiv Ihren „FOMO“.

So weit zum Thema Knappheit und Dringlichkeits-Taktiken.

Wenn Sie mehr über digitales Marketing erfahren wollen, haben wir vor kurzem auch Beiträge über Warenkorb-Optimierung und E-Commerce-Produktseiten herausgebracht.

Blogartikel

10min. Lesezeit

Der ultimative Ratgeber für perfekte Produktübersichtsseiten 2018

In der Welt des Online-Shoppings wissen die meisten E-Marketer, dass Produktseiten eine wichtige Rolle in der Kaufentscheidung spielen – sie sind die wichtigste Verbindung zwischen Produkt und Nutzer.

Literatur zum E-Commerce bietet unzählige “Tipps zur Optimierung der Produktseiten”, allerdings wird nur wenig über Produktübersichtsseiten gesagt.

Das finden wir sehr schade. 

Tatsächlich spielen Produktübersichtsseiten eine große Rolle in der Käufer-Journey und der darauf folgenden, gefürchteten Conversionrate.

Was genau ist eine Produktübersichtsseite aber eigentlich?

Kurz zusammengefasst sind Produktübersichtsseiten das Resultat entweder von Kategorieseiten oder von Suchergebnissen.

Sie spielen ein große Rolle als eine Art ‚Katalog‘, da sie alle Produkte einer Kategorie oder eines Filterergebnisses anzeigen.

Beispiel für Produktübersichtsseiten für E-Commerce Websites
Quelle: Etsy

Wenn sie richtige erstellt werden, können Übersichtsseiten einen großen Einfluss auf die UX des Nutzers haben: diese hängt von verschiedenen Faktoren ab wie zum Beispiel dem Leistungsversprechen, den Produkteigenschaften, sowie der allgemeinen Qualität der gebotenen Information.

Hier sind nun die 10 Best Practices die Sie befolgen sollten, um leistungsfähige Produktübersichtsseiten zu erstellen, die auch konvertieren.

Die 10 wichtigsten Methoden, um die perfekte Produktübersichtsseite zu erstellen

1. Kümmern Sie sich um Ihre Header

Header spielen die „Titel“-Rolle jeder Kategorie- und Übersichtsseite.

Im Grunde sind sie der größte Hinweis auf den Inhalt der Seite und sollten dementsprechend behandelt werden.

Kümmern Sie sich um Ihre Header
Quelle: Ulta

Beauty-Spezialist Ulta setzt auf hervorstechende Visuals, um die Sichtbarkeit des Headers zu erhöhen: dies ist eine gute Lösung um Header zu vermeiden, die nur aus Text bestehen und somit auf den ersten Blick unattraktiv wirken.

Vergessen Sie auch nie, Ihre Keywords in Ihren <h1> Tags zu verwenden: diese sind Teil der SEO-Strategie Ihrer Seite und helfen Ihnen, in Suchergebnissen höher zu erscheinen.

Denken Sie dran: die Header Ihrer Kategorieseiten sollten in erster Linie informativ und hilfreich für Ihre Kunden sein.

Hinweis: Header können auch als Werbefläche benutzt werden um besondere Produkte, spezielle Angebote und Rabatte anzuzeigen.

2. Raster- vs. Listenansicht

Es gibt leider keine einfache Lösung in der Wahl zwischen Raster- und Listenansichten.

Es kommt in der Tat auf die Art von Produkten an, die Sie verkaufen, und welche Experience Sie bieten wollen.

Hier sind einige Tipps um Ihnen bei der richtigen Wahhl zu helfen:

Listenansicht:

Besser geeignet für Produkte, die ausführliche Informationen und Angaben benötigen, um den Kunden beim Vergleich technischer Daten ähnlicher Produkte zu helfen.

Passt gut bei technischen Produkten. Beispiele sind: Verkauf von Fernsehern, Computern, Elektronikgeräte, DVDs, Hardware…

Profis in Sachn Listenansicht für Produktübersichtsseiten
Quelle: Wine.com

Wine.com verkauft teure Weine und Champagner, daher ist es wichtig, dass der Besucher sich Zeit nimmt, die Marken und „Grands Crus“ zu bewerten, bevor er eine Kaufentscheidung trifft: achten Sie darauf, wie zusätzlicher horizontalen Raum genutzt wird, um Bewertungen anzuzeigen.

Rasteransicht:

Rasteransichten werden meistens für Produkte verwandt, bei denen die Details nicht so wichtig sind, die sich auf Bilder verlassen und schnell verglichen werden können. Hier geht mehr um eine visuelle Erfahrung.

Rasteransicht-Profis für Listenseiten
Quelle: Amazon

Amazon.com nutzt die Rasteransicht, um Produkte in der Geschenkideen-Kategorie anzuzeigen. Zusätzlich dienen Tags zur Klassifizierung von Bestsellern, um Besucher zum Klick auf populäre Produkte zu bewegen.

3. Wie viele Produkte pro Seite und Reihe?

Wenn Sie sich für eine Rasteransicht entscheiden, kommen Sie zweifellos irgendwann zu der Frage „Wie viele Produkte sollte ich pro Reihe anzeigen?“.

Das ist eine gute Frage.

Wie bei der Wahl zwischen Listen- und Rasteransicht, gibt es auch hier keine Antwort, die allen gerecht wird.

Tatsächlich hängt die Anzahl der angezeigten Produkte pro Reihe von 3 Hauptfaktoren ab:

1. Bildergröße

Wenn Sie große, high-resolution Bilder zeigen, werden Sie zweifellos Probleme haben, mehr als 4-5 Produkte in eine Reihe zu quetschen.

2. Anzahl der Produkte

Die Zahl der angezeigten Produkte pro Reihe hängt auch von der Gesamtzahl der Produkte in jeder Kategorie ab.

Wenn Sie nur 12 Produkte anzuzeigen haben, ist es sehr viel übersichtlicher, diese in einem 4×3 anstelle eines 2×6 Raster anzuzeigen, da Ihre Besucher den Eindruck haben könnten, dass dieses sonst nicht ausgefüllt ist.

3. Informationsumfang

Wenn es zur Produktbeschreibung kommt, sind nicht alle Produkte gleich. Einige brauchen von vorneherein mehr Information als andere: je mehr Fläche sie brauchen, desto weniger Produkte werden Sie anzeigen.

Ideale Anzahl an angezeigter Produkte auf einer E-Commerce Produktlistenseite
Quelle: canadagoose.com

Canada Goose verkauft teure Outerwear und benutzt daher eine Struktur, die 2 Produkte pro Reihe anzeigt, um die Visuals hervorzuheben und der User Experience ein „Premium“-Feeling zu verleihen.

4. Produkt-Thumbnails

Produkt-Thumbnails sind wichtig, vor allem in Branchen, die von Visuals dominiert werden, wie zum Beispiel Beauty, Kleidung oder Reisen.

Tatsächlich sollten Ihre Thumbnails ähnlich attraktive Bilder beinhalten und eine Harmonie bilden.

Die Größe hängt hier von Ihrem Markenimage und Ihrer Branche ab: Fashion und Bekleidung wählen hier in der Regel größere Visuals.

Produkt pro Übersichtsseite im E-Commerce
Quelle: Asos

Alle Produkt-Thumbnails auf Asos.com werden vor einem grauen Hintergrund angezeigt um so den Kontrast zu erhöhen und die Produkte hervorzuheben.

5. Intuitive Navigation

Egal wie tief eine Seite reicht, die Navigation spielt immer eine entscheidende Rolle in der User Experience – das sollte auch für Ihre Produktübersichtsseiten gelten.

Da einige Produkte komplexe Beschreibungen haben und ausführlicher Sortierungsoptionen brauchen, sollten Sie auf die Performance Ihrer Webseite achten, damit die Sortierung gut funktioniert und die Kunden das perfekte Produkt finden können.

Vielfältige Suchfunktionen für einfach zu navigierende Kategorieseiten
Quelle: Revzilla

RevZilla schafft es hervorragend, seine Kunden durch den schier endlosen Prozess des Findens eines passenden Motorradhelmes zu leiten.

Sie nutzen die linke Spalte, um den Kunden dabei zu helfen, die Produkte nach verschiedenen Kriterien zu bewerten und zu sortieren (Facettensuche):

  • Farbe
  • Art
  • Form
  • Kategorie
  • Größe
  • Geschlecht

Bonuspunkt: RevZilla bietet Besuchern die Möglichkeit, nur die Produkte anzuzeigen, die eine „Videobewertung“ haben: ein großes Leistungsversprechen im Vergleich zu den Konkurrenten.

6. Welche Informationen sollte ich anzeigen?

Es gibt unzählige Möglichkeiten, wie Sie Informationen auf Ihren Produktübersichts- und Kategorieseiten anzeigen können.

Vereinfacht gesagt müssen Sie Informationen geben, die dem Besucher effektiv helfen und ihn davon überzeugen, zu kaufen.

Um Ihnen die Auswahl zu erleichtern ist hier eine Liste mit Informationen, die Sie auf der Produktübersichtsseite anzeigen können:

  • Sterne-Bewertung
  • Rabatte
  • Farboptionen
  • Verfügbarkeit
  • Bestseller
  • Zum Warenkorb hinzufügen
  • Neu/Gebraucht
  • Kurze Beschreibung
Welche Informationen zeigt man auf einer Produktübersichtsseite
Quelle: BestBuy

Quelle: BestBuy

BestBuy schafft es sehr schön, nützliche Informationen auf ihren Produktübersichtsseiten zu bieten. Neben Bildern und Preisen, fügten Sie auch folgendes hinzu: Sterne-Bewertung, Rabatte und einen Warenkorbbutton mit einem cleveren Farbschema.

7. Das 1×1 der Produktsortierung

Sortierungsoptionen haben einen einzigen Zweck: die Zahl der Produkte zu verringern, um die Conversionen zu erhöhen.

Trotzdem sollten Ihre Sortieroptionen auf den Bedürfnissen und Erwartungen des Publikums an Ihre Produkte basieren.

Vereinfacht sollten Sie sich die folgenden Fragen stellen:

Wonach suchen meine Kunden? Was sind ihre Bedürfnisse?
Wenn Sie diese beiden Fragen klar beantworten können, finden Sie die optimalen Sortieroptionen einfach.

Wie man Produkte auf eine Übersichtsseite sortiert
Quelle: watchshop.com

Quelle: watchshop.com

WatchShop weiß, dass es viele Arten und Formen von Uhren gibt, und erstellte daher verschiedenste Sortierungsoptionen, um den Anforderungen der Besucher nachzukommen, u. A. nach Wasserdichte, Art des Bandes, Farbe des Gehäuses, Bewegungstyp usw.

Das System ist darauf ausgelegt, die Erwartungen der Kunden zu erfüllen – und schafft dies zweifellos.

8. Sollten Sie Quick-View nutzen?

Quick View ist einen E-Commerce Funktion, die es Besuchern erlaubt, eine verkleinerte Version der gewünschten Produktseite zu generieren. Es ist eine Art Mini-Produktseite, die normalerweise einen Warenkorbbutton beinhalte.

Leider herrscht wenig Einigkeit über den Sinn dieser Funktion und E-Commerce- Experten führen endlose Diskussionen, um dieses Thema zu lösen, bislang ohne Erfolg.

Eine kürzlich hierzu durchgeführte Studie von Baymard hat jedoch herausgefunden, dass Quick View im Bezug auf Nutzerinteraktion und Conversionrates eher schadet als hilft: dies kommt daher, dass einige Nutzern die Quick View mit der eigentlichen Produktseite verwechseln.

9. Einige Anmerkungen zu SEO auf Produktübersichtsseiten

Für die meisten E-Commerce-Player ist SEO ein sehr wichtiger Aspekt. Tatsächlich ist Suchmaschinen-Traffic laut einer SmartInsights Studie für 30-40% allen E-Commerce Traffics verantwortlich.

Mit der Wichtigkeit von Suchmaschinen-Traffic im Hinterkopf, ist hier ein weiterer interessanter Fakt: Produktübersichtsseiten sind für 50% des E-Commerce-Traffics verantwortlich.

Es gibt zwei Hauptgründe, warum Produktübersichtsseiten für SEO so wichtig sind:

A. Sie enthalten viele Keywords

Weil sie die Namen, Marken, Preise, Ausführungen und Beschreibungen von Produkten enthalten, sind auf Kategorieseiten meistens viele Keywords zu finden, wodurch sie schnell viele Keywords in Suchmaschinen bedienen.

B. Sie werden am meisten verlinkt

Allgemein will man, dass die Kunden ihren Kaufprozess auf den Produktübersichtsseiten beginnen (oder alternative, direkt auf der Produktseite), deshalb konzentrieren sich SEO-Profis eher auf diese Seiten. Darüber hinaus linken Produkte innerhalb einer Kategorie generell auf eben jene Kategorie zurück, wodurch sich ein starkes internes Verlinkungsbild ergibt.

10. Produktübersichtsseiten A/B Testen

Es ist kein Gemeheimnis, dass Conversionrate Optimierung nur durch Testing funktioniert. Das Erfolgsrezept ändert sich für die Produktübersichtsseiten nicht: Sie müssen sie A/B testen.

Vielleicht fragen Sie sich: „Wie mache ich das?“. Glücklicherweise sind wir A/B-Testing Spezialisten.

Eine gute Produktübersichtsseite zu erstellen ist nicht einfach: Sie müssen herausfinden, welche Elemente funktionieren und welche nicht, um so nach und nach Ihre Conversions zu erhöhen und Ihren Kunden eine insgesamt bessere UX zu bieten.

Hat Ihnen dieser Artikel gefallen? Teilen Sie ihn gerne und lesen Sie auch unser weiterführenden Artikel über die Optimierung Ihrer Website, rund um den E-Commerce und digitales Marketing.

Oder suchen Sie nach Möglichkeiten, um die Performance Ihres E-Commerce-Warenkorbs zu verbessern? Schauen Sie doch mal in unseren neuesten Artikel zu diesem Thema.

AB Tasty ist eine All-in-One Software für Personalisierung und A/B testing. Dazu gehören innovative Features, mit denen Sie als Marketer selbstständig die Performance Ihrer Website verbessern können.

Buchen Sie eine Webdemo

Blogartikel

12min. Lesezeit

10 Best Practices zur Warenkorb-Optimierung

Es ist unklar, wie viele User tatsächlich ihren Kauf im Warenkorb abbrechen. Manche Studien sagen es sind 80%, andere sprechen eher von 65%.

In Wahrheit weiß niemand die genaue Abbruchrate, da diese von Branche zu Branche unterschiedlich ist.

Um dies ein für alle Mal zu klären, lies sich das Baymard Insitute eine großartige Analyse einfallen, die 37 verschiedene Studien zum Warenkorbabbruch bewertete.

Dabei fanden sie folgendes heraus: Stand 2017 ist die durchschnittliche Abbruchrate im Warenkorb ca. 70%. Für erfahrene E-Marketer mag das nicht überraschend sein, aber die Realität ist, dass 7 von 10 Nutzern ihren Kauf abbrechen, nachdem sie Produkte in ihren Warenkorb gelegt haben, selbst auf Ihrer Webseite.

Mit diesem Wissen im Hinterkopf, ist die Umsetzung von Good Practices zur Senkung der Abbruchrate im Warenkorb eine absolute Priorität für jede E-Commerce Webseite die versucht, Conversionen und Umsatz zu erhöhen.

Bevor wir mit unseren Best Practices im Warenkorb beginnen, wollten wir Sie daran erinnern, dass Ihre Conversion Rate auch von anderen interessanten Variablen abhängt.

10 Best Practices für Ihre Warenkorbseiten

Starten wir zunächst mit den Grundlagen.

Ihr Warenkorb sollte:

  • Klar
  • Simpel
  • Schnell

Diese einfache 3-Schritt Formel (CSF = clear, fast, simple) ist der Grundpfeiler jeder erfolgreichen Warenkorbseite.

Lassen Sie uns diese drei Elemente näher betrachten.

Klar

„Klar“ bedeutet, dass ihre Warenkorbseite nicht kompliziert oder unordentlich ist. Idealerweise sollten die wichtigen Informationen alle auf einer einzigen Seite angezeigt werden, ohne das weit gescrollt werden muss oder man auf eine weitere Seite geleitet wird.

Simpel

„Simpel“ bedeutet, dass Ihre Warenkorbseite alle Informationen mit Hilfe verständlicher, glasklarer Sprache und Design darstellt, die Missverständnissen vorbeugen. Sie sollten auch verwirrende Strukturen und fragwürdige Farben vermeiden.

Schnell

Je mehr Zeit Besucher auf Ihrer Warenkorbseite verbringen, desto wahrscheinlicher werden sie diese auch wieder verlassen. Wenn Sie die ersten beiden wichtigen Elemente (simpel + klar) auf Ihrer Seite anwenden, sollte der daraus entstehende Warenkorb auch schnell sein, da die User nur die minimal benötigte Zeit zur Prüfung der Bestellung verwenden, bevor sie kaufen.

Mit diesen drei entscheidenden Elementen im Hinterkopf ist es Zeit in unsere 10 Best Practices für E-Commerce Warenkorbseiten einzutauchen.

1. Detaillierte Produktzusammenfassung

Wenige Augenblicke bevor Ihre Besucher zur Kasse gehen, landen sie auf Ihrer Warenkorbseite, die eine einzige Mission hat: Ihre Kunden zum finalen Kauf zu leiten.
Für die meisten E-Commerce Käufer dient die Warenkorbseite dazu, ihre Bestellung zu überprüfen.

Um ihnen dabei zu helfen ist es Ihre Aufgabe, alle relevanten Informationen über das Produkt klar darzustellen.

Vergessen Sie hierbei nicht, folgenden Punkte einzubeziehen:

  • Foto (sehen Sie auch Punkt 3)
  • Der genaue Name (besonders wichtig, wenn Sie ähnlich Produkte verkaufen)
  • Leistungsbeschreibung (z.B. Kapazität, Speicherplatz, Features…)
  • Größe (besonders wichtig bei Fashion, Kleidung und so weiter)
  • Farbe (einer der Hauptgründe für Produktrücksendungen)

Wenn diese Elemente Ihren Kunden klar dargestellt werden, können diese ihre Bestellung vor dem Kauf schnell überprüfen: dies wird den Anteil derer, die den Warenkorb wegen unklarer Information abbrechen, verringern.

Detailed product summary on shopping cart page

Auf der Warenkorbseite des britische Modeunternehmens ASOS ist die Überprüfung der Bestellung klar und einfach: wir wissen genau, welches Produkt wir kaufen, genauso wie die Farbe und Anzahl.

Extra Bonuspunkte für den „Save for later“-Button (siehe Punkt 8).

2. Klares, nutzerfreundliches Farbschema

Viele Studien beschäftigen sich mit der Psychologie hinter der Nutzung von Farben.

Es gibt natürlich nicht die eine Antwort oder Farbe, die für jede Webseite passt und alle Probleme bezogen auf Abbruchraten löst: jede Branche benutzt mehr oder weniger ein Farbschema für seine Checkout-Buttons (siehe Quelle).
Sicher ist jedoch, dass Besucher in Bezug auf die User Experience Harmonie und klares Design lieben.

Wenn Sie Ihren Warenkorb aufbauen, denken Sie daran, dass er zum allgemeinen Farbkonzept passen und Vertrauen erwecken sollte.

Clean color code on shopping cart page

Der berühmt Schuhmacher Jimmy Choo benutzt ein elegantes und gleichzeitig effizientes, schwarz-weißes Farbschema, um die Information auf der Warenkorbseite klar darzustellen.

Achten Sie darauf, dass der Checkout-Button sich als einziger schwarzer Button wirkungsvoll hervorhebt, wodurch sofort klar wird, dass er geklickt werden soll.

3. Genaue und klare Thumbnail-Bilder

Es gibt nichts nervigeres als ein kleines, lächerliches Thumbnail, dass es kaum möglich macht, das Produkt zu erkennen.

Geben Sie den Usern bei der Überprüfung ihrer Bestellung die Möglichkeit die Produkte in einer passenden Größe und Auflösung zu sehen. Zusätzlich ermöglicht ein Bild in ansprechender Größe mobilen Nutzen eine bessere mobile UX zu haben.

Bright thumbnail pictures on shopping cart page

Apple macht es den Kunden auf der Warenkorbseite sehr einfach die ausgewählten Produkte zu unterscheiden: man weiß direkt, dass es das richtige ist.

Apple benutzt ein helles und klares Bild; wir sind somit absolut sicher, dass wir die richtige Farbe im Korb haben.

4. Clevere Informationshierarchie & konkurrenzlose CTAs

Eine Informationshierarchie ist die Struktur, die benutzt wird, um Information nach Wichtigkeit geordnet anzuzeigen.

Während des Designs der Warenkorbseiten sollten Sie auf die Logik hinter Buttons, Spalten und Titeln achten, da diese die Wahrnehmung des Nutzers stark beeinflussen.
Einfach gesagt sollte jede mögliche Konfusion vermieden werden, indem alles einfach und klar gehalten wird.
Sie können viele verschiedene Farben benutzen (die idealerweise zu Ihrer Webseite passen), wir raten aber nicht mehr als 3-4 Farben auf einmal zu verwenden.

Farben helfen in der Tat dabei, die Aufmerksamkeit der Nutzer zu erwecken, nutzen Sie sie deshalb weise:

  • Heben Sie wichtige Informationen hervor
  • Nutzen Sie eine ausgeprägte Farbe, um den CTA zu differenzieren
  • Nutzen Sie Linien und Spalten, um Ihre Seite zu strukturieren

Shopping cart page with clear information hierarchy

Zappos, ein amerikanischer Schuhhändler, schafft es hervorragend, das Shopping-Erlebnis klar und effizient darzustellen.

Der Warenkorb ist da keine Ausnahme und leitet die Kunden geschickt durch die Kauf-Journey: wir mögen das ordentliche Layout, dass durch ein einfaches 3-schrittiges Farbschema (Orange = sehr wichtig; Blau = wichtig; Grau = Sekundär) hervorgehoben wird.

5. Zahlungsmöglichkeiten, die unsere Nutzer lieben

Verschieden Zahlungsmöglichkeiten anzubieten ist ein Muss im heutigen, super-kompetitiven E-Commerce Bereich.
Dies hilft nicht nur beim Erreichen von mehr Conversions, es bestärkt auch Besucher, die an eine bestimmte Zahlungsmöglichkeit gewöhnt sind.
Dieser Punkt ist in der Tat so wichtig, dass Control schätzt, dass 50% der regelmäßigen Käufer ihren Kauf abbrechen würden, wenn ihre bevorzugte Zahlungsweise nicht angeboten wird.
Wenn ihr Laden international ausgerichtet ist sollten Sie daran denken, dass Zahlungsmethoden von Land zu Land unterschiedlich sind: was in den USA bevorzug benutzt wird ist nicht zwangsläufig die selbe Methode. die in Europa oder Asien erwünscht ist.

Zuletzt sollten Sie versuchen Ihre Besucher über deren IP-Standort umzuleiten, um ihnen so eine personalisierte Experience mit der passenden Währung und ihrer beliebtesten Zahlungsmethode zu geben.

Wenn Sie nicht wissen, welche Zahlungsmöglichkeit Sie als erstes einführen sollen, schauen Sie sich die Statista Studie zu bevorzugten globalen Zahlungsmöglichkeiten an.

Various payment options on shopping cart page

Der international Sportbekleidungshersteller Adidas bietet 6 verschieden Zahlungsarten an, inclusive PayPal, VISA und Apple Pay: dies ist für große und globale Shops zwingend notwendig.

6. Vertrauenserweckende Elemente und Siegel

Eine kürzlich durch Econsultancy durchgeführte Studie hat ergeben, dass Gütesiegel der wichtigste Faktor dafür sind, dass Kunden einer Webseite vertrauen.

Sie sind sogar wichtiger als Kundenempfehlungen oder ein vertrauenserweckendes Design:

Trust seals importance

Wenn Sie nicht genau wissen, welches Siegel Sie benutzen sollen und wissen wollen, welches die effektivsten Vertrauens-Siegel sind kommt hier Ihre Antwort.

Baymard führte 2013 eine tiefgehende Studie zu diesem Thema durch, die 2016 aktualisiert wurde:

Common trust seals

7. Telefon-, Chat- oder Email-Hilfe

Wenn wir noch einmal die Studie von Econsultancy über die wichtigsten Faktoren in der Gewinnung von Kundenvertrauen anschauen fällt auf, dass „das Anzeigen einer eindeutigen Kontaktnummer und Adresse“ als zweitwichtigster Aspekt dicht auf den Gewinner folgt.

Ihre Besucher wollen das Gefühl haben, dass tatsächlich Menschen hinter der Webseite stecken – das nennt man Kundenservice.

Auch wenn Live-Chats oder Telefonservice direkt auf der Warenkorbseite für
E-Marketer eher neue Optionen sind, ist es doch eine gute Möglichkeit, Konversionen zu erhöhen, das Vertrauen der Besucher zu gewinnen und Ihre Markenidentität zu steigern. Am Ende des Tages ist die Wiedererkennung der Marke was wir wollen, oder nicht?

Wenn es darum geht zwischen einem Live-Chat und Telefonservice zu wählen sollten Sie daran denken, dass Millenials Live Chats bevorzugen; dies wurde auch in einer Studie von Software Adivce belegt:

Live chat and assistance option on shopping cart page

Live chat integration on shopping cart

Victoria’s Secret setzt bei der Hervorhebung der CTAs auf auffällige Farben.

Sie bieten clever eine Live-Chat Option auf der Warenkorbseite selber an, um mögliche Hemmschwellen beim Kauf zu überbrücken: das ist ein smarter Weg, um abschließende Fragen zu beantworten.

8. Weiter einkaufen Option

Hier reicht es schnell anzumerken, dass ein „Weiter einkaufen“-Button eine gute Möglichkeit ist einen Weg anzubieten den Warenkorb zu verlassen, aber auf der Webseite selber zu bleiben.

Darüber hinaus nutzen einige online Shopper den Warenkorb tatsächlich als Wunschliste: sie speichern Produkte hier lediglich ab, um bei zukünftigen Einkäufen auf sie zurück zu kommen.

9. Eindeutige und detaillierte Informationen über Versandkosten und Rücksendung

Was meine Sie, was ist der häufigste Grund für Warenkorbabbrüche in den USA?

Versteckte Versandkosten.

Es ist Fakt, dass online Käufer versteckte Kosten und last-minute Versandkosten verabscheuen, wie auch eine Studie zu dem Thema von Statista zeigt:

Main reasons for shopping cart abandonment

Mit diesem Wissen wird es Zeit, dass E-Commerce Webseiten ihre Versandkosten und Rücksendebestimmungen durchschaubarer gestalten: dies ist ein entscheidender Faktor in der Erhöhung der Conversions und bei der Gewinnung von Kundenvertrauen.

Einfach gesagt sollten Sie danach streben, klare Informationen über Versandkosten zu geben: dies kann schon auf der Produktseite erfolgen, um Warenkorbabbrüche zu verringern.

10. Produktempfehlungen

Passende Produkte per Cross-Selling anzubieten ist nichts Neues im E-Commerce.

Produktempfehlungen im Warenkorb anzuzeigen ist jedoch etwas Neues, dass Sie ausprobieren sollten.
Wir raten Ihnen aber auf jeden Fall dazu, ihre Conversionrate nach der Einrichtung zu beobachten, da Produktempfehlungen nicht unbedingt die E-Commerce Conversions, jedoch den durchschnittlichen Bestellwert erhöhen.

Complementary products displayed on shopping cart page

Hat Ihnen dieser Artikel gefallen? Teilen Sie ihn und schauen Sie sich auch unsere anderen Artikel über die Optimierung Ihrer Webseite, E-Commerce und digitalem Marketing in unserem Blog an!

Sie möchten Ihre E-Commerce Produktseiten optimieren? Hier geht’s zu unserem neuesten Expertenartikel zu diesem Thema.

AB Tasty ist eine All-In-One Lösung zur Conversion Optimierung. Damit Unternehmen die Besucher ihrer Website in Kunden verwandeln, geben wir eine Komplettlösung an die Hand, die alles bietet, was eine starke Website Optimierung benötigt: A/B Testing & Multivariates Testing, Personalisierung, einen Marketplace mit Plugin- und Widgetvorlagen zur Steigerung des User Engagements, starke Insights mit Session Recording und Heatmaps, smartes Reporting und APP-Optimierung.

Unverbindliche Produktdemo anfragen

Blogartikel

15min. Lesezeit

10 Beispiele für erfolgreiche E-Commerce Produktseiten

Wenn wir über E-Commerce Conversions sprechen, kommt Ihnen als erstes vermutlich folgendes in den Sinn:

„Sie meinen die Konversion von der Homepage zur Produktseite… die ist ziemlich niedrig.“

Und damit haben Sie wahrscheinlich recht.

Die Wahrheit ist, dass die durchschnittliche Konversionsrate von der Homepage zu Produktseiten in der Tat ziemlich niedrig ist: sie liegt durchschnittlich bei 2 – 2,5%. Lesen Sie dazu mehr in unserem E-Commerce Conversion Funnel Survival Guide.

Mit dieser Information im Hinterkopf gibt es hier noch einen weiteren interessanten Fakt:

Die Konversionsrate von Besuchern, die direkt auf einer Produktseite landen, ist rund 7%.

Sie haben sich nicht verlesen. Im Durchschnitt 7% – das heißt, dass sie 300% öfter konvertieren als bei einer normaler Käufer-Journey auf einer E-Commerce Webseite.

Mit diesem Wissen wird Ihnen sicher schnell klar, wie wichtig es ist, dass Ihre Produktseiten ansprechend und gut optimiert sind.

Wie sieht eine effektive E-Commerce Produktseite aus?

55% der Menschen verbringen weniger als 15 Sekunden auf einer Webseite (time.com), da ist es einfach zu erraten, warum Ihre Produktseite großartig sein muss. Denn jede Sekunde in der Conversion-Journey zählt.

Um die Aufmerksamkeit Ihrer Besucher zu bekommen müssen Sie daher so viel Kapital wie möglich aus 5 obligatorischen Seitenelementen schlagen. Diese genau richtig umzusetzen bedeutet für Sie zukünftig einige schlaflose Nächte.

Die 5 obligatorischen Elemente einer effektiven E-Commerce Produktseite

1. Ins Auge springende, ansprechende Visuals

Es ist kein Geheimnis: unser Gehirn liebt grafische Elemente.
Sie werden schneller verarbeitet als Text und ermöglichen es uns, den Kontext zu erraten.

Tatsächlich sind Visuals so tief in unseren Entscheidungsmechanismen verankert, dass sie ausnahmslos für alle E-Commerce Webseiten höchste Priorität haben sollten.
Hier sind ein paar Tipps, um Ihren Besuchern ins Auge springende Produktbilder zu bieten:

Zeigen Sie das Produkt und den Kontext

Kunden stellen sich gerne vor, wie sie ein Produkt selber tragen oder benutzen. So erhalten sie einen Eindruck, ob diese Produkt zu ihnen passt oder nicht: vergessen Sie diese Art von Bild deshalb nicht.

Ecommerce Product PageDarüber hinaus sollte das Produktbild einprägsam und klar sein, um die Aufmerksamkeit der Besucher zu erregen.

Ecommerce Product Page Featured Images

Fügen Sie Whitespace hinzu

Whitespace hat viele Nutzen im grafischen Design, aber hauptsächlich hilft er dabei, das Auge auf die wichtigsten Elemente zu fokussieren.

Kurzgesagt reduziert das Hinzufügen von Whitespace um Ihr Bild Störgeräusche und erhöht die Übersichtlichkeit bei der Darstellung eines komplexen Produktes.

Ecommerce Product Page Design Whitespace

Nutzen Sie ausschließlich HD Definition

Es versteht sich von selbst, dass High Definition Visuals unglaublich wichtig sind.

Ihre potentiellen Kunden sollten über Ihr Produkt auf jeder Screen-Auflösung in Verzückung geraten: zeigen Sie ihnen Ihre besten Bilder!

Bieten Sie Zoom-In und Zoom-Out Features

Viele Kunden sind an Details interessiert, besonders bei teuren Produkten.

Ob sie sich für „den kleinen Knopf an der Seite“ interessieren oder das „matte Finish“ näher betrachten wollen, geben Sie Ihren potentiellen Kunden die Möglichkeit, auf Ihre Produkte zu zoomen.

Fügen Sie Videos hinzu

Heutzutage haben die meisten Nutzer Zugang zu LDT-4G Bandbreite, wodurch das anschauen von Videos auf dem Handy zur Normalität geworden ist.

Videos helfen Ihnen dabei, Ihren Kunden eine Geschichte zu erzählen und sind dabei noch ansprechender als Bilder: Sie helfen Ihnen dabei zu erklären, „warum Ihr Produkt besser ist als andere“ und „was sie für 200€ bekommen.“
Nichtsdestotrotz kann das Erstellen von Videos kostspielig und zeitraubend sein; konzentrieren Sie sich daher hier auf Ihre Bestseller.

Hier ist, was Native Union seinen potentiellen Kunden zeigt:

2. Eine einzigartige, gelungene Produktbeschreibung

Eine kürzlich durch Shotfarm durchgeführte Studie hat gezeigt, dass „detaillierte Beschreibungen“ den ersten Platz in den Top 3 Faktoren einnimmt, die die Kaufentscheidung eines Kunden beeinflussen, höher noch als „Bewertungen“ (2. Platz) und „Preis“ (3. Platz).

Einfach ausgedrückt sollte Ihre Produktbeschreibung sich auf das einzigartige Leistungsversprechen des Produkts konzentrieren, also den Hauptnutzen.

Wie Sie bereits wissen, verbringt der Durchschnittsbesucher nur 15 Sekunden auf Ihrer Produktseite: Zeit, wirkungsvoll zu sein.

Neil Patel drückt dies so aus: Sie müssen „Vorteile verkaufen, nicht Features“, das heißt Sie müssen das Ergebnis hervorheben, nicht das Produkt.

Käufer erwarten ganz klar, etwas von Ihrem Produkt zu gewinnen: es ist Ihre Aufgabe, sie davon zu überzeugen, dass sie diesen Gewinn erreichen werden.

Ecommerce Product Description

Innocent hebt in seinen Produktbeschreibungen die Elemente hervor, die Ihre Smoothies „großartig“ und „gesund“ machen.

Sie heben sogar in grün hervor, dass ihr Smoothie „eine Quelle für Vitamin C, B2, B3 und B6 [ist,] die dabei helfen kann, Müdigkeit und Erschöpfung zu reduzieren…“

Das ist die Art von gutem Argument, dass wir meinen.

3. Viraler Social Proof

Social Proof hat viele Arten und Formen. Er reicht von Reviews, Kunden-Testimonials, Videos, bis zu Bewertungen usw.

Entscheiden ist hier nicht die Art des Social Proof, solange dieser für Ihre Kunden relevant ist.

Zu Beginn reichen Reviews und das klassische 5-Sterne Bewertungssystem für die meisten E-Commerce Webseiten völlig aus.

Als Faustregel sollten Sie immer authentische Bewertungen von wirklichen Kunden verwenden. Die meisten Käufer im Internet sind mittlerweile geübt darin, falsche Bewertungen zu erkennen und verschieden Studien haben gezeigt, dass zu viele 5-Sterne Bewertungen Ihre Conversionrate sogar verschlechtern können.

Tatsächlich kaufen rund 60% der Kunden laut IPerceptions eher auf einer Webseite, die Kundenbewertungen anzeigt.

User reviews on ecommerce product pages

Sam Ovens consulting.com bietet Kunden Vorteile an, wenn Sie ein Bewertungsvideo nach dem Kauf ihres Trainings hinterlassen.

Das Ergebnis sind mehr als 3000 Video-Bewertungen von Kunden. Das sind genug, um die meisten andere User davon zu überzeugen, dass sie auch hier kaufen sollten.

4. Produktvorschläge, die süchtig machen

Produktvorschläge (Upsell, Cross-Sell) werden benutzt, um:

  1. Den durchschnittlichen Warenkorbwert zu erhöhen
  2. Käufer von einem Produkt zum anderen zu leiten

Darüber hinaus ist es sehr wichtig, dass Sie auf Ihren Produktseiten zusätzliche Produkte anzeigen, falls Ihr Kunde einfach etwas anderes sehen möchte.

Andernfalls kann es dazu kommen, dass unqualifizierte Besucher auf Ihren Produktseiten landen, ohne dass sie die Möglichkeit haben die Produkte zu entdecken, die wirklich zu ihnen passen.

Related products on ecommerce product page

Der Schmuckhersteller Pandora setzt das hervorragend um, indem Besuchern verwandte Produkte vorgeschlagen werden. Die Outline ist hier klar und deutlich.

5. Clevere Lenkung & Hilfe

Können Sie den größten Faktor nennen, der zu Frustration bei Online-Käufern führt?

Das Produkt nicht anfassen bzw. nicht mit ihm interagieren zu können.
Deshalb raten Marketer dringend dazu, eine Live-Chat Option einzusetzen oder mindestens einen sehr detaillierten FAQ-Teil zu bieten, um:

Darüber hinaus sollte Ihre Webseite klare Informationen über die folgenden Themen bieten:

  • Preise und Mehrwertsteuer
  • Versandkosten
  • Rückgaberechte
  • Größen-Guide

Nachdem Sie jetzt die grundlegenden Best Practices zu E-Commerce Produktseiten erfahren haben ist es an der Zeit Inspiration durch unsere Auswahl von effektiven E-Commerce Produktseiten zu gewinnen.

Anmerkung: Unsere Auswahl umfasst Beispiele aus verschiedenen Bereichen sodass Sie, als Manager oder Marketer, Inspiration aus Ihrem Feld erhalten können.

Lassen Sie uns nun direkt in unsere Top Auswahl inspirierender, erfolgreicher E-Commerce Produktseiten eintauchen.

Die 10 erfolgreichsten E-Commerce Produktseiten (+ Beispiele, die Sie selber anwenden können).

1. Apple – Technologie Unternehmen

Technology - Electronic Product Page

Im Bereich Technologie ist Apple ein Weltklasse Beispiel für Best Practices auf E-Commerce Produktseiten.
Beim Ipad sprechen wir über Produkte die $350-1000 kosten, ein Bestseller auf dem Tablet-Markt.

Es ist daher keine Überraschung, dass Apple hervorragende Produktdetailseiten hat.

Was wir lieben:

  • Klares und edles Design
  • Die Nutzung von Whitespace und großen Bildern
  • Schicke CSS Animationen
  • Gute Hervorhebung der Vorteile

2. Transavia – Reisebranche

E-travel product page

Transavia ist eine Niederländische Low-Cost-Fluglinie, eine Tochtergesellschaft der Air France-KLM Gruppe.

Ihre Webseite zeigt viele Best Practices, die von Reise- und Flugunternehmen angewandt werden sollten.
Auch wenn es viele ähnlich gute Webseiten auf dem Markt gibt, schafft Transavia es besonders gut, Besucher in Reisende zu verwandeln: die Webseite nutzt clevere Wege und UX Design um Sie durch den Kauf zu leiten.

Was wir lieben:

  • Einnehmende, dreiteilige Struktur für mehr Klarheit
  • Einfaches visuelle Branding (Grün und Blau)
  • Smarte Informationshierarchie
  • Nutzerfreundliche, einfache Suchfunktion
  • Integration von TripAdvisor Bewertungen

3. Bonnegueule – Fashion / Retail

Fashion Ecommerce Product Page Fashion Ecommerce Product Page 2

BonneGueule ist eine auf Männermode spezialisierte französische Firma. Obwohl die Firma noch relativ jung ist, ist sie schnell zu einer E-Commerce Webseite mit 1M Besucher/Monat gewachsen, vor allem dank ihrer großartigen Content Marketing Strategie und beeindruckenden E-Commerce Produktdetailseiten.

Vereinfacht beschrieben nutzen sie sehr lange Produktseiten auf denen sie clever Storytelling-Techniken, Fotos und Videos einsetzen, um die hohen Preise ihrer Produkte zu rechtfertigen.

Was wir lieben:

  • Anzeige der Warenverfügbarkeit im Laden
  • Cleverer Größen-Guide
  • Nutzung von Kontext-Fotos
  • Großartiges Storytelling und Videos

Was verbessert werden könnte:

  • Benutzer Feedback fehlt

4. Peak Design – Mode- / Reise- Accessories

Peak Design Online Product PageTravel Accessories Product Page

Peak Design ist eine amerikanische E-Commerce Firma, die seit 2011 mit ihren cleveren Taschen, Beuteln und Reisetaschen, die durch Kickstarter bekannt wurden, erfolgreich mehr als $14M erwirtschaftet hat.
Beachten Sie vor allem die klaren und detaillierten Fotos, die durch die Nutzung von Whitespace und einem klaren Farbschema (Schwarz/Rot) auf der Produktdetailseite noch verbessert werden.

Was wir lieben:

  • Klares und cleveres Layout
  • Großzügig Bildergalerie
  • Ausführliches, sechsminütiges Produktvideo
  • Hervorhebung der Vorteile
  • Call to Action

Was verbessert werden könnte:

  • Zu viele Textparagraphen
  • Unklare Informationshierarchie

5. Luxyhair – Beauty

Beauty Ecommerce Product Page

Luxyhair ist eine auf Haarverlängerungen spezialisierte E-Commerce Webseite.

Das Team nutzt eine clevere 3-schrittige Auswahl, bevor Sie auf einer Produktseite landen: Sie beginnen mit der Auswahl der Kollektion, dann der Haardichte und zum Schluss der Haarfarbe.

Dieses 3-schrittige System ist ein guter Weg um Conversions zu erhöhen, indem jedem Kunden nur das für ihn richtige Produkt angeboten wird.

Was wir lieben:

  • Nahtlos integrierte Produktbilder
  • Nützliche Informationen über Versandkosten/Rücksendung
  • Effektive Nutzung von Produktvideos
  • Passende Integration von zusätzlichem Inhalt (Tutorials)
  • Vollständige FAQ
  • Amazon-ähnliche Kundenbewertungen und Q&A
  • Live Chat

6. Made.com – Home / Möbel

Made.com ist eine berühmte britische E-Commerce Webseite für Möbel, die für ihre außergewöhnlichen Designs und Web-to-Store Experience bekannt ist.

Schon auf den ersten Blick wird klar, dass die Visuals sich nahtlos in die Produktseite einfügen: zusätzlich wurden Kontext-Bilder eingefügt, sodass Sie ganz in das Produkt eintauchen können.

Made.com: Furniture Ecommerce Product Page

 

Was wir lieben:

  • Klare Versandkosten/Rücksendeinformationen
  • Großartige Visuals
  • Größenvergleich
  • Gute Produktvideos
  • Fotos von Kunden

Was verbessert werden könnte:

  • Keine Kundenbewertungen
  • Informationen zur Produktpflege könnten hinzugefügt werden

7. Birchbox – Beauty / Makeup

Birchbox Online Product Page

Diese berühmte französisch-amerikanische Webseite verkauft monatliche Beautyboxen als Abonnements, die zu Ihnen nach Hause geliefert werden, mit Produkten, die auf Ihren Vorzügen beruhen.

Was wir lieben:

  • Einfache, klare Visuals
  • Attraktives Layout und Farben
  • Kostenloses Geschenk bei Anmeldung
  • Komplette FAQ
  • Instagram Integration: guter Social Proof

Was verbessert werden könnte:

8. Asos – Fashion 

Online Fashion Product Page

Asos ist eine britische Firma, die auch in Europa und den USA tätig ist.
Mit dem Versprechen, bezahlbare Designs und Fashion zu bieten, wurden signifikante Marktanteile in der Fashion Industrie in verschiedenen Ländern erreicht, allein in den USA sind das 10 Millionen Besucher.

Sie entschieden sich für eine eher simple, aber gepflegte Outline, die das Brandimage erfolgreich herüberbringt.

Was wir lieben:

  • Hervorstechender, sehr grüner CTA
  • Trockenes, aber effektives Design
  • Viele Kontext-Bilder und ein Video
  • Produktvorschläge
  • Informationen über Versand und Rücksendung
  • Größen-Guide

Was verbessert werden könnte:

  • Keine Kundenbewertungen

9. Salesforce – Software, CRM, Business Lösungen

Software & CRM Solution - Product Page

Wir könnten diesen Artikel nicht abschließen, ohne mindestens einen bekannten Anbieter von Business-Lösungen zu erwähnen.

Salesforce ist ohne Zweifel eines der meist genutzten und bekanntesten CRM und Sales Management Tools.

Ihre „small business solutions“ Produktdetailseite hebt schnell die Vorteile von den Features ab, wie etwa hier: „Erreichen Sie schnellere Verkäufe und einfacheren Service mit Salesforce Essentials.“

Sie zeigen auch echte Ergebnisse ihrer Kunde, um sie noch für die Registrierung zu begeistern: „+26% mehr Deals, +32% zufriedene Kunden.“

Was wir lieben:

  • Auffallendes, innovatives Design
  • Hervorhebung der wirklichen Vorteile
  • Kostenloser Testzeitraum
  • Video-Demo
  • Klare, leicht verständliche Preise
  • Online Chat und telefonische Hilfe
  • Echte Kunden-Testimonials

10. AirBnb – Reisen / Hotel / Unterkunft

AirBnB Product Page

Dies ist wahrscheinlich nicht das ausgefallenste Beispiel auf unsere Liste.

Trotzdem bleibt Airbnb ein Lehrbeispiel an UX Design und effektiven Produktdetailseiten, an dem sich viele Webseiten aus dem Reise- und Tourismusbereich ein Beispiel nehmen können.

Zunächst ist das Page Layout unglaublich einfach und effizient, sodass es intuitiv zu nutzen ist.
Fällt Ihnen dann auf, dass die Fotogallerie oben platziert wurde? Airbnb weiß, dass Fotos der wichtigste Aspekt jeder Reisewebseite sind: Besucher müssen sich vorstellen, wie sie selber in diesem paradiesischen Pool schwimmen.

Zuletzt ist Airbnb ein Meister darin, Kundenbewertungen für sich zu nutzen: Sie sind tief in jede Produktseite integriert (natürlich nur, wenn sie auch vorhanden sind), sodass ihre Rolle als Social Proof maximiert wird: die Leute lieben es einfach, Bewertungen zu lesen.

Was wir lieben:

  • Klares Design, gute Informationshierarchie
  • Auffällige CTAs
  • Nahtlose Integration von Bewertungen Reisender
  • Praktische Karte am Ende der Seite
  • Ähnliche Angebote, um von einem Haus zum anderen zu wechseln

Hat Ihnen dieser Artikel gefallen? Teilen Sie ihn und schauen Sie sich auch unsere anderen tiefgehenden Artikel über die Optimierung Ihrer Webseite, E-Commerce und digitalem Marketing.

Blogartikel

16min. Lesezeit

Die besten Landingpage-Softwares in 2018

2018 ist die Era des „Traffic um jeden Preis“ vorbei. Die Challenge im digitalen Marketing ist nunmehr, qualifizierte Leads und Besucher zu erhalten und die Umwandlung von Besuchern in Verkäufe (oder Prospects) zu maximieren.

Hierfür nutzen digitale Marketer schon seit einigen Jahren das “„Landingpage“-Konzept.

Definition: Eine Landingpage ist eine Webseite, die speziell so designt ist, dass sie einen bestimmten Besuchertyp gezielt bezüglich ihrer Demografie, ihrer Interessen und ihrem Kaufverhalten targetet. Das Ziel ist es, Leads so effektiv wie möglich zu generieren (im B2B und B2C) und die Conversions von Besuchern zu Käufern zu maximieren.

Wie schon am Namen zu erkennen, ist dies die Seite, auf der Ihre Prospects und Besucher landen: danach soll sie diese in Kunden verwandeln – unter Zuhilfenahme von diversen Best Practices, die wir in zwei anderen Artikeln bereits besprochen haben:

Die Frage, was eine gute Landingpage enthalten sollte oder wie man eine solche Seite designt, wurde schon umfassend diskutiert. Man findet jedoch selten Ressourcen die Informationen bieten, wie man eine Landingpage so effektiv und kostengünstig wie möglich baut.

Keine Sorge, es gibt viele Landingpage-Builder die Ihnen von A bis Z bei der Erstellung Ihrer Landingpage helfen.

Was ist ein Landingpage-Builder?

Landingpage-Builder erscheinen normalerweise in Form eines SaaS (Software as a Service)-Tools das Ihnen die Möglichkeit gibt, alle Komponenten Ihrer Landingpage online zu erstellen und anzupassen.
Die Idee dahinter ist, dass Sie ohne die Hilfe eines Webentwicklers selber Ihre Landingpage erstellen können und dabei ein Tool an der Hand haben, mit dem Sie Webseiten designen und veröffentlichen können, ohne tiefgehende Programmierungskenntnisse zu haben.

Landingpage-Builder sparen Ihnen daher viel Zeit und liefern Ihnen viele Templates, auf denen Sie Ihre zukünftige Seite aufbauen können.

Und so funktioniert ein Landinpage-Builder grundsätzlich:

  1. Template auswählen
  2. Dieses individuell anpassen
  3. Features hinzufügen
  4. Veröffentlichen

Der Zweck eines solchen Tools ist also die Erstellung von Landingpages, die Sie zu Ihren digitalen Marketingkampagnen hinzufügen können, um sie an Ihre Zielgruppe anzupassen.

Hier ein Beispiel aus der Praxis:

Stellen Sie sich vor, Sie repräsentieren ein Business, das Mobile Apps an andere Unternehmen vermarktet. Sie wissen, dass Ihre Kunden normalerweise aus drei Sektoren kommen:

  1. Immobilien
  2. Finanzen
  3. Tourismus

Sie haben zurzeit nur eine einzelne Webseite (und eine einzelne Homepage), auf die alle Besucher und Interessenten geleitet werden.

Problem: Sie wissen nicht, wie Sie diese drei Zielgruppen gleichzeitig ansprechen sollen, da sie jeweils andere Probleme und Bedürfnisse haben.

Lösung: Sie nutzen einen Landingpage-Builder um drei verschiedene Seiten zu erstellen, die jeweils an Ihre drei Zielgruppen angepasst sind: Immobilien, Finanzen und Tourismus.

Ergebnis: Ihre Conversion Rate steigt, weil Sie qualifizierte Besucher und Prospects auf die Landingpage leiten, die erstellt wurde um ihre spezifischen Fragen zu beantworten. Sie generieren mehr Leads und verbessern deren Conversions.

Jetzt sind Sie sicher davon überzeugt, dass ein Landingpage-Builder Ihnen Zeit und Geld sparen könnte und Sie in die Lage versetzt, Ihre Leads im Vorhinein besser zu qualifizieren.

Ein Problem bleibt bestehen: Welchen Builder sollten Sie wählen?

Es gibt tatsächlich ein großes Angebot an Online Landingpage-Buildern und einen auszuwählen, ohne vorher testen zu können, fällt nicht leicht.

Um Ihnen Zeit zu sparen und sie direkt zu dem Tool zu führen, das am besten zu Ihnen passt, hat AB Tasty 7 Landingpage-Softwares ausgewählt, die wir in 2018 für die besten auf dem  Markt halten.

In unsere Analyse haben wir bei jedem Tool auf 4 Kriterien geachtet.

Handhabung des Builders

Hier geht es um die einfache Nutzbarkeit des Tools. Einige Lösungen verlangen mehr Wissen und Übung als andere und wir denken, dass es wichtig ist, dies im Vorhinein zu wissen.

Preise und Abos

Nicht alle Tools haben den selben Wert oder Preis. Wir stellen die Preise der Lösungen vor, die oft ein monatliches oder jährliches Abonnement verlangen.

Bandbreite der Features

Beim Aufbau Ihrer Landingpage wollen Sie diese möglichst an Ihre Wünsche anpassen. Wir bewerten die Anpassungsmöglichkeiten und Features, welche die Services bieten.

Auswahl an Templates

Nicht jeder von uns ist ein Grafikdesigner – viele Unternehmer brauchen Inspiration um ihre Webseiten zu erstellen, und das ist keine Schande! Wir stellen die Template-Auswahl jedes Tools vor und zeigen auf, wie viel sie kosten.

Hinweis: Unsere Auswahl der Landingpage-Builder ist kein Ranking. Unserer Meinung nach haben alle 7 präsentierten Softwares Stärken und Schwächen und sind auf verschiedene Userprofile ausgerichtet.

Die 7 besten Landingpage-Builders 2018

1. Unbounce

Unbounce Landing Page Builder
Dieses Tool ist definitiv einer der umfassendsten Landingpage-Builder. Unbounce ist der Marktführer in diesem Bereich. Dieser extrem umfangreiche Service richtet sich an erfahrene Programmierer, die Zeit sparen wollen, und an Unternehmer, die schnell eine oder mehrere, 100%ig individuelle Landingpageg erstellen wollen.

Handhabung des Builders

Unbounce Drag & Drop Editor
Der Unbounce-Publisher verwendet ein Drag-and-Drop Interface. Er enthält zahlreiche fortgeschrittene Features zum Hinzufügen von Kontaktoptionen und zur Anpassung Ihrer Seite. Sie können auch Ihr eigenes HTML-CSS hinzufügen, wenn nötig.

Bandbreite der Features

Unbounce ist ohne Zweifel eins der umfangreichsten Tools auf dem Markt. Der Landingpage-Builder konzentriert sich auf Conversion-Optimierung mit der Hilfe von Pop-Ups, Sticky-Bannern und vielen Optionen, um visuell attraktive Formulare zu erstellen.

Auch die Integration mit WordPress läuft bei Unbounce mühelos vonstatten. Sie können Ihre Seiten also in wenigen Minuten veröffentlichen. Wir mögen das komplett responsive Design und die Parallax-Optionen, sowie die Möglichkeit, Hintergrundvideos hinzuzufügen und die vielen Widgets, aus denen Sie wählen können.

Unbounce beinhaltet ein einfaches AB-Testing Feature in seinem Landingpage-Tool, Sie können so also die Grundlagen des A/B Testings in Ihren Marketingkampagnen abdecken. Ein weiterer positiver Punkt ist die Integration mit Google AdWords und den CRMs Salesforce, Zapier, Marketo, Hubspot usw.

Auswahl an Templates

Unbounce bietet eine Auswahl von 125 responsiven Templates, die zu einer ganzen Reihe von Business-Sektoren passen. Daneben haben Sie auch Zugriff auf die Themeforest Gallery mit 200 zusätzlichen Unbounce Templates, meist erhältlich für um die 20€.

Preise und Abos

Unbounce Abos & Preise
Unbounce bietet drei verschiedene monatliche Abonnementpakete (mit einem Rabatt für jährliches Bezahlen), Sie können also das Budget beginnend bei $79 an Ihre Bedürfnisse anpassen.

Der Unterschied zwischen den drei Paketen betrifft hauptsächlich die Anzahl der Landingpages und PopUps, die Sie erstellen können. Für Agenturen besteht die Option, Sub-Accounts für Kunden zu erstellen – das allerdings nur in den Premium und Enterprise Paketen.

Auch wenn Unbounce eine der teuersten Lösungen auf dem Markt ist, bietet sie dennoch ein gutes Preis-Leistungs-Verhältnis.

2. LeadPages

Leadpages Landing Page Builder

LeadPages erfreut sich bei Landingpage-Erstellern großer Beliebtheit und dies nicht ohne Grund: Es ist eines der preisgünstigsten Landingpage-Tools auf dem Markt und bietet dennoch eine große Zahl an Features und Templates, die Unternehmer zur Erstellung ihrer Webseite nutzen können.

Handhabung des Builders

Leadpages Drag & Drop Editor
Der LeadPage-Builder ist klar und intuitiv: er ist einfach verständlich und bringt schnell überzeugende Ergebnisse.

Er funktioniert mit einem Drag-and-Drop Interface und erfordert keine tiefgreifenden Programmierkenntnisse. Sie können außerdem viele Dinge hinzufügen: Titel, Bilder, Videos, Formulare, Buttons, usw.

Bandbreite der Features

LeadPages bietet auf jedem Abo-Level viele Features an.

Hier sticht besonders die einfache Integration von Bezahl- und Buchungsmodulen, die von vielen Unternehmen genutzt wird, hervor, wie auch die Option, maßgeschneiderte Pop-Ups und Formulare hinzuzufügen.

LeadPages arbeitet mit den gängigsten CRMs wie HubSpot, Salesforce und Marketo, die Integration ist aber nicht in allen Paketen enthalten.

Wie bei Unbounce gibt es auch hier ein WordPress Plugin über das Sie LeadPages schnell mit dem CMS integrieren können. Zusätzlich gibt es auch noch einen Creator für Facebook-Werbekampagnen.

LeadPages enthält außerdem ab dem Pro-Paket aufwärts eine einfache AB Testing Lösung.

Auswahl an Templates

LeadPages bietet um die 160 kostenlose Templates und die Möglichkeit, Templates mit weiterführenden Features zu erwerben.

Preise und Abos

Leadpages Abos & Preise
Mit Preisen beginnend bei $25 pro Monat bei jährlicher Bezahlung ist LeadPages sicherlich eine der preisgünstigeren Softwares für Landingpages.

Allerdings sind viele Features in der Standardversion nicht enthalten, Sie müssten also das Pro oder Advanced Paket buchen, um LeadPages in Ihr CRM zu integrieren oder Zahlungen zu erhalten.

3. GetResponse

Getresponse Landing Page Software
GetResponse ist eine umfassende Marketinglösung, die neben einem Email-Marketing Modul auch einen Landingpage-Builder beinhaltet.
Preislich ist die Spannbreite groß, von $15 pro Monat bis zu Paketenpreisen von über $1000 monatlich.

Handhabung des Builders

Getresponse Drag & Drop Editor
Der GetResponse-Builder funktioniert mit einem intuitiven und effektiven Drag-and Drop Interface. Schade ist allerdings, dass viele Features nur in den Pro und Max Paketen enthalten sind.

Hervorzuheben sind das einfache Hinzufügen von Videos und die Option, PayPal als Bezahlmöglichkeit hinzuzufügen.

Bandbreite der Features

Bei der Nutzung von GetResponse werden Sie schnell merken, dass Ihre Möglichkeiten ziemlich beschränkt sind, es sei denn Sie upgraden zum Pro Paket: Sie können lediglich eine einzige Landingpage im Basic Paket erstellen; das erlaubt Ihnen allerdings, den Builder gründlich zu testen, bevor Sie sich für ein umfangreicheres Paket entscheiden.

Positiv hervorzuheben ist der Zugriff auf über 1.000 kostenlose Bilder und der im Tool enthaltene Photoeditor.

Zusätzliche von GetResponse angebotene Features sind Tools für Email-Marketing und Marketing-Automation, sowie einige A/B-Testing Features.

GetResponse kann mit vielen CRMs und anderen Tools integriert werden, wie zum Beispiel AdWords, KISSmetrics, Facebook und Tag Manager.

Auswahl an Templates

Ein GetResponse-Abo enthalt einige hundert kostenlose Templates: diese sind responsiv und nach ihrem Zweck kategorisiert: „Opt-In“, Verkaufsseite, Downloadseite, … Alle möglichen Landpingpages sind abgedeckt.

Preise und Abos

Getresponse Plans & Pricing
Abonnements starten zwar bereits bei $15 pro Monat, die Option zur Erstellung von Landingpages wird allerdings erst ab dem Pro-Paket für $49 im Monat wirklich interessant.

4. Instapage

Instapage Landing Page Builder
Instapage hebt sich von anderen Landingpage-Softwares durch die Schnelligkeit und besondere Einfachheit bei der Nutzung ab.

Es ist eine leistungsstarke Software für Unternehmer und Marketer, die innerhalb weniger Minuten Landingpages bauen wollen und nach einer guten, aber erschwinglichen Lösung suchen.

Handhabung des Builders

Instapage Drag & Drop Editor
Der Instapage-Builder ist einer der besten auf dem Markt, weil er einfach und schnell zu verstehen ist.

Mit Hilfe des üblichen Drag-and-Drop Interfaces können die Nutzer ihre Auswahl an Formularen, Titeln, Bildern und Videos hinzufügen.

Bandbreite der Features

Der Builder ist in mancher Hinsicht zwar nicht so umfangreich wie Unbounce, dennoch mögen wir die Schnelligkeit des Tools, den Zugang zu einer riesigen Bibliothek an kostenlosen Fotografien und die Klarheit des Performance Analyse Reports von Instapage.

Dennoch sollte man hinzufügen, dass A/B Testing Features nicht im Grundlagen-Paket enthalten sind.

Auswahl an Templates

Instapage gibt Ihnen Zugriff auf 200 responsive Templates, welche die gängigsten Bedürfnisse abdeckt. Sie sind außerdem nach Nutzen kategorisiert, was Ihnen einiges an Zeit bei der Auswahl spart. So müssen Sie sich nur zwischen einer kleinen Anzahl relevanter Templates entscheiden.

Preise und Abos

Instapage Abos & Preise
Bedenkt man die Anzahl und Bandbreite an Features, die Instapage je nach Ihrem Bedarf inkludiert, liegt der Preis im mittleren Segement und ist durchaus angemessen. Zu beachten ist aber trotzdem, dass A/B Testing und Heatmaps nur ab dem “Optimizer”-Paket inbegriffen sind. Die wichtigsten Landingpage-Builder Features sind bereist im “Core”-Paket enthalten.

5. Wishpond

Whispond Landing Page Builder

Wishpond ist ebenfalls eine recht umfangreiche Lösung mit der Sie neben Landing Pages auch Social Content und Pop-Ups erstellen, sowie einige Marketing Automation Features auf Ihrer Landing Page integrieren können.

Zuallererst fällt uns auf, dass man bereits mit dem Grundlagen-Paket eine unlimitierte Anzahl an Landing Pages erstellen kann. Die Paketpreise steigen abhängig von der Anzahl generierter Leads Ihrer Landing Page.

Handhabung des Builders

Whispond Drag & Drop Editor
Mit dem Wishpond Builder können Sie ausgewählte Templates per Drag and Drop bearbeiten. Er ist nicht so umfangreich wie Instapage und Unbounce, aber die grundsätzlichen Features erlauben Ihnen, eine professionelle Landing Page zu erstellen.

Bandbreite der Features

Wishpond gibt Ihnen bereits im Basic-Paget Zugriff auf fast alle Features. Anders als alle Tools, die wir Ihnen hier vorstellen, können Sie mit diesem Builder unbegrenzt Landing Pages, E-Mail-Kampagnen und Pop-Ups erstellen – ebenfalls unbegrenzt: die Anzahl der User.

Daneben sind Integrationen mit vielen Tools, wie zum Beispiel Zapier, Salesforce, Surveymonkey, Infusionsoft und Slack möglich.

Auswahl an Templates

Ähnlich wie die Konkurrenz, bietet Wishpond Ihnen einen Katalog mit ca. 100 responsiven Templates, die für verschiedene Branchen nutzbar sind.

Preise und Abos

Whispond Abo & Preise
Wer plant, eine große Anzahl von Landing Pages mit geringen Kosten zu bauen, der findet mit dem “Starting out”-Package von Wishpond wohl das umfassendste Angebot auf dem Markt. Es ist ab $49 pro Monat erhältich und beinhaltet eine kostenlose 14-tägige Testperiode.

Wishpond hat ein ganz anders Preismodell als seine Mitbewerber: das Grundlagen-Paket limitiert Ihre generierten Leads auf 1000 – wenn Sie mit Ihren Landing Pages mehr Leads generieren möchten, müssen Sie ein kostenintensiveres Paket kaufen. Etwas ungewöhnlich, aber dennoch ein attraktives Modell.

6. Ucraft

Ucraft Landing Page Software
Ucraft ist eine erschwingliche und dennoch beeindruckende Option. Sie geht über das Erstellen von Landing Pages hinaus und bietet noch eine ganze Suite mit anderen Tools, wie z. B. einen kostenlosen Logo-Maker, eine E-Commerce Shop-Option, Designer Tools und eine App für Blogartikel. Diese können alle zusätzlich zum kostenlosen Free Landing Page Creator gebucht werden.

Handhabung des Builders

Ucraft Landing Page Editor

Ucraft verwendet einen einfach handhabbaren drag-and-drop Website-Builder/Landingpage-Creator, der sich ohne Coding, Webmaster oder Designer Skills bedienen lässt. Alles, was Sie erstellen wird mit Google Cloud gehostet und hat eine ziemlich kurze Ladezeit.

Bandbreite der Features

Für eine einfache Website bietet Ucraft Ihnen eine benutzerdefinierte Domain, eine mehrsprachige Website, kostenloses Hosting und mehr als 15 Integrationen.

Für E-Commerce Webseiten gibt es außderem Tracking in Echtzeit, 0% Transaktionsgebühren und eine Lösung für unterschiedliche Währungen. Uns gefällt auch der SEO-Support, den das Unternehmen anbietet.

Auswahl an Templates

Ucraft hat verschiedene Templates in Kategorien wie Business, E-Commerce, Privat, Restaurant, Reisen, Sport, Kunst, Design, Fotografie, Portfolio oder Blog.

Preise und Abos

Ucraft Preise und Abos
Ucraft bietet sowohl monatliche als auch jährliche Paketpreise an. Anders als die meisten anderen Services, hat diese Software ein wirklich kostenloses Paket, das Ihnen die Bearbeitung einer Landing Page erlaubt. Wenn Ihnen der Umgang zusagt und Sie auf eine bezahlte Version umsteigen möchten, ist diese immer noch preisgünstig und ziemlich umfangreich.

7. MailChimp

Auch MailChimp sollten Sie bei der Wahl eines geeigneten Tool-Anbieters in Betracht ziehen. Denn das E-Mail Marketing-Tool hat gerade seinen eigenen Landing Page Creator gelauncht.

Zum Zeitpunkt der Artikelveröffentlichung hatten wir noch nicht die Möglichkeit, das Tool zu testen, aber es könnte sich als eine ernst zunehmende Option herausstellen. Besonders, wenn Sie die Newsletter- oder E-Mail-Marketing Lösung bereits nutzen und eine integrierte Lösung wünschen.

Mailchimp Landing Page Builder

Landingpage Software oder umfangreiches A/B Testing Tool: was ist das richtige für Sie?

Wenn Sie diesen Artikel lesen, ist das Erstellen und Optimieren von Websites für Sie und Ihr Geschäft offensichtlich ein relevantes Thema.

Für Einsteiger oder Agenturen, die häufig Seiten von Grund auf erstellen müssen, bieten sich Tools wie Unbounce, Instapage und LeadPages an. Sie sind eine effektive Möglichkeit, neue Landing Pages mithilfe von Vorlagen zu bauen: eine schnelle DIY-Lösung, die innerhalb weniger Stunden konkrete Ergebnisse liefert.

Für Unternehmen, die bereits bestehende Webseiten optimieren möchten, sind dies allerdings nicht die richtigen Tools. Sie können diese nicht nutzen, um bereits veröffentlichte Websites zu bearbeiten, sondern nur zur Erstellung neuer Seiten per Drag and Drop.

Eine weitere Einschränkung von Landing-Page-Buildern ist außerdem , dass Ihre neu kreierten Seiten von dem Lösungsanbieter gehostet wird. Dies macht es sehr schwer für Ihre Landing Page, im Google Ranking aufzusteigen..

Warum eine umfangreiche A/B Testing Lösung sinnvoll ist?

Anders als all-in-one Landingpage-Creator, erlauben Ihnen umfangreiche A/B Testing Lösungen wie AB Tasty, existierende Seiten – also Seiten, die Sie bereits online gestellt haben – besonders im Hinblick auf Conversion Optimierung zu berarbeiten.

Wer einen Page Builder nutzt, setzt seinen Fokus auf das Erstellen neuer Seiten für eine spezifische Zielgruppe. Landing Page Softwares sind also ganz auf dieses Ziel ausgerichtet und sparen Ihnen dabei wertvolle Zeit.

Wer hingegen seine eigenen Seiten analysieren und optimieren möchte, der ist mit einer Lösung wie AB Tasty besser beraten. Denn hiermit gewinnen Sie Insights und eine tiefer gehende Analyse, die ein Landingpage-Builder Ihnen nicht geben kann.

Neben vielen anderen sind hier einige Features, die Landing Page Softwares nicht bieten, welche Sie aber bei AB Tasty bekommen:

A/B Testing

  • Fortgeschrittene A/B testing Features: Multivariate Tests und Sales Funnel Tests geben Aufschluss über komplexere Zusammenhänge entlang der Customer Journey auf Ihrer Website.
  • Server-Side A/B Testing und Tests, die kompatibel mit JavaScript Frameworks wie Angular oder React sind.
  • Fortgeschrittenes Targeting: Nutzen Sie dutzende Segmente, um nur gezielte User-Gruppen in einen A/B Test einzubeziehen. Sie können diese Segment-Kriterien außerdem dank der Integration von Drittanbieter-Tools (z. B. Data Management Platform, Data Onboarding) anreichern.
  • Tiefergehende Analysen und Statistiken: Spezifische A/B Testing Tools nutzen sehr viel genauere Algorithmen zur Analyse der Ergebnisse als eine Software für Landing Pages, deren Hauptgeschäft ein anderes als A/B Testing ist.

Personalisierung von Content

  • Segmentierung der User: unterteilen Sie Ihre Website-Besucher nach Zielgruppen und Interessen, um das Verhalten der einzelnen Segmente zu erkennen.
  • Senden Sie mit personalisierten Nachrichten unterschiedliche Botschaften an die verschiedenen Kundensegmente.
  • Predictive Marketing: Nutzen Sie das Potential Ihrer Daten und stellen Sie sich mithilfe von Machine Learning schon heute auf das Verhalten Ihrer zukünftigen Kunden ein.

Sie wollen Ihre Landingpages in die Hand nehmen und die Conversions boosten? Entdecken Sie unsere umfangreiche Lösung zur Optimierung Ihrer Landingpages.