Onsite-Optimierung | | von Annette Mattgey

Schwache Website: Wie Ravensburger.de nachbessern sollte

Ravensburger.de im Conversion Check: Verwirrende Startseite, zu schnell wechselnde Slider und unklare Icons. Besucher haben es schwer auf der Website des Spieleherstellers. Die gründliche Analyse* haben Nils Kattau, Gründer und Geschäftsführer von ConversionLift, und Berater Andreas Graap, angron.de, exklusiv für LEAD digital erstellt und leiten daraus wichtige Tipps zur Website-Gestaltung ab:

Die Startseite: Sekundenbruchteile entscheiden

In kürzester Zeit entscheidet der Besucher einer Internetseite, ob die aufgerufene Seite für ihn relevant ist oder ob er sie direkt wieder verlässt. Aus diesem Grund ist eine elementare Mindestanforderungen an jede Website zu stellen, nämlich die sofortige Beantwortung der Frage im Kopf des Nutzers: "Bin ich hier richtig?"

Am Beispiel der Startseite von Ravensburger.de wird diese elementare Mindestanforderung nicht erfüllt (siehe Bild oben). Der erste Eindruck lässt vermuten, dass es sich um eine Website über die Fernsehserie Stromberg handelt.

Innerhalb der ersten Sekunden wird nicht deutlich,

  • dass Ravensburger der Anbieter der Website ist (das Logo befindet sich im “toten Winkel” und wird nicht direkt wahrgenommen,
  • dass es sich bei dem dargestellten Stromberg-Produkt um ein Spiel zur Serie, welches von Ravensburger herausgegeben wird, handelt,
  • worum es eigentlich auf dieser Website geht (“Geht es um Stromberg?”/“Was hat es mit dem Zum Shop-Button da oben auf sich?”) und
  • welche Aktion der Nutzer durchführen soll. (Die Handlungsaufforderung Jetzt mitmachen fällt nicht sonderlich ins Auge und es wird nicht deutlich, was genau einen nach einem Klick erwartet.)

Der Einstieg in die Website wird weiter erschwert, da Ravensburger einen Content-Slider einsetzt.

Im Content-Slider wird in regelmäßigen Abständen das nächste Slide ausgespielt mit Informationen für den Besucher. Das können Produkte, Aktion oder der Link zu Themenwelten sein. Doch gerade bei Slidern, die einen großen Teil der Website einnehmen, ergeben sich zwangsläufig Probleme:

Slider-Problem Nr. 1: Unterschiedliche Nutzer haben unterschiedliche Interessen

  • In einem Slider kann nur eine sehr begrenzte Auswahl an Inhalten präsentiert werden; in der Regel beschränken sich diese auf 3-5 Slides.
  • Der Ersteller des Sliders muss erraten, welche Inhalte die Nutzer am meisten interessieren, sofern es sich um Slides handelt, welche bestimmte Aktionen bewerben sollen.
  • Nutzer mit anderen Interessenschwerpunkten bleiben außen vor – für sie wird keine inhaltliche Relevanz erzeugt.

Slider-Problem Nr. 2: Unterschiedliche Nutzer haben unterschiedliche Auffassungsgaben

  • Der Slide wechselt im Fall von Ravensburger.de alle 4 Sekunden. Der Nutzer hat kaum Zeit, sich ausreichend mit einem Slide zu beschäftigen, um ein Interesse und den damit einhergehenden Klickanreiz zu verspüren.
  • Wurde ein anfängliches Interesse geweckt, verschwindet der Slide auch schon wieder.
  • Die Slider-Animation pausiert zwar, wenn die Maus des Nutzers sich im Bereich des Sliders aufhält; das weiß der gewöhnliche Internetnutzer jedoch nicht.

Slider-Problem Nr. 3: Ein Slider macht es unmöglich, andere Inhalte auf der Seite ungestört zu konsumieren

  • Bewegungen außerhalb des Blickfokus werden sehr intensiv – und sehr störend – wahrgenommen. Grund hierfür ist das Gehirn, welches instinktiv vor Gefahren aus dem Augenwinkel schützen will.
  • Jede Slide-Bewegung zwingt die Konzentration des Nutzers unweigerlich in Richtung Slider. Dies verursacht ein sehr unkomfortables “Lese-Empfinden”.

 

Visuelle Hierarchie: Der Unterschied macht's

Für eine unkomplizierte und schnelle Erfassung wichtiger Inhalte ist es ratsam, sich des Prinzips der visuellen Hierarchie zu bedienen. Das heißt, dass unterschiedlich wichtige Bereiche unterschiedlich aufmerksamkeitsstark gestaltet werden.

Ein besonderer Vorteil dieses Prinzips ist, dass man die Aufmerksamkeit des Nutzers gezielt auf bestimmte Bereiche lenkt. Je auffälliger der jeweilige Bereich, desto mehr Beachtung findet er.

Auf der Homepage von Ravensburger.de fällt es sehr schwer, eine visuelle Hierarchie zu erkennen. Inhaltsbausteine sind scheinbar willkürlich aneinandergereiht und ohne den Blick auf das Gesamterscheinungsbild gestaltet. Der Blick des Nutzers wird stark gestreut; klare Ankerpunkte sind nicht auszumachen.

 

Die Themenwelten: Falsche Prioritäten gesetzt

Kaum etwas zieht mehr Aufmerksamkeit auf sich als das Gesicht eines Menschen. Das daraus resultierende Problem auf Internetseiten ist, dass Inhalte in der Nähe von Gesichtern nur bedingt wahrgenommen werden. So sieht die Themenwelt-Seite von Ravensburger im Blickverlaufstest  aus:

 

Die Konzentration liegt auf den menschlichen Gesichtern, nicht den Produkten der Themenwelten. Diese erscheinen wenn überhaupt nur peripher, wie Karten und Spielfiguren. Auf Produkt-Übersichtsseiten sollten aber Bilder, welche in direktem Zusammenhang mit einem bestimmten Produkt stehen, dieses visuell unterstützen. Im Fall der Themenwelt-Seite ist die Differenzierung der Produkte durch die Bilder nicht möglich.

Die Aufmerksamkeits-Analyse beweist, dass die eigentlich relevanten Inhalte kaum Beachtung finden. Wichtige weiterführende Links wie Spiele nach Altersempfehlung und Spielreihen werden erst bei sehr genauer Betrachtung der Inhalte erkannt.

Die meisten Nutzer überfliegen Internetseiten lediglich, bleiben hängen an Kontrastpunkten (Skimming) und entscheiden dann, ob die überflogene Seite interessant genug ist, um sich intensiver damit auseinander zu setzen. Durch den exzessiven Einsatz von Gesichtern wird der Prozess des Skimmings negativ beeinflusst.

Die Produktseiten: Rätselhafte Icons

Bei der Analyse der Artikel-Detailseite fiel besondere Aufmerksamkeit auf die rechts platzierten Icons. Können Sie ohne Schwierigkeiten erklären, was jedes Icon bedeutet?

 

Die Icons sind nicht selbsterklärend und verwirren den Nutzer.

In diesem Fall kann die Verständlichkeit von Icons kaufentscheidend sein, da insbesondere das empfohlene Alter eine sehr entscheidungsrelevante Information für den Käufer darstellt. Allerdings sind die Symbole für Alter und Spielerzahle auf den ersten Blick zu ähnlich. Sind Icons nicht auf den ersten Blick selbsterklärend, muss eine Erklärung direkt auf der Seite erfolgen.

Ein weiterer Fehler sind unklare Produktbeschreibungen, etwa hier: "Der Wald". Für den Betrachter lässt sich nicht zweifelsfrei erkennen, ob es sich bei dem abgebildeten Produkt um ein Brettspiel, ein Buch, einen Mal-Block, oder ein Kartenspiel handelt. Menschen wollen nicht raten, um welches Produkt es sich handelt. Derartige Undeutlichkeiten verunsichern den Nutzer und wirken sich mit Sicherheit negativ auf die Konversionsrate aus. Man sollte es dem Nutzer so einfach wie möglich machen. Abhilfe schaffen kann man z. B. ganz einfach durch eine Angabe der Produktart (hier: Kinderbuch ab 2 Jahre) über oder unter der Produktbezeichnung.

Auf Details wie etwa die Gestaltung des Warenkorbs und den Bestell-Prozesses wird an dieser Stelle verzichtet. Aber aus der bisherigen Analyse von Ravensburger.de lassen sich folgende Learnings gewinnen.

Tipps zur Conversion-Optimierung: 

  1. Machen Sie auf der Startseite sofort unmissverständlich klar,worum es geht, wer der Anbieter ist und wie es von hier aus weiter geht.
  2. Wählen Sie für die Startseite - vor allem auf größeren Websites - möglichst allgemeine und umfassende Inhalte, die die Angebotsvielfalt schnell erfassbar machen und eine unkomplizierte Navigation ermöglichen.
  3. Setzen Sie Content-Slider – wenn überhaupt – nur nach reiflicher Überlegung ein. Fragen Sie sich: Welchen Nutzen bietet ein Slider für den ersten Eindruck beim Betreten der Seite? (“Coole Animation” ist kein Vorteil.)
  4. Gestalten Sie einzelne Inhaltsbereiche innerhalb einer Seite in einer visuellen Hierarchie: Was soll ins Auge fallen? Was ist sekundär wichtig?Was kann vernachlässigt oder entfernt werden?
  5. Schaffen Sie auf Übersichtsseiten mit vielen möglichen Zielen Differenzierung durch Bilder, die für sich sprechen und das Ziel visuell sinnvoll unterstützen.
  6. Nutzen Sie keine Icons und Piktogramme, die nicht verstanden werden könnten.
  7. Vermeiden Sie Interpretationsspielraum. Formulieren Sie klar und unmissverständlich, was auf einer Seite (z. B. Artikelseite für ein Kinderbuch) zu sehen ist.

Die ausführliche Version des Website-Checks finden Sie im Blog von Angron unter diesem Link.

*Die hier vorgestellte Conversion-Site-Clinic basiert rein auf bestem Wissen. Die tatsächlichen Zahlen und Nutzerdaten von Ravensburger liegen den Autoren nicht vor.

Schwache Website: Wie Ravensburger.de nachbessern sollte

Artikel bewerten

Vielen Dank, Ihre Bewertung wurde registriert!

Sie können leider nur einmal pro Seite bewerten.

Ihre Bewertung wurde geändert, vielen Dank!

Leserkommentar

Wir freuen uns über Ihre Kommentare.

* Pflichtfeld
** Pflichtfeld, wird nicht veröffentlicht