10 Tipps zur Usability-Optimierung von Online-Shops

Für Online-Shops ist das Thema Usability im Sinne von Benutzerfreundlichkeit essentiell. Ist anderswo die Motivation für benutzerfreundliche Webseiten von diversen Motiven oft nur spärlich gefördert, geht es bei Shops ums Geld. Und damit wird zumindest schlechte Usability im E-Commerce zu einem enormen Hebel in negativer Hinsicht. Folgende 10 Tipps zur Usability-Optimierung von Online-Shops machen auch Deinen Shop besser.

Usability bei Online-Shops

Bei Online-Shops ist Usability immer ein Thema. Denn zu den Pflichtelementen wie Warenkorb, Konto, Login, Registrieren, rechtlichen Seiten wie Datenschutz, Impressum, AGB, Versandkosten usw. kommen die zahlreichen Produkte, Kategorien, Aktionen, Suchfeld, Vorteile usw. Dazu verwenden in der Regel die meisten Nutzer ein kleines Smartphone. Es ist also keine einfache Aufgabe, dies alles einfach und intuitiv, dazu noch ansprechend zu gestalten.
Der Hebel bei Verbesserungen ist auf der anderen Seite enorm. Man stelle sich nur vor, statt 3 % kaufen auf einmal 6 % im Online-Shop. Es kaufen immer noch 94 % nicht, dennoch hat man den Umsatz vermutlich in etwa verdoppelt.
Oft läuft dies auch unter Landingpage-Optimierung oder Conversion-Optimierung. Das Ziel ist trotz inhaltlich unterschiedlicher Schnittmengen doch fast immer das gleiche. 100% aller Besucher sollen kaufen. Natürlich gibt es auch Abstufungen und Ausnahmen, die uns aber hier nicht weiter beschäftigen sollen.

Tipp: Besuchertypen des Shops

Usability-Optimierung bei Online-Shops beginnt bereits bei der Zielgruppe. Neben deren Auswahl, Bedarf, Ansprache usw. geht es für die Usability vor allem um die Besuchertypen (Personas). Diese sollte man für folgende Aspekte gruppieren:

• Produktwissen
• Online-Shop-Erfahrungen
• Position im Kaufprozess

Daraus lassen sich folgende Grundregeln ableiten:

In der Praxis hilft es häufig, diese Überlegungen für jede Seitenart getrennt zu diskutieren. Beispielsweise für:

• Erster Eindruck: Ansprache, Vertrauen, Fokus
• Suchen und Finden: Navigation, Kategorieseiten, Suchfunktion
• Vergleich: Filter, Produktdetailseiten
• Kaufabschluss: Call-to-Action, Einwände
• Checkout: Warenkorb, Bestellschritte
• Wiederkauf: nach Bestellung

10 Tipps zur Usability-Optimierung von Online-Shops

Generell kann man folgende 10 Tipps herauskristallisieren, die beinahe jeden Online-Shop besser machen was die Usability betrifft.

1. Tolle Produktfotos

Bilder wirken. Sehr gute Produktfotos sind daher extrem wirksam. Es kann folglich Sinn machen, die Produkte nochmals selbst zu fotografieren, wenn die Herstellerfotos nicht einheitlich in bester Qualität und Art sind. Qualität suggerieren beispielsweise sehr gute Detailaufnahmen. Das macht etwa Apple sehr gut. Dort ist der eigentliche Shop auch dezent ausgelagert aber vielfach clever an die primär unkommerziellen Produktseiten angebunden.

2. Einfache Navigation(en)

Klassische Shops überfordern den Besucher bei der Navigation. Es gibt auch viele wichtige Links, allein im Kopfbereich die Produktnavigation, Suche, Warenkorb, Anmelden, Registrieren usw. Aber nicht jeder Link muss überall platziert werden. Man sollte sich auf den Schwerpunkt (je Benutzertyp und konkreter Funktion) konzentrieren. Im Warenkorb sind andere Links wichtig wie auf der Startseite oder Kategorieseiten. Weniger ist mehr.

Negativ-Beispiel: Porsche Design Shop

Je nach Auflösung fällt bei Porsche das Corporate Design im Online-Shop in sich zusammen.

3. Klare Benutzerführung

Mache es dem Käufer einfach. Alles was weg kann, kann weg.
Wichtig sind klare Handlungsaufforderungen mit klaren Buttons, die nicht um Aufmerksamkeit mit anderen umgebenden Elementen konkurrieren müssen. Die Gestaltgesetze laufen hier miest auf Weißraum und Farbkonzept hinaus.
Diese Call-to-Action-Buttons, auch BOB (für big orange button) genannt, sind eine wichtige Brücke auf dem Weg vom Besucher zum Käufer.
Bewährte Tipps:

• Nutzen nennen
• aktive, eindeutige Verben
• gut sichtbare Platzierung
• Aufmerksamkeit durch Kontrast und Abstand
• eindeutig als Button erkennbar

Extremes Beispiel: Dropbox

4. Emotionen wecken

Auch wenn obiger Shop manche Dinge nicht gut löst, durch Fotos, Farben und Gestaltung vermittelt der Shop sehr gut die gewünschte Stimmung und schafft damit die passende Atmosphäre für die Produkte. Leider nutzen selbst Outdoor-Shops dies nicht oder nur unzureichend.

5. Gelerntes Shop-Layout einsetzen

Je nach Benutzertyp sollte man sich mehr oder noch mehr an das gelernte, typische Shop-Layout anlehnen. Denn der Käufer sollte nicht suchen müssen, sondern alle Funktionen dort finden, wo er sie erwartet.
Diese Erwartungshaltung verändert sich auch im Laufe der Zeit und ist auch je nach Endgerät leicht unterschiedlich.
Derzeit kann man generell für Desktop-Geräte folgendes festhalten:

• Warenkorb ist rechts oben
• Suche ist oben mittig oder rechts
• Registrieren, Login ist oben rechts
• Sprachwahl ist oben rechts oder mittig

Orientieren kann man sich an prägenden bekannten Shops wie Zalando und Co.

6. Produktdetails

Die Produktdetailseite ist sehr wichtig. Das ist den meisten Shopbetreibern klar. Hier gilt es neben der Benutzerführung (vgl. oben) den Platz optimal zu nutzen, zumal häufig viele Informationen vorhanden sind. Obiges Beispiel zeigt ein klassisches Layout, das derzeit als bewährt gelten kann.
Je nach Produkt und Benutzertyp kann es aber wichtig sein, weitere Details und Vorzüge hevorzuheben. Dazu zwei sehr gute Beispiele:

7. Intelligente Produktfilter und Produktsuche

Wer im Shop suchen muss, hat ein Problem. Je nach Passion und Alternativen minimiert sich die Geduld der Suchenden. Aus Shop-Sicht ist der Besucher praktisch gleich weg. Daher sind die Suche generell sowie Produktfilter bei mehreren Produkten sehr wichtig. Denn wenn diese nicht intuitiv, korrekt und wie erwartet funktionieren, gibt es keine zweite Chance. Der Frust ist zudem beim Besucher groß. Daher plädiere ich lieber dazu Filter sparsam einzusetzen, dafür lieber mit Kategorien, Bestsellern etc. arbeiten, um die Produktanzahl soweit zu reduzieren, dass eine Filterung einfach bleiben kann.
In obigem Beispiel macht Zalando das trotz enorm vieler Filter recht gut:

• Wegweiser-Pfad-Navigation (Breadcrumb)
• Klare Kategorieüberschrift mit Gesamtzahl der Produkte
• Eindeutige Filter (insgesamt acht (!) Stück, von denen aber nur die vier wichtigsten eingblendet sind)
• intuitive Sortierung
• Klare Kategoriebox links

8. Vertrauen durch Siegel, Bewertungen, Social Media

Besonders deutsche Käufer achten sehr auf die Vertrauenswürdigkeit von Shops. Neben SSL für persönliche Dateneingaben geht es dabei um Markenbekanntheit, Trustsiegel (Trustes Shops, TÜV, …), Kundenbewertungen aber auch Social Media spielt hier eine wichtige, wenngleich meist subtile Rolle.
Kundenbewertungen sind immer wie ein offenes Visier, aber mit enormer Wirkung, wenn man sie wie Amazon aber auch Zalando geschickt einsetzt.

9. Schnelle Ladezeiten steigern die Conversion-Rate

Shop-Software erfordert meist viele Server-Ressourcen. Beliebte Shop-Systeme wie Magento benötigen speziell potente Server, um akzeptable Ladezeiten zu erreichen. Es gibt genügend Studien, die klar belegen, wie die Kaufrate (Conversion-Rate) mit jeder Zehntelsekunde Ladezeit sinkt.
Dynamisches Nachladen weiterer Produkte beim Scrollen mag die initiale Ladezeit verkürzen, muss dann aber auch flott funktionieren. Der größte Hebel wäre hier sicherlich die Wahl einer effizienten Shop-Software mit einem leicht überdimensionierten Webhosting. Aber selbst ohne diesen Wechselaufwand kann man mit klassischer Ladezeitoptimierung einiges erreichen.

10. Shop-Usability testen (lassen)

Ein Usability-Test lohnt sich schon in kleinem Maßstab. Frage einen Bekannten, der den Shop nicht kennt, ob er wenige Minuten für einen Test Zeit hat. Stelle dieser Person eine konkrete Aufgabe vorab, etwa „finde ein Geschenk für … bis 100 Euro und lege es in den Warenkorb!“.
Dabei schaut man dem Probanden über die Schulter und bittet ihn laut die Gedanken zu äußern. Ansonsten ist keinerlei Hilfestellung erlaubt.
Ansonsten gibt es auch recht günstige externe Tester, etwa bei rapidusertests oder inspectlet.

Weiterführende Links zu Usability und Online-Shops

• http://blog.kununu.com/2014/02/frisches-design-hohe-usability-kununu-com-seit-heute-in-neuem-look/ (Admin: offline 09/2024)
• Inspirierende Shop-Designs – nicht immer mit guter Usability
• Anregungen zum Shopping-Trend mobile