本文主要介紹了在設(shè)計(jì)電商商品詳情頁(yè)面時(shí)需要注意的交互設(shè)計(jì)準(zhǔn)則，并給出相關(guān)示例說(shuō)明商品頁(yè)面在哪些方面做改進(jìn)能有效幫助用戶選購(gòu)商品并最終促成交易。

在線購(gòu)物的客戶通過(guò)商品頁(yè)面來(lái)做出購(gòu)買決定，回答問(wèn)題、進(jìn)行比較、提供評(píng)價(jià)都可以幫助用戶推進(jìn)購(gòu)買過(guò)程。

在電子商務(wù)網(wǎng)站中，商品頁(yè)面對(duì)網(wǎng)站的成功至關(guān)重要，客戶需要有足夠的信息來(lái)做出購(gòu)買決定。

商品頁(yè)面或商品詳情頁(yè)面，是用戶決定是否購(gòu)買和購(gòu)買什么的地方。該頁(yè)面必須包含完整的商品信息，以直接的方式教育和告知用戶該商品的信息。

在線客戶無(wú)法觸摸商品、向銷售人員提問(wèn)、試穿商品或在購(gòu)買前試用商品。當(dāng)然，購(gòu)買動(dòng)機(jī)強(qiáng)的購(gòu)物者可能會(huì)訂購(gòu)色板來(lái)體驗(yàn)材料，或者通過(guò)實(shí)時(shí)聊天（通常是不得已的情況下）提出問(wèn)題，最勇敢的購(gòu)物者甚至可能愿意嘗試虛擬的試穿工具。但是所有這些都具有很高的交互成本，需要強(qiáng)大的動(dòng)力和意愿，將大量時(shí)間花在應(yīng)用程序或網(wǎng)站上。

在許多情況下，客戶不想花費(fèi)太多時(shí)間，因此商品頁(yè)面需要幫助他們盡快獲取信息。確保回答用戶的問(wèn)題，并準(zhǔn)確地展示商品，這才符合店鋪的最大利益。

糟糕的商品頁(yè)面會(huì)導(dǎo)致兩個(gè)主要后果，兩者都會(huì)損害客戶與網(wǎng)站的關(guān)系：

• 顧客不能決定商品是否符合他們的條件，因此放棄購(gòu)買（總比購(gòu)買后遺憾好）。
• 根據(jù)不準(zhǔn)確的假設(shè)，顧客購(gòu)買了錯(cuò)誤的商品，從而導(dǎo)致顧客不滿意或退貨（以這種方式被惹惱的人越多，當(dāng)遇到內(nèi)容較少的商品頁(yè)面時(shí)，他們會(huì)更加懷疑，并根據(jù)場(chǎng)景1做出反應(yīng)）。

在分析了數(shù)百個(gè)例子之后，我們得出了如何設(shè)計(jì)有效商品詳情頁(yè)指南，本文簡(jiǎn)要概述了我們的發(fā)現(xiàn)和建議。

商品頁(yè)面中應(yīng)包含哪些內(nèi)容

商品頁(yè)面是承擔(dān)很多責(zé)任和工作的主力，回答客戶的疑問(wèn)并促使購(gòu)物者準(zhǔn)備購(gòu)買。因此，重要的是讓網(wǎng)站和應(yīng)用程序都能正確地做到這一點(diǎn)。

精心設(shè)計(jì)的商品頁(yè)面具有以下特點(diǎn)，我們將其歸類為“必不可少功能”、“錦上添花功能”、和“花里胡哨功能”（不要被“花里胡哨”功能的名稱所迷惑，如果這些元素不是真正必要或執(zhí)行得很好，它們可能會(huì)分散注意力和令人失望）。

預(yù)測(cè)并回答商品疑問(wèn)

購(gòu)物者瀏覽商品頁(yè)面的目的，是尋找他們關(guān)于商品疑問(wèn)的解答。

在我們的研究中，只有那些已經(jīng)確切了解該商品的人，才不會(huì)仔細(xì)的查看商品頁(yè)面。即使是那些已經(jīng)關(guān)注商品的購(gòu)物者，也需要通過(guò)商品頁(yè)面來(lái)確認(rèn)找到了正確的商品。

許多網(wǎng)站提供的商品信息不足，給用戶留下了無(wú)法回答的疑問(wèn)，也沒(méi)有足夠的信息來(lái)幫助做出購(gòu)買決策。雖然了解不同人對(duì)商品提出的所有疑問(wèn)是一件不可能的事情，但有些網(wǎng)站甚至連基本的商品信息也沒(méi)有提供。

網(wǎng)上購(gòu)物的一個(gè)常見(jiàn)疑問(wèn)是退貨，當(dāng)網(wǎng)站充分描述商品時(shí)，用戶可能會(huì)購(gòu)買正確的商品，并對(duì)購(gòu)買充滿信心，不用擔(dān)心以后會(huì)退貨。

好的商品頁(yè)面在使用文字和圖像描述商品時(shí)，應(yīng)該是：

描述完整，但不要冗長(zhǎng)或松散

用戶并不是在尋找營(yíng)銷上的混亂，而是想要對(duì)商品、使用方式、外觀和功能有一個(gè)可靠的描述。

用戶通常在線閱讀時(shí)會(huì)略讀文本，閱讀更多的是在描述的開(kāi)頭，而不是在結(jié)尾；更多在行首，而不是在行尾——不要浪費(fèi)商品描述的前幾行，直截了當(dāng)?shù)刈プ∫c(diǎn)。

描述還應(yīng)該解釋用戶不太可能知道的所有術(shù)語(yǔ)。例如，Urban Outfitters網(wǎng)站上的一些商品被貼上標(biāo)簽Urban Renewal Recycled。商品詳細(xì)信息解釋了此標(biāo)簽的含義：每件衣服都是手工翻新的，因此您收到的物品的顏色，色調(diào)和穿著都會(huì)與圖片所示的物品有所不同。

“Urban Outfitters”網(wǎng)站上的商品說(shuō)明包括了一個(gè)名為“Urban Renewal Recycled”部分，該部分充分地解釋了沒(méi)有兩個(gè)商品是完全一樣的。

使用圖片或視頻解答疑問(wèn)

商品圖片定義了用戶對(duì)商品的期望，圖片和視頻應(yīng)與說(shuō)明一起使用，以便對(duì)商品有一個(gè)完整的理解。

一個(gè)商品圖往往是不夠的，用戶更喜歡網(wǎng)站提供多種視圖或動(dòng)畫視圖，包括旋轉(zhuǎn)圖像、細(xì)節(jié)、放大的圖片以及使用中或環(huán)境中的商品圖像

eBages上的一位用戶正在根據(jù)商品列表頁(yè)上的圖片選購(gòu)手提包。她點(diǎn)擊進(jìn)入完整的商品頁(yè)面時(shí)說(shuō)：“我想知道包的內(nèi)側(cè)長(zhǎng)什么樣子?！碑?dāng)她看到商品圖片時(shí)，她說(shuō)：“哦，在這里！這個(gè)看起來(lái)很漂亮！它里面有兩個(gè)側(cè)袋?！?/p>

然后，她返回列表頁(yè)繼續(xù)挑選她喜歡的其他包包并點(diǎn)擊進(jìn)入對(duì)應(yīng)的商品詳情頁(yè)，查看那些包的內(nèi)部和其他詳細(xì)圖片。她在談到另一個(gè)包時(shí)說(shuō)：“它的襯里很好，并且有一個(gè)方便的側(cè)面拉鏈?！?/p>

這位用戶在選購(gòu)手提包時(shí)并沒(méi)有讀過(guò)商品說(shuō)明的任何文字信息，僅僅只看了圖片，就已經(jīng)挑好了心儀的商品。

eBags.com上的購(gòu)物者在很大程度上依賴于詳情圖片，以確定哪些袋子最適合他們的需求。

幫助用戶比較商品

用戶經(jīng)常比較網(wǎng)站上的商品，并希望看到有關(guān)他們正在考慮的每個(gè)商品的相同信息。

有關(guān)可比商品的一致信息是關(guān)鍵，信息的顯示也影響了比較商品的難易程度。一些網(wǎng)站改變了商品的頁(yè)面設(shè)計(jì)或可用信息，從而迫使用戶搜索他們需要的信息。

購(gòu)物者需要在四個(gè)不同的層面上獲得可靠的信息：

商品規(guī)格

購(gòu)物者在考慮某種商品的選擇，如大小、顏色或口味時(shí)，希望所有規(guī)格都能使用相同的信息。

一名研究參與者對(duì)Adagio.com上關(guān)于商品尺寸的不一致信息感到沮喪。

該網(wǎng)站很好地告訴用戶，根據(jù)樣本量可以制作多少杯茶。然而，對(duì)于更大的尺寸，它卻沒(méi)有這樣做。相反，它列出了每杯的成本，這樣用戶就可以根據(jù)價(jià)格來(lái)評(píng)估選項(xiàng)，這是有幫助的。

但是，不一致會(huì)激怒了用戶。她說(shuō)：“當(dāng)我訂購(gòu)時(shí)，在包裝說(shuō)明上，對(duì)我有幫助的是，在樣品下面它注明了該包裝量下能泡多少杯茶。但在其他情況下，卻并沒(méi)有提到多少杯，只能做個(gè)假設(shè)。但如果能知道可以泡多少杯，將很有幫助，但它沒(méi)有。它只在樣品下有注明，其他的都沒(méi)有?！?/p>

用戶表示很欣賞Adagio的網(wǎng)站的做法，該網(wǎng)站指出了樣品可以制作多少杯茶，但也希望它說(shuō)明其他規(guī)格可以制作多少。

商品類別

購(gòu)買某種商品的顧客，期望該網(wǎng)站在不同品牌和型號(hào)之間顯示相似的詳細(xì)信息。

例如，看洗衣機(jī)的購(gòu)物者希望能夠比較有關(guān)容量、需要占用的空間，以及可用的洗滌周期類型（如精洗，環(huán)保洗和快洗）的信息。對(duì)于數(shù)據(jù)密集的規(guī)格，比較表可能是展示這類信息的最佳方式。

一致的商品頁(yè)面

通常，當(dāng)人們?cè)谝粋€(gè)網(wǎng)站中的頁(yè)面之間切換時(shí)，他們會(huì)期望頁(yè)面的視覺(jué)保持一致。這是用戶界面設(shè)計(jì)的十種啟發(fā)式方法的其中之一。

對(duì)于商品頁(yè)面，客戶希望吸塵器的看起來(lái)與家用音箱的頁(yè)面相似。頁(yè)面上的信息量和信息類型可以隨商品類型的不同而變化，但是視覺(jué)上來(lái)說(shuō)，網(wǎng)站內(nèi)的導(dǎo)航和搜索都應(yīng)該保持一致。

競(jìng)爭(zhēng)對(duì)手的商品頁(yè)面

努力了解用戶可能會(huì)在競(jìng)爭(zhēng)對(duì)手的網(wǎng)站上看到哪些信息，并在您的商品頁(yè)面上提供相同的信息。

例如，客戶在TuftAndNeedle.com和Casper.com上比較了床墊，但只有Casper的網(wǎng)站在商品頁(yè)面上強(qiáng)調(diào)了免費(fèi)送貨。

他解釋說(shuō)：“Casper有100晚試睡，免費(fèi)退貨或取貨，并免費(fèi)送貨。因此，Tuft＆Needle與這之間的價(jià)格差可能歸結(jié)為運(yùn)費(fèi)。”

然后，他切換到瀏覽器查看Tuft＆Needle的網(wǎng)站：“我必須進(jìn)入Tuft＆Needle的購(gòu)買過(guò)程，看看他們的送貨是否免費(fèi)。當(dāng)我選擇Queen Size，然后添加到購(gòu)物車，哦，原來(lái)是免費(fèi)送貨?！?/p>

Casper的商品頁(yè)面提到了免費(fèi)送貨，用戶注意到免費(fèi)送貨，并在評(píng)估床墊價(jià)格時(shí)將其考慮在內(nèi)。

與Casper的網(wǎng)站相反，Tuft&Needle的網(wǎng)站要求用戶在購(gòu)物車中加一個(gè)床墊才能發(fā)現(xiàn)送貨是免費(fèi)的。

最后，商品頁(yè)面向購(gòu)物者顯示相關(guān)或相關(guān)商品的建議，這是很有幫助的。

這些建議可幫助用戶發(fā)現(xiàn)他們可能沒(méi)有想過(guò)的替代品。即使是一類高度相關(guān)的推薦（例如「您可能也喜歡」）或具有社會(huì)效應(yīng)的推薦（例如「購(gòu)買此商品的顧客也同時(shí)購(gòu)買」），這都會(huì)讓用戶喜歡。請(qǐng)謹(jǐn)慎使用并僅提供高度相關(guān)的建議，因?yàn)樵谏唐讽?yè)面上顯示過(guò)多建議可能會(huì)分散或模糊重要的商品信息。

展示買家評(píng)價(jià)——即使是糟糕的體驗(yàn)

即使是最完整的商品描述，也會(huì)留下一些用戶疑問(wèn)。來(lái)自其他買家或?qū)＜业脑u(píng)價(jià)將為網(wǎng)站帶來(lái)另一種聲音，從而幫助顧客進(jìn)一步了解商品。

用戶經(jīng)常使用商品評(píng)價(jià)來(lái)收集更多的信息，在許多情況下，這些評(píng)價(jià)回答了用戶提出的確切問(wèn)題，這些問(wèn)題通常與商品的使用有關(guān)。商品描述可以描述商品特征，但是買家評(píng)價(jià)可以提供對(duì)商品使用的情況。

Fossil.com上的一位購(gòu)物者閱讀了有關(guān)智能手表褒貶不一的評(píng)價(jià)。他說(shuō)：“有人說(shuō)表帶很難用。還有人說(shuō)表做得很廉價(jià)，就像兒童手表一樣。但后來(lái)又有人說(shuō)這些材料很棒?！?/p>

最終，盡管這塊表有差評(píng)，但好評(píng)足以說(shuō)服他繼續(xù)考慮購(gòu)買。于是他不再繼續(xù)看評(píng)價(jià)，回去看商品特性、規(guī)格和商品圖像的信息。

Fossil移動(dòng)網(wǎng)站上的一位用戶發(fā)現(xiàn)，對(duì)于智能手表的混合評(píng)價(jià)很有用，其中的好評(píng)勝過(guò)差評(píng)。

現(xiàn)在的購(gòu)物者，已經(jīng)開(kāi)始期望看到包括正面和負(fù)面評(píng)價(jià)，并且要能夠進(jìn)行快速瀏覽。

我們?cè)诓粩嗟赜^察用戶，他們希望首先跳到差評(píng)，以便了解“該商品最糟糕的情況可能是什么”。

以下是商品頁(yè)面上成功展示買家評(píng)價(jià)的兩個(gè)重要準(zhǔn)則：

明確區(qū)分好評(píng)和差評(píng)

僅僅提供評(píng)價(jià)是不夠的，用戶想要并需要查看評(píng)價(jià)摘要，以了解商品的整體質(zhì)量。用戶需要能夠快速找到正面和負(fù)面評(píng)價(jià)，才能看到其他顧客所說(shuō)的最好和最差是什么。對(duì)評(píng)價(jià)進(jìn)行排序或篩選的工具也會(huì)經(jīng)常使用。

提供有關(guān)評(píng)價(jià)者的相關(guān)詳細(xì)信息

對(duì)于用戶來(lái)說(shuō)，了解有關(guān)發(fā)布評(píng)價(jià)者的一些信息也很有幫助。例如，評(píng)價(jià)者的年齡、體型、商品用途或其他相關(guān)詳細(xì)信息。

用戶不需要查看整個(gè)用戶個(gè)人資料，但是在確定評(píng)價(jià)是否與用戶情況相關(guān)且適用時(shí)，基本信息就派上了用場(chǎng)。

Macys.com上的一位購(gòu)物者使用商品評(píng)價(jià)來(lái)決定在網(wǎng)站上購(gòu)買什么，她談到書包的評(píng)價(jià)時(shí)說(shuō)：“我喜歡這個(gè)，因?yàn)樽髡吆臀沂且粋€(gè)年齡。我想知道我這個(gè)年紀(jì)的人是怎么想的，因?yàn)樗麄兛赡苡蓄愃频纳罘绞?。就像一個(gè)23歲的年輕人，他們?yōu)槭裁匆眠@個(gè)包，為什么喜歡這個(gè)包，這其中的原因可能和我大不相同。“

由于一些購(gòu)物者懷疑評(píng)價(jià)者是否誠(chéng)實(shí)，因此網(wǎng)站可以通過(guò)指示評(píng)價(jià)何時(shí)被網(wǎng)站驗(yàn)證來(lái)幫助建立信任。

開(kāi)始采購(gòu)過(guò)程

商品頁(yè)面是用戶決定購(gòu)買商品并將商品放進(jìn)購(gòu)物車的關(guān)鍵區(qū)域，用戶必須知道他們的商品選項(xiàng)是什么，以及如何選擇它們。

為了幫助用戶開(kāi)始購(gòu)買過(guò)程，商品頁(yè)面必須：

解釋每個(gè)商品的變化

用戶必須理解每個(gè)選項(xiàng)的含義——無(wú)論是顏色、大小、內(nèi)存量還是任何其他商品特性。選項(xiàng)也必須很簡(jiǎn)單，這樣用戶就可以輕松地選擇他們想要的商品。

說(shuō)明商品庫(kù)存

如果商品的各種顏色或尺寸的庫(kù)存不同，這一點(diǎn)尤其重要。用戶應(yīng)該知道哪些是沒(méi)有庫(kù)存的物品，而不必等到將物品添加到購(gòu)物車后，才發(fā)現(xiàn)其缺貨或售罄。

將商品添加到購(gòu)物車后，提供清晰的反饋

將用戶轉(zhuǎn)移到購(gòu)買過(guò)程的最后一步，是將商品放入購(gòu)物車中。令人驚訝的是，購(gòu)物者有很多次遇到問(wèn)題，都是因?yàn)樗麄儾恢蕾?gòu)物車中是否放置了物品。

缺乏反饋會(huì)導(dǎo)致許多問(wèn)題，一些用戶認(rèn)為他們已經(jīng)添加了商品，其實(shí)并沒(méi)有。在其他情況下，用戶沒(méi)有意識(shí)到他們已經(jīng)添加了商品，因此一次又一次地添加它們，最終在購(gòu)物車中添加了多個(gè)商品。更糟糕的是，一些用戶來(lái)到購(gòu)物車，認(rèn)為它裝滿了他們想要的商品，結(jié)果卻發(fā)現(xiàn)它是空的、或里面有重復(fù)的物品、或者只包含了一部分想要的商品。

更好的方法，是顯示一個(gè)顯眼的持久窗口或通知用戶該商品已添加的圖層，或?qū)⒂脩魩У搅硪粋€(gè)頁(yè)面上，該頁(yè)面確認(rèn)已成功添加該商品。當(dāng)用戶將商品添加到購(gòu)物車時(shí)，Chewy.com將用戶移動(dòng)到插頁(yè)式頁(yè)面。在此頁(yè)面上，用戶可以確認(rèn)添加的商品正確，可以繼續(xù)結(jié)帳或查看購(gòu)物車。

將商品添加到購(gòu)物車后，Chewy.com會(huì)顯示過(guò)渡頁(yè)。從那里，人們可以確認(rèn)添加的商品正確，直接結(jié)賬或查看購(gòu)物車。過(guò)渡頁(yè)還應(yīng)包含“繼續(xù)購(gòu)物”按鈕，這樣，如果用戶當(dāng)時(shí)不準(zhǔn)備結(jié)賬，則不必使用瀏覽器的“后退”按鈕（Chewy.com沒(méi)有包含這樣的鏈接）。

結(jié)語(yǔ)

購(gòu)物者可以在商品頁(yè)面上，確定商品是否符合他們的需求。要想取得成功，電商網(wǎng)站必須首先進(jìn)行研究，以確定客戶對(duì)其商品的疑問(wèn)。

設(shè)計(jì)師應(yīng)使用描述和圖像來(lái)回答用戶的疑問(wèn)，幫助他們比較商品，并使人們能夠盡快，輕松地開(kāi)始購(gòu)買過(guò)程。

原文地址：https://www.nngroup.com/articles/ecommerce-product-pages/

本文翻譯自Katie Sherwin的UX Guidelines for Ecommerce Product Pages，Katie Sherwin是Nielsen Norman Group的高級(jí)用戶體驗(yàn)專家。

本文由 @海外設(shè)計(jì)參考 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議