Wie sich jeder denken kann, ist das Erstellen einer Webseite die allen Standards und OnPage Optimierungen gerecht wird, harte Arbeit. Man sollte sich also nicht auf den Lorbeeren des ersten erhofften Erfolges ausruhen und die Webseite, den WebShop oder die Community so wieder an den Anfang zurückwerfen. Es sind oft die kleinen Dinge, die einen Besucher z.B. zum Abbruch einer Bestellung verleiten oder das Formular nicht absenden lässt. Erstellen Sie die Seite immer so, als wäre es Ihre eigene und testen Sie jede Funktion auch im laufenden Betrieb immer und immer wieder.

In diesem kurzen Auszug aus der Welt der Conversion Optimierung will ich 5 wichtige Punkte näher bringen: Die Startseite, Landing Pages, Formular, interne Suchfunktionen und den Bestellprozess allgemein.

Die Startseite

Das Tor, die Pforte, der Eingang, einer Startseite kann viele Synonyme haben und alle treffen meist genau ins Schwarze. Vergleicht man eine Webseite mit dem Geschäft nebenan, so hält sie schon viel Wissenswertes bereit. Sie soll ansprechend, attraktiv und treffend sein. Das soll heißen, dass ich beim Betrachten der Startseite wissen sollte. worum es hier geht, worüber soll hier kommuniziert werden. Die Inhalte die hier gezeigt werden, sollten nach ihrer Wichtigkeit und Aktualität gegliedert sein.

Optimierung von Startseiten

Bilder

Abbildungen auf der Startseite sind zweifelsohne ein wichtiger Bestandteil. Die hier verwendeten Bilder, visualisieren die Seite und sollten daher sehr themenbezogen sein. Nicht jedes Bild passt auf die Startseite, Bilder die hier verwendet werden, sollten einen professionellen Charakter haben und nicht wie vom letzten Urlaub auf Ibiza aussehen.

Werden Bilder mit Personen auf der Seite platziert, sollte immer auf die emotionale Ebene des Bildes geachtet werden, um dem Benutzer nicht einen falschen Eindruck zu vermitteln.

Überschriften

Wie die Schlagzeile der lokalen Tageszeitung, sollte eine Überschrift aus 3 oder 4 Wörtern bestehen und den kompletten Inhalt der verlinkten Seite wiedergeben. Der beste Weg, um eine gute Überschrift für ein Thema zu finden, geht wieder über einen A/B Test. Gehen Sie bei der Suche nach der Überschrift mit anderen Personen auf eine Diskussion ein und holen sie sich andere Meinungen zu ihren Vorschlägen. Dieser Weg ist zwar zeitintensiv, aber um das beste aus ihrer Webseite zu holen, ist es fast schon ein Muss.

Weitere Inhaltselemente

Rund um den Heroshot und die Hauptüberschriften werden weiter Inhaltselemente kommuniziert. Diese kleiner gestalteten Container sollten nicht unweigerlich vom Hauptthema (Heroshot) ablenken, sollte aber dennoch Interesse wecken und Besucher, die öfter vorbeischauen, andere und wiederum interessante Weg zum Ziel bieten. Mögliche Inhalte:

  • Blog
  • Newsletter
  • Umfragen
  • Top Offer aus dem Webshop
  • neuestes Produkt

Suchfelder

Entscheidet sich der Besucher für die Suche über das Suchfeld, hat er gewisse Erwartungen, die Ihm diese Aktion bringen soll. Die Suche sollte auf jeden Fall mit einzelnen Suchbegriffen umgehen können, Tippfehler zulassen und sollte in einem Webshop auch als Suche mit der Artikelnummer fungieren. Um dem Benutzer mehr Usability bieten zu können, kann hier auf ein Suchfeld mit AJAX Funktion zurückgegriffen werden, um die Suche direkt bei der Eingabe genauer zu definieren.

Navigation

Die Planung der Navigation sollte sehr überlegt sein. Der einfachste Weg um eine gut durchdachte und strukturierte Navigation zu gestallten ist, die einzelnen Navigationspunkte genau zu definieren. Zuerst wir nach Hauptpunkten sortiert und erst wenn diese festgelegt sind, beginnt der Aufbau der Unterpunkte. Alternativ können auch Mindmapping Programme auf dem Pc oder Mac verwendet werden.

Zur technischen Seite der Navigation: Hier wird komplett auf JavaScript verzichtet und stattdessen die Navigation mit CSS umgesetzt. Die CSS Variante hat 2 Vorteile zum einen ist sie für ein erfolgreiches SEO fast Pflicht, zum anderen ist eine Neugestaltung oder kleine Änderungen leicht umzusetzen. Es gibt dazu sehr viele interessante Tutorials oder auch fertige Menüs.

Beispiel aus der Praxis – blue-tomato.com

Da der Webshop von Blue-tomato eher eine junge Zielgruppe anspricht, fällt die Startseite sehr farbig aus und es werden hier gleich saisonale Bilder und Farbtöne verwendet.

(click to enlarge)

Erster Eindruck

Wenn sich die Augen langsam von den Bildern lösen, erkennt man über den Bildern die wichtigsten Marken. Spätestens jetzt sollte der Besucher überzeugt worden sein, genau hier das richtige Modell zu finden und von diesem „Schaufenster“ zum nächsten ziehen!

Navigation

Die Navigation, die sich unterhalb des Logos befindet, sticht mit seiner großen Schrift und den hinterlegten Buttons, gleich nach den Heroshots, als erstes heraus. Wird über den ersten der Navigationspunkte gefahren, wird ein Layer eingeblendet. Der Layer selbst ist nochmals unterteilt in Männer, Frauen, Kinder, Uni, Special Promotion. Der Besucher hat bis jetzt noch keinen Seitenwechsel vollzogen und hat die Möglichkeit mit nur einen Klick auf der richtigen Seite zu landen. Das gleiche ist beim Punkt Marken und Produktfinder zu sehen. Beim Punkt SALE wird nochmals mit einer anderen Farbe gearbeitet, um diesen Punkt in seiner Wichtigkeit abermals zu steigern.

Kontaktmöglichkeit

Die Telefonnummer übermittelt mehr Persönlichkeit als eine E-Mail Adresse und sie sollte daher immer gut sichtbar sein. Weiters werden hier direkt neben der Telefonnummer die FAQ angezeigt um eventuelle Fragen, die öfter entstehen, gleich zu beantworten, dieser Punkt ist aber meistens nur für erfahrene Benutzer, die mit dem Begriff FAQ etwas anfangen können.

Facebook, Twitter & Co.

Soziale Medien sind ein wichtiger Bestand „fast“ jeder Webseite. Speziell in einem Webshop, der von seinen Kunden abhängig ist, sollte auf diese Arte der Kommunikation nicht verzichten werden.

Kurz noch zum Aufbau

Es kommen hier so genannte Heroshots in Kombination mit fetten Überschriften zum Einsatz, die den Besucher gleich in die gewünschte Kategorie leiten. Arbeitet man auf der Startseite mit Herorshots und Überschriften die etwas beschreiben, dann greift man am besten auf A/B Test zurück, um die beste Kombination von Bild und Text zu vermitteln.

Landing Pages

Eine Landing Page wird meistens für einen bestimmten Zweck erstellt. Meistens gelangt ein Benutzer über eine Werbekampange via AdWords, Partner oder einem einfachen Banner auf eine dieser Seiten. Jede dieser Seiten sollte den Benutzer regelrecht animieren auf einen Anmeldebutton oder auf eine weitere Aktion zu klicken. Wurde alles optimal optimiert, wird bei der einzelnen Landing Page eine niedrige Bounce Rate (Absprungrate) verzeichnet.

Für genauere Informationen möchte ich hier gerne auf das kostenlose E-Book „Landingpage SEO“ von Karl Kratz verweisen.

Beispiele

Beispiel 1: Zürich Connect

(click to enlarge)

Bei dieser Landing Page wurde das Ziel klar definiert, landet ein Benutzer über die KFZ Werbekampagnen auf der Webseite , soll er diese Seite sehen und nur mit einem einfache Call-to-Action Button seine Prämie für eine Autoversicherung berechnen und bestellen können.

Beispiel 2: Autokindersitz.com

(click to enlarge)

Gelangt man über eine der Werbekampagnen von Autokindersitz.com auf die Webseite, wird direkt die jeweilige Kategorie (hier Kindersitz Concord) angezeigt.

Formulare

Eine Formularseite verfolgt klare Ziele. Der Benutzer soll das Formular am besten vollständig und richtig ausfüllen können. Leider ist bei vielen Formularen die Absprungrate sehr hoch. Gründe dafür gibt es viele. Wichtig ist, dass der Benutzer einen klaren Sinn hinter dem Formular sieht und, dass er wirklich nur das Nötigste eingeben muss.

Usability

Ein Formular sollte chronologisch gegliedert sein und wenn nötig in mehreren Schritten abgearbeitet werden: Schritt 1 die Daten eingeben, im Schritt 2 die Bankdaten und im Schritt 3 Newsletter und die AGB akzeptieren.

(click to enlarge)

Der User registriert sich nur mit der E-Mail Adresse und einem Passwort, alles andere, wie Profilname, Adresse usw. wird nach erfolgreichem Einloggen erledigt.

Beugen Sie der Hemmschwelle der Registrierung vor und nutzen Sie die Möglichkeiten der sozialen Netzwerke wie Facebook und Twitter. Mit diesen Tools kann sich der Benutzer auf Ihrer Seite registrieren ohne einen neuen Account anzulegen. Er loggt sich ganz einfach mit seinen vorhandenen Account von Twitter oder Facebook ein und Ihr System übernimmt die Daten mit nur wenigen programmiertechnischen Schritten von selbst.

Wird ein Pflichtfeld vergessen, erscheint die Fehlermeldung direkt beim Textfeld und der Benutzer findet so schnell die Fehlerquelle!
Gestaltung. Hier werden die Pflichtfelder mit einem * markiert.

(click to enlarge)

Gestaltung

Bei einem Formular geht es nicht mehr um das Gewinnen von Neukunden, sondern hier geht es um Daten. Da der User sich schon entschieden hat, das Formular auszufüllen, sollte er nicht mehr durch unlesbare Captchas oder unnötige Pflichtfelder verschreckt werden. Verfolgen Sie bei der Gestaltung einfach eine klare Linie ohne viel Drumherum.

Usability

Pflichtfelder gesondert ausgewiesen und Felder bei vergessener Eingabe farblich herausgehoben. Captchas geben dem Formular die Sicherheit vor Spaming, aber dennoch ist es manchmal schwer, auch für Menschen, diese Bilder zu lesen. Es gibt viele freie Lösungen, die zusätzliche Features, wie eine Audioausgabe bieten.

Interne Suche

Die interne Suche ist ein Feature, das in keinem Onlineshop fehlen darf. Oft entscheidet die Qualität der Suchfunktion, ob der Besucher zum Kunden wird oder nicht. Natürlich hängt der Funktionsumfang einer Suche von der Größe des Onlineshops ab. Je größer die Produktpalette, desto mehr Features sollten vorhanden sein.

Die Suche ist neben ihrer einfachen Funktion der Suche, auch noch ein wichtiges Marketinginstrument bei der Optimierung, sei es suchmaschinentechnisch oder bei der OnPage-Keyword-Optimierung.

Wichtig ist das Ergebnis

Wie auch schon in Schulzeiten, ist das positive Ergebnis der Suche das Wichtigste.

  • Das Layout einer Suchergebnisliste sollte übersichtlich gestaltet sein. Eine einfache Struktur wie zB der Titel der Seite, in der das Suchwort enthalten ist und ein Auszug aus dem Inhalt. Bauen Sie nicht zu viele Elemente, wie den Pfad zur Seite ein, das kann zu Verwirrungen führen.
  • Testen Sie die Suche regelmäßig selbst, um bei Fehlern sofort reagieren zu können
  • Werten Sie die Suchbegriffe aus und erfahren so mehr über Ihre Besucher und deren Wünsche
  • Bieten Sie weitere Suchverfeinerungen wie Sortieren nach Preis, Lieferzeit, usw. an
  • Um bei möglichen Fehlern der Suche eingreifen zu können, positionieren Sie Ihre Kontaktadresse gut sichtbar in der Nähe der Suchergebnisliste.
  • Ajax Methode – Automatische Vervollständigung der Suchbegriffe im Suchfeld kann den Besucher unter anderem leichter und schneller zum Ziel führen.

Bei Eingabe eines Suchwortes wird hier gleich eine Reihe von Vorschlägen angezeigt.

Bestellprozess

Der Weg vom Warenkorb bis hin zur abgeschlossen Bestellung kann manchmal sehr mühsam sein. Leider vergessen manche Shopbetreiber hier den Korrekturstift anzusetzen und achten lieber auf ein Überangebot an verschiedenen Produkten. Dieser Prozess ist die Basis eines Webshops und sollte deshalb bei der Erstellung oder der nachträglichen Optimierung viel Aufmerksamkeit erhalten.

Um hier die Abbruchrate zu minimieren, kann man auf eine ganz einfache Funktion, die oft schon bei den Shopsystemen integriert ist, zurückgreifen. Der Fortschrittsbalken soll den Einkaufsprozess für den Besucher transparent machen und Ihm dem Weg zum Ziel vorzeigen.

  1. Schritt – Benutzerdaten
  2. Schritt – Versandadresse
  3. Schritt – Bank- oder Kreditkartendaten
  4. Schritt – Bestellübersicht – Fertig!

Weniger ist oft mehr. Beim Abschließen der Bestellung hat der Besucher seine Ware schon in den Warenkorb gelegt und ist bereit die Bestellung aufzugeben. Während dieses Prozesses lauert die Gefahr, dass der zukünftige Kunde aufgrund von Unklarheiten seine Bestellung nicht abschließt und abbricht. Deshalb sollte man sich hier auf das Wesentliche konzentrieren und mit einem schlichten, klaren Design arbeiten. Hat der Kunde das Ziel vor Augen, und ist alles klar definiert, wird er es nicht mehr loslassen und Sie haben Ihr Ziel, einen Verkauf, erreicht.

Beispiel 1 (Amazon.de): 7 Schritte bis zum Ziel

Beispiel 2 (Apple.com):

(click to enlarge)

Bei Apple wird der Bestellprozess nicht auf mehrere einzelnen Seiten wie bei Amazon aufgeteilt, sondern der Bestellprozess findet auf einer einzigen Seite statt. Während der Bestellung kann man ohne die Seite neu zu landen auf den vorherigen Abschnitt zurückgreifen und gegebenenfalls etwas ändern. Die Seite ändert sich wie ein JavaScript Accordion.

Schlusswort

Um den Inhalt nochmals kurz zu fassen, sollte jede Webseite alle Ebenen perfekt abdecken, sei es auf der Visuellen, Technischen oder Suchmaschinenseitigen Optimierung.

Holen sie sich bei schwierigen Design, Textfragen, Usability, usw. eine dritte unabhängige Stimme dazu oder lassen sie Ihre Besucher entscheiden. Wichtig ist, dass sie immer auf dem laufendem sind und sich über neue SEO Praktiken informieren. Versuche neue Wege einzuschlagen um sich von der großen Anzahl an Homepages im Web abzuheben.

Ich hoffe meine kleiner Einblick in die Conversion Optimierung von Webseiten hat Ihnen das Thema näher gebracht und Ihnen vielleicht weiter geholfen.

ist selbständiger Programmierer und Webdesigner. Nach mehreren Projekten für die Werbeagentur DIE PRAXIS in Mayrhofen ist Florian Narr schlussendlich komplett in die Firma eingegliedert worden. Als Mediendesigner ist er zuständig für Umsetzung und Planung von diversen Webseiten. Florian Narr versteht sich als Schnittstelle zwischen Design, Programmierung und Optimierung und ist bemüht den Kunden einen perfekten Auftritt zu präsentieren.

Conversion & Usability, Online-Marketing

SEO und Conversion-Optimierung: (k)ein Dream-Team?

Jörg Dennis Krüger •

Recht

E-Commerce-Recht – Rückblick auf den Monat Oktober 2014

Rolf Albrecht •