So beeinflusst das Design den Erfolg des Online-Shops

Je einfacher ein Produkt gefunden werden kann, je transparenter Produktinformationen, Zahlungsoptionen und Versandmodalitäten dargestellt sind, je vertrauensvoller die Angebote wirken und je besser das positive Erlebnis beim Kauf gestaltet ist, desto mehr kann ein Online-Shop überzeugen. Die Performance der Verkaufsplattform hängt stark von ihrer Benutzbarkeit und damit von ihrem Design ab. 

Zum Einmaleins gehört längst die Design-Optimierung für Mobilgeräte und unbedingt schnelle Ladezeiten. Darüber hinaus können Design- und Usability-Elemente helfen, mehr Conversions zu erzielen. Außerdem kann die Art, wie und ob bestimmte Informationen präsentiert und auffindbar sind, Einfluss auf das Ranking bei Google haben. Also was spricht User optisch an? Welche Designelemente können als Kaufanreiz dienen? Welche Funktionen und Trends sind für die Bedienbarkeit essenziell – und was wirkt eher hinderlich? Wir haben nachfolgend Tipps und einige Beispiele für gelungenes Design im Online-Shop zusammengetragen. 

Gutes Design – aber für wen? 

Was ein gutes Design ist, darüber lässt sich wunderbar philosophieren und diskutieren. Doch wichtig ist im Falle von Online-Shops die Frage: Wen soll das Design ansprechen? Der erste Grundsatz in der Philosophie von Google lautet nicht ohne Grund: „Der Nutzer steht an erster Stelle, alles Weitere folgt von selbst.“ Denn genau diesen Leitsatz gilt es auch in der Gestaltung eines Online-Shops zu beachten. Die Wünsche und der Erfahrungshorizont derjenigen, die hier kaufen sollen, müssen berücksichtigt werden. Deshalb wirken Design und Benutzbarkeit/Usability hierbei eng zusammen.

Google hat auch relativ konkrete Ideen, wie gelungene Webseiten aussehen und welche Design- bzw. Usability-Aspekte wichtig sind. Diese hat das Unternehmen in den sogenannten Google Playbooks festgehalten. Dabei handelt es sich laut dem Design-Magazin Page Online um interne Dokumente, die 2018 geleakt wurden und Kriterien sowie konkrete Beispiele für nutzerfreundliche Webseiten-Bestandteile aufzeigen. In Googles UX-Playbook für den Handel (PDF) wird hierbei allem voran genannt, dass der Kunde sämtliche Erlebnisse beim Shoppen – von der Startseite bis zur letzten Station im Checkout – als „reibungslos“ empfinden müsse.

Auf einer mobilen Startseite sollten sich beispielsweise sowohl klare, als auch beschreibende Call-to-Actions für den Besucher befinden, stets die Top-Kategorien ausgewiesen sein und ein nutzerorientierter Mehrwert geschaffen werden. Im Shop ist das in der Regel eine Suchleiste, über die ein Nutzer direkt nach Angeboten suchen kann. All das soll noch sichtbar sein, ohne dass auf der Seite runtergescrollt wird.

Bei Zalando lässt sich beispielhaft erkennen, wie diese Ideen umgesetzt sind: Die Top-Kategorien sind gleichzeitig Klick-Schaltflächen, oben befindet sich die Search Bar, außerdem der Hinweis, dass man sich die App auf dem Smartphone installieren soll. 

Auf die Suche im Shop legt der Suchmaschinenanbieter Google bei Online-Shops selbstverständlich besonders großen Wert, weshalb sie nicht nur grundsätzlich vorhanden, sondern auch noch wesentliche Kriterien erfüllen soll. 

Die Suche muss: 

• klar sichtbar sein, 
• Auto-Vorschläge nutzen,
• Rechtschreibkorrektur implementieren,
• immer Ergebnisse liefern,
• vorherige oder die wichtigsten Suchvorgänge einbeziehen.

Den Blick aufs Wesentliche lenken 

Neben Design-Elementen, die eher auf Funktionalität und Bedienbarkeit ausgerichtet sind, gibt es weitere gestalterische Möglichkeiten, um Nutzer anzusprechen. Hilfreich für den ersten Eindruck ist es, wenn eine Webseite erstmal einen „aufgeräumten“ Eindruck macht. So ist es möglich, dass sich der Blick des Betrachtenden gezielter auf das lenken kann, was relevant ist – ein Produkt, eine bestimmte Kategorie, ein Saison-Special oder die Marke als solche bzw. das, was man mit ihr verbinden soll. Je weniger Elemente auf einer Seite zu sehen sind, desto mehr Präsenz erhalten jene, die da sind. Im Umkehrschluss: „Im Grunde verwässert jedes Element, das du deinem Webdesign hinzufügst, alle anderen“, wie die Kreativplattform 99designs in ihrem Blog schreibt. 

Dabei ist noch gar nicht gesagt, dass das Wesentliche nicht auch schrill daherkommen kann, wie sich beim Design des Süßigkeitenherstellers Drippop zeigt. Hier wechseln in Millisekunden bunte, schrille und kontrastreiche Hintergründe. Beim Scrollen wirds dann aber direkt ruhiger – mit deutlichem Fokus auf das eigentliche Produkt.

Farbwahl – ein Spagat zwischen Wirkung und Lesbarkeit

Eine grundsätzliche Entscheidung im Design des Shops ist es, welche Farben man wählt. Hierbei ist es empfehlenswert, sich erstmal mit der Wirkung einzelner Farben genauer zu beschäftigen. Denn die damit assoziierten Eigenschaften sollten die eigenen Werte des Unternehmens widerspiegeln. Besonders bei den drei Primärfarben zeigt sich, wie unterschiedlich diese wahrgenommen werden: So ist Blau eine typische Business-Farbe, – sie wirkt nüchtern, sachlich und vertrauensvoll – vermittelt dabei aber nicht zwingend Emotionen. Gelb wirkt indes warm, optimistisch und heiter, kann aber auch als aggressiv wahrgenommen werden. Rot ist bekanntermaßen die Farbe mit der größten Signalwirkung, steht für Extreme und Leidenschaft – auf diese Farbe sprechen wir sogar körperlich an, gleichsam kann sie sehr dominant und warnend wirken. Ein tieferer Blick in die Psychologie der Farben lohnt sich also, eine besonders hilfreiche Übersicht dazu hat Webdesign-Journal erstellt. 

Ebenso wichtig ist es, beim Farbdesign keine Hürden einzubauen und beispielsweise eine Rot-Grün-Sehschwäche zu berücksichtigen. Auch die Lesbarkeit sollte erhalten bleiben: „Es reicht also zum Beispiel nicht ein schönes pastellfarbenes Farbschema gefunden zu haben – bei dem aber der hellblaue Text auf hellgelbem Hintergrund nicht mehr lesbar ist“, so ein weiterer Tipp vom Webdesign-Journal. Entscheidend für die Lesbarkeit ist das Verhältnis des Kontrasts zwischen Text- und Hintergrundfarbe. Dies sollte man den Experten zufolge mit passenden Accessibility-Tools testen, beispielsweise dem Contrast Checker. 

Welche Farben überhaupt zusammenpassen, zeigen oftmals reale Ereignisse – etwa die verschiedenen Farben des Himmels beim Sonnenuntergang – aber auch Webseiten wie Adobe Color oder Color Palette Ideas bieten hier Inspiration.

Notwendige Elemente identifizieren

Welche Informationen auf der Startseite des Shops sind essenziell und welche könnten auch versteckt bzw. auf einer Unterseite stehen? Bei jedem Menüpunkt, Button, Textabschnitt, Foto, Popup etc. muss überlegt werden, ob sie das große Ganze unterstützen – oder aber davon ablenken. 

Problematisch können Slider oder Bildkarusselle sein. Sie können zwar dazu dienen, gleich auf der Startseite auf mehrere Inhalte aufmerksam zu machen. Andererseits verliert ein User schnell den Fokus, weil das Auge eher die Bewegung als den Inhalt wahrnimmt. Zudem sind bewegte Elemente für Banner typisch – viele blenden diese Elemente bereits aus („Banner blindness“) und wenn es zu viele gleichrangige Botschaften gibt, bleibt am Ende keine herausragende hängen. Das UX-Playbook von Google rät aufgrund dessen ebenfalls explizit von automatischen Bilderkarusellen ab. 

Clever gelöst haben die Integration von Bewegtbildern aber beispielsweise Webseiten für Outdoor- bzw. Sportbedarf wie Patagonia oder Adidas. Kurze Videos auf der Startseite zeigen Szenen, in denen die Kleidung bzw. Ausrüstung getragen werden bzw. die sich mit dem Tragen dieser verbinden lassen. Das sorgt für Aufmerksamkeit und vielseitige Darstellung gleichermaßen.

Optische Trennung und Mut zur Lücke

Nutzer scannen Webseiten zunächst nach den für sie relevanten Informationen ab, bevor sie sich überhaupt auf konkrete Inhalte einlassen. Optische Anker wie Trennlinien, farblich getrennte Abschnitte oder Überschriften helfen ihnen dann, sich überhaupt bzw. schnell zurechtzufinden und zu erkennen, ob das Passende dabei ist.  

Wirksam ist es, den Raum nicht komplett auszufüllen. Nicht jeder Platz auf der Shop- bzw. Startseite muss zwingend gefüllt sein. Weißraum – auch als Freifläche, Leerraum oder Negativraum bezeichnet – trägt maßgeblich dazu bei, den Blick auf das Wesentliche zu richten.

Die Freifläche sollte hierbei allerdings gezielt eingesetzt werden, so die Empfehlung des Kreativblogs 99designs: Wenn das Ziel eine Conversion ist, sollte nicht unbedingt das Logo oder das Angebot davon umgeben sein, sondern der Call to Action.  

Navigation und Bewegungen im Shop möglichst vereinfachen

Dropdown-Menüs, auch Aufklapp- oder Pulldown-Menü genannt, können u. a. in der Navigationsleiste Ordnung schaffen. Damit diese auch auf Mobilgeräten gut angezeigt werden, sollte man tendenziell auf zu viele Unterpunkte und Ebenen verzichten – 99designs empfiehlt hier maximal sieben. Google ist hier etwa wichtig, dass das Menü auf einem mobilen Display komplett auf einen Blick erfasst werden kann. Bei der Navigation ist zudem Stetigkeit geboten: Die wichtigsten Menü- und Navigationselemente sollten auf jeder Seite dieselben, sichtbar und leicht zugänglich sein. Wenn es Unterpunkte zu den Top-Kategorien gibt, sollten diese für eine bessere Nachvollziehbarkeit alphabetisch geordnet sein. 

 

Ebenso ist es sinnvoll, wenn man nach dem Hinzufügen eines Elements in den Warenkorb nicht direkt zu diesem weitergeleitet wird – auch Google warnt davor ausdrücklich. Stattdessen kann oben rechts – wo der Warenkorb bekanntermaßen hingehört! – ein Zähler darauf hinweisen, dass diesem etwas hinzugefügt wurde. Fahrradhändler Brügelmann hat hier zum Beispiel ein Mouseover eingefügt, bei dem der Nutzer im Shop bleibt, sich aber jederzeit nochmal zu seinem bereits im Warenkorb befindlichen Artikel  informieren kann. 

Innerhalb der Kategorien und bei den Suchergebnisseiten können zudem sinnvolle Filter helfen, die Auswahl der Produkte einzuschränken. Dies verringert nach Angaben von Google die Absprungrate. Auch Popups, die beim Hinzufügen eines Produkts im Warenkorb aufploppen, sind in vielen Shops bereits Standard. Hier sollte darauf geachtet werden, dass der Kunde die Wahl hat, direkt zur Kasse zu gehen oder aber weiter einzukaufen.

Sicherheit und Vertrauen schaffen

Vertrauen in ein Angebot und in den Händler selbst sind ein hohes Gut. Verschiedene Maßnahmen eines Shop-Betreibers können dazu beitragen, ein solches Vertrauen aufzubauen. Werden bestimmte Design- und Usability-Elemente auf Webseiten integriert, können diese dem Käufer zusätzlich Sicherheit bieten. Grundsätzlich gilt hierbei: Relevante Informationen dürfen nicht versteckt sein, sondern müssen dann ersichtlich sein, wenn der Kunde sie benötigt.

Neben der typischen Position des Warenkorbs sollten auch weitere Webseiten-Elemente stets an gewohnter bzw. erwarteter Stelle sichtbar sein. Das gilt etwa für die Navigationsleiste oben links, oder den Informationen zu Impressum, AGB und Datenschutzerklärung sowie Kontaktoptionen im Footer. Hier sind die Links zu den Rechtstexten im Übrigen am besten aufgehoben, denn sie sollten stets von überall – also auch auf jeder Unterseite – auffindbar sein.

Auch echte Kundenbewertungen („social proof“), Gütesiegel, die Ausweisung renommierter Partner oder Marken können zur Vertrauensbildung beitragen. Für einen nachvollziehbaren Kaufprozess ist außerdem hilfreich, bei mehr als zwei Schritten diese sichtbar mitzuzählen, etwa im Stil Schritt 1 von 4 oder mit einem Fortschrittsbalken. 

Diese Elemente verbessern den Warenkorb und helfen beim Kaufabschluss

Ein besonders heikler Punkt, bei dem es leicht zu Kaufabbrüchen kommen kann, ist der Warenkorb selbst. Daher gilt es vor allem hier, den Nutzer umfassend über das zu informieren, wozu er vor dem Kaufabschluss fragen hat.

Im Warenkorb sind deshalb mindestens die folgenden Angaben wichtig für Nutzer:

• Name bzw. Produktbezeichnung aller Artikel
• Produktbild 
• wichtigste Produktinformationen (z. B. Größe, Farbe)
• Mengenangabe
• Anzahl aller Artikel im Warenkorb
• Einzelpreis je Produkt
• Gesamtpreis des Warenkorbs mit dem Zusatz inkl. Mehrwertsteuer
• Gesamtpreis des Warenkorbs ohne Mehrwertsteuer
• Versandkosten
• Angabe der kompletten zu zahlenden Summe inkl. Mehrwertsteuer
• das voraussichtliche Lieferdatum
• Hinweise zu den Zahlarten
• ggf. Optionen zum Einlösen von Gutscheincodes
• Informationen zur grundsätzlichen Möglichkeit von Retouren
• bestenfalls mehrere Kontaktmöglichkeiten 

Auch ist es hier möglich, beim Nutzer zusätzlich mit der Gestaltung zu punkten und dabei weitere Trust-Elemente zu integrieren: Otto-Tochter Bonprix hat beispielsweise neben eingängigen Icons zur Lieferung, Retouren und Rechnung auch ein Qualitätssiegel sowie ein Hinweis zur sicheren, verschlüsselten Zahlungsübermittlung im Warenkorb abgebildet. Außerdem lässt sich der Artikel selbst auch nochmal ändern, entfernen oder später kaufen und der Shop hält an dieser Stelle sogar noch weitere Kauf-Inspirationen bereit.

Abschließend lässt sich auch beim Bezahlvorgang die Usability optimieren. Hier ist besonders darauf zu achten, dass nicht jeder Nutzer unbedingt ein Kundenkonto einrichten will – ein Drittel bricht laut einer Google-Studie den Kauf in diesem Fall ab. Daher sollte es möglich sein, auch als Gast Artikel zu kaufen. Wenn es weniger als zwei Zahlmethoden gibt, sollten diese zudem nicht mit einem Drop-Down-Menü abgebildet werden, sondern einfach untereinander stehen und per Checkbox auswählbar sein.

Gamer schätzen den Dark Mode – Aktuelle Design-Trends beachten

Nicht ganz neu, aber noch relativ jung ist der Dark Mode: Nutzer können auf ihren Mobilgeräten in den Modus umschalten, dann werden weiße Flächen schwarz und Texte invertiert dargestellt. Noch nicht allzu viele Webseiten können auch in diesem Modus angeschaut werden: „Mit einer umschaltbaren Website können Sie so aktuell auf jeden Fall aus der Masse herausstechen“, empfiehlt die Design-Agentur Dreibein in ihrem Blog und hat hierzu auch konkrete Design-Tipps parat.

Da wir das Lesen von schwarzen Zeichen auf weißem Grund gewöhnt sind, sollte in diesem Fall der Zeilen- und Wortabstand minimal erhöht werden. Bilder wirken auf dunklen Untergründen heller und sollten automatisch abgedunkelt werden. Schlagschatten, mit denen Produkte hervorgehoben werden, über die Nutzer gerade mit der Maus fahren, sind auf dunklen Hintergründen nicht sichtbar. Hier sollten stattdessen Farbveränderungen oder Vergrößerungen eingesetzt werden.

Neben dem Dark Mode, dessen Ansicht bei Gamern besonders beliebt ist, lohnt sich auch ein weiterer Blick auf aktuelle Trends. Eine Übersicht über Design-Trends für das aktuelle Jahr findet sich etwa bei Costal Creative oder bei Designbote. 

Konfetti geht immer

Während Stetigkeit und Informationen an gewohnter Position Vertrauen schaffen können, lässt sich an anderer Stelle mit den Erwartungen der Nutzer spielen. So kann der Shopping-Prozess noch mehr zum Erlebnis werden. Beispielsweise zeigt der Hautpflege-Anbieter Aesop einige seiner Produkte in Tuben nicht mit Standard-Produktbildern, sondern sozusagen „benutzt“ in Form einer zerdrückten Tube an.

Um dem Nutzer den Kaufabschluss zu versüßen und diesen angemessen zu zelebrieren, hatte der Bio-Tee-Shop trinkmeertee.de aus Bremen eine kluge und witzige Idee: Hier regnet nämlich nach Bestellabschluss Konfetti über den Bildschirm. Konfetti geht bekanntlich immer – der Shop verfügt aber auch darüber hinaus über ein ansprechendes und durchdachtes Layout. Wer noch mehr kreativen Input und ausgefallenere Design-Lösungen sucht, für den sei auf den Twitterkanal @Siteswelike hingewiesen. Hier empfehlen Design-Experten von DesignmadeinGermany regelmäßig ihre Lieblingskreationen im Web.

Letztlich gilt es, bei einer Design-Optimierung jene Gestaltungselemente zu finden, die tatsächlich zur eigenen Marke, Zielgruppe und zum Shop-Angebot passen und den gewünschten Erfolg mit sich bringen. Daher ist eines der wichtigsten Gebote bei Anpassungen, mittels A/B-Tests herauszufinden, welche Elemente, Platzierungen, Funktionen, Farben, Schriften und Formatierungen bei welchen Nutzergruppen die meisten Conversions liefern.