Versandkosten im Onlineshop müssen kein Kaufhemmnis sein

Nicht jeder Onlineshop kann sich eine komplett versandkostenfreie Lieferung leisten.
Aber wie am besten mit den Versandkosten umgehen, um den potentiellen Käufer nicht zu vergraulen?
Und wie können weitere Kaufanreize geschaffen werden durch eine versandkostenfreie Lieferung ab einem bestimmten Warenwert?

Das Thema Versandkosten kann für den Interessenten in einem Onlineshops schnell zum Frustthema werden. Gerade hat der Besucher viel Zeit investiert, um sich sein passendes Produkt herauszusuchen, er hat sich detailliert mit dem Produkt auseinandergesetzt und weiß „das ist das Produkt, was ich haben möchte.“

Und in dem Moment geht sie los, die Suche nach der Höhe der Versandkosten. Denn bevor der Nutzer einen Artikel bestellt, möchte er ganz genau wissen, wieviel er am Ende bezahlt. Für den Nutzer sind die Versandkosten keine extra Kosten, sondern gehören zu den Artikelkosten dazu. Es interessiert nur „wieviel bezahle ich am Ende?“.

In den meisten Onlineshops wird auf der Produktdetailseite ein Link zu den Versandkosten angeboten. Direkt unterhalb oder neben dem Artikelpreis. Das ist aus User Experience Sicht auch der richtige Ort, um den Nutzer über Versandkosten zu informieren.

Eine Information zu den Versandkosten sollten immer auf der Produktdetailseite und direkt beim Preis angezeigt werden, wie hier in diesem Beispiel mit dem Link ‚zzgl. Versandkosten‘.


Nun das Problem. Mit Aufrufen der Versandkosten (also durch Anklicken des Links ‚zzgl. Versandkosten‘) kann es passieren, dass der Nutzer weg ist. Verloren auf der Suche nach den Kosten, weg vom Produkt. Und dabei war er doch fast dabei, das Produkt in den Warenkorb zu legen und zu kaufen.

Sitzt der Nutzer an einem PC oder Laptop, gibt es eine schnelle Lösung für das Problem. Der Link zu den Versandkosten sollte keine neue Seite öffnen, sondern sich nur als Layer über die Artikeldetailseite legen. So kann der Nutzer einfach zu seinem gewünschten Produkt zurückkehren, in dem er den Layer schließt.

In der Desktop-Version sollten sich die Informationen zu den Versandkosten als Layer öffnen und sich nur über die Seite legen. So kann der Nutzer jederzeit problemlos zu seinem Artikel zurückkehren.


Verwendet der Nutzer jedoch ein Handy, verdeckt der Versandkosten-Layer in der Regel die komplette Seite. Und besitzt der Nutzer ein Handy mit Zurück-Taste, wie z.B. ein Samsung Handy, so kann folgendes passieren: er klickt auf den Versandkosten-Link >> er liest sich die Versandkosten durch >> er betätigt seine Zurück-Taste am Handy, weil er die Versandkosten wieder schließen möchte und ist weg von seinem gewünschten Produkt. Die Zurück-Taste geht einen kompletten Schritt zurück, also auf die Suchergebnisliste oder Produktübersichtsseite oder welche Seite auch immer der Nutzer vorher aufgerufen hat.

image description

Kostenloses Webinar: 11 Hacks für eine bessere Conversion Rate!

Möchtest Du weitere praktische Tipps erhalten, wie Du Deinen Onlineshop optimierst? Dann melde Dich für mein kostenloses Webinar jetzt an!

Kostenlos anmelden

Warum schließt der Nutzer den Versandkosten-Layer nicht einfach über das Schließen-X? Warum muss er auch die Zurück-Taste verwenden? Das Verwenden der Zurück-Taste ist „leider“ ein gelerntes Verhalten, was der Nutzer nicht ablegt, nur weil er einen Schließen-Button angeboten bekommt. Und dadurch, dass der Layer über der kompletten Seite liegt, hat der Nutzer mobil das Gefühl, dass eine neue Seite geöffnet wurde, von der er einfach wieder „zurück“ gehen kann.

In der mobilen Version verdeckt der Versandkosten-Layer meist die gesamte Seite, wie in diesem Beispiel. Für den Nutzer macht es den Anschein, dass eine komplett neue Seite geöffnet wurde, die mit der Zurück-Taste des Handys (wie z.B. bei Android) wieder geschlossen werden kann. Leider ist dem nicht so. Über die Zurück-Taste hat er die Artikeldetails verlassen und ist wieder einen Schritt mehr vom Kaufprozess entfernt.


Und nun die Lösung dieses Problems


Der Versandkosten-Layer sollte sich so über die Seite legen, dass er auch in der mobilen Darstellung nicht die komplette Seite verdeckt. Otto.de macht es vor. Der Versandkosten-Layer schiebt sich animiert von unten nach oben auf die Seite und verdeckt nicht 100% der Seite. Der Nutzer sieht im Hintergrund noch seinen Artikel. Durch die Animation und den Artikel im Hintergrund wird der Nutzer eher dazu angeregt, das Schließen-X des Layers zu verwenden und bleibt auf der Artikeldetailseite.

In diesem Beispiel sieht der Nutzer durch die Animation des Versandkosten-Layers und durch die Gestaltung, dass sich der Layer nur über die Artikelseite gelegt hat und über das Schließen-X wieder weggeklickt werden kann.


Bietet ein Onlineshop eine versandkostenfreie Lieferung ab einem bestimmten Bestellwert an, so sollte das den Besuchern klar und deutlich kommunizieren werden. Das ist ein Mehrwert des Shops und kann den Nutzer dazu anregen, mehr zu kaufen als ursprünglich geplant.

Wird beispielsweise der Versand ab 50€ kostenfrei und liegt der durchschnittliche Produktwert des Onlineshops bei 25€, könnte dies den Nutzer dazu anregen, zwei der Produkte zu kaufen statt nur eins. In Punkto Versandkosten sind die Nutzer meist sehr geizig, da sie keine Gegenleistung dafür erhalten. Dass der Artikel nach Hause geliefert wird, ist selbstverständlich und wird nicht als Leistung angesehen.

Wie nun aber den kostenlosen Versand ab einer bestimmten Höhe bewerben?


Auf jeden Fall auf der Startseite. Und wenn die Wahrscheinlichkeit in einem Onlineshop sehr hoch ist, dass die Nutzer keine Versandkosten bezahlen müssen – weil die meisten Produkte teurer sind, dann sollte die Information am besten immer präsent sein. Aus User Experience Sicht empfiehlt sich, die Information ‚kostenloser Versand ab X €‘ in den oberen Navigationsheader zu integrieren.

Und wenn der Nutzer einen Artikel aufgerufen hat, der über der Versandkosten-Marke liegt, dann sollte ihm das kommuniziert werden. Am Artikelpreis sollte auffällig geschrieben stehen, dass der Artikel versandkostenfrei geliefert wird. Nichts liest ein potentieller Käufer lieber als das und dies könnte den entscheidenden Anstoß geben, den Artikel tatsächlich zu kaufen. Und wenn nur in ein bestimmtes Land kostenlos geliefert wird, dann sollte eben das kommuniziert werden: „Versandkostenfrei in Deutschland“.

Eine versandkostenfreie Lieferung sollte klar kommuniziert werden, da es ein Verkaufsargument ist. In diesem Beispiel sieht der Nutzer erst nach Herunterscrollen, dass der Artikel versandkostenfrei ist. Direkt unter dem Preis steht ‚Endpreis zzgl. Versandkosten‘, was darauf hindeuten könnte, dass noch Versandkosten dazukommen.


Das gleiche gilt natürlich auch für den Warenkorb. Hier sollte dem Nutzer gut sichtbar mitgeteilt werden, wenn keine Versandkosten entstehen.

Und liegt der Nutzer nur knapp unter dem Wert für eine versandkostenfreie Lieferung, sollte er auch darauf aufmerksam gemacht werden. Vielleicht wird er so angeregt, ein weiteres Produkt zu kaufen. Beispielsweise könnte er den Hinweis erhalten „Bestelle für weitere X € und die Lieferung ist versandkostenfrei.“

In diesem Beispiel erhält der Nutzer einen Hinweis im Warenkorb, dass die Lieferung in Deutschland versandkostenfrei wäre, wenn er für weitere 24,30€ einkauft. Dies könnte ein Anreiz sein, den Warenkorb weiter zu füllen.


image description

Kostenloses Webinar: 11 Hacks für eine bessere Conversion Rate!

Möchtest Du weitere praktische Tipps erhalten, wie Du Deinen Onlineshop optimierst? Dann melde Dich für mein kostenloses Webinar jetzt an!

Kostenlos anmelden

Gratis User Experience Check

UX-Check

Lass die Benutzerfreundlichkeit Deines Shops von einem Experten analysieren und verbessere somit Deine Conversion Rate.

Gratis UX Check buchen

Gratis Webinar

In meinem Webinar zeige ich Dir 11 Fehler, die Dich in Deinem Onlineshop viele Kunden kosten und die Du vermeiden solltest.

Zum Webinar anmelden

Facebook-Gruppe

In meiner Facebook-Gruppe erwarten Dich tolle Tipps, wie Du die User Experience Deines Onlineshops verbessern kannst und ein Austausch mit Gleichgesinnten.

Zur Facebook-Gruppe