Blog / Aktuelles

So gestalten Sie Ihre Onlineshop Startseite optimal

Auf einem Tisch liegt ein Notizbuch mit Skizzen einer Onlineshop Startseite. Foto: picjumbo.com / Victor Hanacek

Bei vielen Shopbetreibern herrscht eine große Unsicherheit, wenn es um die Gestaltung der Onlineshop Startseite geht. Was gehört auf die Startseite? Wie erhöhe ich die Conversion und wie empfange ich den Kunden richtig und leite ihn gezielt zum Kauf? In diesem Artikel erfahren Sie, wie Sie Ihre Startseite gestalten und Schritt für Schritt weiter optimieren.

Einleitung

Die Startseite ist das virtuelle Schaufenster Ihres Onlineshops. Dort präsentieren Sie ausgesuchte Produkte und stellen Ihr Alleinstellungsmerkmal (USP) klar heraus. Ganz so, wie im Schaufenster oder der Warenauslage eines lokalen Geschäfts.

Die Startseiten von Onlineshops sahen nicht immer gleich aus. Sehgewohnheiten ändern sich und natürlich hat man heute auch viel mehr Erfahrungen als das noch in den 2000er Jahren und der Gründerzeit der Onlineshops der Fall war. Heute weiß man viel mehr über die Customer Journey, Besucherströme und Kaufmechaniken.

In den letzten ein zwei Jahren hat sich ein neuer Trend bei der Gliederung und Gestaltung von Onlineshop Startseiten herausgebildet. Schon viele der erfolgreichen Onlineshops nutzen diesen Aufbau und die meisten Onlineshops, die derzeit neu programmiert werden oder bei denen ein Redesign durchgeführt wird, werden entsprechend dieser Blaupause gestaltet.

Wie die Startseite aussieht ist natürlich auch stark von der Branche abhängig. Gerade alle Designartikel, also Mode, Schmuck, Möbel, Einrichtungsgegenstände etc. werden mit einer eigenen Gestaltung und Bildsprache präsentiert: Es kommen sehr große Bilder zum Einsatz, die oft nicht einfach nur das freigestellte Produkt zeigen, sondern einen schicken Anwendungsfall beim oder am fiktiven Kunden. Dies soll hier nicht Thema sein. Auch geht es nicht um Shops, in denen nur eine handvoll Produkte verkauft werden. Stattdessen erläutere ich hier den Aufbau einer Startseite für einen Standard-Shop mit vielen Produkten.

Aktuell im Trend

MegaMenu

Den aktuellen Trend im Startseiten-Design findet man bei so unterschiedlichen Seiten wie Amazon.de, docmorris.de, mvg-ahk.de und mayersche.de, in Abwandlung auch bei navabi.de. Dabei beginnt die Seite meist mit einem flachen Header mit Logo, Hotline-Info und Warenkorb in einer Zeile. Direkt darunter findet sich eine horizontale Navigation mit den Oberkategorien. Führt man die Maus über einen Navigationspunkt klappt sich ein sogenanntes MegaMenu nach unten und man sieht eine gut sortierte und strukturierte Navigation, in der nicht nur die nächst tiefere Navigationsebene gezeigt wird, sondern gleich auch noch die darunter liegende Unternavigation. So kann man mit nur einem Klick direkt tief in den Shop eintauchen.

Slider

Es folgt ein Slider (Bildwechsler) der meist über die gesamte Breite des Inhaltsbereichs geht und in dem drei bis fünf Bilder mit darübergelegtem Text automatische durchgewechselt werden. Dort werden Aktionen angepriesen, die USP (Unique Selling Proposition / Alleinstellungsmerkmal) angerissen oder wichtige Themenwelten vorgestellt.

Lockere Anordnung von Produkt- und Teaserboxen

Im Hauptbereich der Startseite findet man zwei Top-Angebote, gefolgt von jeweils einer Reihe mit drei oder vier Produktboxen für die Bereiche Topseller und Neu im Shop. Oft folgen weitere Teaserboxen, in denen Themenwelten und Produktberatungsseiten vorgestellt werden, sowie Boxen mit Kundenbewertungen, Siegeln oder dem letzten Newsbeitrag.

Dabei fällt auf, dass die Shopbetreiber geschickt mit dem Wechsel von zwei großen Boxen zu drei mittelgroßen Boxen und hin zu vier oder mehr kleinen Boxen spielen und die Seite auflockern und Akzente setzten.

Sollen in einem Bereich wie z.B. Topseller mehr Produkte dargestellt werden, als das Gestaltungsraster (3 oder 4 Produkte nebeneinander) hergibt, so sorgt ein manueller oder automatischer Slider dafür, dass die Produkte durchgewechselt werden. So spart man Platz und sorgt für Übersicht.

Trust-Signals

Alle erfolgreichen Shops präsentieren mehrere Trust-Signals. So nennt man Elemente, die Vertrauen bei den Shopbesuchern schaffen. Zu den Trust-Signals gehören unter anderem Gütesiegel wie z.B. Trusted Shops oder Veristore, aber auch Hinweise zu den wichtigsten Zahlungsverfahren (Paypal, Sofortüberweisung...) oder zum Versandpartner (DHL, DPD...). Auch durch die Nennung von Kundenbewertungen und -feedback vermitteln die Shopbetreiber ihren Kunden das Gefühl von Sicherheit.

Schritt für Schritt zur optimalen Startseite

Es ist immer eine gute Idee, sich erfolgreiche Onlineshops anzuschauen. So kann man analysieren was sie gemeinsam haben und daraus Schlüsse für die eigene Shopgestaltung ziehen.

Ganz wichtig: Kopieren Sie nicht einfach die Idee von einem Ihrer Vorbilder, denn vielleicht paßt die ja gar nicht zu Ihnen.

Im Folgenden möchte ich Ihnen einige Anregungen geben, wie Sie bei Ihrem Onlineshop entscheiden können, welche Elemente Sie auf der Startseite brauchen und wie Sie sie geschickt anordnen.

Schaufenster und Wegweiser

Zu allererst hilft es, sich über die grundsätzliche Funktion der Startseite bewußt zu werden. Die Startseite eines Onlineshops ist wie das Schaufenster eines Ladenlokals. Dort präsentieren Sie ausgesuchte Produkte und stellen Ihr Alleinstellungsmerkmal (USP) klar heraus.

Für den Kunden muss sofort ersichtlich sein, was Ihr Schwerpunkt ist und wer Ihre Zielgruppe ist, damit er schnell entscheiden kann, ob er bei Ihnen richtig ist. Er muss erfahren, warum er in Ihrem Shop kaufen sollte und nirgendwo anders.

Um das Ganze etwas anschaulicher zu gestalten: Stellen Sie sich einmal vor, wie Sie durch die Fussgängerzonen gehen und dann ein Schaufenster sehen, dass so dermaßen vollgestopft ist, dass man die einzelnen Produkte garnicht klar erkennt. Und in das Innere das Shops kann man auch nicht sehen. Hätten Sie Lust in so einen Shop hineinzugehen? Würden Sie nicht viel lieber einen Shop bevorzugen, der ein schön gestaltetes Schaufenster hat, in dem ausgewählte Produkte ansprechend in Szene werden?

Die Onlineshop Startseite ist aber nicht nur ein Schaufenster, sondern auch ein Wegweiser. Hier können und sollten Sie den Kunden auf besondere Themenwelten und Angebote hinweisen.

Eine starke Startseite bietet eine gesunde Mischung aus Fakten und Emotionen. Der Kunde braucht harte Fakten wie Produktinformationen und Angebote, denn danach sucht er ja, aber genauso muß der Shop auch seine Emotionen ansprechen, indem man mit Fotos die Produkte in Szene setzt oder Stimmungen schafft, die ein gutes Gefühl beim Kunden erzeugen. Er muss sich wohlfühlen und seine Lust zum Kauf muss angeregt werden.

Ziele definieren

Haben Sie schon einmal genau definiert, welche Ziele Ihre Startseite erfüllen soll? Wenn nicht, dann wird es höchste Zeit!

Im vorigen Abschnitt ging es ja um die Funktionen der Startseite. Daraus ergeben sich direkt eine paar Ziele, zum Beispiel soll die Startseite das Alleinstellungsmerkmal des Onlineshops kommunizieren.

Darüber hinaus müssen Sie aber auch klar festlegen, welche direkten wirtschaftlichen Ziele die Startseite erfüllen soll. Möchten Sie den Abverkauf der Produkte aus Kategorie A steigern? Oder sollen Stammkunden neue Produkte entdecken? Vielleicht haben Sie stark erklärungswürdige Produkte und möchten mit ausführlichen Produktberatungsseiten Ihren Kunden Orientierung geben und Sie zu dem passenden Produkt führen.

Ganz wichtig: Definieren Sie Ziele, die sich auch in Zahlen ausdrücken lassen. Nur so können Sie zweifelsfrei feststellen, ob die Startseite Ihre Ziele erfüllt.

Beispiele:

  • Anstatt: "Produkte der Kategorie A hervorheben"
    besser: "Abverkäufe der Produkte aus Kategorie A um 20 Prozent steigern"
  • Anstatt: "Stammkunden sollen neue Produkte entdecken und mitbestellen"
    Besser: "durchschnittliche Warenkorbwert von Stammkunden soll um 10 Prozent steigen."
  • Anstatt: "Neukunden sollen einen guten Überblick erhalten und schnell zum Produkt finden."
    Besser: "Auf der Startseite soll die Abspungrate um 10 Prozent reduziert werden"

Was sollte auf keinen Fall auf der Startseite stehen

Damit Sie auf Ihrer Startseite Platz für die wichtigen Dinge haben, müssen Sie sie zunächst entschlacken. Schmeissen Sie alles Unnötige runter.

Herzlich willkommen

Es gibt Sie leider immer noch, die Onlineshops, bei denen man mit den Worten "Herzlich willkommen bei ..." empfangen wird. Meist folgt dann noch ein steifer Text, der erklärt, dass man im Onlineshop Produkte kaufen kann. Ganz ehrlich: Das braucht mein Mensch!

Haben Sie schonmal einen Flyer gehen, auf dem Sie so begrüßt werden? Im echten Leben können Sie jemand, der Ihren Laden betritt, gerne mit den Worten "Guten Tag, wie kann ich Ihnen weiterhelfen?" begrüßen, aber im Internet interessiert das niemanden. Hier wollen die Besucher auf den ersten Blick sehen, was Sie im Angebot haben und was Ihren Onlineshop besonders machen. Einen nichtssagenden Begrüßungstext will niemand lesen.

Es gibt nur ganz ganz wenige Ausnahmen, in denen ein Willkommenstext sinnvoll ist. Zum Beispiel in Branchen, in denen es eine starke, emotionale verbindene Ebene gibt oder wenn man die Kunden bewußt ganz persönlich ansprechen möchte. Für die meisten klassischen Onlineshops gilt aber: Weg damit!

Endlose Produktübersichten

In Ihrem Shop gibt es so viele tolle Produkte. Und jedes davon liegt Ihnen am Herzen. Natürlich möchten Sie deshalb möglichst viele Produkte auf der Startseite zeigen. Ich kann das verstehen und nachfühlen. Erhlich! Aber leider funktioniert das so nicht.

Wenn die Startseite zu voll ist, dann nimmt der Besucher nur noch Brei wahr, aber ganz sicher nicht ein einzelnes Produkt. Diverse Studien belegen, dass der Mensch eine Gruppe von drei bis fünf Elemente sehr gut erfassen kann. Er kann die einzelnen Elemente unterscheiden und kann die Gesamtheit mit einem Blick erfassen. Bei mehr als fünf Elementen verliert er schnell den Überblick. Je nach Stresslevel kommt er auch noch mit sechs oder sieben Elemente klar, aber dann ist endgültig Schluss.

Deshalb ist es gut, wenn man Produkte gruppieren kann. Das geschieht auf der Startseite zum Beispiel in den Gruppen Topseller und frisch eingetroffen. Man zeigt jeweils drei oder vier Produkte in einer Gruppe. Durch die Gruppierung bleibt es übersichtlich. Aber: Was für Elemente gilt, gilt auch für Gruppen. Wenn Sie mehr als fünf Gruppen auf Ihrer Startseite haben, wird es unübersichtlich.

Teaser für alle Kategorien

Einige Shops präsentieren auf der Startseite Teaserboxen für alle Shopkategorien. Das ist nicht nur ziemlich unübersichtlich und abschreckend, es ist auch völlig unnötig.

Wer als Kunden alle Shop-Kategerien auf einen Blick sehen möchte, der schaut in das Menü. Alle anderen freuen sich über zusätzliche Informationen, zum Beispiel zum Alleinstellungsmerkmal oder aktuellen Aktionsangeboten.

Überlange SEO-Texte

Und dann kam der "Suchmaschinenoptimierer" und meinte: "Da muss unbedingt noch ein SEO-Text auf die Startseite!" Bei vielen Onlineshops sieht man so ein Textungetüm. Meist nimmt es die komplette Breite des Shops ein und glänzt durch ein nicht vorhandenes Design. Dadurch ist der Text schlecht lesbar und er zerstört das Design. Der liebevoll gestaltete Footer wirkt verloren.

Ja, ein Text, der Ihren Shop kurz vorstellt und in dem auch wichtige Suchbegriffe vorkommen macht Sinn und er kann gute Dienste bei der Suchmaschinenoptimierung leisten. Aber er muss Teil des Layouts sein. Schreiben und gestalten Sie ihn für den Leser, nicht für Google. Ich komme später darauf noch einmal zurück.

Checkliste schlechte Inhalte

  • "Herzlich Willkommen..."
  • endlose Produktübersichten
  • eine Box für jede Kategorien
  • überlange SEO-Texte
  • unlesbare SEO Texte

Diese Inhalte sollten auf keiner Startseite fehlen

Auch wenn jeder Shop, jede Branche und jede Zielgruppe anders ist: Es gibt Elemente, die dürfen auf keiner Seite des Onlineshops fehlen. Auch nicht auf der Startseite. Schuld daran sind diverse Gesetze und abmahnwütige Mitbewerber.

rechtliche Basisinformationen

Auf jeder Seite Ihres Onlineshops müssen die Links zum Impressum, der Datenschutzerklärung, zur Ihren AGB und der Widerrufsbelehrung gut zu finden sein. Diese Links kann man sehr gut im Footer unterbringen. Auf Ihre Versandkosten und Lieferbedingungen sollten Sie ebenfalls im Footer verweisen.

Vergessen Sie auch nicht den Hinweis, ob es sich bei den angegebenen Preisen um Brutto- oder Netto-Preise handelt. Dieser Hinweis muss bei jedem Preis erfolgen. Im einfachsten Fall können Sie hinter jeden Preis ein Sternchen stellen und dann in einer Fußnote am Ende des Content-Bereichs, also direkt über dem Footer, erklären, dass es sich im Brutto-Preise inklusive Mehrwertsteuer handelt.

Kontaktinfos (Telefonnummern und Zeiten)

Ihre Telefonnummer – Sie haben doch eine Hotline, oder etwa nicht?! - sollte gut sichtbar sein. Am besten bringen Sie sie im Header unter und schreiben noch die Tage und Uhrzeiten dazu, zu denen Sie erreichar sind. Das schafft Vertrauen. Außerdem gibt Kunden, die eine Beratung am Telefon sehr schätzen, auch wenn Sie gerne online bestellen.

Suchfunktion

Die Suchfunktion ist in einem Onlineshop eine Selbstverständlichkeit. Vielleicht fällt sie deshalb machmal hintenüber und wird lieblos irgendwo platziert wo gerade noch Platz ist. Dabei ist die Suche eines der wichtigsten Werkzeuge, das der Besucher braucht, damit er schnell ein spezielles Produkt finden kann.

Reservieren Sie für die Suche eine prominte Stelle in Ihrem Shop und ausreichend Platz. Spendieren Sie Ihr ein ständig sichtbares Eingabefeld und ein schickes Lupenicon. Der Kunde erwartet das Suchfeld links oben auf der Seite oder wie bei Amazon und Ebay direkt neben oder unterhalb vom Logo.

Versandkosten, Lieferbedingungen, Zahlungsarten

Versandkosten sind kaufentscheidend. Überspitzt gesagt: Wenn Sie Versandkosten verlangen, dann haben Sie schon verloren. Wenn Sie versandkostenfrei versenden, ist das schon die halbe Miete. Also weisen Sie auch auf Ihrer Startseite deutlich darauf hin. "Versandkostenfrei ab 40 Euro Warenwert. Darunter nur 2,90 Euro." So einfach ist das.

Und noch ein Tipp: Wer hat eigentlich behauptet, Versandkosten müssten kostendeckend sein? Rechnen Sie mal genau nach, ob Sie es sich leisten können, die vollen Versandkosten zu verlangen oder ob Sie dadurch nicht zu viele potentielle Kunden verlieren.

Ähnlich kaufentscheidend sind die Zahlungsarten, die Sie Ihren Kunden anbieten. Der durchschnittliche Onlineshop bietet übrigens fünf verschiedene Zahlungsmethoden an. Sie müssen nicht alle auf der Startseite hervorheben, aber so ein Logo von einen bekannten Zahlungsanbieter macht sich schon gut. Das kennt der Kunde und er füllt sich sofort sicherer.

Wenn Sie die Zahlung auf Rechnung anbieten, ist das auch eine Erwähnung wert. Damit können Sie bei Onlinezahlungsmuffeln und bei Unternehmen punkten.

Trust-Signals

Mit Trust-Signals wie Gütesiegeln, Hinweisen auf große Partner, mit denen Sie zusammenarbeiten, aber auch mit Kundenbewertungen schaffen Sie Vertrauen bei Ihren Shopbenutzern. Trust-Signals sind ein sehr einfacher und günstiger Weg, um die Conversion in Ihrem Shop deutlich zu erhöhen.

Lassen Sie Ihren Shop also von Trusted Shops oder Veristore zertifizieren und stellen Sie echte Kundenbewertung (4.8 von 5 Sternen), gerne auch mit dem Volltext eines Kundenkommentars, auf Ihre Startseite. Die Sterne werden sogar in der Google Suche angezeigt und heben Ihre Seite hervor.

Weisen Sie außerdem auf Ihren Versandpartner hin (mit Logo – das bekommen Sie von Ihrem Partner) und binden Sie auch die Logos der Zahlungsanbieter ein.

Checkliste Pflichtinhalte

  • Konktaktinfos
  • Suchfunktion
  • rechtliche Pflichtinfos
  • Hinweis auf Versandkosten, Lieferbedinungen
  • Logos von Zahlungsanbietern oder Icons für Zahlungsarten
  • Trustsignals
  • Kundenbewertungen

Diese Inhalte haben sich für die Startseite bewährt

Nun stelle ich Ihnen Elemente vor, die bei vielen erfolgreichen und führenden Onlineshops im Einsatz sind. Bitte wählen Sie sorgfältig aus, welche Elemente Sie für Ihren Shop verwenden möchten. Weniger ist mehr!

Aktuelle Angebote

Die meisten Onlineshops stellen nur ein oder zwei aktuelle Angebote dar, dafür aber dann besonders groß. Aber bitte: Machen Sie nicht einfach nur die Produktbox größer, sondern preisen Sie Ihr Angebot an!

Stellen Sie den Vorteil heraus: "Jetzt 30% sparen" und befristen Sie das Angebot "Nur diese Woche, solange Vorrat reicht". Das Angebot sollte schon etwas Besonderes sein und der Kunde das Gefühl haben, dass er jetzt schnell zuschlagen muss.

Topseller / Bestseller

Fast alle Shops stellen Ihre Bestseller auf der Startseite ins Rampenlicht. Drei oder vier schmale Produktboxen werden nebeneinander dargestellt. Bestseller sind für alle Kunden interessant, denn das Label Bestseller wird als besonders gute Empfehlung wahrgenommen: Was von vielen Menschen gekauft wird, kann ja nicht schlecht sein.

Sollen mehr als vier Bestseller gezeigt werden, dann kann dies über ein sogenanntes Carousel (Karussel) gelöst werden. Das Carousel kann automatisch nach ein paar Sekunden durchwechseln oder der Kunde kann  mit den Pfleilen nach Links und Rechts scrollen.

Das interessiert Kunden aktuell

Im Gegensatz zu den Topsellern, die immer gut gehen bzw. die meist über die gesamte Shop-Lebenszeit ermittelt werden, werden in der Box "Das interessiert Kunden aktuell" die Topseller bezogen auf einen engen Zeitraum von wenigen Tagen oder Wochen dargestellt.

Der Vorteil besteht darin, dass sich der Inhalt dieser Boxen öfter ändert und die vorgeschlagenen Produkte den aktuellen Trend wiederspiegeln.

Neu / frisch eingetroffen

Viele Shops zeigen in einem Viererblock oder Carousel, welche Produkte gerade neu in den Shop eingefügt wurden und jetzt bestellt werden können. Das macht aber nur bei Produkten Sinn, bei denen Aktualität eine wichtige Rolle spielt. Oder wenn man eine eifrige Stammkundschaft hat, die regelmäßig in den Shop schaut.

Zuletzt angesehen

Wiederkehrenden Besuchern kann man zeigen, welche Artikel sie sich beim letzten Besuch zuletzt angesehen haben. Meist werden hier drei oder vier Produkte nebeneinander gezeigt oder ein Carousel eingesetzt.

Diese Box wird immer an das Ende der Startseite gesetzt und findet sich auch auf jeder Kategorie und Produktdetailseite – so macht es zum Beispiel auch Amazon. Wobei Amazon in die Box auch noch Zubehör zu den zuletzt angesehenen Artikeln hineinschummelt ("Inspiriert von Ihrem Browserverlauf").

Ähnliche Artikel wie Sie sich angesehen haben / Cross-Selling und Up-Selling

Die ähnlichen Artikel hält Amazon für so wichtig, dass sie gleich als erstes ganz oben zu siebt auf der Startseite stehen. Die Idee dabei ist simpel: Wenn der Kunde bei seinem letzten Besuch nichts gekauft hat, dann hat er wohl noch nicht das richtige Produkte gefunden. Ich helfe ihm bei der Suche, indem ich ihm ähnliche Produkte zeige.

Hat der Kunde schon etwas gekauft, so war er anscheinend zufrieden – sonst würde er ja nicht wiederkommen. Es besteht eine hohe Wahrscheinlichkeit, dass er nun wieder ein ähnliches Produkt kaufen möchte.

Technisch ist die Funktion "Ähnliche Artikel" einfach umzusetzten. Alle großen Shopsystem wie Oxid, Shopware, JTL oder Magento können das. Allerdings stellt die Funktion einen hohen Anspruch an den Shopbetreiber. Sie liefert nämlich nur dann gute Ergebnisse, wenn die Artikel entsprechend verknüpft werden. Das ist ein wenig aufwendig, aber es lohnt sich.

Blog / News

Sofern Sie einen Blog führen (das sollten Sie unbedingt!), können Sie den neuesten Blogbeitrag auf der Startseite anteasern. Am besten machen Sie das mit einem Bild, der Überschrift und einem kurzen Teasertext. Ein Satz genügt.

Teaserboxen oder Slider für Themenwelten

Haben Sie eine besondere Themenwelt, die Ihr Steckenpferd ist und das Alleinstellungsmerkmal des Shops unterstreicht? Dann ab damit auf die Startseite! Auch hier wirkt ein Bild Wunder. Dazu eine Überschrift und ein kurzer Slogan oder Teasertext. Teaserboxen für Themenwelten können ruhig ein Drittel, die halbe oder sogar die ganze Shopbreite einnehmen.

Teaserboxen oder Slider für Produktberatungsseiten

Einige Shops weisen auf der Startseite mit Teaserboxen auf ihre Produktberatungsseiten hin. Wenn Sie eine schier unüberschaubare Auswahl an Produkten haben oder wenn Ihre Produkte stark erklärungswürdig sind, dann sollten Sie definitiv mit Produktberatungsseiten arbeiten und diese prominent auf der Startseite platzieren.

Zur Erklärung: Auf einer Produktberatungsseite erfährt der Kunde, wie er sich innerhalb eine Produktgruppe für das richtige Produkt entscheidet.

Beispiel: Sie verkaufen Elektrogeräte für den Haushalt. Dann könnten Sie eine Produktberatungsseite zum Thema Kaffeemaschinen erstellen, auf der Sie die verschiedenen Typen vorstellen (einfache Kaffeemaschine, Kaffeevollautomat, Espressomaschine...) und erläutern, für wen welche Kategorie in Frage kommt. Zu jeder Kategorie verweisen Sie dann auf ein paar Bestseller und Testsieger.

Produktfinder

Eine weitere Möglichkeit, den Kunden bei seiner Kaufentscheidung zu unterstützen ist ein Produktfinder. Klassisches Beispiel: In einem Shop für Autoreifen geben Sie Hersteller- und Schlüsselnummer sowie die Reifengröße Ihres Fahrzeuges an und bekommen dann alle Reifen angezeigt, die zu Ihrem Fahrzeug passen.

Emotionale Ansprache

Bei allen Elementen sollten Sie die emotionale Komponente nicht außer Acht lassen. Die großen Shops machen es vor und arbeiten mit professionellen Bildern, auf denen begeisterte Kunden und Anwender zu sehen sind oder auf denen das Produkt besonders in Szene gesetzt wird. Fachleute sprechen von einem Heroshot.

SEO Text

Google liebt Texte. Zwar kann die Suchmaschine auch diverse andere Daten lesen und analysieren, aber Texte sind für die Suchmaschinenoptimierung und das Ranking bei Google immernoch am wichtigsten. Am besten werden Seiten gefunden, die aus einer gesunden Mischung von gut strukturierten Texten, Bilder, Videos und weiteren Inhaltselementen bestehen.

Die Startseite eines Onlineshops hat meistens zu wenig Texte. Deshalb ist es auch so wichtig, dass Sie Texte in Teaserboxen verwenden und diesen nicht als Grafik, sondern als echten Text einbinden.

Auch ein paar allgemeine Texte machen sich gut auf der Startseite. Dort können Sie sich selbst und Ihren Shop kurz vorstellen. Für folgende Texte können Sie jeweils eine Box oder einen Abschnitt anlegen:

  • Ihr fett gedruckter Elevator Pitch, gefolgt von ein paar Sätzen über Sie selbst und Ihre Vision. Setzen Sie einen Link zur Ihrer "Über uns"-Seite
  • Stellen Sie das Alleinstellungsmerkmal Ihres Onlineshops noch einmal heraus.
  • Geben Sie einen Überblick über Ihr Produktportfolio. Weisen Sie dabei auf wichtige Produkte und Kategorien hin und verlinken Sie diese aus dem Text heraus.

Die Info-Texte sollten Sie auf keinen Fall über die gesamte Breite des Shops laufen lassen, denn so lange Zeilen sind schlecht lesbar und lassen sich nur schwer ansprechend gestalten. Arbeiten Sie stattdessen mit Spalten oder Textboxen, die Sie neben einander am Ende des Content-Bereichs grupieren oder platzieren Sie die Texte unter Ihrer Sidebar und arbeiten Sie mit Absätzen und Zwischenüberschriften.

Wichtig: Es darf keinen optischen Bruch geben. Die gestalterische Einheit der Seite muss gewahrt bleiben, es kommt ja schließlich noch der Footer. Vom Header über die verschiedenen Boxen im Inhaltsbereich bis hin zu den SEO-Texten und dem Footer muss alles aus einem Guss sein.

Checkliste bewährte Inhalte

  • LastSeen, Amazon: Ihre zuletzt angesehenen Artikel und besonderen Empfehlungen
  • Ähnliche Artikel wie Sie sich angesehen haben
  • Aktuelle Angebote
  • Topseller / Bestseller
  • Neu / frisch eingetroffen
  • News
  • Teaserboxen oder Slider für Themenwelten
  • Teaserboxen oder Slider für Produktberatungsseiten
  • Emotionale Ansprache
  • USP klar erkennbar?
  • Strukturierte SEO-Texte

Fokussieren & Reduzieren

Die Standardlänge für die Startseite eines Onlineshops sind zwei bis vier Bildschirmseiten in der Desktopansicht. Konzentrieren Sie sich bei der Auswahl der Elemente für Ihre Startseite auf diejenigen Bausteine, die am besten zur Ihren Zielen passen.

Widerstehen Sie der Versuchung, alle möglichen Elemente auf Ihre Seite zu stopfen. Wenn Ihre Besucher zu viele Möglichkeiten haben, dann sind sie schnell überfordert. Das Resultat: Die Besucher verlassen Ihre Seite wieder.
Sie aber wollen, dass Ihre Kunden unbeschwert und mit Freude in Ihrem Onlineshop einkaufen. Also machen Sie es Ihnen schön kuschelig und bieten Sie Ihnen nur das Beste auf Ihrer Startseite an.

Auch innerhalb der verschiedenen Elemente sollten Sie auf Reduktion setzten. So muss eine Produktbox auf der Startseite und den Kategorieseiten Ihres Onlineshop nicht alle möglichen Informationen enthalten. Meist reicht ein Foto, der Produktname und der Preis sowie gegebenenfalls der Hinweis, dass das Produkt in weiteren Variationen erhältlich ist. Informationen wie die Artikelnummer können Sie getrost streichen.

Amazon geht an dieser Stelle einen extremen Weg und stellt nur ein Produktbild dar. Das sollten Sie aus meiner Sicht so nicht übernehmen. Denn Amazon ist Amazon – für den Branchenriesen gelten an vielen Stellen eigene Regeln.

Gliedern und Gestalten

Eine optimale Startseite ist ein Gesamtkunstwerk. Bei den großen Shops stecken Designer tagelang die Köpfe zusammen, um die beste Gliederung zu erarbeiten und optimieren regelmäßig die Anordnung und Gestaltung der einzelnen Elemente, um ein stimmiges und interessantes Gesamtbild zu erhalten.

Lösen Sie sich von starren Rastern und sorgen Sie stattdessen mit einem regen Wechseln von zweier, dreier und vierer Reihen für Abwechslung. Nutzen Sie die große Darstellung der zweier Reihen für Ihre wichtigsten Elemente wie zum Beispiel die aktuellen Angebote und verwenden Sie dreier und vierer Reihen um weniger wichtige Produktgruppen und Infoboxen darzustellen.

Arbeiten Sie mit professionellen Fotos und Icons, um Texte und Produktinfos grafisch aufzuwerten und setzen Sie mit Farben Akzente.

Für Fortgeschrittene: Optimieren

Man kann viel von erfolgreichen Onlineshops lernen und mit dem entsprechenden Hintergrundwissen die richtigen Schlüsse für den eigenen Shop ziehen. Aber hier im Rheinland sagt man: "Jeder Jeck is´ anders." Kopieren Sie also nicht einfach blind alle Elemente von Ihren großen Vorbildern, denn was in dem einem Shop funktioniert, muss nicht die optimale Lösung für Ihren Shop sein.

Gerade bei der Betrachtung von Branchengrößen wie Amazon, Zalando und Co müssen Sie immer daran denken: Das sind riesige, seit Jahren eingeführte Marken. Eine große Marke kann sich viele Schnitzer erlauben, die für einen noch unbekannten Onlineshop den Tod bedeuten würden. Auch wenn sich hier und da die Kunden beschweren – die Marke hält das aus.

So ist das Design des Content Bereichs der Amazon Startseite nicht gerade preisverdächtig. Aber Amazon kann es sich erlauben, weil die Zugkraft der Marke groß genug ist, das Unternehmen über eine starke Stammkundschaft verfügt und die Usablity exzellent ist.

Anderes Beispiel: Zalando verwendet auf der Startseite einen hässlichen SEO-Text mit fragwürdigem Inhalt. Bei jedem anderen Shop würde dies unseriös wirken und wäre ein negatives Signal Die Kunden von Zalando stört es nicht: Die Marke ist über jeden Zweifel erhaben und der Rest der Seite stimmt.

Messbare Ziele

Zu Beginn dieses Artikels habe ich es schon kurz angesprochen: Setzen Sie sich unbedingt messbare Ziele! Fromme Wünsche wie "Ich will möglichst viele Besucher" oder "Ich will mehr verkaufen" sind viel zu unspezifisch. Sie brauchen Ziele, die sich in harten Zahlen ausdrücken lassen. Denn nur die können Sie objektiv messen und dadurch überwachen, ob Sie Ihre Ziele schon erreicht haben.

Außerdem lernen Sie durch das Controlling, welche Größenordnungen bei Zielgrößen realistisch sind. Das schützt Sie vor überzogenen Erwartungen und ermöglicht Ihnen eine solide Unternehmensplanung.

Webanalyse & Controlling

Wer heute keine Webanalyse Software wie Google Analytics oder Piwik einsetzt, hat schon den ersten Sargnagel in seinen Onlineshop geschlagen. Ohne verlässliche Zahlen zur Nutzung Ihres Onlineshops können Sie sich bei der Weiterentwicklung und Optimierung nur auf Ihr Bauchgefühl und die dürftigen Auswertungen Ihrer Shopsoftware verlassen. Ihnen fehlt eine solide Datenbasis, mit deren Hilfe Sie das Besucherverhalten analysieren, verstehen und hinterfragen können. Das führt zu falschen Entscheidungen, die Sie erst erkennen, wenn es schon zu spät ist.

Die Grundeinrichtung von Google Analytics und der Einbau in Ihren Shop ist in einer halben Stunde erledigt. Sinnvoll ist eine Verknüpfung mit den Google Webmaster Tools und der Google Search Console. Das Tool beginnt dann sofort Daten zu sammeln und nach ein paar Wochen können Sie schon die ersten Erkenntnisse aus den Daten ziehen.

Noch mehr Aussagekraft erhalten die Google Analytics Daten, wenn man die erweiterten Funktionen nutzt und die Besucher segementiert, zum Beispiel anhand der Herkunft (Deutschland) oder über die Definition von Zielen und Zieltrichtern.

So können Sie mit Analytics beispielsweise diejenigen Besucher markieren, die erfolgreich in Ihrem Shop eingekauft haben und sich dann die verschiedenen Metriken wie Verweildauer oder Seiten pro Besuch nur für diese Gruppe anzeigen lassen. Im Vergleich mit der Gruppe der Besucher, die nicht gekauft haben, können Sie jetzt viel besser die Customer Journey nachvollziehen und Gründe für den Erfolg oder Misserfolg identifizieren.

Mit Zieltrichtern können Sie unter anderem herausfinden, wie viele Kunden an jedem einzelnen Schritt im Checkout-Prozess abspringen. Diese Info ist Gold wert! Denn im Checkout können Sie schon durch kleine Veresserung und mit wenig Aufwand Ihre Conversion deutlich steigern und so entscheidend mehr Umsatz erzielen.

Optimieren mit A/B Tests

Die Optimierung eines Onlineshops in Hinblick auf Conversion und Usability sollte jeder Shopbetreiber vorantreiben. Wer das nicht tut, verschenkt ein gewaltiges Potential. Aber wie genau findet man heraus, wie man die Besucher auf die richtigen Seiten lenkt, Sie zum Kaufen oder zur Anmeldung beim Newsletter animiert?

Schon mit den Grundfunktionen von Google Analytics können Sie durch einen einfachen Vorher-Nachher-Vergleich herausfinden, ob eine Optimierungsmaßnahme erfolgreich war. Allerdings nur, wenn Sie sich das Datum Ihrer Optimierung notiert haben und wenn sich die Zahlen deutlich genug ändern. Die meisten Optimierungen bringen aber Verbesserungen im Bereich von drei bis zehn Prozent. Das läßt sich in den normalen Übersichten von Google Analytics nicht zuverlässig erkennen.

Auch hier kann Google Analytics helfen. Mit den sogenannten Google Analytics Content Tests können Sie bis zu neun Variaten einer Seite gegen die aktuelle Standardversion laufen lassen.

Wenn Sie zum Beispiel Ihre Startseite in Hinblick auf die Conversion zum Kauf optimieren möchten, dann können Sie eine alternative Version anlegen und Google sorgt dann dafür, dass ein von Ihnen festgelegter Prozentsatz Ihrer Besucher nun die alternative Version B anstatt der Standardversion A sehen. Dahinter steckt eine wissenschaftlich fundierte statistische Auswertung, an deren Ende Sie eine klare Aussage erhalten wie. "Mit einer Wahrscheinlichkeit von 99% sorgt Variante B für eine Steigerung der Conversions um 4,9 Prozent."

Anregungen für A/B-Tests:

  • wie viele Topprodukte / frisch eingetroffen etc. anzeigen? 2,3 oder 4?
  • Titel und Texte von Boxen und Abschnitten variieren.
  • verschiedene Texte auf Buttons ausprobieren
  • Produktboxen mit und ohne Preis
  • Produktboxen mit und ohne kurze Artikelbeschreibung
  • statische Boxen vs. Manueller Slider vs. Automatischer Slider
  • Anordnung von Boxen, z.B. Topseller oder ähnliche Produkte zuerst?

Checkliste

  • Setzten Sie sich messbare Ziele
  • Richten Sie eine WebAnalyse-Software wie Google Analytics ein, messen Sie ihre Zielgrößen und kontrollieren Sie regelmäßig die Ergebnisse.
  • Verwenden Sie A/B-Tests, um schrittweise einzelne Elemente oder Paramenter Ihrer Startseite zu verbessern

Fazit

Mit den grundlegenden Tipps in diesem Artikel und dem ausgiebigem Studium von Startseiten von erfolgreichen und bekannten Onlineshops kann man schon eine hervorragende Startseite aufbauen.

Wer das macht, ist damit je nach Branche gefühlt 70 Prozent seiner Wettbewerber mindestens drei große Schritte vorraus.

Wer dann noch ein Webanalyse Tool wie Google Analytics gekonnt einsetzt, um den Erfüllungsgrad seiner Ziele zu messen und seinen Onlineshop mit A/B-Tests immer weiter zu optimieren, der spielt ganz oben mit.

Keine Angst: Das alles ist kein Hexenwerk!

Ja, das Thema ist komplex. Es gibt viel zu bedenken und zahlreiche Stellschrauben, an denen man drehen kann. Aber Rom wurde auch nicht an einem Tag erbaut.

Fangen Sie mit kleinen Schritten an. Jetzt!

zurück

Kommentar von Tim |

Hi Ansgar,

prima Artikel, vielen Dank für die vielen Tipps!
Besonders die Checklisten nach jedem Kapitel finde ich super praktisch.

Meine Website beinhaltet auch einen Onlineshop. Aber nicht ausschließlich (Es gibt also noch weitere Elemente). Was würdest du hier für die Startseite empfehlen? Gibt es da Grundsätzliches zu beachten oder ist das zu individuell?

Schöne Grüße
Tim

Antwort von Ansgar Böttcher

Hallo Tim,

Deine Seite ist schon sehr speziell. Auch wenn dahinter unter anderem ein Shopsystem steckt, ist studienscheiss.de alles andere als ein klassischer Onlineshop. Das liegt aber auch an der Natur Deiner Produkte (hoch erklärungsbedürftig, keine Impulskäufe...).

Bei Dir machen Elemente wie Topseller oder Ähnliche Produkte überhaupt keinen Sinn. Da ist Dein Weg mit den kombinierten Teaser- und Produktkonfigurator-Boxen schon richtig.

Beste GrüßeAnsgar

Kommentar von Marco De Micheli |

Einmalig wertvolle und qualitativ hervorragende Informationen, die konkret das Wesentliche fokussieren! Gratulation zu diesem Beitrag!

Einen Kommentar schreiben