Naisip mo na ba kung bakit naglalagay ng gatas ang mga grocery store sa likod ng tindahan at mga tsokolate malapit sa checkout counter?
Simple: ang paglalagay ng mga mahahalagang bagay sa likod ng tindahan ay naghihikayat sa mga mamimili na maglakad-lakad at mag-browse ng iba pang mga produkto. Ang paglalagay ng maliliit na bagay (tulad ng mga tsokolate) malapit sa checkout counter ay naghihikayat sa mga pagbili ng salpok.
Bahagi ito ng agham ng disenyo ng tindahan. Ang tamang layout ng tindahan ay maaaring magpalakas ng benta, mapabuti ang katapatan sa customer, at makatulong sa mga customer na mas mabilis na mahanap ang gusto nila.
Ang iyong online na tindahan ay hindi naiiba. Ang organisasyon at layout ng iyong mga produkto ay may malaking epekto sa kung ano (at paano) binibili ng mga customer mula sa iyo.
Sa artikulong ito, ipapakita namin sa iyo kung paano i-layout ang iyong mga produkto para ma-maximize ang mga benta at conversion.
3 Bagay na Dapat Isaalang-alang Kapag Pumipili ng Layout ng Produkto
Ang layout ng produkto ay maaaring mukhang isang tuwirang problema sa una mong paglapit dito. Gayunpaman, tulad ng karamihan sa mga bagay sa
1. Pagpipilian
Ang pagpili ay a

Ang epektibong layout ng produkto ay mahalagang proseso ng pagbabalanse ng duality na ito. Iyon ay: nagbibigay ng impresyon ng maraming pagpipilian, habang pinapanatili pa rin ang site na madaling gamitin at i-navigate.
Sinasabi ng agham na ang paggawa ng desisyon ay nakakapagod sa pag-iisip. Kapag hinarap mo ang mga mamimili sa napakaraming pagpipilian, malamang na hindi sila gagawa ng kahit anong pagpipilian.
Kaya paano mo malalampasan ang problemang ito sa layout ng iyong tindahan?
Ang isang solusyon ay ang paggamit ng mga itinatampok na larawan na humahantong sa mga karagdagang produkto. Halimbawa, pansinin kung paano gumagamit ang Made.com ng magkakahiwalay na larawan para sa buong kategorya ng produkto (tulad ng "mga muwebles sa hardin"):

Isipin ito bilang isang panunukso upang mang-akit sa mga mamimili.
Sa isip, gugustuhin mong panatilihin ang iyong
Samakatuwid, bago mo simulan ang proseso ng layout , ilista ang mga sumusunod:
- Ang iyong buong hanay ng produkto at ang kani-kanilang mga kategorya at subcategory
- Mga functional na kategorya tulad ng "pinakamabentang mga produkto", "mga itinatampok na produkto", atbp. at ang mga produkto sa mga ito.
Ang susunod na hakbang ay gamitin ang impormasyong ito sa pagbuo ng a

Ang paggawa nito ay makatutulong sa mga mamimili na mahanap kung ano ang gusto nila nang hindi sila binibigyan ng napakaraming pagpipilian.
Kung idinagdag ang iyong Ecwid store sa isang website, maaari kang magdagdag ng menu ng nabigasyon sa pamamagitan ng pagdaragdag ng isang piraso ng code:
- para sa isang pahalang na layout
- para sa isang patayong layout.


Narito rin ang mga tagubilin para sa mga tindahan ng Ecwid na idinagdag sa mga website ng WordPress at Wix . Sa Ecwid Instant Site, ang pahalang na menu ay magagamit lamang.
2. Impormasyon ng produkto
Narito ang isa pang pagkilos sa pagbabalanse na dapat mong gawin kapag pumipili ng layout ng tindahan: pagpapakita ng impormasyon ng produkto.
Gusto mong bigyan ang mga customer ng impormasyong kailangan nila para mag-click at bumili. Kasabay nito, hindi mo nais na puspos sila ng napakaraming detalye — hindi bababa sa hindi bago sila ay nasa aktwal na pahina ng produkto.
Ang dapat mong maging modelo sa isip sa sitwasyong ito ay ang pagpapadali sa paggawa ng desisyon at pagpukaw ng interes ng customer. Tanungin ang iyong sarili: anong minimum na impormasyon ang kailangan ng aking mga customer para makapag-click sa isang produkto?
Malalaman mong nag-iiba ang sagot na ito sa bawat tindahan at produkto sa produkto.
Halimbawa, pansinin kung paano binibigyan ka ng Amazon ng apat na punto ng impormasyon lamang sa pahina ng kategorya: pangalan ng produkto, presyo (kabilang ang diskwento), rating at Prime availability:

Sa Ecwid, maaari kang magdagdag ng mga katulad na rating at review sa tulong ng Stampled.io app.

Bagama't kinakailangan ang impormasyong ito para sa isang malaking retailer tulad ng Amazon, para sa mas maliliit na negosyo tulad ng Sand & Stone Jewelry , hindi gaanong mahalaga ang mga rating. Kaya naman, ang mga pahina ng kategorya ay nagpapakita lamang ng pangalan at presyo ng produkto.

Madaling mahulog sa bitag ng pagbibigay ng napakakaunting impormasyon sa mga pahina ng kategorya. Ang pinakamahusay na paraan upang maiwasan ito ay ang pakikipanayam sa iyong mga customer at tanungin sila kung anong impormasyon ang kanilang ginagamit upang gumawa ng mga desisyon sa pagbili.
3. Disenyo ng tindahan
Kung paano mo idinisenyo ang iyong tindahan ay magkakaroon ng malaking epekto sa layout ng iyong produkto.
An
- Homepage
- Mga pahina ng kategorya at paghahanap
- Mga indibidwal na pahina ng produkto
Anong mga produkto ang pipiliin mong ipakita sa bawat isa
Halimbawa, tandaan kung paano nagpo-promote ang Amazon ng sarili nitong mga produkto sa homepage nito kung hindi ka pa naka-sign in:

Karaniwan para sa mga tindahan na mag-promote ng mga pinakabagong alok sa homepage. Tiyaking iayon ang mga alok na ito sa iyong target na madla. Ang BestMadeCo, halimbawa, ay nagpapatakbo ng isang promo para sa Araw ng mga Ama na isinasaisip ang karamihan sa mga kliyenteng lalaki nito.

Tumuon sa:
- Pag-alam kung anong mga produkto ang gusto mong bilhin ng mga customer (mabuti na lang ang iyong pinakamabenta, at/o mga produktong may pinakamataas na margin)
- Pagpapanatili ng pagkakapareho ng disenyo sa iba't ibang
mga uri ng pahina.
Magpasya ka man na i-highlight ang iyong mga pinakamabentang produkto o mga bagong produkto, pinapayagan ka ng Ecwid na lumikha ng isang kategorya para sa mga itinatampok na produkto sa homepage at pangalanan ito ayon sa iyong mga pangangailangan.

6 Pinakamahusay na Kasanayan para sa E-commerce Layout ng Produkto
Bagama't maaari kang lumikha ng isang natatanging scheme ng layout para sa iyong
1. Push top na mga produkto at alok sa itaas ng fold
Ang bahaging "sa itaas ng fold" ay ang screen na nakikita kapag unang beses na bumisita ang mga customer sa iyong site. Sa katunayan, ang bahaging ito ang bumubuo sa 80% ng lahat ng atensyon ng manonood sa karamihan ng mga site.
Dahil sa uri ng atensyon na nakukuha ng espasyong ito, magandang ideya na ilagay ang iyong mga nangungunang produkto sa itaas ng fold. Maaaring kabilang dito ang:
- Mga pinakabagong alok, benta at diskwento
- Pinakamabentang produkto o mga kategorya ng produkto
- Kamakailang inilunsad na mga produkto (pinakamahusay na gumagana sa simula ng panahon ng pamimili)
Halimbawa, sa Target.com , makikita mo ang mga pinakabagong alok sa itaas ng pahina:

Kung marami kang alok, isaalang-alang ang pagdaragdag ng slider, tulad ng halimbawang ito mula sa Walmart. Tandaan din ang mga promosyon na tumatakbo sa ibaba ng menu ng nabigasyon:

Iniiwasan ng ilang nagtitingi ng moda ang mga kumbensyonal na layout para mas mapaganda ang imahe ng isang tatak. Halimbawa, sa ASOS , makakakuha ka ng imahe ng isang tatak na may opsyong “Mamili ng Lalaki” o “Mamili ng Babae”.

Gumagana ang taktika na ito kapag sinusubukan mong i-promote ang isang brand vision gamit ang lookbook. Karamihan sa mga retailer, gayunpaman, ay gagawa ng mas mahusay sa isang maginoo
Sundin ang parehong ideya sa mga pahina ng kategorya: itulak ang iyong

2. Paghaluin ang pahalang at patayong mga layout
Mayroong dalawang paraan upang mai-layout mo ang iyong mga produkto sa anumang page: pahalang o patayo.
Ang isang pahalang na layout ay nananatiling static. Mayroong isang pindutan sa gilid ng pahina upang mag-scroll nang higit pa sa mga listahan.
Ang halimbawang ito mula sa Amazon ay naglalarawan ng mga bagay na mas mahusay:

Sa Ecwid, ang mga produktong tiningnan kamakailan ay ipinapakita rin nang pahalang. Maaari mong piliin ang bilang ng mga item na ipapakita sa itaas o sa ibaba ng iyong storefront.

Kaugnay na Mga Produkto ay isa pa

Sa kabaligtaran, ang isang patayong layout ay walang mga scroll button na ito. Sa halip, mas marami kang nakikitang produkto sa isang

Sa isip, dapat kang gumamit ng halo ng parehong mga layout na ito:
- Pahalang na layout kapag gusto mong magpakita ng ilang produkto mula sa maraming kategorya, gaya ng sa Mga Produktong Kamakailang Tinitingnan
- Vertical na layout kapag gusto mong magpakita ng maraming produkto mula sa parehong kategorya, gaya ng isang pahina ng paghahanap at kategorya
3. Sundin ang convention at mga inaasahan ng user
May mga sitwasyon kung kailan gugustuhin mong maging hindi kinaugalian sa iyong disenyo. Ang layout ng produkto ay hindi isa sa kanila.
Ang iyong layout ng produkto ay nilalayong i-orient ang mga user kapag napunta sila sa iyong site. Tinitiyak ng isang maginoo na layout na makikita nila ang gusto nila at hindi nalilito.
Ang mga kombensiyon, siyempre, ay nag-iiba sa bawat sektor. Gayunpaman, may ilang bagay na dapat mong isaalang-alang:
Gumamit ng layout ng grid
Sa layout ng grid, nakaayos ang mga produkto

Matagal nang naging convention ang layout na ito
Kapag ginagamit ang layout na ito, siguraduhing panatilihing pantay ang laki ng mga kahon. Gaya ng ipinapakita ng case study na ito , ang paggamit ng pantay na laki ng mga kahon ay maaaring magpataas ng kita sa bawat bisita nang hanggang 17%.

Kung nagbebenta ka gamit ang Ecwid, hindi iyon problema para sa iyo — Ang Ecwid ay may pantay na laki ng grid na awtomatikong umaangkop sa iba't ibang mga screen.
Ipakita ang nabigasyon sa itaas ng mga listahan ng produkto
Ang isa pang convention na dapat mong sundin ay ilagay ang iyong mga pagpipilian sa pag-uuri sa tuktok ng pahina.

Inaasahan ng mga customer ang placement na ito at natural na titingin dito kapag napunta sila sa isang page ng kategorya.
I-orient ang mga customer gamit ang mga breadcrumb
Ang mga breadcrumb ay mga elemento ng nabigasyon na nagpapakita sa mga user ng kanilang landas mula sa homepage, tulad nito:

Ang pagdaragdag sa mga ito sa tuktok ng pahina ay nakakatulong na i-orient ang mga bisita. Sinasabi nito sa kanila kung anong page o kategorya sila at kung paano sila makakabalik sa homepage.
4. Tumutok sa mga visual, ngunit huwag kalimutan ang teksto sa mga pahina ng produkto
Online, ang tanging paraan upang ipakita ang iyong mga produkto ay sa pamamagitan ng mga visual. Ito ang dahilan kung bakit ang malalaking larawan ng produkto ay kilala na nagpapalakas
Gayunpaman, habang mahalaga ang mga visual, ang iyong layout ay dapat ding magkaroon ng puwang para sa mapaglarawang teksto. Ang magandang kopya ay hindi lamang naglalarawan sa produkto, ngunit nakakatulong din na ibenta ito at ang iyong brand.
Halimbawa, isaalang-alang kung paano gumagamit ang BestMadeCo ng malakas na kopya sa homepage nito upang magbenta ng isang kamakailang inilunsad na produkto. Tinutulungan ng layout ang teksto na ganap na maglaro laban sa larawan.

Ang kopya ng produkto ay partikular na mahalaga sa mga pahina ng produkto. Dapat ibigay ng iyong layout sa mga customer ang lahat ng mahahalagang impormasyon na kailangan nila upang makagawa ng desisyon sa itaas ng fold. Dapat kasama rito ang:
- Presyo (kabilang ang diskwento, kinakatawan ng biswal)
- Rating ng produkto at bilang ng mga review
- Mga pangalan ng produkto at tatak
- Kung ang produkto ay nasa stock (at kung ang stock ay ubos na)
- Mga detalye ng pagpapadala
2-3 pangunahing mga detalye ng produkto
Ito ay isang halimbawa kung paano hindi mag-layout ng mga produkto. Walang kopya ang page ng produkto — mahirap magdesisyon.

Tulad ng karamihan sa mga bagay, perpekto ang layout ng Amazon dito, na nagbibigay sa mga customer ng lahat ng kailangan nila upang makagawa ng desisyon.

5. Magdagdag ng mga rekomendasyon sa produkto at mga kaugnay na produkto
Sa mga page ng produkto, mayroon kang dalawang layunin:
- Dalhin ang customer sa pahina ng pag-checkout, o
- Kunin ang customer na tingnan ang isa pang produkto
Para sa huli, dapat kang magkaroon ng seksyong "mga inirerekomenda o kaugnay na produkto" . Maaari mo itong ilagay alinman pagkatapos ng impormasyon ng produkto o bago ito.
Ginagawa ito ng Amazon nang mahusay. Pansinin ang mga kaugnay na produkto at mga listahang "tiningnan din" sa ibaba ng fold:

Kung marami kang produkto sa parehong koleksyon, tiyaking ipakita din ang mga ito. Narito ang isang magandang halimbawa mula sa WorldMarket:

Ang mga kaugnay na listahan ng produkto ay hindi dapat palaging nakikita. Maaari ka ring magpakita ng mga nauugnay na paghahanap upang idirekta ang mga customer sa mga item na maaaring interesado sila.

Mag-eksperimento sa iba't ibang mga layout para sa mga nauugnay/inirerekomendang produkto. Subukang ilagay ang mga ito sa itaas ng footer, sa ibaba ng paglalarawan ng produkto, atbp.
6. Eksperimento sa mga detalye ng mouseover sa mga pahina ng kategorya
Isang paraan upang mapabuti
Halimbawa, ipinapakita ng site na ito ang mga detalye ng produkto at isang button na "add to cart" kapag ini-hover ang mouse:

Ang layunin ng taktika na ito ay bigyan ang mga user ng pangunahing impormasyon sa isang sulyap. Ito ay pinakamahusay na gumagana kapag inaasahan mong mag-browse ang mga user sa isang malaking bilang ng mga produkto nang mabilis, gaya ng sa mga tindahan ng damit. Maaaring hindi ito gumana para sa iba pang mga kategorya, ngunit maaari ka pa ring magpatakbo ng ilang split test at makita ang mga resulta.
Sa Ecwid, maaari mong paganahin ang mga button na "Buy Now" sa mga listahan ng produkto upang matulungan ang iyong mga customer na mabilis na mag-browse (at bumili) ng iyong mga produkto.

Kapag nag-click ang isang customer sa naturang button, hindi bubuksan ng iyong tindahan ang buong page ng produkto. Sa halip, makakakita ang iyong customer ng popup na may mga opsyon sa produkto:

Kung walang mga opsyon ang iyong produkto, dumiretso ito sa cart.
Konklusyon
Pagdating sa layout ng produkto, pinakamahusay na manatili sa convention at sundin kung ano ang ginagawa ng mga pinuno ng merkado. I-catalog ang iyong mga produkto nang detalyado, ikategorya ang mga ito nang lubusan, pagkatapos ay ayusin ang mga ito sa isang karaniwang layout ng grid.
Ang pinakamahuhusay na kagawiang ibinahagi sa itaas ay gagana para sa karamihan ng mga tindahan sa lahat ng sektor. Subukan ang mga ito sa iyong sariling tindahan!
- Paano Ayusin ang Navigation ng Iyong Tindahan
- Lahat ng Kailangan Mong Malaman Tungkol sa Produkto Merchandising
- Online Merchandising: Paano Mag-layout ng Mga Produkto sa Online Store
- Ano ang Fashion Merchandising, at Bakit Ito Napakahalaga?
- 10 Mga Pagkakamali sa Disenyo ng mga Online na Tindahan
- 15 Perpektong Pagpares ng Font para sa Iyong Website ng Ecommerce
- Teorya ng Kulay: Lahat ng Kailangan Mong Malaman tungkol sa Mga Tema ng Kulay
- 7 Malikhaing Ideya para sa Iyong Pahina ng Produkto sa Ecommerce
- Ang Kapangyarihan ng Isang Hero Image sa Web Design
Kailangang-Magkaroon Mga Prinsipyo ng UX na Dapat Sundin sa isang Online Store- Pag-audit sa Disenyo ng Website
- Pag-unlock sa Kapangyarihan ng UX Design para sa Ecommerce
- Ano ang Pagkakaiba sa pagitan ng UI at UX sa Ecommerce?






