Sieben Empfehlungen für ein gutes Widerrufsbutton-Design
Wie sieht ein Widerrufsbutton aus, der die neue EU-Pflicht erfüllt und gleichzeitig die normale Kaufkonversion im Shop nicht beeinträchtigt? Eine Sammlung praktischer Empfehlungen aus unserer Beratungsarbeit.
Ein Widerrufsbutton muss zwei Dinge gleichzeitig leisten: die rechtliche Anforderung erfüllen, gut auffindbar zu sein, und die normale Kaufkonversion nicht stören. Beide Ziele stehen in der Praxis oft gegeneinander. Wir haben aus der Beratungsarbeit die wichtigsten Empfehlungen zusammengetragen.
1. Position: schwebend in der unteren rechten Ecke
In den meisten Shops landet der Blick nach dem Scannen einer Seite in der unteren rechten Bildschirmecke. Genau dort ist ein schwebender Widerrufsbutton gut auffindbar, ohne die Hauptinhalte zu überdecken.
Empfehlung: schwebender Button unten rechts, mit etwas Abstand zum Rand. Vermeiden würden wir Positionen, an denen Cookie-Banner liegen (meist unten links) oder die mit der eigentlichen Navigation konkurrieren (oben rechts, Mitte).
2. Größe: groß genug für Touch-Bedienung
Auf Smartphones brauchen Klickflächen Platz. Apple empfiehlt in den Human Interface Guidelines mindestens 44 × 44 Pixel, Google im Material-Design 48 × 48 Pixel. Diese Empfehlungen gelten auch für den Widerrufsbutton, sonst wird das Tippen auf dem Handy unsauber.
3. Farbkontrast: gut sichtbar, aber nicht in Konkurrenz zum Kauf-CTA
Der Button muss sich vom Hintergrund deutlich abheben, sollte aber nicht mit der Hauptaufforderung im Shop (etwa „In den Warenkorb”) konkurrieren. Bewährt: für die Kauf-Aktion die Markenfarbe verwenden, für den Widerrufsbutton einen neutralen Ton wie Dunkelgrau oder Schwarz auf hellem Hintergrund.
4. Beschriftung: klar als Widerruf erkennbar
Der Button sollte unmissverständlich als Widerruf erkennbar sein. Eine eindeutige Beschriftung wie „Vertrag widerrufen” oder „Widerruf erklären” funktioniert in der Praxis besser als abstraktere Bezeichnungen oder rein symbolische Lösungen.
5. Hover-Verhalten: Vertrauen aufbauen, nicht verunsichern
Wenn die Maus über dem Button schwebt oder auf dem Handy ein „Tap-and-Hold” gemacht wird, kann ein kurzer Zusatzhinweis das Vertrauen erhöhen, etwa: „14 Tage Widerrufsrecht nach §355 BGB”. Das beruhigt unsichere Nutzerinnen und Nutzer und verhindert zugleich versehentliche Klicks.
6. Auf dem Handy lieber ein Bottom-Sheet als ein Modal
Modal-Popups in der Bildschirmmitte funktionieren auf dem Handy oft schlecht, sie blockieren die Tastatur und wirken ungewohnt. Ein Bottom-Sheet, das von unten in den Bildschirm gleitet, ist die mobiltypische Darstellung und respektiert die Eingabe-Tastatur.
EU Widerrufs-Button Pro übernimmt diese Unterscheidung automatisch: Auf dem Desktop kommt je nach Einstellung ein Seitenpanel oder ein Popup, auf dem Smartphone wird daraus ein Bottom-Sheet.
7. Beim geöffneten Warenkorb in den Hintergrund treten
Ist der Warenkorb-Drawer geöffnet, sollte der Widerrufsbutton kurz ausgeblendet werden, sonst überlagert er die Schaltflächen, die jetzt wichtig sind (Checkout, Mengenanpassung). EU Widerrufs-Button Pro macht das von Haus aus.
Was du jetzt selbst tun kannst
Die meisten Punkte oben sind in EU Widerrufs-Button Pro bereits als Standard hinterlegt. Wenn du dein bestehendes Setup gegenchecken willst:
- Nutze unseren Abmahn-Risiko-Rechner.
- Richte die kostenfreie Version der App ein.
- Mach einen Test auf einem echten Smartphone, die Browser-Devtools simulieren das nur unzureichend.
Dieser Beitrag ist redaktionell recherchiert und ersetzt keine Rechtsberatung im Einzelfall.