Haben Sie sich schon einmal gefragt, warum Lebensmittelgeschäfte Milch hinten im Laden und Schokolade in der Nähe der Kasse platzieren?
Ganz einfach: Wenn Sie wichtige Artikel im hinteren Teil des Ladens platzieren, werden die Kunden dazu angeregt, sich umzusehen und sich andere Produkte anzuschauen. Wenn Sie kleine Artikel (wie Schokolade) in der Nähe der Kasse platzieren, werden Impulskäufe gefördert.
Dies alles ist Teil der Wissenschaft des Ladendesigns. das richtige Ladenlayout kann den Umsatz steigern, die Kundenbindung verbessern und Kunden helfen, schneller zu finden, was sie suchen.
In Ihrem Online-Shop ist das nicht anders. Die Organisation und das Layout Ihrer Produkte haben großen Einfluss darauf, was (und wie) Ihre Kunden bei Ihnen kaufen.
In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Produkte so gestalten, dass Sie Umsatz und Konversionen maximieren.
3 Dinge, die bei der Auswahl eines Produktlayouts zu beachten sind
Das Produktlayout mag auf den ersten Blick wie ein einfaches Problem klingen. Doch wie die meisten Dinge in
1. Wahl
Wahl ist eine
Ein effektives Produktlayout besteht im Wesentlichen darin, diese Dualität auszugleichen. Das heißt: Es soll den Eindruck einer großen Auswahl vermitteln und gleichzeitig die Benutzerfreundlichkeit und Navigation der Site gewährleisten.
Wissenschaft sagt dass das Treffen von Entscheidungen geistig anstrengend ist. Wenn man Käufer mit zu vielen Auswahlmöglichkeiten konfrontiert, besteht die Gefahr, dass sie überhaupt keine Entscheidung treffen.
Wie können Sie dieses Problem also bei der Gestaltung Ihres Ladens überwinden?
Eine Lösung besteht darin, hervorgehobene Bilder zu verwenden, die zu weiteren Produkten führen. Beachten Sie beispielsweise, wie Made.com verwendet separate Bilder für ganze Produktkategorien (z. B. „Gartenmöbel“):
Betrachten Sie dies als ein Lockmittel, um Käufer anzulocken.
Idealerweise behalten Sie Ihre
Daher sind bevor Sie mit dem Layoutprozess beginnen, listen Sie Folgendes auf:
- Ihr gesamtes Produktsortiment und die jeweiligen Kategorien und Unterkategorien
- Funktionale Kategorien wie „Meistverkaufte Produkte“, „Ausgewählte Produkte“ usw. und die darin enthaltenen Produkte.
Der nächste Schritt besteht darin, diese Informationen zu verwenden, um eine
Auf diese Weise können Käufer leichter finden, was sie suchen, ohne von einer zu großen Auswahl überwältigt zu werden.
Wenn Ihr Ecwid-Shop zu einer Website hinzugefügt wird, können Sie durch Einfügen eines Code-Schnipsels ein Navigationsmenü hinzufügen:
- für ein horizontales Layout
- für ein vertikales Layout.
Hier sind die Anweisungen für hinzugefügte Ecwid-Shops. WordPress und Wix auch Websites. Auf Ecwid Instant Site ist nur das horizontale Menü verfügbar.
2. Produktinformationen
Hier ist ein weiterer Balanceakt, den Sie bei der Auswahl eines Ladenlayouts durchführen sollten: die Anzeige von Produktinformationen.
Sie möchten Ihren Kunden die Informationen geben, die sie benötigen, um durchzuklicken und einen Kauf zu tätigen. Gleichzeitig möchten Sie sie nicht mit zu vielen Details überfordern – zumindest nicht, bevor sie auf der eigentlichen Produktseite sind.
Ihr mentales Modell in dieser Situation sollte sein, die Entscheidungsfindung zu erleichtern und das Interesse des Kunden zu wecken. Fragen Sie sich: Was Mindestinformationen müssen meine Kunden zu einem Produkt durchklicken?
Sie werden feststellen, dass die Antwort von Geschäft zu Geschäft und von Produkt zu Produkt unterschiedlich ist.
Beachten Sie beispielsweise, dass Amazon Ihnen auf der Kategorieseite nur vier Informationspunkte bietet: Produktname, Preis (einschließlich Rabatt), Bewertung und Prime-Verfügbarkeit:
In Ecwid können Sie mithilfe der Stampled.io-App ähnliche Bewertungen und Rezensionen hinzufügen.
Obwohl diese Informationen für einen großen Einzelhändler wie Amazon notwendig sind, für kleinere Unternehmen wie Sand & Stein Schmucksind Bewertungen nicht so wichtig. Daher werden auf den Kategorieseiten nur Produktname und Preis angezeigt.
Es ist leicht, in die Falle zu tappen, auf Kategorieseiten zu wenig Informationen preiszugeben. Der beste Weg, dies zu vermeiden, besteht darin, Ihre Kunden zu befragen und sie zu fragen, welche Informationen sie für ihre Kaufentscheidungen verwenden.
3. Ladengestaltung
Die Gestaltung Ihres Geschäfts hat große Auswirkungen auf die Produktanordnung.
An
- Startseite
- Kategorie- und Suchseiten
- Einzelne Produktseiten
Welche Produkte möchten Sie auf den einzelnen Plattformen präsentieren?
Beachten Sie beispielsweise, wie Amazon seine eigenen Produkte auf seiner Homepage bewirbt, wenn Sie nicht angemeldet sind:
Es ist üblich, dass Geschäfte auf der Homepage die neuesten Angebote bewerben. Achten Sie darauf, dass diese Angebote auf Ihre Zielgruppe abgestimmt sind. BestMadeCo beispielsweise bietet eine Vatertagsaktion an, die auf seine überwiegend männliche Kundschaft ausgerichtet ist.
Konzentrieren Sie sich auf:
- Finden Sie heraus, welche Produkte Ihre Kunden kaufen sollen (idealerweise Ihre meistverkauften und/oder die Produkte mit der höchsten Marge)
- Die Aufrechterhaltung der Einheitlichkeit des Designs über verschiedene
Seitentypen.
Egal, ob Sie Ihre Bestseller oder Neuankömmlinge hervorheben möchten, Ecwid ermöglicht Ihnen die Erstellung einer Kategorie für Ausgewählte Produkte auf der Homepage und benennen Sie es entsprechend Ihren Anforderungen.
6 Best Practices für E-Commerce Produktlayout
Sie können sicherlich ein einzigartiges Layout-Schema für Ihre
1. Top-Produkte und Angebote über dem Falz platzieren
Der „Above the fold“-Bereich ist der Bildschirmbereich, der sichtbar ist, wenn Kunden zum ersten Mal auf Ihrer Website landen. Tatsächlich macht dieser Bereich aus 80 % der gesamten Aufmerksamkeit der Zuschauer auf den meisten Websites.
Angesichts der Aufmerksamkeit, die dieser Bereich erhält, ist es eine gute Idee, Ihre Top-Produkte über dem Falz zu platzieren. Dies kann Folgendes umfassen:
- Aktuelle Angebote, Verkäufe und Rabatte
- Meistverkaufte Produkte oder Produktkategorien
- Kürzlich eingeführte Produkte (funktioniert am besten zu Beginn einer Einkaufssaison)
On Target.com, sehen Sie beispielsweise oben auf der Seite die neuesten Angebote:
Wenn Sie viele Angebote haben, können Sie einen Slider hinzufügen, wie in diesem Beispiel von Walmart. Beachten Sie auch die Werbeaktionen, die unter dem Navigationsmenü laufen:
Einige Modehändler verzichten auf konventionelle Layouts zugunsten der Förderung eines Markenimages. ASOSSie erhalten beispielsweise ein Markenimage mit der Option „Herren einkaufen“ oder „Damen einkaufen“.
Diese Taktik funktioniert, wenn Sie versuchen, eine Markenvision mit einem Lookbook zu fördern. Die meisten Einzelhändler kommen jedoch mit einem konventionellen
Folgen Sie der gleichen Idee auf Kategorieseiten: Pushen Sie Ihre
2. Mischen Sie horizontale und vertikale Layouts
Es gibt grundsätzlich zwei Möglichkeiten, Ihre Produkte auf einer Seite anzuordnen: horizontal oder vertikal.
Ein horizontales Layout bleibt statisch. Am Rand der Seite befindet sich eine Schaltfläche, um die Einträge weiter zu scrollen.
Dieses Beispiel von Amazon veranschaulicht dies besser:
In Ecwid, Kürzlich angesehene Produkte werden auch horizontal angezeigt. Sie können die Anzahl der Elemente auswählen, die oben oder unten in Ihrem Schaufenster angezeigt werden sollen.
Zugehörige Produkte ist ein anderer
Im Gegensatz dazu gibt es bei einem vertikalen Layout diese Scroll-Buttons nicht. Stattdessen sehen Sie immer mehr Produkte in einem
Idealerweise sollten Sie einen Mix dieser beiden Layouts verwenden:
- Horizontales Layout, wenn Sie einige Produkte aus vielen Kategorien anzeigen möchten, z. B. in „Zuletzt angesehene Produkte“
- Vertikales Layout, wenn Sie viele Produkte aus derselben Kategorie anzeigen möchten, z. B. eine Such- und Kategorieseiten
3. Befolgen Sie Konventionen und Benutzererwartungen
Es gibt Situationen, in denen Sie bei Ihrem Design unkonventionell sein möchten. Das Produktlayout gehört nicht dazu.
Ihr Produktlayout soll den Benutzern Orientierung bieten, wenn sie auf Ihrer Website landen. Ein konventionelles Layout stellt sicher, dass sie finden, was sie suchen, und nicht die Orientierung verlieren.
Natürlich gibt es von Branche zu Branche unterschiedliche Konventionen. Dennoch gibt es ein paar Dinge, die Sie beachten müssen:
Verwenden eines Rasterlayouts
In einem Rasterlayout werden die Produkte angeordnet in
Dieses Layout ist seit langem die Konvention für
Achten Sie bei diesem Layout darauf, dass die Felder gleich groß sind. Wie diese Fallstudie zeigt, kann die Verwendung gleich großer Boxen den Umsatz pro Besucher um bis zu 17 % steigern.
Wenn Sie mit Ecwid verkaufen, ist das für Sie kein Problem – Ecwid hat ein gleich großes Raster, das sich automatisch an verschiedene Bildschirme anpasst.
Navigation oben in der Produktliste anzeigen
Eine weitere Konvention, die Sie befolgen sollten, besteht darin, Ihre Sortieroptionen oben auf der Seite zu platzieren.
Kunden erwarten diese Platzierung und schauen ganz selbstverständlich hier nach, wenn sie auf einer Kategorieseite landen.
Kunden mit Brotkrümel orientieren
Breadcrumbs sind Navigationselemente, die Benutzern den Weg von der Startseite aus zeigen, wie folgt:
Das Hinzufügen dieser Links oben auf der Seite erleichtert den Besuchern die Orientierung. Sie erfahren, auf welcher Seite oder in welcher Kategorie sie sich befinden und wie sie zur Startseite zurückkehren können.
4. Konzentrieren Sie sich auf das Visuelle, aber vergessen Sie den Text auf den Produktseiten nicht
Online können Sie Ihre Produkte nur visuell präsentieren. Deshalb steigern große Produktbilder bekanntermaßen
Obwohl visuelle Elemente wichtig sind, sollte Ihr Layout auch Platz für beschreibenden Text bieten. Ein guter Text beschreibt nicht nur das Produkt, sondern hilft auch, es und Ihre Marke zu verkaufen.
Betrachten Sie beispielsweise, wie BestMadeCo auf seiner Homepage überzeugende Texte verwendet, um ein kürzlich eingeführtes Produkt zu verkaufen. Das Layout sorgt dafür, dass der Text perfekt mit dem Bild harmoniert.
Produktkopie ist besonders auf Produktseiten wichtig. Ihr Layout sollte den Kunden alle wichtigen Informationen, die sie für eine Entscheidung benötigen, direkt über dem Falz liefern. Dazu gehören:
- Preis (inkl. Rabatt, optisch dargestellt)
- Produktbewertung und Anzahl der Bewertungen
- Produkt- und Markennamen
- Ob das Produkt auf Lager ist (und ob der Lagerbestand zur Neige geht)
- Versanddetails
2 3 wichtige Produktdetails
Dies ist ein Beispiel dafür, wie man ein Produktlayout nicht gestalten sollte. Die Produktseite enthält überhaupt keinen Text – es ist schwierig, eine Entscheidung zu treffen.
Wie bei den meisten Dingen ist auch hier das Layout von Amazon perfekt und bietet den Kunden alles, was sie für eine Entscheidung brauchen.
5. Produktempfehlungen und verwandte Produkte hinzufügen
Auf Produktseiten verfolgen Sie zwei Ziele:
- Bringen Sie den Kunden zur Checkout-Seite oder
- Bringen Sie den Kunden dazu, sich ein anderes Produkt anzusehen
Für Letzteres sollten Sie ein Abschnitt mit empfohlenen oder verwandten Produkten. Diese können Sie entweder nach oder vor die Produktinformationen setzen.
Amazon macht das besonders gut. Beachten Sie die Einträge zu verwandten Produkten und „auch angesehen“ unterhalb der Falzlinie:
Wenn Sie mehrere Produkte in derselben Kollektion haben, stellen Sie sicher, dass Sie diese auch anzeigen. Hier ist ein gutes Beispiel von WorldMarket:
Verwandte Produktlisten müssen nicht immer visuell sein. Sie können auch verwandte Suchanfragen anzeigen, um Kunden zu Artikeln zu leiten, die sie interessieren könnten.
Experimentieren Sie mit verschiedenen Layouts für verwandte/empfohlene Produkte. Versuchen Sie, sie über der Fußzeile, unter der Produktbeschreibung usw. zu platzieren.
6. Experimentieren Sie mit Mouseover-Details auf Kategorieseiten
Ein Weg zur Verbesserung
Zum Beispiel, Diese Website durchsuchen zeigt Produktdetails und eine Schaltfläche „In den Warenkorb“, wenn Sie mit der Maus darüberfahren:
Der Zweck dieser Taktik besteht darin, den Benutzern wichtige Informationen auf einen Blick zu liefern. Sie funktioniert am besten, wenn Sie davon ausgehen, dass die Benutzer schnell eine große Anzahl von Produkten durchsuchen, wie beispielsweise in Bekleidungsgeschäften. Für andere Kategorien funktioniert sie möglicherweise nicht, aber Sie können trotzdem ein paar Split-Tests durchführen und die Ergebnisse sehen.
In Ecwid können Sie „Jetzt kaufen“-Schaltflächen in Produktlisten aktivieren, damit Ihre Kunden Ihre Produkte schnell durchsuchen (und kaufen) können.
Wenn ein Kunde auf eine solche Schaltfläche klickt, öffnet Ihr Shop nicht die gesamte Produktseite. Stattdessen wird Ihrem Kunden ein Popup mit Produktoptionen angezeigt:
Wenn für Ihr Produkt keine Optionen verfügbar sind, wird es direkt in den Warenkorb gelegt.
Fazit
Wenn es um das Produktlayout geht, sollten Sie sich am besten an Konventionen halten und dem folgen, was Marktführer bereits tun. Katalogisieren Sie Ihre Produkte detailliert, kategorisieren Sie sie gründlich und organisieren Sie sie dann in einem standardmäßigen Rasterlayout.
Die oben beschriebenen Best Practices funktionieren für die meisten Geschäfte aller Branchen. Probieren Sie sie in Ihrem eigenen Geschäft aus!
- So reparieren Sie die Navigation Ihres Shops
- Alles, was Sie über Produkt-Merchandising wissen müssen
- Online-Merchandising: So gestalten Sie das Produktlayout im Online-Shop
- Was ist Fashion-Merchandising und warum ist es so wichtig?
- 10 Designfehler von Online-Shops
- 15 perfekte Schriftpaare für Ihre E-Commerce-Website
- Farbtheorie: Alles, was Sie über Farbthemen wissen müssen
- 7 kreative Ideen für Ihre E-Commerce-Produktseite
- Die Macht eines Hero-Images im Webdesign
Haben müssen UX-Prinzipien, die in einem Online-Shop befolgt werden sollten- Website-Design-Audit
- Die Leistungsfähigkeit des UX-Designs für den E-Commerce freisetzen
- Was ist der Unterschied zwischen UI und UX im E-Commerce?
