Heb je je ooit afgevraagd waarom supermarkten plaatsen melk aan de achterkant van de winkel en chocolade in de buurt van de kassa?
Eenvoudig: het plaatsen van essentials aan de achterkant van de winkel moedigt shoppers om rond te lopen en bladeren andere producten. Het plaatsen van kleine voorwerpen (zoals chocolade) in de buurt van de kassa stimuleert impulsaankopen.
Dit is allemaal een deel van de wetenschap van de store design. De right store layout can boost sales, loyaliteit te verbeteren en klanten te vinden wat ze willen sneller.
Uw online winkel is niet anders. De organisatie en de lay-out van uw producten hebben een grote invloed op wat (en hoe) klanten bij u kopen.
In dit artikel, laten we u zien hoe u uw producten lay-out om de verkoop en conversies te maximaliseren.
3 Wat te overwegen bij het selecteren van een Aansluitpoorten
Product layout klinkt misschien als een eenvoudige probleem wanneer je voor het eerst benaderen. Echter, zoals de meeste dingen in e-commerce, de complexiteit ontstaan nadat u een duik in de details. Er zijn drie dingen die je moet overwegen wanneer u een product lay-out kiezen:
1. Keuze
Keuze is een tweesnijdend zwaard voor e-commerce winkels. Het gebrek aan keuze betekent dat je kansen te beperken. Te veel keuzes, echter, en je zult de bezoekers in de war te verlaten.
Effectief product lay-out is in wezen een proces voor het uitbalanceren van deze dualiteit. Dat is: de indruk van overvloedige keuze, terwijl nog steeds de site te houden gemakkelijk te gebruiken en te navigeren.
De wetenschap zegt dat besluitvorming wordt mentaal belastend. Wanneer u confronteren winkelend publiek met te veel keuzes, zij zijn onderworpen aan een keuze om helemaal niet te maken.
Dus hoe kan je dit probleem in uw winkel lay-out te overwinnen?
Een oplossing is om reisfoto's die leiden tot extra producten te gebruiken. Bijvoorbeeld, merken hoe Made.com maakt gebruik van afzonderlijke beelden voor volledige productcategorieën (zoals “tuinmeubelen”):
Denk aan dit als een teaser te lokken in shoppers.
Ideaal, U wilt uw best-selling of meest gewenste producten vooraan in het midden te houden.
Daarom, voordat u de lay-out proces te starten, een lijst van de volgende:
- Uw gehele assortiment en hun respectievelijke categorieën en subcategorieën
- Functionele categorieën zoals “best verkopende producten”, “Producten in de kijker”, enz. en de producten in hen.
De volgende stap is om deze informatie te gebruiken om een goed georganiseerde navigatiemenu te construeren. Merk op hoe Amazon organiseert producten in categorieën in het menu.
Door dit te doen zal helpen shoppers vinden wat ze willen zonder hen te overweldigen met te veel keuzes.
Als uw Ecwid winkel wordt toegevoegd aan een website, U kunt een navigatie-menu toe te voegen door het toevoegen van een stukje code:
- for a horizontal layout
- voor een verticale lay-out.
Here are the instructions for Ecwid stores added on WordPress en Wix websites, te. Op Ecwid Instant Site, de horizontale menu is alleen beschikbaar.
2. Productinformatie
Hier is nog een balancing act die u moet uitvoeren bij het selecteren van een winkel lay-out: toont productinformatie.
U wilt klanten de informatie die ze nodig hebben om door te klikken en een aankoop te geven. Op hetzelfde moment, u niet wilt dat om hen te overweldigen met te veel details – althans niet voordat ze op het product pagina.
Je mentale model in deze situatie zou moeten zijn om de besluitvorming te vergemakkelijken en wekken belangstelling van de klant. Stel jezelf de vraag: wat minimale informatie heb mijn klanten nodig hebben om door te klikken op een product?
U zult merken dat dit antwoord varieert van winkel naar winkel en product tot product.
Bijvoorbeeld, merken hoe Amazon geeft u slechts vier informatiepunten van de categorie pagina: naam van het product, prijs (inclusief korting), rating en Prime beschikbaarheid:
In Ecwid, U kan beoordelingen en recensies te voegen met behulp van de Stampled.io app.
Hoewel deze informatie is nodig voor een grote retailer als Amazon, voor kleinere bedrijven zoals Zand & Stone Jewelry, ratings zijn niet zo belangrijk. Vandaar, de categorie pagina's productnaam en prijs tonen alleen.
Het is gemakkelijk om in de val van het weggeven van te weinig informatie in de categorie pagina's. De beste manier om dit te voorkomen is om uw klanten te interviewen en hen vragen wat informatie die ze gebruiken om aankoopbeslissingen te nemen.
3. store design
Hoe je hebt ontworpen uw winkel een grote invloed op uw product lay-out.
Een e-commerce winkel zal hebben meestal drie belangrijke pagina's:
- Startpagina
- Categorie en zoekpagina's
- Afzonderlijke productpagina's
Welke producten u kiest voor de presentatie op elke pagina-type zal beslissen welke producten uw klanten uiteindelijk koopt.
Bijvoorbeeld, zien hoe Amazon haar eigen producten op de homepage als je niet bent aangemeld:
Het is gebruikelijk dat de winkels naar de nieuwste aanbiedingen op de homepage te bevorderen. Zorg ervoor dat u deze aanbiedingen af te stemmen op uw doelgroep. BestMadeCo, bijvoorbeeld, loopt een Vaderdag promo rekening houdend met haar grotendeels mannelijke clientèle.
Concentreer op:
- Uitzoeken wat producten die u wilt klanten om te kopen (idealiter uw best verkopende, en / of de hoogste marge producten)
- Het handhaven van ontwerp uniformiteit tussen de verschillende pagina-types.
Of je besluit om uw beste verkopers of nieuwkomers markeren, Ecwid kunt u een categorie te maken voor aanbevolen producten op de homepage en noem maar op basis van uw behoeften.
6 Best Practices voor E-commerce Aansluitpoorten
Terwijl je kan zeker zorgen voor een unieke lay-out regeling voor uw e-commerce op te slaan, het helpt om een aantal best practices te volgen.
1. Duw top producten en aanbiedingen boven de vouw
De ‘boven de vouw’ gebied is het scherm onroerend goed zichtbaar is wanneer klanten op de eerste land op uw site. In feite, dit gebied is goed voor 80% van alle kijker aandacht op de meeste sites.
Gezien de aard van de aandacht deze ruimte krijgt, is het een goed idee om uw topproducten te plaatsen boven de vouw. Dit kan onder meer:
- Laatste aanbiedingen, verkoop en kortingen
- Best verkopende product of productcategorieën
- Onlangs gelanceerde producten (werkt het best bij het begin van een winkelcentrum seizoen)
Op Target.com, bijvoorbeeld, vindt u de laatste aanbiedingen te zien aan de bovenkant van de pagina:
Als je een hoop aanbiedingen, overwegen het toevoegen van een schuif, zoals deze bijvoorbeeld uit Walmart. Let ook op de promoties loopt onder het navigatiemenu:
Sommige fashion retailers schuwen conventionele lay-outs in het voordeel van een merkimago te bevorderen. Op ASOS, bijvoorbeeld, je een merkimago te krijgen met een optie om ‘Shop Men’ of ‘Winkel Women’.
Deze tactiek werkt wanneer je probeert om een merk visie te bevorderen met het lookbook. De meeste retailers, echter, zullen beter met een gebruikelijk product-eerst boven de vouw layout.
Volg hetzelfde idee op categorie pagina's: duw je best-selling en top-rated producten boven de vouw. Bijvoorbeeld, kijk op Amazon in de categorie pagina's:
2. Meng horizontale en verticale indeling
Er zijn in wezen twee manieren waarop u kunt lay-out van uw producten op een pagina: horizontaal of verticaal.
Een horizontale lay-out blijft statisch. Er is een knop aan de rand van de pagina om de lijsten verder scrollen.
Dit voorbeeld van Amazon illustreert dingen beter:
In Ecwid, recent bekeken producten Ook horizontaal weergegeven. U kunt het aantal items te kiezen om ze te tonen op de bovenkant of aan de onderkant van uw storefront.
Gerelateerde producten Een ander horizontaal gerichte sectie. Producten in deze groep zijn ingesteld afzonderlijk voor elk product pagina die het mogelijk maakt om uw klanten te benaderen met zeer relevant toevoegingen aan hun orders. U kunt ze op productpagina's en op de kar pagina.
In contrast, een verticale lay-out niet over deze schuifknoppen. Plaats, zie je meer en meer producten in een grid-achtige alignment als je naar beneden scrollt. Soortgelijk:
Ideaal, moet je een mix van deze beide schema gebruiken:
- Horizontale lay-out als je wilt een paar producten uit tal van categorieën tonen, zoals in Recentelijk bekeken producten
- Verticale lay-out als u veel producten uit dezelfde categorie zien, zoals een search en categorie pagina's
3. Volg conventie en verwachtingen van de gebruikers
Er zijn situaties waarin u zult willen onconventionele met uw ontwerp te zijn. Het product lay-out is niet een van hen.
Uw product lay-out is bedoeld om te oriënteren gebruikers wanneer ze op uw site. Een conventionele lay-out zorgt ervoor dat ze vinden wat ze willen en niet krijgen gedesoriënteerd.
Conventies, natuurlijk, variëren van sector tot sector. Echter, er zijn een paar dingen die je moet overwegen:
Gebruik een raster lay-out
In een raster lay-out, producten zijn in even grote rechthoekige dozen, als dit:
Deze lay-out is al lang de conventie voor e-commerce sites. Niet alleen zou uw klanten al vertrouwd mee zijn, het is ook goed voor het tonen van producten. Verder, Het schalen goed – je kunt gewoon een doos op kleine schermen weer te geven, of uit te breiden naar meerdere dozen op grotere.
Bij het gebruik van deze lay-out, zorg ervoor dat de dozen van gelijke grootte te houden. Aangezien deze case study shows, met behulp van even grote dozen kunnen de inkomsten per bezoeker te verhogen met maar liefst 17%.
Als u verkoopt met Ecwid, dat is geen probleem voor jou - Ecwid heeft een even grote raster dat zich automatisch aanpast aan verschillende schermen.
Navigatie tonen aan de bovenkant van het product listings
Een andere overeenkomst die u moet volgen is om uw sorteermogelijkheden plaats aan de top van de pagina.
Klanten zijn gekomen om deze plaatsing verwachten en zal natuurlijk kijk hier toen ze op een categorie pagina.
Orient klanten met broodkruimels
Breadcrumbs zijn navigatie-elementen die gebruikers tonen hun pad vanaf de homepage, als dit:
toe te voegen aan de bovenkant van de pagina zich beter oriënteren bezoekers. Het vertelt hen wat pagina of categorie ze in en hoe ze terug kunnen gaan naar de homepage.
4. Focus op visuals, maar niet de tekst op productpagina's vergeten
Online, de enige manier om uw producten te tonen is door middel van visuals. Dit is de reden waarom grote productfoto's zijn bekend om e-commerce conversies te verhogen.
Echter, terwijl de visuals zijn belangrijk, uw lay-out moet ook ruimte voor beschrijvende tekst. Goede kopie beschrijft niet alleen het product, maar helpt ook te verkopen en uw merk.
Bijvoorbeeld, overwegen hoe BestMadeCo maakt gebruik van sterke kopie op de homepage naar een onlangs gelanceerde product te verkopen. De lay-out kunt de tekst uit te spelen tegen het beeld perfect.
productexemplaar is vooral belangrijk op productpagina's. Uw lay-out moet geven klanten alle belangrijke informatie die ze nodig hebben om een beslissing te nemen recht boven de vouw. Dit moet zijn:
- Prijs (inclusief korting, visueel weergegeven)
- Product waardering en het aantal beoordelingen
- Product- en merknamen
- Of het product op voorraad is (en of de voorraad is bijna op)
- Shipping details
- 2-3 key productdetails
Dit is een voorbeeld van hoe het niet om producten te lay-out. Het product pagina heeft geen kopie op alle - het is moeilijk om een beslissing te nemen.
Zoals met de meeste dingen, Amazon's lay-out is perfect hier, waardoor klanten alles wat ze nodig hebben om een beslissing te nemen.
5. Voeg product aanbevelingen en aanverwante producten
Op de productpagina's, heb je twee goals:
- Klik hier voor de klant om de kassa pagina, of
- Klik hier voor de klant om een ander product te bekijken
De laatstgenoemde, u moet hebben een aanbevolen of aanverwante producten sectie. U kan deze plek ofwel nadat het product informatie of voordat het.
Amazon doet dit bijzonder goed. Let op de gerelateerde producten en “bekeken ook” lijsten onder de vouw:
Als u meerdere producten uit dezelfde collectie, zorg ervoor dat ze weer te geven, alsmede. Hier is een goed voorbeeld van de wereldmarkt:
Verwante product lijsten niet altijd zichtbaar te zijn. U kunt ook zien gerelateerde zoekopdrachten om directe klanten om items zij wellicht geïnteresseerd bent.
Experimenteer met verschillende lay-outs voor aanverwante / aanbevolen producten. Probeer ze te plaatsen boven de voettekst, hieronder productbeschrijving, enz.
6. Experimenteer met mouseover details over de categorie pagina's
Een manier om click-through rates te verbeteren is om extra informatie te bieden als een klant zijn muis een afbeelding product over gaat op categorie pagina's.
Bijvoorbeeld, deze site toont product details en een knop Toevoegen aan winkelwagentje op de muis hover:
Het doel van deze tactiek is om gebruikers belangrijke informatie in één oogopslag zien. Het werkt het beste wanneer u verwacht gebruikers snel door middel van een groot aantal producten, zoals in kledingwinkels. Het is misschien niet werken voor andere categorieën, maar je kunt nog steeds lopen een paar split testen en de resultaten.
In Ecwid, u kunt inschakelen “Koop nu” knoppen op product lijsten te helpen uw klanten snel bladeren (en kopen) uw producten.
Wanneer een klant klikt op een dergelijke knop, uw winkel zal het gehele product niet openen. Plaats, uw klant zal een pop-up met product opties:
Als uw product geen opties heeft, het zal direct naar de winkelwagen.
Conclusie
Als het gaat om product lay-out, is het best te houden aan conventie en volg wat marktleiders al doen. Catalogus van uw producten in detail, categoriseren ze grondig, dan organiseren ze in een standaard raster layout.
De best practices boven gedeeld zal werken voor de meeste winkels in sectoren. Try them at your own store!
- How To Fix Uw Store Navigation
- Alles wat u moet weten over productmerchandising
- online Merchandising: Producten opmaken in de online winkel
- Wat is mode-merchandising, en waarom is het zo belangrijk?
- 10 Ontwerpfouten van online winkels
- 15 Perfecte lettertypecombinaties voor uw e-commercewebsite
- Kleurentheorie: Alles wat u moet weten over kleurthema's
- 7 Creatieve ideeën voor uw e-commerceproductpagina
- De kracht van een heldenimago in webdesign
- Onmisbare UX-principes die u in een online winkel moet volgen
- Websiteontwerpaudit
- Ontgrendel de kracht van UX-ontwerp voor e-commerce
- Wat is het verschil tussen UI en UX in e-commerce?
