Wie die Startseite eines Onlineshops in Zukunft aussehen muss

Stellen Sie sich vor, Sie betreten die Tür eines Ladengeschäfts in der Fußgängerzone. Das Geschäft hat 17 Etagen, 230 Türen und irgend etwas zwischen 3.000 und 5.000 Artikel. Auf der Suche nach dem besten Angebot stellen Sie fest: Es gibt keine Beschilderungen, Wegweiser und keine Spur von Angestellten, die Sie um Rat fragen könnten. Zu allem Überfluss hängen überall Angebotsschilder von der Decke, die Ihnen die Sicht auf das gewünschte Produkt nehmen.

So oder so ähnlich gestaltet sich im übertragenen Sinne der erste Eindruck vieler Onlineshops. Kein Wunder, dass die Nutzer aufgrund von Reizüberflutung häufig nicht wissen, wo sie zuerst hinklicken sollen.

Der erste Eindruck zählt

Je nachdem über welches Werbemittel der Nutzer auf einen Onlineshop kommt - häufig ist die erste Anlaufstelle die Shop-Startseite. In allen anderen Fällen sollte eine Landingpage Einstiegspunkt sein. Und da der erste Eindruck auch bei Onlineshops zählt, bleiben Shopbetreibern nur Millisekunden, um zu überzeugen. Daher ist die Conversion-Optimierung einer Onlineshop-Startseite besonders wichtig.

Was bei einer Shop-Startseite beachtet gehört

Eine Onlineshop-Startseite sollte folgende Punkte erfüllen:

1. Relevanz
   Der Nutzer sollte wissen, an wen sich ein Onlineshop richtet und was angeboten wird. Die Relevanz eines Shops erhöht sich, wenn man sich gut angesprochen fühlt. Und mit der Relevanz steigt auch die Bereitschaft zum Weiterklicken. Man sollte daher die Zielgruppe ansprechen (an wen richtet sich das Angebot) und kann dies durchaus mit treffenden Keyvisuals erreichen. Interessante Angebote sollen den Nutzer auf Folgeseiten "ziehen".
   
   
   

   Bild: Shoemanic/Beck

   
   Positives Beispiel: Shoemanic  

   
   Die Startseite bietet zielgruppengerechte Einsprungziele, somit wird der Nutzer gleich zum ersten Klick animiert. Der Traffic wird verteilt.
   
   

2. Professionelles Design
   Ein professionelles Design sorgt für einen guten ersten Eindruck und schafft gleichzeitig Vertrauen. Viele Shops werden als unseriös wahrgenommen, weil das Design einfach zu unprofessionell wirkt. Man sollte darauf achten, dass das Design auch in unterschiedlichen Browsern perfekt dargestellt wird, ansonsten entsteht schnell der Eindruck, dass an der Seite noch gearbeitet wird. Weiterhin sollte darauf geachtet werden, welche Wirkung die Startseite erzielen soll. Blinkende und verspielte Elemente sollten nur für gezielte Aktionen verwendet werden. Der gute alte animierte Briefkasten ist auch nicht mehr state-of-the-art und hat auf professionellen Shops nichts mehr zu suchen. Farben erzielen unterschiedliche Wirkungen und sollten nicht willkürlich verwendet werden.
   
   
   

   Bild: Schuhpaket/Beck

   
   Die Startseite von Schuhpaket.com   wirkt altbacken und inhaltslos. Professionelles Design sieht anders aus.
   
   

3. Auflösung beachten
   Die Optimierung einer Shop-Startseite sollte auch auf die Bildschirmauflösung der Zielgruppe ausgerichtet werden. Wenn der Nutzer im sichtbaren Bereich keine interessanten Angebote oder weiterführenden Links sieht, kann es passieren, dass er abspringt (Bounce Rate). Mit der Firefox-Erweiterung "Web Developer" und dem kostenlosen Tool von Google "Browsersize" kann man herausfinden, was der Nutzer bei unterschiedlichen Bildschirmauflösungen sieht. So funktionieren die Landingpage-Tools.
   
   Es ist wichtig, die Website auf die Bildschirmauflösung der Zielgruppe hin auszurichten. Kann man auf historische Analyse-Daten zurückgreifen, so sollte auf die Bildschirmauflösung optimiert werden, die am häufigsten von den Nutzern verwendet wird. Wichtig ist auch, dass immer mehr Nutzer mobile Endgeräte verwenden!
   
   Stehen keine historischen Screen-Resolution-Daten zur Verfügung, so muss eine Annahme getroffen werden. Öffentliche Webstatistiken können hier weiterhelfen.
   
   Die Ausstattung mit Wide-Screen-Monitoren nimmt immer mehr zu und der Anteil derjenigen, die bereits über 1024 mal 768 Bildpunkte abbilden können, steigt stetig an. Dennoch verwendet ein Großteil der Nutzer immer noch die Auflösung 1024 mal 768 Pixel, weshalb diese auch als Standard angesehen werden sollte.
   
   Nach Golive der Website sollte aber unbedingt ein Webanalyse-Tool wie Google Analytics oder ähnliches installiert werden, um die Bildschirmauflösungen der Nutzer aufzuzeichnen und beobachten zu können. Anschließend kann die Website auf die häufigste Auflösung optimiert werden.
   
   
   

   Bild: Esprit/Beck

   
   Nur gut gemeint: Esprit  

   
   Die sonst sehr schön gestaltete Startseite hat leider das Problem, dass die großflächig angeteaserte Sale-Aktion nicht mehr im sichtbaren Bereich bei einer Auflösung von 1024 mal 768 Bildpunkten liegt. Unbeachtet bleibt hierbei, wie viel Prozent der Nutzer auf dem Esprit-Shop diese Auflösung verwenden.
   
   

4. Orientierung bieten
   Der erste Blick über eine Startseite stellt den Nutzer nicht selten vor Herausforderungen. Angebote, die wie Werbebanner wirken, blinkende Preise und große Partner-Logos verwirren den Nutzer. Ein Überreizen der Sinne verwirrt die Blicke der Nutzer.
   
   Shop-Startseiten sollten die Inhalte nicht willkürlich abbilden, sondern bestimmten Prinzipien folgen. Wichtiges muss im oberen Bereich abgebildet werden. Weiterführende Buttons oder Links sollten nicht im Fließtext untergehen und Angebote dürfen nicht aufeinander "gestapelt" werden. Blicke können gezielt durch Bilder geführt werden. Hell-Dunkel-Kontraste und der Abstand zwischen einzelnen Elementen können Strukturen abbilden, ohne alles in Rahmen packen zu müssen.
   
   Typische Muster beim "Überfliegen" von Websites hat Jakob Nielsen 2006 in einer Eyetracking-Studie untersucht. Dabei zeigen sich auffällige Muster wie zum Beispiel das F-Muster (siehe Abbildung) und das Z-Muster (ohne Abbildung). Bei der Konzeption einer Onlineshop-Startseite muss daher die Blickführung des Nutzers besonders beachtet werden.
   
   
   

   Bild: Beck

   
   F-Pattern (F-Muster)  
   

   ---

   Tipp: Klare Strukturen, optische Trennung von wichtigen Bereichen (Navigation, Content, Kategorie-Einsprünge, Angebote, etc.) und Priorisierung des Contents schaffen Überblick. Wichtig ist dabei auch, die Bildschirmauflösung des Nutzers nicht zu vernachlässigen. Wichtige Elemente sollten immer sichtbar sein. Der Nutzer kann zum Scrollen eingeladen werden.
   

   ---

   
   
5. Erwartungen erfüllen
   Nutzer sammeln tagtäglich Erfahrungen im Internet und mit Onlineshops. Über die Zeit kristallisieren sich dabei bestimmte Muster heraus, die sich bei vielen Onlineshops wiederfinden. Erwartungen werden ebenso durch große Onlineshops geprägt und führen dazu, dass der Nutzer eine Grundstruktur bezüglich der Anordnung wichtiger Elemente in einem Onlineshop erwartet. Einen Warenkorb sucht man inzwischen ganz selbstverständlich im oberen rechten Bereich eines Onlineshops.
   
   

   Wo gehören Website-Elemente hin?

   Eine interessante und lesenswerte Studie zur Positionierung von Website-Elementen hat Eresult    im September 2009 vorgestellt.
   Folgende Elemente wurden im kostenfreien Bericht ausgewertet und deren erwartete Positionierung im Onlineshop/ Website ausgegeben:
   
   
   1. Suchfunktion (oberer rechter Bereich - von 71,8 % erwartet)
      
   2. Hilfe-Link (oberer rechter Bereich - von 63,1% erwartet)
      
   3. Werbung (rechter Seitenbereich - von 48,5% erwartet)
      
   4. Datenschutz-Hinweise (im Footer-Bereich - von 58% erwartet)
      
   5. Kontakt-Link (oben rechts - 91,6%)
   
   
   Nachfolgende Abbildung zeigt die Erwartung der Nutzer bezüglich der Positionierung von wichtigen Elementen auf einer Shop-Startseite. Dabei wird die Startseite in 25 Zellen unterteilt.
   
   
   

   Bild: Eresult

   
   
   Die Handlungsempfehlung für Designer und Konzepter ist recht klar: "Positioniert funktionelle und inhaltlich relevante Links dort, wo sie von den meisten Webnutzern erwartet werden."
   
   Ausnahme: Motivationale Elemente, die aus Sicht der meisten Webnutzer keine besondere Relevanz für die Nutzung einer Website haben wie z.B. Werbung. Werbung sollte, damit sie auffällt und wahrgenommen wird, dort erscheinen, wo sie nicht erwartet wird. Dann ist die "Überraschung" am größten und es steigt die Chance, dass Werbung zumindest kurz angesehen wird.
   
   

6. Vertrauen schaffen
   Vertrauen schaffen heißt Conversion steigern. Viele Nutzer im Web sind unsicher ob der Seriosität von Onlineshops. Das E-Commerce-Center Handel, Köln, hat zu diesem Thema einen kostenlosen Leitfaden mit dem Titel "Vertrauen im Online-Handel - Ein Leitfaden für kleine und mittelständische Unternehmen" herausgebracht (Download siehe Quelle). Dabei wurde untersucht, wie sich das Abbilden von vertrauensbildenden Maßnahmen auf die Kaufwahrscheinlichkeit auswirkt.
   
   
   

   Bild: ECC Handel

   
   Die Effektivität vertrauensbildender Maßnahmen  
   

   ---

   Konkrete Maßnahmen
   1. Wichtige Gütesiegel abbilden
   2. Kundenbewertungen ausgeben
   3. Gängige Zahlungsverfahren anbieten
   
   Eine Zusammenfassung sowie Tipps und Checklisten gibt es auf meinen Blog: Conversion steigern durch Vertrauen  

   ---

Startseite ist mehr als eine Eintrittstür

Die Startseite eines Onlineshops repräsentiert mehr, als nur eine "Eintrittstür" zum Shop. Die Startseite soll Überblick verschaffen, Orientierung bieten, Vertrauen aufbauen, Sicherheit vermitteln und nicht zuletzt natürlich verkaufen.

Daher ist die Conversion-Optimierung einer Onlineshop-Startseite eine große und wichtige Aufgabe. Elementar ist dabei die strukturierte Vorgehensweise beim Testing. A/B-Tests können schnell Aufschluss darüber geben, welche Elemente wichtig sind, und worauf Nutzer reagieren (sowohl positiv als auch negativ). Doch auch wer seine Startseite nicht per A/B-Test testen möchte, kann mit kleinen Änderungen und dem Betrachten der Zahlen schnell Unterschiede in der Absprungrate auf der Startseite entdecken.

---

iBusiness-Autor Gabriel Beck ist als Senior Consultant bei Explido WebMarketing    Experte für Conversion-Optimierung, Landingpage-Optimierung, Shop-Optimierung und Testing. Seit 2009 betreibt er einen eigenen Conversion Optimierung Blog  .