# Zehn E-Commerce-Designentscheidungen, die die Conversion messbar steigern > Nicht "mehr Weißraum", nicht "teste deine Buttonfarbe". Die konkreten Entscheidungen zu visueller Hierarchie, Fotografie, Typografie und Mobile, die in echten Shops die Conversion bewegen. Ryan Badger - 3. November 2024 - 7 Min. Lesezeit ## Designentscheidungen, die die Conversion wirklich bewegen Artikel zu Design fallen meist in zwei Lager. "Nutze viel Weißraum!" (zu vage) oder "Teste 47 Buttonfarben im A/B-Test" (zu kleinteilig). Beides hilft niemandem, der auf seinen Shop schaut und sich fragt, warum er mit 1,3 % konvertiert. In diesem Beitrag geht es um die konkreten visuellen Designentscheidungen, die die Conversion in E-Commerce-Shops messbar verschieben. Nicht um Geschmack. Nicht um Markenästhetik. Sondern um die Entscheidungen bei Layout, Hierarchie, Farbe und Typografie, die Menschen entweder beim Kaufen helfen oder im Weg stehen. ## 1. Visuelle Hierarchie: Das Wichtigste sollte am wichtigsten aussehen Die meisten Shops geben auf der Produktseite allem das gleiche visuelle Gewicht: Fließtext in 16px, Preis in 18px, Überschriften in 18px. Jedes Element konkurriert, keines gewinnt. Das Auge hat keinen Einstiegspunkt. Die Lösung: Das, was angeklickt werden soll, muss das größte Element mit dem höchsten Kontrast auf der Seite sein. - Produkttitel: 28-36px - Preis: 20-24px, fett, klar abgesetzt - Button "In den Warenkorb": auf dem Handy volle Breite, das visuell schwerste Element der Seite - Beschreibungen, Spezifikationslisten, Versandinfos: 14-16px, ruhiger Wenn du deine Produktseite aus 8 Fuß (rund 2,5 m) Entfernung ansiehst (ja, lehn dich wirklich zurück): Erkennst du, was die Hauptaktion ist? Wenn die ganze Seite wie eine graue Suppe aussieht, ist deine Hierarchie kaputt. ## 2. Weißraum um den CTA, nicht überall "Nutze mehr Weißraum" wird als universeller Designtipp herumgereicht. Wirklich wichtig ist der Weißraum um die Buttons und Schlüsselelemente, nicht Weißraum um seiner selbst willen. - Mindestens 40-60px Abstand um den Bereich "In den Warenkorb" - Der Preis steht in seinem eigenen, freien Raum und wird nicht von anderem Text bedrängt - Produktbilder bekommen Platz (nicht randlos von Kante zu Kante) Pack alles andere (Bewertungen, Versandinfos, verwandte Produkte) enger zusammen. Das ist zweitrangig. Der CTA-Bereich gewinnt, weil er das Einzige mit Luft zum Atmen ist. ## 3. Einheitliche Produktfotografie schlägt "bessere" Produktfotografie Ein Katalog mit 50 Produkten, dessen Fotos alle ein bisschen anders sind (andere Hintergründe, anderes Licht, andere Zoomstufen), wirkt amateurhaft. Ein Katalog, in dem jedes Foto denselben Winkel, dasselbe Licht, denselben Ausschnitt und denselben Hintergrund hat, wirkt professionell. Das ist ein Mengenproblem, kein Qualitätsproblem. Deine 5 Bestseller können polierte Hero-Aufnahmen haben. Alles andere sollte identisch fotografiert werden, auch wenn es etwas weniger glamourös ist. Uneinheitlichkeit signalisiert "kleiner, unzuverlässiger Shop" stärker als geringe Qualität. Praktische Regel: - Hauptfoto: weißer oder einfarbiger Hintergrund, zentriert, derselbe Ausschnitt im ganzen Katalog - Weitere Fotos: Lifestyle / in Benutzung, einheitliche Tonalität - Alle Fotos im gleichen Seitenverhältnis und in der gleichen Auflösung ## 4. CTA-Kontrast, nicht CTA-Farbe "Orange Buttons konvertieren X % besser als grüne!" Diese angeblich getestete Behauptung liest man oft. Für sich genommen ist sie Unsinn. Was zählt, ist der **Kontrast zur umgebenden Seite**. Ein oranger Button auf einer orangefarbenen Website ist unsichtbar. Ein blauer Button auf derselben Website ist ein Leuchtfeuer. Wähle die Farbe mit dem höchsten Kontrast zur dominanten Palette deiner Website. Ist deine Seite weiß + schwarz + beige, sollte dein CTA die eine Farbe sein, die sonst nirgends vorkommt. Ein zweiter Punkt: Vermeide Ghost-Buttons (nur Umriss, keine Füllung) für primäre CTAs. Sie sehen elegant aus, schneiden aber bei der Conversion schlecht ab, weil sie dem Auge "zweitrangig" signalisieren. Nimm eine durchgehende Füllung für "In den Warenkorb", "Bestellung abschicken" und "Jetzt kaufen". ## 5. Schriftgröße und Zeilenlänge auf dem Handy Die meisten mobilen Shops haben Text, der zu klein und zu breit ist. Handys stellen Text mit höherer Pixeldichte dar; was am Desktop 16px ist, wirkt mobil klein. Untergrenze für mobile Typografie: - Fließtext: mindestens 16-18px - Zeilenlänge: 40-60 Zeichen pro Zeile - Zeilenhöhe: das 1,4- bis 1,6-Fache der Schriftgröße - Buttons / Tipp-Flächen: mindestens 44px Höhe (Apples Barrierefreiheitsrichtlinie) Wenn Besucher in deinen Produktbeschreibungen mit zwei Fingern hineinzoomen, ist deine Schrift zu klein. Teste auf einem echten Handy in Armlänge, nicht im mobilen Emulator des Browsers. ## 6. Mitlaufender Warenkorb-Button auf dem Handy Scrolle auf dem Handy eine lange Produktseite hinunter: Bis du die Beschreibung gelesen hast, ist der Button "In den Warenkorb" 3 Bildschirmlängen weit oben. Kunden, die sich zum Kauf entschieden haben, müssen jetzt zurückscrollen, und das senkt die Conversion-Rate. Die Lösung: ein mitlaufender Warenkorb-Button, der unten im mobilen Viewport schwebt, sobald der ursprüngliche Button aus dem Bild scrollt. Ein Tipp, der Warenkorb öffnet sich, keine Suche per Scrollen. Desktop: Der mitlaufende Button wird optional (größerer Viewport). Mobil: nicht verhandelbar. ## 7. Hero-Bilder, die das Ergebnis zeigen, nicht das Produkt Die meisten Hero-Bereiche zeigen das Produkt freigestellt auf Weiß. Als Referenzfoto in Ordnung; als Hero falsch. Der Hero muss in 2 Sekunden vermitteln: "Wie ist das Leben damit?" Besser: das Produkt in Benutzung, im Kontext, mit einer Person oder einer Umgebung, die zu deinem Zielkäufer passt. - Hautpflege: jemand bei der Anwendung, Morgenlicht, Badezimmer - Möbel: das Stück in einem echten, bewohnten Raum - Bekleidung: am Körper, in Bewegung, keine Schaufensterpuppe - Essen / Kaffee: bei der Zubereitung oder beim Genuss, kein Produktfoto Der Hero mit dem Produkt in Benutzung konvertiert besser als der mit freigestelltem Produkt, weil er einen größeren Teil der Vorstellungsarbeit für den Käufer übernimmt. Er sieht sich selbst damit, ohne es sich ausmalen zu müssen. ## 8. Einheitliche Komponenten im ganzen Shop Ein häufiger Fehler: Produktseiten nutzen einen Kartenstil, Kategorieseiten einen anderen, die Startseite einen dritten. Kunden spüren diese Uneinheitlichkeit, auch wenn sie sie nicht benennen können. Shops wirken vertrauenswürdig, wenn dieselben Komponenten durchgängig auftauchen. Ein kleines E-Commerce-Designsystem besteht aus: - Einer Produktkarten-Komponente (genutzt bei den Empfehlungen auf der Startseite, in Kategorieraster, bei verwandten Produkten, in Suchergebnissen) - Einem Button-System (primär, sekundär, tertiär; nur diese drei) - Einem System für Überschriften (H1, H2, H3; konsequent angewendet) - Einer Farbpalette (höchstens 3 Markenfarben, dazu eine Graustufenskala) - Einer Schriftskala (höchstens 3-4 Größen) Die meisten Shops bauen von jedem 15 Varianten, wo eine reichen würde. Weniger Variationen = professionelleres Erscheinungsbild. ## 9. Der erste Bildschirm ist die Werbung fürs Scrollen Der sichtbare Bereich beim ersten Laden (above the fold) hat eine einzige Aufgabe: Der Besucher soll weiterscrollen wollen. Mehr nicht. Versuch nicht, den Verkauf schon auf dem ersten Bildschirm abzuschließen. Was im sichtbaren Bereich nötig ist: - Für wen das ist (in einer Zeile) - Was das Produkt ist (visuell, ein gutes Bild) - Ein klarer CTA (In den Warenkorb oder Jetzt shoppen) - Ein beruhigendes Vertrauenssignal (Bewertung + Anzahl der Bewertungen, ein Pressezitat oder ein bekannter Kunde) Was im sichtbaren Bereich NICHT nötig ist: - Mehrere CTAs, die um Aufmerksamkeit konkurrieren - Ein Hero-Karussell, das alle 3 Sekunden weiterspringt (ein Conversion-Killer; Kunden erstarren, wenn sich Inhalte bewegen) - Jeder einzelne Vorteil des Produkts - Galerien mit Kundenstimmen ## 10. Entferne das Karussell auf deiner Startseite Hängt mit dem Vorigen zusammen, verdient aber einen eigenen Punkt: Hero-Karussells auf der Startseite sind tot. Studien zeigen durchgehend, dass rotierende Hero-Slides mit 1 bis 3 % geklickt werden und nur der erste Slide nennenswerte Aufmerksamkeit bekommt. Such die eine Botschaft, die du auf Slide 1 setzen würdest; setz sie als statischen Hero ein. Den Rest lass weg. ## Was Shoprocket übernimmt Der Storefront mit Themes kommt mit Vorlagen, die die obigen Muster zu visueller Hierarchie, Kontrast und Mobile bereits befolgen. Wenn du das Widget-Embed auf deiner eigenen Website nutzt, steuerst du das Design der umgebenden Seite selbst, aber: - **Warenkorb-Drawer** (kein Warenkorb als ganze Seite) ist der Standard - **Mitlaufender mobiler Warenkorb** wird unterstützt - **Responsive Produktbilder** mit automatischer WebP-Auslieferung und passenden Seitenverhältnissen - **Site-Builder + 40+ Themes**, damit du das Designsystem nicht von null aufbauen musst - **Eigene CSS-Hooks**, mit denen du das Embed an deine Website anpasst ```
``` Was Shoprocket nicht kontrolliert: deine Hero-Bilder, die Konsistenz deiner Fotografie, deine Texte, dein Farbsystem. Das liegt bei dir, ob es gelingt oder nicht. > **Tipp:** Öffne deinen Shop jetzt auf deinem Handy. Nimm eine Produktseite. Siehst du "In den Warenkorb" ohne Scrollen? Ist der Preis klar das zweitgrößte Element? Kannst du die Beschreibung lesen, ohne zu blinzeln? Wenn du eine dieser Fragen mit Nein beantwortest, ist das die erste Designkorrektur. ## TL;DR - **Hierarchie:** das wichtigste Element sollte am wichtigsten aussehen. Prüf es mit dem 8-Fuß-Test - **Weißraum um den CTA,** nicht überall um seiner selbst willen - **Einheitliche Fotografie** schlägt Fotoqualität. Ein Stil im ganzen Katalog - **CTA-Kontrast, nicht Farbe.** Die Farbe mit dem höchsten Kontrast zur Palette deiner Seite gewinnt - **Mobile Schrift: 16px+ Fließtext, 44px+ Tipp-Flächen** - **Mitlaufender Warenkorb-Button auf dem Handy** ist nicht verhandelbar - **Hero-Bilder zeigen Ergebnisse** (Produkt in Benutzung), nicht Produkt auf Weiß - **Ein kleines Designsystem (3 Farben, 4 Größen, 3 Button-Varianten)** wirkt professioneller als 15 Varianten - **Der erste Bildschirm verkauft das Scrollen,** nicht das Produkt. Eine klare Botschaft, ein CTA - **Weg mit dem Karussell auf der Startseite**. Der statische Hero gewinnt [Starte eine kostenlose Testphase](https://app-v3.shoprocket.io/signup), wenn du einen Storefront mit Themes willst, in dem diese Muster schon eingebaut sind. 14 Tage, keine Karte. --- - HTML version: https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern - Language: Deutsch (de) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)