10 Mga tip para sa pagdidisenyo ng isang mahusay na web storefront

Ang mga negosyante at mga nagtitingi ng ladrilyo-at-mortar na naghahanap upang mapalawak sa online shopping ay may maraming mga pagpipilian na magagamit sa kanila kaysa dati, ngunit mayroon din silang mas maraming mga pagsasaalang-alang sa website at mga teknikal na pagpipilian upang matukoy din. Ang pagbuo ng isang epektibong web storefront ay mayroon pa ring mga nagbibigay ng turnkey, tulad ng Wix Stores, na maaaring gawing mabilis at simple ang pag-pop up. Ngunit ang mga talagang seryoso tungkol sa paglaki ng kanilang mga online na negosyo ay malalaman na ang kanilang mga pangangailangan ay umusbong na lampas sa mga serbisyong ito na turnkey.

Mayroong maraming mga katanungan na sagutin muna bago ang anumang bagay ay talagang nagpapakita sa cyberspace at pagkatapos ay higit pa habang tumatagal ang negosyo. Ang pagkolekta ng data sa mga customer ay isang mahusay na halimbawa, at isang pangunahing katanungan ngayon, lalo na para sa anumang mga tindahan na naghahanap upang ma-access ang mga merkado sa Europa. Ang conversion ng pera at naiiba na mga batas sa e-commerce ay pa rin ang matitinding mga problema sa mga pamilihan, ngunit ngayon kakailanganin mo ring harapin ang Pangkalahatang Data Protection Regulation (GDPR), na nangangailangan ng isang mas maingat na proseso sa paghawak para sa data ng customer.

Ang seguridad sa transaksyon ay isa pang pangunahing tanong dahil nangangahulugan ito na balansehin ang pangangailangan para sa kaligtasan ng customer sa kung gaano karaming mga hoops ang kakailanganin mo silang tumalon bago sila makagawa ng pagbili. At hindi mahalaga kung anong mga pagpapasya ang iyong ginagawa para sa iyong pamantayang website, kakailanganin mong magkaroon ng parehong talakayan para sa pag-iiba ng mobile nito. Sapagkat, habang ang kadaliang kumilos ay tiyak na isa sa mga darating na buzzwords ng nakaraang taon, ang labis na 12 buwan ay hindi nabawasan ang kahalagahan nito.

Itinutukoy ng kasalukuyang pag-iisip na dapat idisenyo muna ng mga tagabuo ng web ang karanasan sa mobile at pagkatapos ay ayusin ang karanasan sa desktop kung kinakailangan.

"Ang bawat elemento, bawat piraso ng nilalaman, ay dapat na gumana sa mobile, " sabi ni Jimmy Rodriguez, Chief Operating Officer (COO) sa 3dcart. "Kung nagsisimula ka mula sa simula, nagdidisenyo ka para sa mobile. Sa tumutugon sa disenyo, maaari kang bumuo ng website upang magsimula sa mobile at pagkatapos ay dalhin ito sa desktop."

Upang matulungan kang idisenyo ang iyong e-commerce storefront para sa parehong mga gumagamit ng mobile at desktop, naipon namin ang 10 mahahalagang tip sa ibaba. Gayunman, inirerekumenda ni Rodriguez na, bago isama ang mga negosyo sa alinman sa mga ito sa kanilang mga storefronts, dapat nilang subukan ang A / B na subukan ang mga tampok na ito sa mga tukoy na pahina ng produkto upang makita kung paano nila ginagawa ito bago isulong ito sa kanilang buong website.

1. Malagkit na Pag-navigate ng Header

Nariyan kaming lahat: Nag-scroll kami pababa sa ilalim ng isang pahina ng produkto upang mabasa ang mga pagsusuri ng gumagamit o mga detalye ng produkto at ngayon handa na kaming umalis sa pahina upang bumalik sa menu upang magpatuloy sa aming paglalakbay sa pamimili. Sa kasamaang palad, upang makabalik sa menu, karaniwang kailangan naming i-click ang pindutan ng "Pahina Up" sa aming mga desktop keyboard o i-tap sa tuktok ng screen sa aming mga mobile device.

Sa Mga Sticky Header, habang nag-scroll ka pababa, binabago at nag-aayos ang menu. Sinusundan ka ng menu kasama ang iyong paglalakbay upang mapanatili ang nabigasyon sa screen na kailangan mo upang mabilis na tumalon ng mga pahina. Maaari mong makita ito sa epekto sa Bose.com. Sa kabila ng kalagitnaan ng pahina, magagawa mo pa ring ma-access ang pangunahing nabigasyon ng pahina nang hindi kinakailangang tumungo pabalik sa tuktok ng screen.

2. Mga Hamburger Menus

Bagaman ang tunog ng Hamburger Menus ay tulad ng isang tampok na pinaka-angkop para sa mga restawran sa fast-food, mabilis silang nagiging isang dapat-kailangan para sa mga kumpanya na maraming negosyo sa mga mobile device. Nakita mo na ang mga ito bago: Ang Hamburger Menus ay naging pamantayang mobile na icon para sa mobile nabigasyon at mga menu.

Nagtatampok sila ng tatlong pahalang na linya na, kapag pinindot, nag-aalok ng isang drop-down na menu ng pag-navigate ng isang website. Lalo silang kapaki-pakinabang sa mga mobile device kung saan ang real estate ng screen ay nasa isang premium. Ngunit nagsisimula kaming makita ang mga ito sa mga website ng desktop, kaya ang mga consumer ay may katulad na karanasan sa mga website ng kumpanya anuman ang aparato na ginagamit nila.

"Marami sa mga tao ang nakakakita ng Hamburger Menus at alam nila kung ano ang ibig sabihin nito, ngunit hindi nila alam na talaga ito ang bagong pamantayan, " sabi ni Rodriguez. "Natutunan ng mga bisita ng mobile ang kahulugan ng simbolo na ito, at dapat itong yakapin ng mga website bilang pamantayan para sa pag-navigate sa mobile."

Maaari kang makakita ng isang Hamburger Menu sa kanang sulok sa kanan ng Target.com at sa mobile website ng Target. Maaari mo ring makita ito na nakalarawan sa ibaba.

3. Pag-scroll ng Paralaks

Hindi gaanong tampok na pag-andar at higit pa sa isang paraan upang mapagbuti ang mga aesthetics ng iyong website, ang Parallax scroll ay nagsasamantala sa mga malalaking banner na puno ng koleksyon ng mataas na resolusyon upang magdagdag ng isang artistikong talento sa iyong website. Sa pamamagitan ng pagsamantala sa mga malalaking, buong-lapad na mga imahe, maaari kang lumikha ng isang epekto ng pag-aalis sa pagitan ng imahe ng background ng iyong website at ang imahe na direkta sa harap ng iyong consumer.

Tulad ng nakikita mo sa imahe sa ibaba mula sa RimmelLondon.com, habang nag-scroll ka sa pahina, nagbabago ang mga imahe sa background ng website. Gayunpaman, ang pagbabago ay nangyayari nang malabo habang ang background at mga harapan ng larawan ay pinagsama sa isa't isa. Ipinapakita sa screenshot sa ibaba ang website nang tama sa sandaling ang pagbabago ng imahe ng background mula sa lilang sa rosas.

4. Walang-hanggan na Pag-scroll

Ang Walang-hanggan na Pag-scroll ay tunog tulad ng isang diskarte sa pagpapahirap kaysa sa ginagawa nitong tampok na e-commerce. Gayunpaman, pinapayagan ng nakakatuwang tool na ito ang iyong mga gumagamit na patuloy na tingnan ang mga bagong produkto nang hindi kinakailangang mag-click sa at mag-load ng isang bagong pahina. Narito kung paano ito gumagana: Kapag nag-scroll ka pababa sa ilalim ng isang pahina ng e-commerce, awtomatikong naglo-load ang pahina ng higit pang mga item sa ilalim ng pahina. Nakatala pa rin sila bilang mga pahina sa likurang dulo ngunit hindi alam ng bisita.

Maaari kang makakita ng isang katulad na tampok sa UnderArmour.com. Sa kasamaang palad, hinihiling sa iyo ng ilalim ng Armor na mag-click sa pindutan ng "Mag-load pa" upang makita ang karagdagang nilalaman. Ang ilang mga website ay nilagyan ng isang awtomatikong bukas na mekanismo na magpapakita sa iyo ng mas maraming nilalaman nang hindi nangangailangan ng isang pag-click.

5. Isang Lumulutang na "Idagdag sa Cart" Button

Katulad sa tool na Sticky Navigation, ang mga lumulutang na "Idagdag sa Cart" na mga pindutan hayaan ang iyong mga mamimili na magdagdag ng mga produkto sa kanilang shopping cart anuman ang naroroon sa pahina ng produkto. Noong nakaraan, ang mga gumagamit ay mag-scroll pababa sa mga pagsusuri ng gumagamit, mga detalye ng produkto, at iba pang mga elemento ng mas mababang pahina at, upang idagdag ang produkto sa kanilang cart, kakailanganin nilang mag-scroll pabalik sa tuktok ng pahina. Ngayon, pinapayagan ka ng mga kumpanya tulad ng Diesel.com na ang presyo, dami, mga pagpipilian sa kulay, at imahe pati na rin ang pindutang "Idagdag sa Cart", anuman ang nasa iyong pahina ng produkto.

6. Gumamit ng Batas ng Fitts '

Hindi ka namin bibigyan ng matematika sa likod ng Batas ng Fitts ', ngunit mahalagang isang teorya na mas malaki at malapit sa isang bagay ay sa amin, mas malamang na makikipag-ugnay tayo dito. Ang parehong pangunahing prinsipyo ay maaaring mailapat sa e-commerce. Kung nais mong gabayan ang mga gumagamit sa mga pahina ng produkto, shopping cart, at promo, dapat mong gawin ang mga pindutan na malaki, makulay, at malapit sa gitna ng gitna ng pahina hangga't maaari.

Kung hindi mo pinansin ang Batas ng Fitts 'at inilalagay mo ang mga maliliit, itim at puting mga pindutan kasama ang mga riles o sa ilalim ng mga pahina, maaari kang mawala sa mga potensyal na mamimili. Huwag gawin itong kamalian.

7. Ipakita ang Mga Review sa Customer at Mga Pagpapatotoo

Hindi mo nais ang mga customer na pumupunta sa iyong website, tinitingnan ang iyong mga produkto, at pagkatapos ay papunta sa Amazon.com upang suriin ang mga pagsusuri ng gumagamit. Pagkatapos ng lahat, maaaring ibenta ng Amazon.com ang produkto na mas mura o mas gusto ng customer ang karanasan sa pamimili ng Amazon.com sa iyong website.

Kung bibigyan mo ang iyong mga customer ng kakayahang i-rate at suriin ang mga produkto, pagkatapos ay magagawa mong palayasin ang mga maingat na customer na nangangailangan ng katiyakan ng mga opinyon ng ibang mga mamimili bago gumawa ng isang pagbili. Karamihan sa mga tool sa e-commerce ay ginagawang madaling maipatupad ang mga rating at mga pagsusuri upang huwag mahiya ang pagpapatupad ng kasanayang ito.

8. Isang Epektibong Customer Service Desk

Ang pakikipagsosyo sa iyong customer ay kritikal sa tagumpay sa tingian, at wala saanman mas madali o mas epektibo kaysa sa desk ng serbisyo sa customer. Ang pag-aalaga ng wastong pag-aalaga ng isang irate, hindi nasisiyahan, o kahit na nalilito na customer ay isa sa mga surest path upang ulitin ang negosyo. Ang desk ng serbisyo ngayon at mga application ng helpdesk ay ginagawang mas madali kaysa dati. Ang paggamit ng isa sa mga app na ito ay hindi lamang nag-oorganisa ng mga kahilingan ng customer, hinahayaan din nitong kunin mo ang customer at data ng pagtugon na nabuo at nakikilala ang mga nakatagpo na ito sa iyong pamamahala ng relasyon sa customer (CRM), marketing, at mga analytics ng negosyo. Ang paggawa nito ay nagbibigay-daan sa iyo na mapansin ang kung ano ang iniisip ng mga customer sa iyong tindahan at mga produkto nito.

Kung saan inilalagay mo ang iyong mga serbisyo sa serbisyo ng customer at mga touchpoints ay mahalaga sa pangkalahatang karanasan ng customer. At kung ang pakikipag-ugnay na ito ay tumatagal ng form ng isang simpleng pahina ng Makipag-ugnay, o napunta hanggang sa buksan ang isang window ng chat sa sinumang naiwan sa website nang higit sa 60 segundo, ay isang bagay na nakasalalay sa mga uri ng mga produktong ibebenta mo at ang average na pagbisita sa website ng mga istatistika para sa iyong tindahan.

Ngunit ang paggawa ng isang desk ng customer service ng isang tagumpay ay tungkol sa higit sa software. Kailangan mong tiyakin na ang isang propesyonal ay nandiyan upang harapin ang mga kahilingan o ito ay isang nasayang na pamumuhunan. Ang mga customer na napunta sa problema ng pag-click sa isang pindutan na "Makipag-ugnay sa Customer Service" ay inaasahan na makakuha ng ilang live na tulong mula sa isang aktwal na tao. Maaari mong pamahalaan ito sa pamamagitan ng telepono o sa pamamagitan ng instant chat, isang tampok na nagiging mas karaniwan sa mga service provider ng helpdesk. At kung ikaw ay strapped para sa mga kawani, maaari mong iharap ang operasyon ng serbisyo sa customer na may mga intelihenteng chatbots na "tunog" ng tao, habang nagagawa pang hawakan ang isang baha sa mga papasok na kahilingan sa isang pangunahing antas, ibibigay lamang ang mas kumplikadong mga kahilingan sa aktwal na homo sapiens.

9. Checkout ng Breadcrumb

Kapag nag-check out ang mga customer sa iyong tindahan, nais nilang malaman kung nasaan ang proseso, kung gaano kalayo ang pagtatapos nito, at kung paano madali itong bumalik nang hindi nawawala ang lahat ng data na naipasok na nila. Ipinapakita ng Breadcrumb Checkout ang mga customer nang eksakto kung saan sila nasa proseso sa pamamagitan ng paggamit ng isang guhit na pindutan ng pag-navigate na pindutan na nagpapahintulot sa mga mamimili na mag-click pasulong at paatras mula sa Pag-sign-In, Mga Pagpipilian sa Pagbabayad, Pagpipilian sa Pagpapadala, Order Order, o Ipagpatuloy ang Pamimili. Kung wala ang layout na ito, maaaring pindutin ng mga mamimili ang pindutan ng Balik, tingnan na ang kanilang impormasyon ay hindi naka-log, mabigo, at pagkatapos ay iwanan ang website.

10. 360-Degree Views

Kailanman bumili ng isang tila katamtaman na dyaket sa online lamang upang mapagtanto na nakuha ito ng isang bedazzled-rhinestone? Kaya't, nang ibalik mo ang produktong iyon, sinayang mo ang iyong sariling oras at oras ng nagbebenta, at ginugol mo ang pera ng kumpanya. Huwag mag-alala, hindi mo ito kasalanan. Higit sa malamang, ang nagbebenta ay mayroon lamang mga larawan sa harap at view ng side-view ng dyaket. Kung nag-alok ang nagbebenta ng mga imahe ng view ng 360-degree, makikita mo ang mga rhinestones at mag-click sa pindutan ng Ikansela ang Order.

Huwag gawin ang parehong pagkakamali sa iyong sariling website. Bilang karagdagan sa pagpapaalam sa mga customer na mag-zoom in sa mga imahe, bigyan sila ng pagpipilian upang paikutin o tingnan ang maraming mga anggulo ng imahe, tulad ng ginagawa ni Kenneth Cole.com. Sa ganitong paraan, hindi sila nagulat nang buksan nila ang delivery box at bunutin ang isang produkto na hindi nila inaasahan.