Kaufhebel · Erster Eindruck
Auf vielen Produktseiten ist alles gleich laut: fünf Farben, drei Buttons, Banner über dem Produkt. Der Besucher muss erst sortieren, bevor er entscheiden kann. Eine klare Hierarchie nimmt ihm diese Arbeit ab – mit Größe, Kontrast und Abstand statt mit mehr Elementen.
Live-Demo
Beide Varianten enthalten fast dieselben Informationen. Schalte um, zieh dann den Regler für den Unschärfe-Test nach rechts und achte darauf, was du noch erkennst.
Beispiel-Rösterei
Schokoladig und mild – gelingt auch in einfachen Siebträgern ohne langes Einstellen.
Grundpreis 51,60 €/kg. Preise inkl. MwSt., Versandkosten siehe Versandseite.
Den Unschärfe-Test kannst du mit jeder eigenen Seite machen: Screenshot, Weichzeichner drauf – oder einfach zwei Meter vom Bildschirm weggehen. Prüf zuerst die mobile Ansicht: In vielen Shops kommt ein Großteil der Besucher über das Handy.
Wir machen den Unschärfe-Test mit deiner echten Produktseite – und sagen dir, was zuerst weg oder leiser muss.Kostenloser 30-Minuten-Call · unverbindlich · per Video oder Telefon
30 Min. sprechen: Meine ProduktseiteDie Psychologie dahinter
Was nah beieinander steht oder gleich aussieht, liest das Auge als zusammengehörig – so beschreiben es die Gestaltgesetze. Preis, Grundpreis und Versandhinweis gehören deshalb in einen Block. Stehen sie verstreut, wirkt die Seite unordentlich, auch wenn alles da ist.
Was sich von seiner Umgebung abhebt, wird eher bemerkt und erinnert – in der Psychologie als Von-Restorff-Effekt bekannt. Das funktioniert nur, solange es ein einziges hervorgehobenes Element gibt. Fünf Signalfarben heben sich gegenseitig auf.
Blickverlaufsstudien, etwa der Nielsen Norman Group, beobachten auf textlastigen Seiten oft ein F-förmiges Muster: oben quer, dann am linken Rand nach unten. Das ist kein Naturgesetz, aber ein guter Grund, Wichtiges oben und links zu beginnen – und den Button nicht an den Rand zu schieben.
Dazu kommt eine einfache Beobachtung: Je mehr gleichwertige Optionen, desto länger dauert die Wahl (in der Forschung als Hick-Hyman-Gesetz beschrieben). Ein Hauptbutton ist schneller entschieden als vier.
Werkzeug
Trag die Schriftfarbe und die Farbe deines Buttons ein. Der Rechner ermittelt das Kontrastverhältnis nach der Formel der WCAG – genau der Maßstab, an dem Barrierefreiheit meist gemessen wird.
Typische Fälle zum Ausprobieren
Kontrastverhältnis
So liest sich normaler Text in diesen Farben.Und so kleiner Hinweistext, etwa zu Versand oder Grundpreis.
Großer Text heißt nach WCAG etwa ab 24 px, fett etwa ab 19 px. Die Stufe AA ist der übliche Maßstab. Der Rechner prüft Farben, nicht Schriftgröße, Hover-Zustände oder Bilder im Hintergrund.
Reihenfolge
Mehr zum Text im Beschreibungsblock: Gute Produktbeschreibungen schreiben · Zu Bildern: Produktfotos, die verkaufen
Ehrlich abgewogen
Rechts-Ampel
Die Gestaltung selbst ist frei – aber beim Aufräumen dürfen Pflichtangaben nicht verschwinden.
Stand 10/2026. Das ist eine Einordnung aus der Praxis, keine Rechtsberatung. Für verbindliche Prüfungen arbeiten wir mit der IT-Recht Kanzlei zusammen.
Umsetzung
Meist geht es weniger um neue Elemente als um Reihenfolge, Größen und Farben in der Vorlage – einmal richtig gemacht, gilt es für alle Produkte.
| Plattform | So wird es gebaut | Aufwand | Worauf wir achten |
|---|---|---|---|
| WooCommerce | Klassische Themes: Reihenfolge in der Produkt-Zusammenfassung über die Prioritäten am Hook
woocommerce_single_product_summary (Titel, Preis, Kurzbeschreibung, Button) im Child-Theme anpassen.
Block-Themes: Vorlage „Einzelnes Produkt“ im Website-Editor umbauen. | 1–3 Tage | Plugins für Grundpreis und Rechtstexte hängen sich an feste Stellen – nach dem Umbau prüfen, dass Grundpreis und Versandhinweis weiter direkt am Preis stehen. Änderungen nie direkt im Eltern-Theme. |
| Shopify | Produktvorlage im Theme-Editor: Blöcke im Produktabschnitt sortieren, überflüssige ausblenden, Button-Stile und Farben in den Theme-Einstellungen zentral festlegen. | 0,5–2 Tage | Apps fügen eigene Blöcke und Banner ein – die gehören in die Reihenfolge, nicht obendrauf. Farbschemata des Themes auf Kontrast prüfen, auch für Hover und deaktivierte Buttons. |
| Beide | Zuerst die mobile Ansicht festlegen, dann den Desktop. Ein einheitlicher Stil für den Hauptbutton im ganzen Shop, ein zurückhaltender für alle Nebenaktionen. | +0,5 Tag | Unschärfe-Test und Kontrast-Check vor und nach dem Umbau. Verkaufszahlen der Produktseiten vorher festhalten, sonst lässt sich die Wirkung später nicht vergleichen. |
Aus Shop-Checks
Warenkorb, Merkliste und Anfrage in derselben Farbe und Größe. Der Besucher muss lesen, um zu wählen – und der wichtigste Button verliert seine Sonderstellung.
Die Markenfarbe ist ein helles Cyan oder Orange, darauf weiße Schrift. Sieht modern aus, erreicht aber oft nicht einmal 3:1 – draußen am Handy kaum lesbar.
Newsletter-Hinweis, Aktionsleiste und Cookie-Banner schieben das Produkt mobil aus dem ersten Bildschirm. Der erste Eindruck ist Werbung statt Ware.
Beim Aufräumen wandert der Grundpreis in die Zusatzinformationen. Die Seite wirkt ruhiger – und ist nicht mehr korrekt ausgezeichnet.
Die gewählte Größe ist nur etwas dunkler umrandet. Wer Farben schlecht unterscheidet, weiß nicht, was er gerade in den Warenkorb legt.
Wir schauen uns deine Produktseite mobil und am Desktop an – im kostenlosen 30-Minuten-Call.
Häufige Fragen
Dass die Elemente nicht gleich laut sind, sondern eine Rangfolge haben: Produktbild und Produktname zuerst, dann Nutzen und Preis, dann genau ein Button, der sich klar von allem anderen abhebt. Größe, Kontrast, Farbe, Abstand und Position bestimmen diese Rangfolge. Ohne Hierarchie muss der Besucher selbst sortieren - und viele tun das nicht, sondern gehen.
Du betrachtest die Seite unscharf - mit zusammengekniffenen Augen, aus einigen Metern Abstand oder mit einem Weichzeichner auf einem Screenshot. Texte sind dann nicht mehr lesbar, übrig bleiben Flächen, Größen und Kontraste. Wenn du trotzdem sofort erkennst, wo das Produkt, der Preis und der Kaufen-Button sind, stimmt die Hierarchie.
Der übliche Maßstab sind die Web Content Accessibility Guidelines (WCAG) auf Stufe AA: mindestens 4,5 zu 1 für normalen Text und mindestens 3 zu 1 für großen Text sowie für grafische Bedienelemente. Weiße Schrift auf hellen Blau-, Grün- oder Orangetönen fällt oft durch. Der Kontrast-Rechner auf dieser Seite prüft deine Farben direkt.
Seit 28. Juni 2025 gelten für viele Online-Shops, die an Verbraucher verkaufen, Barrierefreiheitsanforderungen - in Deutschland nach dem Barrierefreiheitsstärkungsgesetz, in Österreich nach dem Barrierefreiheitsgesetz. Ausgenommen sind bei Dienstleistungen Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Ob dein Shop betroffen ist, solltest du im Einzelfall prüfen lassen. Klare Struktur und ausreichender Kontrast helfen in jedem Fall.
Es gibt keine Farbe, die immer am besten verkauft. Entscheidend ist, dass sich der Button deutlich von seiner Umgebung abhebt, ausreichend Kontrast zur Schrift hat und dass diese Farbe auf der Seite für nichts anderes verwendet wird. Dann lernt das Auge: diese Farbe bedeutet die Hauptaktion.
Einen auffälligen Hauptbutton, meist In den Warenkorb. Merkliste, Frage stellen oder Teilen dürfen da sein, aber deutlich zurückhaltender - als Textlink oder mit Rahmen statt Füllung. Stehen drei gleich starke Buttons nebeneinander, muss der Besucher erst überlegen, welcher der richtige ist.
Weitere Kaufhebel
Alle 18 Kaufhebel und der Selbst-Check → · Mehr Besucher? Die Sichtbarkeitshebel →
Weniger suchen, schneller kaufen
In 30 Minuten gehen wir deine Produktseite gemeinsam durch: Was fällt zuerst auf, was ist zu laut, wo fehlt Kontrast? Du weißt danach, welche drei Änderungen am meisten bringen und was der Umbau in WooCommerce oder Shopify kostet.
Du sprichst direkt mit Irena oder Ronny Kühn – nicht mit einem Vertriebsteam.