如何打造最好的電商網(wǎng)頁?

時(shí)間：2022-08-25 22:27:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-25 22:27:01 來源：網(wǎng)站運(yùn)營(yíng)

譯者：陳明艷

本文長(zhǎng)度為5729字，預(yù)估閱讀時(shí)間10分鐘。

我們今天要向大家介紹的是電商網(wǎng)頁的搭建和優(yōu)化從網(wǎng)站的頂層導(dǎo)航到交易內(nèi)容，在打造電商頁面時(shí)，會(huì)需要很多的考慮。


在今天的白板星期五，Rand用他個(gè)人最喜歡的一個(gè)例子，一步步詳細(xì)地給你講述如何創(chuàng)建一個(gè)真正精湛的電商網(wǎng)頁。







大家好，歡迎來到白板星期五的特別版。我叫Rand

Fishkin，Moz的創(chuàng)始人，今天我想跟你聊聊如何在網(wǎng)絡(luò)上打造/設(shè)計(jì)最好的電商頁面。我將用我喜愛的電商頁面中的一個(gè)例子，那就是Bellroy纖薄錢包頁面。現(xiàn)在，實(shí)際上Bellroy的所有頁面都是與錢包相關(guān)，Bellroy制造錢包并主要在網(wǎng)上銷售。他們制造了一些很經(jīng)典的產(chǎn)品。我也擁有Bellroy的一款錢包并使用了很長(zhǎng)的一段時(shí)間，正是這個(gè)頁面讓我相信并去購(gòu)買。那么，還有什么更好的例子呢？




所以我今天要做的是讓我們了解這個(gè)經(jīng)典的電商頁面的元素，談?wù)勔恍┪艺J(rèn)為Bellroy可以改進(jìn)的地方，然后在最后，通過這個(gè)過程來改善你自己的電商網(wǎng)頁。

• 一個(gè)經(jīng)典電商頁面的元素

讓我們從第一項(xiàng)開始，很不幸的是，很多人都不談?wù)摰珜?duì)于電商流程和電商頁面來說卻是至關(guān)重要的，那就是…




1頂部導(dǎo)航










盡管頁面頂部的導(dǎo)航所需要做的事情很少，但它必須幫助用戶：

• 了解并知道他們?cè)诰W(wǎng)站結(jié)構(gòu)中的位置，尤其當(dāng)你有一個(gè)較為復(fù)雜的網(wǎng)站時(shí)。在Bellroy的案例中，他們不需要強(qiáng)調(diào)任何東西，因?yàn)槟阒滥阍谝粋€(gè)錢包的網(wǎng)頁上，可能是在官方商店里，對(duì)吧？但對(duì)亞馬遜（Amazon）而言，這就至關(guān)重要。對(duì)百思買(Best
  Buy)，這也非常重要。即使是像三星和蘋果這類的平臺(tái)，讓用戶了解到其在網(wǎng)站結(jié)構(gòu)中的位置也是非常關(guān)鍵的。

• 我想了解關(guān)于品牌本身的信息。如果有用戶第一次瀏覽該網(wǎng)站，他們通常是您對(duì)品牌首次曝光的切入點(diǎn)，這是電商網(wǎng)頁常見的情況。讓我們回想一下，從我們所知道的關(guān)于轉(zhuǎn)化率優(yōu)化的知識(shí)中，要在用戶第一次瀏覽品牌或者網(wǎng)站頁面時(shí)轉(zhuǎn)化用戶是不太常見的，但是你可以給用戶留下一個(gè)較好的第一印象，而這其中的部分內(nèi)容就是你的頂部導(dǎo)航所需要做的。所以它應(yīng)該幫助用戶認(rèn)知品牌，了解品牌的風(fēng)格和細(xì)節(jié)。

• 你需要知道從哪里可以進(jìn)入網(wǎng)站。在哪里可以搜索？如果這是我第一次或第二次瀏覽，我嘗試想要了解更多關(guān)于公司的信息，我希望能夠簡(jiǎn)單地找到類似“關(guān)于我們”，又或者我想能夠了解更多關(guān)于他們的產(chǎn)品或他們是做什么的，了解更多的實(shí)用手冊(cè)，了解更多關(guān)于他們的產(chǎn)品系列，并且了解他們能夠提供給我的其他東西。

• 我也想要在購(gòu)物車周圍有這種簡(jiǎn)單的導(dǎo)航，尤其是對(duì)于電商的重復(fù)訪客和購(gòu)物不止一件商品的客戶。實(shí)際上，我并不喜歡Bellroy如何最小化導(dǎo)航，但你需要確保搜索欄也要在這里面。搜索實(shí)際上是一個(gè)功能。對(duì)于電商頁面平均大約10%到12%的訪問者將使用搜索來作為他們的首要導(dǎo)航功能。所以，如果你讓搜索真的變得薄弱、難以找到相關(guān)商品或者不好使用，搜索功能真的能夠限制你對(duì)于這批群體的影響。

• 我想要有關(guān)購(gòu)物過程的信息。在Bellroy的案例中，我喜歡他們所做的。他們?cè)诿恳豁搶?dǎo)航欄內(nèi)都寫有“美國(guó)范圍內(nèi)免郵”，我想，這顯然對(duì)他們來說肯定是他們一直以來都在關(guān)注的關(guān)鍵問題之一。毫無疑問，他們已經(jīng)做了一些A/B測(cè)試和優(yōu)化，以確保把“嗨，你知道嗎？放在每個(gè)人面前，因?yàn)樗粫?huì)傷害用戶感知并且能夠有助于提高轉(zhuǎn)化率。”

2核心產(chǎn)品信息







核心產(chǎn)品信息往往是上述圖片的關(guān)鍵部分。在關(guān)于Bellroy的案例中，核心產(chǎn)品信息非常簡(jiǎn)約。我們只是在談?wù)撨@款錢包的圖片，然后你可以點(diǎn)擊圖片的左邊或右邊，或者同樣可以通過在桌面上實(shí)現(xiàn)自動(dòng)滾動(dòng)展現(xiàn)。我可以看到更多的照片，這些照片展示了這款錢包能夠裝多少?gòu)埧ǎ胚M(jìn)褲子口袋里是看起來怎么樣，它是如何測(cè)量的，以及所有與之相關(guān)的東西。這里確實(shí)是一些很好的拍攝照片，同樣重要的還有產(chǎn)品名稱和價(jià)格。這些核心細(xì)節(jié)可能因產(chǎn)品而異。例如，如果你正在銷售一項(xiàng)更為復(fù)雜的技術(shù)，核心功能實(shí)際上可能也是相當(dāng)真實(shí)的，那沒有關(guān)系。通過這些核心產(chǎn)品信息，我們正嘗試幫助用戶理解這個(gè)產(chǎn)品是什么，它能做什么。所以，錢包就是一個(gè)非常明顯的例子。如果我們所談?wù)摰氖顷P(guān)于實(shí)驗(yàn)室設(shè)備或科學(xué)機(jī)器，那就有點(diǎn)復(fù)雜了。我們最好確保我們正在溝通的是關(guān)鍵的內(nèi)容。

• 視覺效果將服務(wù)于什么呢？在這個(gè)案例中，我認(rèn)為他們做的很好，他們向用戶全面地傳達(dá)了產(chǎn)品本身的定位。所以，Bellroy顯然就是極簡(jiǎn)主義。他們傳承著工藝。他們是小小的利基商店。他們沒有要去做10000件東西。他們專注于錢包，并且他們嘗試將這個(gè)定位變得更加清晰。他們也試圖使產(chǎn)品的品質(zhì)成為其中的重要部分，嘗試把產(chǎn)品本身的焦點(diǎn)聚焦到“纖薄”。當(dāng)你進(jìn)入頁面時(shí)，你真的可以很明顯的看到命名規(guī)范，同樣也包括拍攝的照片本身，都在向你展示與其他的錢包相比，這款錢包有多么的苗條。他們?nèi)∠嗤瑪?shù)量的卡片，將它們放入兩款不同的錢包，并向你展示他們的厚度，Bellroy非常、非常地纖薄。因此，這就是定位的意義所在。

• 在這里，我們可能需要視頻或動(dòng)畫。但我要說的是，當(dāng)它真正有意義的時(shí)候，只是核心內(nèi)容的一部分。Zappos就是一個(gè)很好的例子。Zappos在網(wǎng)上宣傳推廣的每一款鞋和鞋子品牌都有他們的視頻。他們見到了轉(zhuǎn)化率的巨大提升，因?yàn)橛脩魧?duì)于鞋子有很多問題，關(guān)于鞋子穿著行走和移動(dòng)，與某些衣服搭配起來如何？讓別人給你解釋細(xì)節(jié)，正如我給你在視頻中講解電商頁面一樣，結(jié)果證明對(duì)他們的轉(zhuǎn)化率有很大的影響。你可能想要測(cè)試這個(gè)，但視頻和動(dòng)畫內(nèi)容可能在下面。我們將在視頻的的末端討論如何在底部的照片和流程中存放更多的視頻。

• 命名規(guī)范。我們要價(jià)格，我們想要核心結(jié)構(gòu)的細(xì)節(jié)。我喜歡Bellroy，他們所展示的核心內(nèi)容非常的簡(jiǎn)潔，僅僅只有圖片、商品名以及價(jià)格。

3購(gòu)買路徑的明確選擇







我認(rèn)為，在某種程度上，很多人都不幸被亞馬遜的模式所影響。如果你是亞馬遜，那沒事，它有驚人的點(diǎn)擊率，驚人的參與度，驚人的轉(zhuǎn)化率，但你不是亞馬遜。亞馬遜做的一件事情就是他們?cè)诰W(wǎng)站上堆砌了成百上千種商品，并且他們建立了幾十年，幾十年！他們建立起來的是我們都熟悉的亞馬遜網(wǎng)頁、電商頁面，以及我們所期待的內(nèi)容。我們知道這里會(huì)有很多東西。我們知道這里有大量的行為召喚，以及其他我們可能購(gòu)買的東西，還有與這些東西經(jīng)常一起購(gòu)買的，還包括捆綁銷售的東西。這些對(duì)于亞馬遜來說這是很有益的。除非你的網(wǎng)站和亞馬遜非常相似，否則對(duì)你而言這些絕不會(huì)很有益。因此，我看到許多人被拖到這個(gè)方向，“嘿，我想要有10個(gè)不同的行為召喚，因?yàn)橛脩艨赡芟胍猉，Y，和Z?！睂?duì)于電商產(chǎn)品而言，有一些方法可以實(shí)現(xiàn)“用戶可能想要X，Y和Z”的功能，而不需要在其著陸頁面的核心部分做這些具體的行為召喚。我一會(huì)兒會(huì)講到這些。




但是我想讓你在這里做的是：

• 幫助用戶了解什么是可用的?？焖偈纠?，你可以選擇顏色。這是你唯一能用這個(gè)錢包做的事。沒有不同的尺寸可選，也沒有不同的制成材料可選。這里僅僅只有顏色可以挑選。選擇顏色，結(jié)賬，順便再?gòu)?qiáng)調(diào)一下，免郵。

• 我正試圖推動(dòng)用戶采取主要行動(dòng)，這就是你的電商頁面所需要做好的工作。如果有的話，使選項(xiàng)明確，并讓購(gòu)買路徑最簡(jiǎn)化。

• 我們正努力消除障礙，我們正努力消除可能出現(xiàn)的任何問題，并且我們希望消除任何未知的挫折。舉個(gè)例子，我將在這里做的事情之一，但Bellroy沒做，我將基于IP地址進(jìn)行地理定位。所以我會(huì)看看訪問這個(gè)頁面的訪問者的IP地址，我會(huì)說，“我很確定你現(xiàn)在位于華盛頓州。因此，我就知道我所需要收取的銷售稅額?！被蛘哒f，“Bellroy不在華盛頓州。我不需要向您收取銷售稅。”所以我可能會(huì)在這里說一下“銷售稅”，如果你知道，然后通過下拉式菜單選擇提前預(yù)填好的華盛頓或郵政編碼，那么展示的銷售稅為“$0?！边@樣做就是預(yù)測(cè)。就像已經(jīng)說了這樣，“哦，很好。我知道我將要點(diǎn)擊的下一頁面是叫我詢問關(guān)于銷售稅，又或者是我進(jìn)入我的信用卡后的頁面?！蹦阒绬?，提前回答這個(gè)問題很好?，F(xiàn)在，Bellroy也許已經(jīng)測(cè)試過這一點(diǎn)，他們發(fā)現(xiàn)它同樣也不能轉(zhuǎn)化，但是我猜測(cè)有那些信息在的話，它可能會(huì)更好地轉(zhuǎn)化。

4產(chǎn)品功能的詳細(xì)描述







這就是經(jīng)常出現(xiàn)在電商頁面、產(chǎn)品頁面上大部分內(nèi)容。在這種情況下，用戶得到了功能列表，包括尺寸、它是如何做成的、它是由什么材料制造的以及它能夠容納的內(nèi)容等等。




我在這里想要做的一些事情是：

• 我想幫助用戶了解這款產(chǎn)品有什么值得期待的。我不想要高回報(bào)。特別是如果我已經(jīng)提供免郵服務(wù)，我肯定不想要高回報(bào)。我希望用戶可以對(duì)這款產(chǎn)品滿意，并且知道他們將會(huì)得到什么。

• 我想幫助他們確定產(chǎn)品是否符合他們的需求，是否符合他們正努力完成的事情，是否符合他們想要解決的問題。

• 我想引導(dǎo)他們快速地回答一些常見問題。所以，如果我知道很多訪問這個(gè)頁面的人都有這樣的情況，“哦，天啊，你知道，我不知道他們快遞的過程是什么樣的？需要多長(zhǎng)的時(shí)間？因?yàn)檫@次旅行我需要一個(gè)錢包，我想要把這款錢包放進(jìn)我的褲子口袋里，所以我不要厚厚的錢包，這也正是導(dǎo)致我需要在Google里搜索纖薄錢包，并引導(dǎo)到這個(gè)頁面的原因？”快遞，這是一個(gè)很重要的部分，你已經(jīng)回答了這個(gè)問題，或者正如他們所問的那樣，這真的很重要。在用戶開始對(duì)結(jié)賬過程感到恐慌之前，預(yù)先回答給出他們想要的答案。

你可以通過與用戶溝通來解決這個(gè)問題，“嘿，我想讓你想象你將要購(gòu)買這款商品。把你腦子里想到的10件事情告訴我。我想要你大聲地說出當(dāng)你看見這個(gè)頁面時(shí)你所想到的每一件事情。”你可以和真正的客戶一起實(shí)驗(yàn)，可以是回頭客，可以是那些符合你的目標(biāo)人群和目標(biāo)客戶但還未在你那里購(gòu)買過的客戶，可以是在你的競(jìng)爭(zhēng)者那里購(gòu)買過的客戶。當(dāng)你這樣做的時(shí)候，一段時(shí)間后你將會(huì)發(fā)現(xiàn)答案非常地相似，然后你就能夠通過功能內(nèi)容正確地回答客戶的問題了。保質(zhì)期是另一個(gè)明顯的大問題。他們注意到這里有三年的保質(zhì)期。用戶可以點(diǎn)擊“+”號(hào)了解更多的信息。




我同樣也喜歡他們回答那些還沒有被問到的問題?！癘kay，錢包的尺寸是80毫米*95毫米?！薄暗俏也恢酪缓撩资嵌嗌?。我不能在我的頭腦中保留這樣的信息?！钡悄銜?huì)發(fā)現(xiàn)，他們?cè)陧撁嫔嫌幸粋€(gè)鏈接“與其他比較。”如果你點(diǎn)擊這個(gè)鏈接，它將向你展示這款錢包和別人提供的其他款錢包的全方面比較。太棒了，在我提出問題之前，你已經(jīng)在回答問題了。







5大量的可靠?jī)?nèi)容







我們前面談?wù)摰年P(guān)于視頻或者動(dòng)畫或者其他的一些內(nèi)容都屬于功能部分，或者僅僅只是結(jié)賬部分，但是還沒有達(dá)到我們所要求的重要程度，這就是你可以把內(nèi)容放上去的地方?？梢宰龀烧郫B，并向下滾動(dòng)展示。我還沒有見到有電商頁面提供了用戶真正關(guān)心的事情的細(xì)節(jié)。我看到過有電商頁面提供了大量的內(nèi)容，但卻沒有用戶關(guān)心，尤其是當(dāng)內(nèi)容影響到頁面的加載速度時(shí)，在移動(dòng)終端上將會(huì)影響你的轉(zhuǎn)化率和你在Google中的排名，因?yàn)檎军c(diǎn)速度是一個(gè)真正的問題。但是可靠?jī)?nèi)容應(yīng)該：

• 讓用戶覺得舒服并構(gòu)建信任。所以，如果當(dāng)我向下滾動(dòng)頁面到這里，我所看見的是更多關(guān)于這款錢包是怎么制造的，人們是如何使用它的相關(guān)圖片。他們將其巧妙地命名為透明化方法，我確信它能夠帶來很多的點(diǎn)擊。用透明化方法構(gòu)建一款錢包，展示為什么皮革如此纖細(xì)，為什么錢包如此輕便，為什么它能使用那么長(zhǎng)時(shí)間，所有諸如此類的事情。

• 它試圖利用社會(huì)證明或其他心理誘因來擺脫用戶的任何懷疑。所以，如果你知道潛在購(gòu)買者有什么懷疑的內(nèi)容，你可以通過這個(gè)更深層次的內(nèi)容來回答這個(gè)問題。

好吧，你也許會(huì)對(duì)自己說，“這些聽起來都很棒，但我如何運(yùn)行這個(gè)過程,Rand？”答案都已包含在我們剛剛談?wù)摰膬?nèi)容中。你將需要咨詢你的客戶，你的潛在客戶，以前從你這里購(gòu)買過的客戶，以及還沒有從你這里購(gòu)買但卻最終從競(jìng)爭(zhēng)對(duì)手那里購(gòu)買的客戶，了解這些內(nèi)容元素。你將需要進(jìn)行測(cè)試，這意味著你需要一些基礎(chǔ)設(shè)施，如Unbounce或Optimizely測(cè)試平臺(tái)，或者你想讓你的工程師為你構(gòu)建一個(gè)屬于你自己的測(cè)試平臺(tái)，以便能夠更改這些元素和信息，并看著它們?nèi)绾螌?shí)現(xiàn)轉(zhuǎn)化。但是，改變像按鈕顏色這樣的事情，或改變功能列表，或者在問題出現(xiàn)時(shí)更改特定的圖片是沒有幫助的，總的來說，你還是沒有解決這些問題。如果你不解決這些問題，世界上最好看的按鈕顏色也無法幫助你提升轉(zhuǎn)化率，這就是為什么我們需要形成理論，并對(duì)阻止用戶購(gòu)買的原因形成假設(shè)。這應(yīng)該通過我們的真實(shí)研究。

• 電商頁面的搜索引擎優(yōu)化

電商頁面的搜索引擎優(yōu)化只是基于幾個(gè)非常簡(jiǎn)單的事情。我們搜索引擎優(yōu)化的元素是關(guān)鍵詞、內(nèi)容、參與度、鏈接和在某些情況下的新鮮度。你了解了這5項(xiàng)，你也就基本上掌握了搜索引擎優(yōu)化。擎優(yōu)化。

• 關(guān)鍵詞，當(dāng)用戶搜索你的產(chǎn)品時(shí)，用戶所稱呼的產(chǎn)品與你所提供產(chǎn)品是相同的嗎？如果答案是否，你還有機(jī)會(huì)來提升。即使你想使用品牌名稱，我建議將其與所有人都常用的產(chǎn)品名稱相結(jié)合。因此，如果這是一款纖薄錢包，如果歷史上Bellroy已經(jīng)將其稱呼為纖薄錢包，我會(huì)強(qiáng)烈推薦給他們的，“嘿，用戶正在尋找一款纖薄錢包。我們?cè)趺凑业胶喜⑦@些東西的方法呢？”

• 內(nèi)容是關(guān)于這個(gè)頁面的內(nèi)容，Google正在尋找解決搜索者問題的內(nèi)容，即搜索者的問題。這意味著要做好這些事情，并且必須要以Google能夠識(shí)別的格式處理。視頻可以，視頻的錄音也應(yīng)該可以，圖片也可以，詳細(xì)的描述也應(yīng)該可以。Google需要那樣的文本內(nèi)容。

• 參與度，這將來自于訪問這個(gè)頁面的用戶，而不是點(diǎn)擊后退按鈕并返回Google，搜索其他的東西，并點(diǎn)擊你競(jìng)爭(zhēng)對(duì)手的鏈接。它將來自于用戶點(diǎn)擊結(jié)賬按鈕或在網(wǎng)站上瀏覽更深層級(jí)的內(nèi)容，來自通過在站點(diǎn)上與這個(gè)頁面的交互并且沒有跳出。這是你的工作和責(zé)任，這些東西都能幫助你。

• 來自媒體的鏈接。它可以來自博客。它可以來自一些高質(zhì)量的目錄，在目錄鏈接構(gòu)建關(guān)系要非常小心。它可以來自友情鏈接。它可以來自供應(yīng)商。它可以來自于產(chǎn)品的粉絲。它可以來自評(píng)論。諸如此類的東西。還有那些給你見證的人，你可以向他們索要鏈接。這些鏈接，如果它們來自不同的領(lǐng)域，并且它們含有很好的錨文本，文本內(nèi)容具體為實(shí)際產(chǎn)品的名稱，它們將特別指向這個(gè)頁面，也將極大地幫助你提升在競(jìng)爭(zhēng)中的排名。

• 新鮮度。在某些行業(yè)和某些情況下，當(dāng)你知道受眾對(duì)最新和最好的信息有大量的需求時(shí)，你應(yīng)該盡可能頻繁地使用新的信息內(nèi)容更新這個(gè)頁面，這些新的信息是與你的受眾最契合和最相關(guān)的。

你做完SEO以及上述打造電商頁面這些事情，那么你將擁有網(wǎng)上最好的電商頁面。




好的，謝謝大家加入我們。希望在下次白板星期五再次見到您。保重。




作者：

Rand Fishkin是Moz的聯(lián)合創(chuàng)始人，也是團(tuán)隊(duì)的個(gè)人貢獻(xiàn)者。喜歡寫博客、旅行，喜歡市場(chǎng)和技術(shù)方面的知識(shí)。

譯者簡(jiǎn)介

陳明艷，最老90后！也是球場(chǎng)上傳說中的靈活小胖子！現(xiàn)就職于中國(guó)移動(dòng)12582基地，運(yùn)營(yíng)支撐部產(chǎn)品汪一枚，也兼職著運(yùn)營(yíng)喵工作，主要涉及政企/農(nóng)村信息化、農(nóng)村電商、數(shù)據(jù)分析等領(lǐng)域，熱衷于產(chǎn)品。

---

關(guān)于互聯(lián)網(wǎng)數(shù)據(jù)官（iCDO）

Internet Chief Data Officer （iCDO）是聚焦于互聯(lián)網(wǎng)數(shù)據(jù)分析與應(yīng)用的行業(yè)中立平臺(tái)，旨在為互聯(lián)網(wǎng)數(shù)據(jù)從業(yè)者、愛好者、服務(wù)商和品牌方提供全球最前沿、最新鮮、最有價(jià)值的業(yè)界動(dòng)態(tài)、行業(yè)活動(dòng)、產(chǎn)品介紹、技術(shù)解析以及互聯(lián)網(wǎng)數(shù)據(jù)行業(yè)相關(guān)招聘資訊。

目前，我們正招募原創(chuàng)和資訊團(tuán)隊(duì)志愿者。如有意愿成為iCDO志愿者團(tuán)隊(duì)的一員，可添加iCDO創(chuàng)始人宋星老師的微信號(hào)：sxwuda2nd，期待數(shù)據(jù)分析愛好者的加入！




【號(hào)外！號(hào)外！】

目前我們網(wǎng)站已經(jīng)全新上線，更全面的新鮮資訊，更自助的招聘發(fā)布，盡情嘗試?。◤?fù)制如下鏈接到瀏覽器中打開）

http://www.icdo.com.cn/

http://weixin.qq.com/r/SDmZgSrEyHe3rW7i92xa (二維碼自動(dòng)識(shí)別)