51视频

Har du n氓gonsin undrat varf枚r livsmedelsbutiker placerar mj枚lk l盲ngst bak i butiken och choklad n盲ra kassadisken?

Enkelt: att placera det n枚dv盲ndigaste p氓 baksidan av butiken uppmuntrar shoppare att g氓 runt och titta p氓 andra produkter. Att placera sm氓 f枚rem氓l (som choklad) n盲ra kassadisken uppmuntrar till impulsk枚p.

Allt detta 盲r en del av vetenskapen om butiksdesign. De r盲tt butikslayout kan 枚ka f枚rs盲ljningen, f枚rb盲ttra lojalitet och hj盲lpa kunder att hitta det de vill ha snabbare.

Din onlinebutik 盲r inte annorlunda. Organisationen och layouten av dina produkter har stor inverkan p氓 vad (och hur) kunder k枚per av dig.

I den h盲r artikeln visar vi dig hur du layoutar dina produkter f枚r att maximera f枚rs盲ljning och konverteringar.

3 saker att t盲nka p氓 n盲r du v盲ljer en produktlayout

Produktlayout kan l氓ta som ett enkelt problem n盲r du f枚rst n盲rmar dig det. Dock som det mesta i e-handel, komplexiteten dyker upp n盲r du dyker in i detaljerna. Det finns tre saker du m氓ste t盲nka p氓 n盲r du v盲ljer en produktlayout:

1. Val

Valet 盲r en TVEEGGAD sv盲rd f枚r e-handel butiker. Bristen p氓 valm枚jligheter g枚r att du begr盲nsar m枚jligheterna. F枚r m氓nga val, dock, och du kommer att l盲mna bes枚karna f枚rvirrade.

Effektiv produktlayout 盲r i huvudsak en process f枚r att balansera denna dualitet. Det vill s盲ga: ge intrycket av rikligt med valm枚jligheter, samtidigt som webbplatsen 盲r enkel att anv盲nda och navigera p氓.

att beslutsfattande 盲r mentalt belastande. N盲r du konfronterar kunder med f枚r m氓nga val, riskerar de att inte g枚ra ett val alls.

S氓 hur 枚vervinner du detta problem i din butikslayout?

En l枚sning 盲r att anv盲nda utvalda bilder som leder till ytterligare produkter. L盲gg till exempel m盲rke till hur anv盲nder separata bilder f枚r hela produktkategorier (som "tr盲dg氓rdsm枚bler"):

Se det h盲r som en teaser f枚r att locka in shoppare.

Helst vill du beh氓lla din 产盲蝉迟蝉盲濒箩补谤别 or mest eftertraktade produkter fram och mitt.

顿盲谤蹿枚谤, innan du startar layoutprocessen, lista ut f枚ljande:

• Hela ditt produktsortiment och deras respektive kategorier och underkategorier
• Funktionella kategorier som "b盲sts盲ljande produkter", "utvalda produkter" etc. och produkterna i dem.

N盲sta steg 盲r att anv盲nda denna information f枚r att konstruera en 惫盲濒辞谤驳补苍颈蝉别谤补诲 navigeringsmenyn. L盲gg m盲rke till hur Amazon organiserar produkter i kategorier i sin meny.

Genom att g枚ra detta hj盲lper kunderna att hitta vad de vill ha utan att 枚verv盲ldiga dem med f枚r m氓nga valm枚jligheter.

Om din 51视频-butik l盲ggs till p氓 en webbplats kan du l盲gga till en navigeringsmeny genom att l盲gga till en kodbit:

• f枚r en vertikal layout.

H盲r 盲r instruktionerna f枚r 51视频-butiker som l盲ggs till  och  webbplatser ocks氓. P氓 51视频 Instant Site 盲r den horisontella menyn endast tillg盲nglig.

2. Produktinformation

H盲r 盲r en annan balansg氓ng du b枚r utf枚ra n盲r du v盲ljer butikslayout: att visa produktinformation.

Du vill ge kunderna den information de beh枚ver f枚r att klicka sig igenom och g枚ra ett k枚p. Samtidigt vill du inte 枚verv盲ldiga dem med f枚r m氓nga detaljer 鈥� 氓tminstone inte innan de 盲r p氓 sj盲lva produktsidan.

Din mentala modell i denna situation b枚r vara att underl盲tta beslutsfattande och v盲cka kundernas intresse. Fr氓ga dig sj盲lv: vad minsta information beh枚ver mina kunder klicka sig vidare p氓 en produkt?

Du kommer att uppt盲cka att det h盲r svaret varierar fr氓n butik till butik och produkt till produkt.

L盲gg till exempel m盲rke till hur Amazon bara ger dig fyra informationspunkter p氓 kategorisidan: produktnamn, pris (inklusive rabatt), betyg och Prime-tillg盲nglighet:

I 51视频 kan du l盲gga till liknande betyg och recensioner med hj盲lp av appen Stampled.io.

脛ven om denna information 盲r n枚dv盲ndig f枚r en stor 氓terf枚rs盲ljare som Amazon, f枚r mindre f枚retag som , betyg 盲r inte lika viktiga. D盲rf枚r visar kategorisidorna endast produktnamn och pris.

Det 盲r l盲tt att falla i f盲llan att ge bort f枚r lite information p氓 kategorisidor. Det b盲sta s盲ttet att undvika detta 盲r att intervjua dina kunder och fr氓ga dem vilken information de anv盲nder f枚r att fatta k枚pbeslut.

3. Butiksdesign

Hur du har designat din butik kommer att ha stor inverkan p氓 din produktlayout.

An e-handel butiken har vanligtvis tre nyckelsidor:

• Hemsida
• Kategori- och s枚ksidor
• Enskilda produktsidor

Vilka produkter du v盲ljer att visa p氓 varje sidtyp kommer att best盲mma vilka produkter dina kunder slutar k枚pa.

Notera till exempel hur Amazon marknadsf枚r sina egna produkter p氓 sin hemsida om du inte har loggat in:

Det 盲r vanligt att butiker marknadsf枚r de senaste erbjudandena p氓 hemsidan. Se till att anpassa dessa erbjudanden till din m氓lgrupp. BestMadeCo, till exempel, driver en fars dag-kampanj med tanke p氓 dess till stor del manliga kundkrets.

Fokusera p氓:

• Ta reda p氓 vilka produkter du vill att kunderna ska k枚pa (helst dina b盲sts盲ljande och/eller produkter med h枚gst marginal)
• Uppr盲tth氓lla enhetlighet i design 枚ver olika sidtyper.

Oavsett om du best盲mmer dig f枚r att lyfta fram dina 产盲蝉迟蝉盲濒箩补谤别 eller nyanl盲nda, l氓ter 51视频 dig skapa en kategori f枚r utvalda produkter p氓 hemsidan och namnge det efter dina behov.

6 b盲sta praxis f枚r E-handel Produktlayout

脛ven om du s盲kert kan skapa ett unikt layoutschema f枚r din e-handel butik, hj盲lper det att f枚lja n氓gra b盲sta praxis.

1. Skjut toppprodukter och erbjudanden ovanf枚r mitten

Omr氓det "ovanf枚r mitten" 盲r fastigheten p氓 sk盲rmen som syns n盲r kunderna f枚rst landar p氓 din webbplats. I sj盲lva verket st氓r detta omr氓de f枚r .

Med tanke p氓 den typ av uppm盲rksamhet det h盲r utrymmet f氓r 盲r det en bra id茅 att placera dina toppprodukter ovanf枚r vecket. Detta kan inkludera:

• Senaste erbjudanden, reor och rabatter
• B盲sts盲ljande produkt eller produktkategorier
• Nyligen lanserade produkter (fungerar b盲st i b枚rjan av en shoppings盲song)

On , till exempel ser du de senaste erbjudandena h枚gst upp p氓 sidan:

Om du har m氓nga erbjudanden, 枚verv盲g att l盲gga till en reglage, som det h盲r exemplet fr氓n Walmart. Observera 盲ven kampanjerna som k枚rs under navigeringsmenyn:

Vissa mode氓terf枚rs盲ljare undviker konventionella layouter till f枚rm氓n f枚r att fr盲mja en varum盲rkesimage. P氓 , till exempel f氓r du en varum盲rkesimage med alternativet "Shop Men" eller "Shop Women".

Den h盲r taktiken fungerar n盲r du f枚rs枚ker fr盲mja en varum盲rkesvision med en lookbook. De flesta 氓terf枚rs盲ljare kommer dock att klara sig b盲ttre med en konventionell produkten f枚rst layout ovanf枚r vikningen.

F枚lj samma id茅 p氓 kategorisidor: push your 产盲蝉迟蝉盲濒箩补谤别 och h枚gst rankad produkter ovanf枚r mitten. Kolla till exempel Amazons kategorisidor:

2. Blanda horisontella och vertikala layouter

Det finns i huvudsak tv氓 s盲tt du kan layouta dina produkter p氓 vilken sida som helst: horisontellt eller vertikalt.

En horisontell layout f枚rblir statisk. Det finns en knapp i kanten av sidan f枚r att bl盲ddra vidare i listorna.

Det h盲r exemplet fr氓n Amazon illustrerar saker b盲ttre:

I 51视频, nyligen visade produkter visas ocks氓 horisontellt. Du kan v盲lja hur m氓nga artiklar som ska visas 枚verst eller l盲ngst ner p氓 ditt skyltf枚nster.

盲r en annan horisontellt orienterad avsnitt. Produkter i den h盲r gruppen st盲lls in individuellt f枚r varje produktsida som g枚r det m枚jligt att rikta in sig p氓 dina kunder med mycket relevanta till盲gg till deras best盲llningar. Du kan visa dem p氓 produktsidor och p氓 kundvagnssidan.

D盲remot har en vertikal layout inte dessa rullningsknappar. Ist盲llet ser du fler och fler produkter i en 谤耻迟苍盲迟蝉濒颈办苍补苍诲别 justering n盲r du rullar ned氓t. S氓 h盲r:

Helst b枚r du anv盲nda en blandning av b氓da dessa layouter:

• Horisontell layout n盲r du vill visa n氓gra produkter fr氓n m氓nga kategorier, till exempel i Nyligen visade produkter
• Vertikal layout n盲r du vill visa massor av produkter fr氓n samma kategori, till exempel en s枚k- och kategorisidor

3. F枚lj konventionen och anv盲ndarnas f枚rv盲ntningar

Det finns situationer n盲r du vill vara okonventionell med din design. Produktlayouten 盲r inte en av dem.

Din produktlayout 盲r t盲nkt att orientera anv盲ndarna n盲r de landar p氓 din webbplats. En konventionell layout s盲kerst盲ller att de hittar vad de vill ha och inte blir desorienterade.

Konventionerna varierar naturligtvis fr氓n sektor till sektor. Det finns dock n氓gra saker du m氓ste t盲nka p氓:

Anv盲nd en rutn盲tslayout

I en rutn盲tslayout 盲r produkterna ordnade i lika stora rektangul盲ra l氓dor, s氓 h盲r:

Denna layout har l盲nge varit konventionen f枚r e-handel webbplatser. Inte bara skulle dina kunder redan vara bekanta med det, det 盲r ocks氓 bra f枚r att visa produkter. Dessutom skalar den bra - du kan bara visa en ruta p氓 sm氓 sk盲rmar eller ut枚ka till flera rutor p氓 st枚rre.

N盲r du anv盲nder denna layout, se till att h氓lla l氓dorna lika stora. , att anv盲nda lika stora l氓dor kan 枚ka int盲kterna per bes枚kare med s氓 mycket som 17 %.

Om du s盲ljer med 51视频 盲r det inget problem f枚r dig 鈥� 51视频 har ett rutn盲t av samma storlek som automatiskt anpassar sig till olika sk盲rmar.

Visa navigering h枚gst upp i produktlistorna

En annan konvention du b枚r f枚lja 盲r att placera dina sorteringsalternativ h枚gst upp p氓 sidan.

Kunder har b枚rjat f枚rv盲nta sig denna placering och kommer naturligtvis att titta h盲r n盲r de landar p氓 en kategorisida.

Orientera kunder med str枚br枚d

Br枚dsmulor 盲r navigeringselement som visar anv盲ndarna deras v盲g fr氓n hemsidan, s氓 h盲r:

Att l盲gga till dem 枚verst p氓 sidan hj盲lper bes枚karna att orientera sig. Den talar om f枚r dem vilken sida eller kategori de 盲r p氓 och hur de kan g氓 tillbaka till startsidan.

4. Fokusera p氓 det visuella, men gl枚m inte texten p氓 produktsidorna

Online 盲r det enda s盲ttet att visa dina produkter genom bilder. Det 盲r d盲rf枚r som stora produktbilder 盲r k盲nda f枚r att 枚ka e-handel omvandlingar.

Men 盲ven om det visuella 盲r viktigt, b枚r din layout ocks氓 ha utrymme f枚r beskrivande text. Bra exemplar beskriver inte bara produkten, utan hj盲lper ocks氓 till att s盲lja den och ditt varum盲rke.

T盲nk till exempel p氓 hur BestMadeCo anv盲nder stark kopia p氓 sin hemsida f枚r att s盲lja en nyligen lanserad produkt. Layouten hj盲lper texten att spela ut mot bilden perfekt.

Produktkopia 盲r s盲rskilt viktigt p氓 produktsidor. Din layout b枚r ge kunderna all nyckelinformation de beh枚ver f枚r att fatta ett beslut precis ovanf枚r mitten. Detta b枚r inneh氓lla:

• Pris (inklusive rabatt, representerat visuellt)
• Produktbetyg och antal recensioner
• Produkt- och varum盲rkesnamn
• Om produkten finns i lager (och om lagret b枚rjar ta slut)
• Frakt detaljer
• 2-3 viktiga produktdetaljer

Detta 盲r ett exempel p氓 hur man inte kan layouta produkter. Produktsidan har ingen kopia alls - det 盲r sv氓rt att fatta ett beslut.

Som med det mesta 盲r Amazons layout perfekt h盲r, vilket ger kunderna allt de beh枚ver f枚r att fatta ett beslut.

5. L盲gg till produktrekommendationer och relaterade produkter

P氓 produktsidor har du tv氓 m氓l:

• F氓 kunden till kassasidan, eller
• F氓 kunden att se en annan produkt

F枚r det senare borde du ha . Du kan placera denna antingen efter produktinformationen eller f枚re den.

Amazon g枚r detta s盲rskilt bra. L盲gg m盲rke till de relaterade produkterna och "sedda" listorna nedanf枚r mitten:

Om du har flera produkter i samma kollektion, se till att visa dem ocks氓. H盲r 盲r ett bra exempel fr氓n WorldMarket:

Relaterade produktannonser beh枚ver inte alltid vara visuella. Du kan ocks氓 visa relaterade s枚kningar f枚r att h盲nvisa kunder till f枚rem氓l som de kan vara intresserade av.

Experimentera med olika layouter f枚r relaterade/rekommenderade produkter. Prova att placera dem ovanf枚r sidfoten, under produktbeskrivningen osv.

6. Experimentera med mouseover-detaljer p氓 kategorisidor

Ett s盲tt att f枚rb盲ttra klick priser 盲r att erbjuda ytterligare information n盲r en kund f枚r musen 枚ver en produktbild p氓 kategorisidor.

Till exempel, visar produktdetaljer och en L盲gg till i kundvagn-knapp vid muspekaren:

Syftet med denna taktik 盲r att ge anv盲ndarna nyckelinformation p氓 ett 枚gonblick. Det fungerar b盲st n盲r du f枚rv盲ntar dig att anv盲ndare snabbt ska bl盲ddra igenom ett stort antal produkter, till exempel i kl盲dbutiker. Det kanske inte fungerar f枚r andra kategorier, men du kan fortfarande k枚ra n氓gra delade tester och se resultaten.

I 51视频 kan du aktivera "K枚p nu"-knappar p氓 produktlistor f枚r att hj盲lpa dina kunder att snabbt bl盲ddra (och k枚pa) dina produkter.

N盲r en kund klickar p氓 en s氓dan knapp kommer din butik inte att 枚ppna hela produktsidan. Ist盲llet kommer din kund att se en popup med produktalternativ:

Om din produkt inte har n氓gra alternativ, hamnar den direkt i kundvagnen.

Slutsats

N盲r det kommer till produktlayout 盲r det b盲st att h氓lla sig till konventionen och f枚lja vad marknadsledare redan g枚r. Katalogisera dina produkter i detalj, kategorisera dem noggrant och organisera dem sedan i en standardrutn盲tslayout.

De b盲sta metoderna som delas ovan kommer att fungera f枚r de flesta butiker inom olika sektorer. Prova dem i din egen butik!

Skapa en vacker onlinebutik med 51视频
L盲s mer

• Hur du fixar din butiks navigering
• Allt du beh枚ver veta om produktf枚rs盲ljning
• Online Merchandising: Hur man l盲gger upp produkter i onlinebutiken
• Vad 盲r Fashion Merchandising, och varf枚r 盲r det s氓 viktigt?
• 10 designfel i onlinebutiker
• 15 perfekta teckensnittskombinationer f枚r din e-handelswebbplats
• F盲rgteori: Allt du beh枚ver veta om f盲rgteman
• 7 kreativa id茅er f枚r din produktsida f枚r e-handel
• Kraften i en hj盲ltebild i webbdesign
• 惭氓蝉迟别-丑补 UX-principer att f枚lja i en onlinebutik
• Revision av webbdesign
• L氓sa upp kraften i UX-design f枚r e-handel
• Vad 盲r skillnaden mellan UI och UX i e-handel?