7 Einsteigertipps: Webdesign-Grundlagen für bessere Conversion-Rates

Wenn von 100 Besuchern eines Shops 10 Besucher etwas kaufen liegt die Conversion-Rate bei 10%. Im Schnitt liegt diese Rate zwischen 1% und 5%, nur in seltenen Ausnahmen darüber. Dieser Wert ist sehr stark abhängig von der Zielgruppe, dem Angebot, den Texten & Bildern sowie der Gestaltung der Webseite. Nicht selten haben nur kleine Änderungen eine enorme Auswirkung auf die Conversion-Rate - die folgenden Tipps sollen Dir helfen, Dein Webdesign für mehr Abschlüsse zu optimieren.

1. Professionelles Layout

Ein gutes, professionelles Webdesign wirkt sich deutlich darauf aus, wie Kunden Dein Unternehmen wahrnehmen. Ein aufgeräumtes, strukturiertes und passendes Design vermittelt sofort einen guten ersten Eindruck - und dieser ist enorm wichtig, denn "es gibt keine zweite Chance für einen ersten Eindruck".

Auch Eigenschaften wie Seriosität, Zuverlässigkeit, Zusammenhalt und Vertrauenswürdigkeit können direkt mit einem Web-Layout vermittelt werden. Im Gegensatz kann auch ein chaotisches, unprofessionelles Layout direkt mit dem Unternehmen assoziiert werden, Eigenschaften die sich sofort negativ auf das Image eines Unternehmens auswirken. Die Conversion-Rate ist unmittelbar von diesem Image abhängig, denn wer möchte bei einem chaotischen, unprofessionellen Unternehmen einkaufen?

Achte also auf ein professionelles Web-Layout und ein einheitliches Corporate Design. Wenn dies In-House nicht umzusetzen ist kann ein freier Webdesigner oder eine Web-Agentur weiterhelfen.

Abbildung 1: ok-webhosting.de & checkdomain.de: Gleiche Branche, gleiches Startseiten-Konzept, aber unterschiedlich gestaltet: Nur das Unternehmen auf der rechten Seite hinterlässt einen professionellen Eindruck.

2. Weniger ist mehr

Zu viel Ablenkung oder Auswahlmöglichkeiten sind ein Killer für die Conversion-Rate. Besonders die Startseite oder Landingpages sollten übersichtlich und keinesfalls überladen dargestellt werden:

• Formuliere Texte kurz aber aussagekräftig: Wenn ausführliche Informationen unabdingbar sind kannst Du mit „Weitere Informationen“-Links arbeiten, die auf Unterseiten führen oder alternativ weitere Inhalte ausklappen.

• Verwende Aufzählungslisten, um wichtige Details ohne unnötige Satzformulierungen darzustellen.

• Habe keine Angst vor Leerraum, nicht jede Stelle muss ausgefüllt werden und Abschnitte dürfen gerne mit deutlichem Leerraum getrennt werden.

• Zeige gleiche Informationen nicht mehrfach auf einer Seite an.

• Verwende bei Formularen möglichst wenige Felder: Mit jedem zusätzlichen Formularfeld sinkt die Motivation des Besuchers das Formular wirklich auszufüllen.

• Achte auf eine möglichst klare Navigation mit wenigen oder keinen Unterebenen.

• Verwende pro Navigationsebene maximal 7 Menüpunkte: Dies ist die maximale Zahl, die wir auf einen Blick erfassen können, mehr Punkte kategorisiert unser Gehirn als „sehr viele“ ein (Millersche Zahl).

• Verwende Icons z.B. als Symbol vor einer E-Mail-Adresse oder Telefonnummer.

• Arbeite mit einfachen Motiven und bilde nicht zu viel auf einem Foto ab.

Abbildung 2: just-t.de - einfaches, übersichtliches Design, Im Inhalt zunächst Angebote im Slider, im Anschluss die visualisirten Produktkategorien und eine kurze Info zum Shop. Mehr braucht eine Shop-Startseite nicht.

3. Einsatz von aussagekräftigen Fotos

Fotos sind ein gutes Instrument um Emotionen zu vermitteln. Positive Emotionen werden mit Ihrem Unternehmen oder Produkt verbunden und verringern die Hemmschwelle auf dem Weg zum gewünschten Ziel. Die Fotos sollten dabei unbedingt professionell angefertigt werden und eine klare Aussage haben.

Besonders positiv wirken sich Fotos von (glücklichen) Menschen bzw. Gesichtern aus. Vorsicht jedoch vor den üblichen Stock-Fotos - die große Anzahl Fotos künstlich überglücklicher Menschen hat dazu geführt, dass solche Fotos nicht mehr glaubwürdig wirken.

Für eine möglichst starke Wirkung sollten Abbildungen groß dargestellt werden. Eine Überlagerung, beispielsweise mit einer kurzen Überschrift oder einem Button sind eine gute Möglichkeit die Aufmerksamkeit und Wirkung des Bildes aufzugreifen.

Abbildung 3: evocsports.com - Dieser Shop kombiniert kühle Shop-Produktfotos mit actiongeladenen Fotos von Produkten in der Anwendung und übermittelt dadurch Emotionen.

4. Zielführung mit Call-To-Action

Es ist enorm wichtig den Webseitenbesucher an die Hand zu nehmen und dafür zu sorgen, dass er am gewünschten Ziel ankommt. Dafür sorgen Call-To-Action-Elemente die eine klare Handlungsanweisung beinhalten wie beispielsweise "Jetzt Kontakt aufnehmen", "Produkt bestellen", oder "Kostenlose Informationen anfordern".

Häufig wird zunächst ein Button als Wegweiser zu einem Formular eingesetzt ("Weitere Informationen anfordern"), dort wird der User von der finalen Aufforderung in Empfang genommen ("Fülle dieses Formular aus, um weitere Informationen zu erhalten").

Damit Call-To-Action-Elemente die gewünschte Aufmerksamkeit bekommen, sollten diese optisch deutlich hervorgehoben werden (z.B. durch eine sich vom Rest der Seite absetzende Farbe) und prominent platziert werden. Im besten Fall sind Call-To-Action-Anweisungen die auffälligsten Elemente einer Webseite.
Definiere also ein klares Ziel für Deine Webseite und sorge mit Call-To-Action-Elementen dafür, dass dieses möglichst oft erreicht wird.

Abbildung 4: asos.de - Die Call-To-Action-Buttons (hier zur Zielführung in die Damen- oder Herrenmode) sind nicht zu übersehen.

5. Bewusste Farbgestaltung

Farben haben eine nicht zu unterschätzende Auswirkung auf die Conversion-Rate. Die Firma "Performance" änderte beispielsweise die Farbe eines Call-To-Action-Buttons von Grün auf Rot und verbesserte allein dadurch die Conversion-Rate um 21%.

Generell erzielen hervorstechende Farben (gelb, rot, Komplemplementärfarben) bessere Conversion-Rates. Welche Farbe auf Deiner Webseite bessere Ergebnisse erzielt, ist allerdings von vielen Faktoren abhängig und lässt sich nicht allgemein beantworten. Zu den Faktoren zählt die Zielgruppe (auch Männer und Frauen haben andere "Lieblingsfarben"), das Produkt selbst (bei Natur-Produkten kann z.B. ein grüner Button besser funktionieren als ein roter) sowie die generelle Farbgestaltung der Webseite.

Falls Du die Möglichkeit hast einen A/B-Test durchzuführen, wäre die Farbe eines Call-To-Action-Elements hier ein guter Startpunkt.

6. Übersichtlichkeit

Eine übersichtliche Webseite sorgt dafür, dass der Besucher sich gut zurechtfindet und länger auf Deiner Webseite verweilt. Dadurch nimmt er mehr Informationen auf, Unternehmen oder Produkt bleiben länger im Gedächtnis und die Chance auf eine Conversion steigt.

Sorge also dafür, dass Deine Webseite durch Gestaltung, Struktur, Navigation und Konzentration auf das Wichtige (siehe Punkt 2 - Weniger ist mehr) übersichtlich wird. Prüfe ob eine Breadcrumb-Navigation Sinn macht oder langer Text gekürzt werden kann.

Abbildung 5: arngren.net - Ok, das ist ein extremes Negativbeispiel, verdeutlicht aber wie wichtig Struktur und Übersichtlichkeit ist.

7. Ladezeit

Webseiten-Besucher werden schon nach 3 Sekunden Ladezeit ungeduldig, 65% brechen den Besuch der Webseite ab, sobald diese Zeit erreicht ist. Eine große Mehrheit von 85% aller Befragten ist zudem der Meinung, dass sich die Ladezeit auf das Vertrauen gegenüber einem Online-Shop auswirkt.

Sorge also dafür, dass Deine Webseite schnellstmöglich lädt. Die Ladezeit Deiner Webseite kannst Du z.B. mit dem PageSpeeds Insight - Tool von Google messen, über Browser-Plugins (z.B. Extended Statusbar für Firefox) oder mit Ryte.

Abbildung 6: Ladezeiten überprüfen mit Ryte

Oftmals erzielen kleinere Optimierungen von Bildern oder CSS bereits Verbesserungen, bei einem CMS sollten zusätzlich die Cache-Optionen geprüft werden. Ebenso kann ein Update auf ein besseres Webhosting-Paket oder ein Wechsel des Hosters die Ladezeit verbessern. Ausführliche Tipps zur Optimierung der Ladezeit gibt es im Artikel von Kai Radanitsch hier im Ryte Magazine.

Abbildung 7: amazon.de in der Google PagePeed-Analyse.

Fazit

Zur Verbesserung der Conversion-Rate gibt es einige grundlegende Maßnahmen, aber auch kleine Änderungen können bereits deutliche Auswirkungen haben. Überprüfe, ob Deine Webseite ein deutliches Ziel hat und der Weg dorthin durch die Tipps zu Übersichtlichkeit, Farbe und Call-To-Action-Elemente so einfach wie möglich gemacht wird. Wenn dann noch Fotos und Ladezeit stimmen, hast Du die besten Voraussetzungen für viele Kunden über Deine Webseite.