Have you ever wondered why grocery stores place milk at the back of the store and chocolates near the checkout counter?
Enkel: placing essentials at the back of the store encourages shoppers to walk around and browse other products. Placing small items (like chocolates) near the checkout counter encourages impulse purchases.
This is all a part of the science of store design. De right store layout can boost sales, forbedre lojaliteten og hjelpe kundene å finne det de vil ha raskere.
Din nettbutikk er ikke annerledes. Organiseringen og utformingen av produktene dine har stor innvirkning på hva (og hvordan) kunder kjøper fra deg.
I denne artikkelen, vi viser deg hvordan du legger ut produktene dine for å maksimere salg og konverteringer.
3 Ting du bør vurdere når du velger et produktoppsett
Produktlayout kan høres ut som et enkelt problem når du først nærmer deg det. men, som det meste innen e-handel, kompleksiteten dukker opp når du dykker ned i detaljene. Det er tre ting du må vurdere når du velger et produktoppsett:
1. Valg
Choice er et tveegget sverd for e-handelsbutikker. Mangelen på valg betyr at du begrenser mulighetene. For mange valg, men, og du vil etterlate besøkende forvirret.
Effektiv produktlayout er i hovedsak en prosess for å balansere denne dualiteten. Det er: gir inntrykk av rikelig valg, samtidig som nettstedet er enkelt å bruke og navigere.
Vitenskapen sier at beslutningstaking er mentalt belastende. Når du konfronterer kunder med for mange valg, de er tilbøyelige til å ikke ta et valg i det hele tatt.
Så hvordan overvinner du dette problemet i butikkoppsettet ditt?
En løsning er å bruke fremhevede bilder som fører til flere produkter. For eksempel, legg merke til hvordan Made.com bruker separate bilder for hele produktkategorier (som "hagemøbler"):
Tenk på dette som en teaser for å lokke kunder.
Ideelt sett, du vil beholde de bestselgende eller mest ettertraktede produktene dine foran og i sentrum.
Derfor, før du starter layoutprosessen, liste opp følgende:
- Hele produktutvalget ditt og deres respektive kategorier og underkategorier
- Funksjonelle kategorier som "bestselgende produkter", "utvalgte produkter", etc. og produktene i dem.
Det neste trinnet er å bruke denne informasjonen til å konstruere en godt organisert navigasjonsmeny. Legg merke til hvordan Amazon organiserer produkter i kategorier i menyen.
Å gjøre dette vil hjelpe kjøpere å finne det de vil ha uten å overvelde dem med for mange valg.
Hvis Ecwid-butikken din er lagt til et nettsted, du kan legge til en navigasjonsmeny ved å legge til et kodestykke:
- for a horizontal layout
- for en vertikal layout.
Here are the instructions for Ecwid stores added on WordPress og Wix nettsteder, også. På Ecwid Instant Site, den horisontale menyen er kun tilgjengelig.
2. Produktinformasjon
Her er en annen balansegang du bør utføre når du velger butikkoppsett: viser produktinformasjon.
Du ønsker å gi kundene den informasjonen de trenger for å klikke seg gjennom og foreta et kjøp. Samtidig, you don’t want to overwhelm them with too many details – at least not before they are on the actual product page.
Your mental model in this situation should be to ease decision making and pique customer interest. Ask yourself: what minimum information do my customers need to click through on a product?
You’ll find that this answer varies from store to store and product to product.
For eksempel, notice how Amazon gives you just four information points on the category page: product name, pris (including discount), rating and Prime availability:
I Ecwid, you can add similar ratings and reviews with the help of the Stampled.io app.
Though this information is necessary for a large retailer like Amazon, for smaller businesses like Sand & Stone Jewelry, ratings aren’t as important. Hence, the category pages only show product name and price.
It’s easy to fall into the trap of giving away too little information in category pages. The best way to avoid this is to interview your customers and ask them what information they use to make purchase decisions.
3. Store design
How you’ve designed your store will have a big impact on your product layout.
An e-commerce store will typically have three key pages:
- Hjemmeside
- Category and search pages
- Individual product pages
What products you choose to showcase on each page-type will decide what products your customers end up buying.
For eksempel, note how Amazon promotes its own products on its homepage if you haven’t signed in:
It’s common for stores to promote latest offers on the homepage. Make sure to align these offers with your target audience. BestMadeCo, for eksempel, runs a Father’s Day promo keeping in mind its largely male clientele.
Focus on:
- Figuring out what products you want customers to buy (ideally your best selling, and/or highest margin products)
- Maintaining design uniformity across different page-types.
Whether you decide to highlight your best sellers or new arrivals, Ecwid allows you to create a category for featured products on the homepage and name it according to your needs.
6 Best Practices for E-commerce Product Layout
While you can certainly create a unique layout scheme for your e-commerce store, it helps to follow a few best practices.
1. Push top products and offers above the fold
The ‘above the fold’ area is the screen real estate visible when customers first land on your site. Faktisk, this area accounts for 80% of all viewer attention on most sites.
Gitt den typen oppmerksomhet denne plassen får, det er en god idé å plassere toppproduktene dine over den synlige delen. Dette kan inkludere:
- Siste tilbud, salg og rabatter
- Bestselgende produkt eller produktkategorier
- Nylig lanserte produkter (fungerer best i starten av en shoppingsesong)
På Target.com, for eksempel, du vil se de siste tilbudene øverst på siden:
Hvis du har mange tilbud, vurdere å legge til en glidebryter, som dette eksemplet fra Walmart. Legg også merke til kampanjene som kjører under navigasjonsmenyen:
Noen moteforhandlere unngår konvensjonelle oppsett til fordel for å fremme et merkevarebilde. På ASOS, for eksempel, du får et merkevarebilde med alternativet "Shop Men" eller "Shop Women".
Denne taktikken fungerer når du prøver å fremme en merkevarevisjon med en lookbook. De fleste forhandlere, men, vil gjøre det bedre med et konvensjonelt produkt - først over brettingen.
Følg samme idé på kategorisidene: skyv de bestselgende og topprangerte produktene dine over den synlige delen av nettsiden. For eksempel, sjekk ut Amazons kategorisider:
2. Bland horisontale og vertikale layouter
Det er i hovedsak to måter du kan layoute produktene dine på en hvilken som helst side: horisontalt eller vertikalt.
En horisontal layout forblir statisk. Det er en knapp på kanten av siden for å bla gjennom oppføringene videre.
Dette eksemplet fra Amazon illustrerer ting bedre:
I Ecwid, nylig viste produkter vises også horisontalt. Du kan velge antall varer som skal vises øverst eller nederst på butikkfronten.
Relaterte produkter is another horizontally-oriented section. Products in this group are set up individually for every product page that allows to target your customers with highly relevant additions to their orders. You can display them on product pages and on the cart page.
I motsetning, a vertical layout doesn’t have these scroll buttons. I stedet, you see more and more products in a grid-like alignment as you scroll down. Like this:
Ideelt sett, you should use a mix of both these layouts:
- Horizontal layout when you want to show a few products from lots of categories, such as in Recently Viewed Products
- Vertical layout when you want to show lots of products from the same category, such as one search and category pages
3. Follow convention and user expectations
There are situations when you’ll want to be unconventional with your design. The product layout isn’t one of them.
Your product layout is meant to orient users when they land on your site. A conventional layout ensures that they find what they want and don’t get disoriented.
Conventions, selvfølgelig, vary from sector to sector. men, there are a few things you must consider:
Use a grid layout
In a grid layout, products are arranged in equally-sized rectangular boxes, like this:
This layout has long been the convention for e-commerce sites. Not only would your customers already be familiar with it, it is also good for displaying products. Further, it scales well – you can display just one box on small screens, eller utvide til flere bokser på større.
Når du bruker dette oppsettet, sørg for å holde boksene like store. Som denne casestudien viser, å bruke like store bokser kan øke inntektene per besøkende med så mye som 17%.
Hvis du selger med Ecwid, det er ikke et problem for deg – Ecwid har et rutenett av samme størrelse som automatisk tilpasser seg forskjellige skjermer.
Vis navigasjon øverst i produktoppføringene
En annen konvensjon du bør følge er å plassere sorteringsalternativene dine øverst på siden.
Kunder har begynt å forvente denne plasseringen og vil naturligvis se her når de lander på en kategoriside.
Orienter kunder med brødsmuler
Brødsmuler er navigasjonselementer som viser brukerne deres vei fra hjemmesiden, like this:
Å legge dem til øverst på siden hjelper til med å orientere besøkende. Den forteller dem hvilken side eller kategori de er i og hvordan de kan gå tilbake til hjemmesiden.
4. Fokuser på det visuelle, men ikke glem teksten på produktsidene
på nett, den eneste måten å vise produktene dine på er gjennom visuelle elementer. This is why large product images are known to boost e-commerce conversions.
men, while visuals are important, your layout should also have room for descriptive text. Good copy not only describes the product, but also helps sell it and your brand.
For eksempel, consider how BestMadeCo uses strong copy on its homepage to sell a recently launched product. The layout helps the text play off against the image perfectly.
Product copy is particularly important on product pages. Your layout should give customers all the key information they need to make a decision right above the fold. This should include:
- Pris (including discount, represented visually)
- Product rating and number of reviews
- Product and brand names
- Whether the product is in stock (and whether stock is running low)
- Shipping details
- 2-3 key product details
This is an example of how not to layout products. The product page has no copy at all – it’s difficult to make a decision.
As with most things, Amazon’s layout is perfect here, gir kundene alt de trenger for å ta en beslutning.
5. Legg til produktanbefalinger og relaterte produkter
På produktsidene, du har to mål:
- Få kunden til betalingssiden, eller
- Få kunden til å se et annet produkt
For sistnevnte, du burde ha en anbefalt eller relatert produktseksjon. Du kan plassere denne enten etter produktinformasjonen eller før den.
Amazon gjør dette spesielt godt. Legg merke til de relaterte produktene og "også sett"-oppføringene nedenfor:
Hvis du har flere produkter i samme kolleksjon, sørg for å vise dem også. Her er et godt eksempel fra WorldMarket:
Relaterte produktoppføringer trenger ikke alltid være visuelle. Du kan også vise relaterte søk for å lede kunder til varer de kan være interessert i.
Eksperimenter med ulike oppsett for relaterte/anbefalte produkter. Prøv å plassere dem over bunnteksten, under produktbeskrivelsen, etc.
6. Eksperimenter med mouseover-detaljer på kategorisider
En måte å forbedre klikkfrekvensen på er å tilby ytterligere detaljer når en kunde beveger musen over et produktbilde på kategorisider.
For eksempel, denne siden viser produktdetaljer og en Legg i handlekurv-knapp ved musepeker:
Hensikten med denne taktikken er å gi brukerne nøkkelinformasjon på et øyeblikk. Det fungerer best når du forventer at brukere skal bla gjennom et stort antall produkter raskt, som i klesbutikker. Det kan hende det ikke fungerer for andre kategorier, men du kan fortsatt kjøre noen delte tester og se resultatene.
I Ecwid, you can enable “Buy Now” buttons on product lists to help your customers quickly browse (and buy) produktene dine.
When a customer clicks such a button, your store won’t open the whole product page. I stedet, your customer will see a popup with product options:
If your product doesn’t have options, it’ll go straight to the cart.
Konklusjon
When it comes to product layout, it’s best to stick to convention and follow what market leaders are already doing. Catalog your products in detail, categorize them thoroughly, then organize them out in a standard grid layout.
The best practices shared above will work for most stores across sectors. Try them at your own store!
- How to Fix Your Store’s Navigation
- Alt du trenger å vite om produktsalg
- Online Merchandising: Hvordan legge ut produkter i nettbutikken
- Hva er Fashion Merchandising, og hvorfor er det så viktig?
- 10 Designfeil i nettbutikker
- 15 Perfekte skrifttyper for e-handelsnettstedet ditt
- Fargeteori: Alt du trenger å vite om fargetemaer
- 7 Creative Ideas for Your Ecommerce Product Page
- The Power of a Hero Image in Web Design
- Må-ha UX-prinsipper å følge i en nettbutikk
- Revisjon av nettsteddesign
- Låser opp kraften i UX-design for e-handel
- What’s the Difference Between UI and UX in Ecommerce?
