10 Best Practices für E-Commerce-Homepages, um einen umwerfenden ersten Eindruck zu hinterlassen (+Kostenlose Swipe-Datei)

Ihre E-Commerce-Homepage spielt eine entscheidende Rolle dabei, Ihre Botschaft an potenzielle Kunden zu kommunizieren und sie dazu zu bewegen, die nächsten Maßnahmen zu ergreifen.

Wenn Käufer auf Ihrer Homepage landen und einen falschen Eindruck bekommen, ist es wahrscheinlich, dass sie abspringen.

Und mit dem durchschnittliche E-Commerce-Absprungrate zwischen 20-45%, es ist klar, dass viele Homepages ein Upgrade vertragen könnten.

Es ist jedoch nicht immer einfach zu wissen, wo Sie anfangen sollen, insbesondere wenn Sie von Beruf kein Webdesigner sind.

Aus diesem Grund haben wir diese Best Practices für E-Commerce-Homepages zusammengestellt, damit Sie Ihre Kunden von Anfang an begeistern können.

Wenn Sie diese Prinzipien befolgen, sind Sie auf dem besten Weg, Käufer zu beeindrucken, Ihre Absprungrate zu senken und mehr Umsatz zu generieren.

Außerdem erhalten Sie am Ende eine kostenlose Swipe-Datei mit 10 unglaublichen E-Commerce-Homepages, die Sie zu Ihrem nächsten Design inspirieren können.

Bereit zu gehen? Großartig! Fangen wir mit den grundlegendsten Prinzipien beim Homepage-Design an...

Best Practices 101 für E-Commerce-Homepages: Was sollten Sie einbeziehen?

Oft einfach zu wissen, womit man anfangen soll Gestaltung der Homepage Denn E-Commerce-Websites sind für die meisten Händler der größte Stolperstein. Das Starren auf ein Wireframe einer Barebone-Homepage kann bei fast jedem Angst auslösen.

Also hier ist der Trick: Fangen Sie nicht mit Ihrem Design an. Beginnen Sie stattdessen mit Ihrem Geschäftsziel.

Im Ernst, die besten Homepages sind nicht die mit dem komplexesten Design oder der atemberaubendsten Grafik. Die besten Homepages sind diejenigen, die ihren Geschäftszweck erfüllen.

Bevor Sie also etwas entwerfen, stellen Sie sich Fragen wie:

• Welche Informationen müssen meine Besucher lesen?
• Wo möchte ich, dass meine Besucher klicken?
• Welche Designelemente erhöhen die Chancen, dass jemand bei mir kauft?

Natürlich haben verschiedene Marken unterschiedliche Buyer's Journeys, daher ist es wichtig, die Customer Journey abzubilden und eine Homepage zu entwerfen, die dies unterstützt.

Sobald du deine Homepage-Prioritäten kennst (z. B. den Traffic auf eine neue Sammlung lenken), ist es einfacher, die visuelle Hierarchie deiner Homepage zu gestalten.

Was ist visuelle Hierarchie auf einer E-Commerce-Homepage?

Visuelle Hierarchie ist eine ausgefallene Art zu sagen, dass Sie Elemente so anordnen müssen, dass ihre Wichtigkeit angezeigt wird — wobei die wichtigsten Dinge zuerst und die unwichtigsten Dinge zuletzt stehen.

Wenn Sie aus diesem Artikel nichts anderes mitnehmen, denken Sie daran: Die visuelle Hierarchie ist für ein gutes Homepage-Design von grundlegender Bedeutung. Das ist weitaus wichtiger als die Farbauswahl (was eigentlich sehr wenig ausmacht, solange Sie kontrastierende Farben wählen).

Lassen Sie uns die visuelle Hierarchie entschlüsseln, indem wir uns die Websites zweier Wasserversorgungsunternehmen ansehen. Zuallererst haben wir Paradise-Trinkwasser. Paradise hat eine Homepage mit einer suboptimalen visuellen Hierarchie:

Wie du siehst, gibt es keinen sichtbaren Call to Action Above the Fold. Es ist schwer herauszufinden, was das Wertversprechen von Paradise ist, und die Benutzer sind sich wahrscheinlich nicht sicher, wie sie als Nächstes eine Bestellung aufgeben sollen. Insgesamt werden die wichtigsten Dinge nicht gut hervorgehoben.

Vergleichen Sie nun diese Homepage mit dieser von Sparkletts:

Hier können wir sehen, dass Sparkletts seine Homepage nach den Zielen seiner Website gestaltet — um Konversionen und Verkäufe zu steigern.

Es gibt ein sichtbares Wertversprechen und mehrere stark kontrastreiche CTAs, die es den Besuchern leicht machen, Maßnahmen zu ergreifen.

Beachten Sie, dass die gewählte visuelle Hierarchie weniger wichtige Informationen an weiter unten auf der Seite verdrängt. Im Gegensatz zu Paradise präsentieren sie den Kunden beispielsweise oben auf der Seite keine Textwand mit einer „Über uns“ -Geschichte. Stattdessen verschieben sie diese Informationen an den unteren Rand der Seite, wo der visuelle Inhalt weniger wertvoll ist.

Das Ziel der meisten E-Commerce-Homepages ist es, Besucher zum Klicken und zum nächsten Schritt zu bewegen. Die Homepage von Sparkletts ist so konzipiert, dass sie Besucher an die Hand nimmt und es ihnen leicht macht, Kunden zu werden.

Ok, hoffentlich ist das ein bisschen geklärt. Nachdem wir das Konzept der visuellen Hierarchie hinter uns haben, wollen wir uns mit zehn Best Practices für E-Commerce-Homepages befassen, die Ihnen helfen, es tatsächlich auf Ihre eigene Homepage anzuwenden.

10 Best Practices für E-Commerce-Homepages für bessere Ergebnisse

Sie benötigen keinen Abschluss in Design, um eine E-Commerce-Homepage mit hoher Konversionsrate zu erstellen. Folgen Sie diesen Prinzipien und Sie sind auf dem besten Weg zu mehr Konversionen und Verkäufen.

1. Geben Sie Designelemente weiter, die keinen Mehrwert bieten

Jazz-König Miles Davis sagte einmal: „Es geht nicht um die Noten, die du spielst, es geht um die Noten, die du nicht spielen“, und wenn es um die Gestaltung von Homepages geht, sind seine Worte genauso relevant.

Im Ernst, die Gestaltung einer übertriebenen Homepage kann verlockend sein, aber eine Studie von Google hat gezeigt, dass „visuell komplexe“ Websites durchweg als weniger schön bewertet werden als ihre einfacheren Gegenstücke.

Schauen Sie sich zum Beispiel diese hektische Homepage des Elektronikhändlers TigerDirect an:

Als Besucher ist hier so viel los, dass Sie nicht anders können, als sich ein wenig überfordert zu fühlen, oder?

Above the Fold gibt es mindestens sieben verschiedene Handlungsaufforderungen, die deine Aufmerksamkeit in alle Richtungen lenken. Es gibt auch eine Mischung aus komplexen Farbkombinationen.

Außerdem bewegt sich der Bild-Slider in Echtzeit alle 5 Sekunden, um noch mehr Deals und Angebote anzuzeigen.

Ok, jetzt kontrastiere Tiger Directs geschäftige Homepage mit Googles minimalistischer, beruhigender Homepage:

Google hat jedes Designelement entfernt, das nicht zum Nutzererlebnis beiträgt. Zusätzliche Angebote und unnötige Informationen wurden entfernt, um eine elegante und intuitive Homepage zu erstellen.

Sie haben sich für weniger Farbvariationen entschieden und viel Weißraum hinzugefügt, um den Besuchern die Möglichkeit zu geben, jeden Abschnitt mühelos zu verdauen.

Kurz gesagt, eine stark frequentierte Homepage erhöht die kognitive Belastung, die Benutzer benötigen, um das Geschehen zu verarbeiten. Ein einfacheres Design sorgt für weniger Reibung und erhöht die Wahrscheinlichkeit, dass ein Besucher weitere Maßnahmen ergreift.

2. Machen Sie Ihr einzigartiges Wertversprechen aus der Masse

Ein gutes Preisangebot verdeutlicht, worum es Ihnen geht, und gibt Kunden einen Grund, bei Ihnen einzukaufen (im Vergleich zu Ihren Mitbewerbern).

Da es das Kundenverhalten beeinflussen kann, muss Ihr Wertversprechen für Besucher, die auf Ihrer Homepage landen, sofort ersichtlich sein.

Es hat sich bewährt, es „above the fold“ zu platzieren, was nur bedeutet, dass Besucher nicht nach unten scrollen müssen, um es zu sehen. (Interessanter Fakt: Der Ausdruck „above the fold“ stammt aus Zeitungen — sie gestalten ihre Titelseite für Zeitungskioske, wo sie regelmäßig in zwei Hälften gefaltet ausliegen!)

Hier ist ein gutes Beispiel für ein klares, gut positioniertes Wertversprechen der Mundpflegemarke Quip:

Denke daran, je näher etwas oben auf deiner Homepage ist, desto mehr Impressionen bekommt es. Daher ist es wichtig, nur die wichtigsten Homepage-Elemente oberhalb der Seitenfalte zu platzieren.

3. Lass deinen Call-to-Action knallen

Nur wenige Designelemente für die Startseite sind so wichtig wie Ihr Aufruf zum Handeln.

Ihr Aufruf zum Handeln ist der nächste Schritt, den Besucher nach der Landung auf Ihrer Website unternehmen sollen.

Die beste Formulierung von CTAs hängt davon ab, in welcher Branche Sie tätig sind und welche Konversion Sie erreichen möchten.

Unabhängig davon, wie Ihr CTA aussieht, möchten Sie, dass er auf Ihrer Homepage gut sichtbar ist. Es unter der Falte zu platzieren ist ein absolutes No-Go.

Darüber hinaus gibt es gute Beweise um vorzuschlagen, dass Ihr Call-to-Action zur Maximierung der Konversionen die Form einer Schaltfläche (im Gegensatz zu einem Link) haben sollte.

Schauen Sie sich zum Beispiel diese Homepage des Bidet-Einzelhändlers Tushy an:

Es gibt ein paar Dinge, die wir von Tushys CTA lernen können:

• Mache es groß und platziere es über der Falte
• Kontrastieren Sie die Farbe mit dem Hintergrund
• Umgeben Sie den CTA mit viel Weißraum
• Entferne alle konkurrierenden Grafiken in der Nähe.

Wenn Sie Ihre CTAs auf diese Weise „above the fold“ platzieren, können sich die Kunden aus Neugierde leicht durchklicken.

Wenn Sie Ihren Homepage-CTA unter Berücksichtigung dieser Richtlinien gestalten, wird sichergestellt, dass Ihr CTA wahrgenommen und angeklickt wird.

4. Stellen Sie Ihre besten Produkte vor

Wie wir in unserem besprochen haben E-Commerce-Merchandising Ratgeber, viele Käufer kommen auf Ihre Homepage, um Produkte zu durchstöbern.

Diese potenziellen Kunden möchten möglicherweise nichts bestimmtes kaufen, möchten aber sehen, was angeboten wird.

Indem Sie Ihre beliebtesten Produkte auf Ihrer Homepage empfehlen, haben Sie die größte Chance, solche Kunden zu faszinieren — insbesondere, wenn Sie qualitativ hochwertige Produktfotos haben.

Stellen Sie sich bei der Gestaltung Ihrer Homepage vor, dass es sich um ein virtuelles Dating-Profil handelt. Das heißt, Sie möchten die bestmöglichen Fotos verwenden und gleichzeitig die positiven Eigenschaften Ihrer Marke hervorheben (nur Sie möchten, dass die Nutzer klicken, nicht nach rechts wischen!)

Schau dir zum Beispiel an, wie Allbirds drei seiner meistverkauften Schuhe direkt unter der Falte platziert. Wenn Sie als Besucher noch nie ein Paar Allbirds-Schuhe gesehen haben, sind diese ein guter Ausgangspunkt.

Wenn Sie die Seite weiter nach unten scrollen, werden Sie sehen, dass Allbirds mehrere Produktkategorien umfasst („Laufen“, Herren, Bekleidung usw.).

Wenn Sie die beiden einzelnen Bestseller-Produkte mit interessanten Kategorien auf Ihrer Homepage kombinieren, wird sie zu einem Browserparadies. Indem Sie es den Besuchern leicht machen, Ihre Produkte zu erkunden, erleichtern Sie ihnen auch die Kaufentscheidung.

5. Fügen Sie Thumbnails zu Kategorieseiten hinzu

Wenn es um Kategorien geht, sind Wörter nicht so hilfreich wie Bilder, um Käufern zu helfen, schnell zu visualisieren, was Sie verkaufen. Außerdem können die richtigen Fotos Besucher dazu verleiten, mehr zu entdecken.

Nehmen wir zum Beispiel an, Sie sind auf der Suche nach neuer Schwimmausrüstung. Stellen Sie sich vor, Sie landen auf dieser Seite:

Die Produktkategorien werden zwar im Menü auf der linken Seite angezeigt, es gibt jedoch nur sehr wenige visuelle Hinweise darauf, wo Sie klicken müssen.

Beachten Sie, dass auf dieser Website nicht ein Bild für die Kategorie „Neue Produkte“ angezeigt wird, sondern die einzelnen Produkte innerhalb dieser Kategorie aufgeführt werden.

Vergleichen Sie dies nun mit der Homepage dieses Bademodenhändlers:

Sehen Sie, wie ein Bild die einzelnen Kategorien darstellt (Damen, Herren, Kinder usw.)? Dies macht es für Besucher, die auf Ihrer Homepage ankommen, viel einfacher (und verlockender), das zu finden, wonach sie suchen, im Gegensatz zu einer Textliste auf der linken Seite.

6. Verwenden Sie eine logische Navigationsstruktur

Kein Shopper hat das Ziel, einfach auf Ihrer Homepage anzukommen. Stattdessen ist Ihre Homepage ein Sprungbrett zwischen dem, woher sie kommen und dem, wohin sie wollen.

Aus diesem Grund ist eine klare und logische Navigation unerlässlich, um den Besuchern zu helfen, ihre Ziele zu erreichen.

Eins Designtrend wir haben in letzter Zeit gesehen, dass die Navigationsleiste ausgeblendet wird. Obwohl dies Ihrer Homepage ein minimalistisches Aussehen verleihen kann, stellte Baymard fest, dass das Ausblenden der Navigationsleiste die Benutzererfahrung und die Auffindbarkeit von Inhalten beeinträchtigt. Es ist also am besten, es zur Schau zu stellen.

Als Nächstes möchten Sie Ihre Navigation einfach und übersichtlich gestalten. Der beste Weg, dies zu tun, besteht darin, mit breiten Kategorien zu beginnen — denken Sie an „Herren“ und „Damen“ — und die Auswahl dann auf Unterkategorien (Bekleidung, Schuhe usw.) einzugrenzen

Obwohl Gymshark beispielsweise eine große Anzahl von Produkten auf seiner Website hat, folgt es einer einfachen Navigationsstruktur, die es einfach macht, das zu finden, wonach Sie suchen:

7. Erstellen Sie eine prominente Suchleiste

Zusätzlich zur tollen Navigation kann eine Suchleiste Kunden dabei helfen, genau das zu finden, wonach sie suchen.

Wenn Sie eine kleine Produktlinie haben, ist eine Suchleiste natürlich nicht erforderlich. Wenn Sie jedoch viele Produkte verkaufen, ist es eine gute Idee, im Design Ihrer Homepage Platz dafür zu schaffen.

Die obere rechte Ecke ist wahrscheinlich der gebräuchlichste (und bekannteste) Ort, an dem Sie Ihre Suchleiste positionieren können. Athleta macht das zum Beispiel so:

Es ist auch wichtig zu beachten, dass Ihre Suchleiste tatsächlich funktionieren muss. Die Anzahl der Geschäfte mit halbfunktionierenden Suchleisten ist erstaunlich. Investieren Sie also in eine App oder einen Entwickler, der Sie bei der Erledigung der Arbeit unterstützt.

Schließlich wissen wir, dass Käufer, die Ihre Website-Suche verwenden, eine dreimal höhere Wahrscheinlichkeit haben, einen Kauf über diese Website zu sehen.

8. Fügen Sie einen sozialen Beweis hinzu

Vergessen wir nicht, dass eines der Ziele Ihrer Homepage darin besteht, potenzielle Kunden davon zu überzeugen, dass Sie vertrauenswürdig sind.

Ein Schuss Social Proof auf Ihrer Homepage in Form einer Kundenreferenz oder eines Medienbeitrages ist eine wirkungsvolle Möglichkeit, Ihren Ruf zu präsentieren.

Aus Sicht der visuellen Hierarchie ist Social Proof nicht so wichtig wie Elemente wie Ihr Leistungsversprechen oder Ihr Call-to-Action. Sie werden jedoch feststellen, dass einige Marken ihre Social Proof-Referenzen weit oben auf ihren Homepages unter Beweis stellen.

Nehmen wir zum Beispiel Bailly, der schlagkräftige Social-Proof-Auszeichnungen direkt unter der Haube platziert:

Diese Art von Empfehlungen ist fantastisch, um die Ängste der Kunden zu lindern und die Konversionsrate zu steigern.

Machen Sie sich jedoch keine Sorgen, wenn Sie keine begeisterten Medienkritiken haben. Mit 70% der Menschen Wenn sie sagen, dass sie einer Empfehlung von jemandem vertrauen, den sie nicht einmal kennen, können auch einfache Kundenreferenzen unglaublich überzeugend sein.

9. Machen Sie Ihre Homepage schnell

Eine langsam ladende Startseite kann Konversionen zunichte machen. Im Ernst, eine Verzögerung von nur 0,1 Sekunden kann Ihre Konversionsrate um 7% senken.

Selbst das faszinierendste Design kann also nichts nützen, wenn Ihre Kunden warten müssen. Daher muss die Optimierung der Geschwindigkeit der Homepage Priorität haben.

Zum Glück ist die Diagnose von Geschwindigkeitsproblemen einfach zu bedienen Das PageSpeed Insights-Tool von Google.

Möglicherweise stoßen Sie auf eine Reihe von Problemen, die von komplexeren Problemen wie einem Problem mit der Serverleistung bis hin zu einfacheren Dingen wie unkomprimierten Bildern und langsamen Plug-ins reichen.

Wenn Web-Entwicklung ist nicht deine Stärke, arbeite mit einem Entwickler zusammen, um diese Probleme zu lösen und das bestmögliche Homepage-Erlebnis zu bieten.

10. Entwerfen Sie zuerst für mobile Geräte

Die meisten Unternehmer erstellen ihre Websites auf einem Laptop oder Desktop, weil es einfacher ist. Oft bedeutet das, dass die Website im Querformat gut aussieht, im Hochformat jedoch möglicherweise nicht so gut ist.

Die Sache ist jedoch, es wird prognostiziert, dass 2021 über 70% der E-Commerce-Verkäufe über das Handy abgewickelt werden. Egal wie beeindruckend Ihre Homepage auf einem Laptop ist, wenn sie nicht für Mobilgeräte optimiert ist, haben Sie Probleme.

Da Mobilgeräte zum dominierenden Vertriebskanal werden, müssen Sie Ihre Homepage so gestalten, dass sie zuerst auf einem Handy und dann auf einem Laptop gut aussieht.

Implementieren Sie diese Best Practices für E-Commerce-Homepages noch heute

Ihre Homepage spielt eine wichtige Rolle dabei, wie Käufer Ihre Marke wahrnehmen, und ist auch ein wichtiger Punkt im Konversionsprozess.

Das Entwerfen einer großartigen Homepage muss nicht kompliziert sein. Beginnen Sie mit der Idee einer visuellen Hierarchie und planen Sie Ihre Homepage von dort aus so, dass sie Ihren Zielen entspricht.

Wenn Sie überlegen, wie Sie Ihre Homepage strukturieren sollten, denken Sie insbesondere an Folgendes:

• Stellen Sie Ihre wichtigsten Dinge an die Spitze
• Entfernen Sie unnötige Designelemente, die keinen Mehrwert bieten
• Verwenden Sie Weißraum und Farben, um Abschnitte zu unterscheiden und zu zeigen, was wichtig ist
• Füge dein Wertversprechen und deinen CTA über dem Fold ein
• Platzieren Sie Ihre besten Produkte und Kollektionen auf Ihrer Homepage
• Verwenden Sie Vorschaubilder, um Ihre Sammlungen darzustellen
• Folgen Sie einer logischen Navigationsstruktur und fügen Sie eine Suchleiste hinzu
• Füge etwas Social Proof hinzu
• Mach deine Homepage schnell und gestalte sie für Mobile-First

Indem Sie diese Best Practices implementieren, erstellen Sie eine Homepage, die nicht nur gut aussieht, sondern auch wie verrückt konvertiert.

🔥Bonus-Ressource: Beispiele für E-Commerce-Homepages (Swipe-Datei)

Schnappen Sie sich diese kostenlose Sammlung von über 10 unserer beliebtesten E-Commerce-Homepage-Designs. Speichern Sie es und verwenden Sie es als Inspiration für das nächste Mal, wenn Ihre Homepage aktualisiert werden muss.