編者介紹：商品頁(yè)是幫助用戶決定是否購(gòu)買以及購(gòu)買什么的地方。頁(yè)面必須包含完整的產(chǎn)品信息，以便以直接的方式教育和告知用戶有關(guān)產(chǎn)品的信息。本文作者提出了電商產(chǎn)品頁(yè)面的UX指南并與大家分享。

本文翻譯自Katie Sherwin 的《UX Guidelines for Ecommerce Product Pages》。 Katie Sherwin 是Nielsen Norman Group 的高級(jí)用戶體驗(yàn)專家。她專門幫助組織利用以用戶為中心的設(shè)計(jì)和戰(zhàn)略溝通的原則來(lái)實(shí)現(xiàn)其目標(biāo)。

摘要： 在線購(gòu)物客戶依靠產(chǎn)品頁(yè)面來(lái)決定購(gòu)買什么。通過(guò)回答問(wèn)題、進(jìn)行比較、提供評(píng)論和促進(jìn)購(gòu)買過(guò)程來(lái)幫助他們。

在電子商務(wù)中，產(chǎn)品頁(yè)面對(duì)于網(wǎng)站的成功至關(guān)重要?？蛻粜枰凶銐虻男畔?lái)做出明智的購(gòu)買決定。產(chǎn)品頁(yè)面或產(chǎn)品詳細(xì)信息頁(yè)面是用戶決定是否購(gòu)買以及購(gòu)買什么的地方。該頁(yè)面必須包含完整的產(chǎn)品信息，以直接的方式教育和告知用戶有關(guān)產(chǎn)品的信息。

在線顧客在購(gòu)買前不能觸摸產(chǎn)品、向銷售人員提問(wèn)、試穿商品或樣品。當(dāng)然，積極的購(gòu)物者可能會(huì)訂購(gòu)樣品來(lái)感受一下材料?；蛘咚麄兛梢酝ㄟ^(guò)實(shí)時(shí)聊天提問(wèn)（通常是最后的手段）。最勇敢的購(gòu)物者甚至可能愿意嘗試虛擬試穿工具。但所有這些都伴隨著高昂的交互成本，需要強(qiáng)烈的動(dòng)力和意愿在應(yīng)用程序或網(wǎng)站上花費(fèi)大量時(shí)間。很多情況下，客戶不想花費(fèi)太多時(shí)間，因此產(chǎn)品頁(yè)面需要幫助他們盡快獲取信息。確?；卮鹩脩舻膯?wèn)題并準(zhǔn)確展示您的產(chǎn)品符合您商店的最佳利益。

不良產(chǎn)品頁(yè)面有兩個(gè)主要后果，這兩種后果都會(huì)損害客戶與您網(wǎng)站的關(guān)系：

購(gòu)物者無(wú)法確定產(chǎn)品是否符合他們的標(biāo)準(zhǔn)，因此放棄購(gòu)買。 （安全總比后悔好）購(gòu)物者根據(jù)不準(zhǔn)確的假設(shè)購(gòu)買了錯(cuò)誤的產(chǎn)品，導(dǎo)致顧客不滿意或退貨。 （越多的人以這種方式煩惱，他們?cè)谟龅奖∪醯漠a(chǎn)品頁(yè)面時(shí)就會(huì)越懷疑，并根據(jù)場(chǎng)景1 做出反應(yīng)。）在分析了《對(duì)49個(gè)電子商務(wù)網(wǎng)站的研究》 中數(shù)百個(gè)最近的示例后，我們提出了一個(gè)指南關(guān)于如何設(shè)計(jì)有效的產(chǎn)品詳細(xì)信息頁(yè)面。本文簡(jiǎn)要概述了我們的發(fā)現(xiàn)和建議。

1. 產(chǎn)品頁(yè)面中應(yīng)包含的內(nèi)容產(chǎn)品頁(yè)面是承擔(dān)大量責(zé)任和工作的主力，需要回答客戶問(wèn)題并讓購(gòu)物者做好購(gòu)買準(zhǔn)備。因此，網(wǎng)站和應(yīng)用程序正確執(zhí)行此操作至關(guān)重要。精心設(shè)計(jì)的產(chǎn)品頁(yè)面具有以下功能，我們將其歸類為“必備”、“必備”和“附加功能”。 （不要被“花哨”功能的名稱所迷惑；如果這些元素不是真正必要或執(zhí)行良好，它們可能會(huì)分散注意力和令人失望）。

2. 預(yù)測(cè)并回答產(chǎn)品問(wèn)題購(gòu)物者正在尋找產(chǎn)品頁(yè)面來(lái)回答他們所有的產(chǎn)品問(wèn)題。在我們的研究中，很少有人關(guān)注產(chǎn)品頁(yè)面，只有那些已經(jīng)知道自己想要什么的人。即使是那些以產(chǎn)品為中心的購(gòu)物者也需要產(chǎn)品頁(yè)面來(lái)確認(rèn)他們找到了合適的商品。

許多網(wǎng)站提供的產(chǎn)品信息不足，導(dǎo)致用戶的問(wèn)題沒(méi)有得到解答，也沒(méi)有足夠的信息來(lái)幫助做出購(gòu)買決策。雖然不可能知道每個(gè)人對(duì)產(chǎn)品的所有問(wèn)題，但有些網(wǎng)站甚至不提供基本的產(chǎn)品信息。

網(wǎng)上購(gòu)物的一個(gè)常見(jiàn)問(wèn)題是必須退貨。當(dāng)網(wǎng)站完整描述產(chǎn)品時(shí)，用戶可能會(huì)購(gòu)買正確的產(chǎn)品并對(duì)購(gòu)買充滿信心。他們并不擔(dān)心潛在的回報(bào)。有效的產(chǎn)品頁(yè)面應(yīng)使用文字和圖像來(lái)描述產(chǎn)品：

內(nèi)容要完整，但不要羅嗦或松散。用戶并不是在尋找混亂的營(yíng)銷信息，而是在尋找對(duì)產(chǎn)品、產(chǎn)品的使用方式、外觀和功能的可靠描述。用戶在在線閱讀時(shí)通常會(huì)略讀文本，在行首閱讀的內(nèi)容多于行尾閱讀的內(nèi)容。不要浪費(fèi)產(chǎn)品描述的前幾行—— 開(kāi)門見(jiàn)山。

描述還應(yīng)該解釋用戶不太可能知道的任何術(shù)語(yǔ)。例如，Urban Outfitters 網(wǎng)站上的某些商品被標(biāo)記為“Urban Recycled”。產(chǎn)品詳細(xì)信息解釋了此標(biāo)簽的含義：因此，您收到的商品的顏色、色調(diào)和外觀將與圖片中所示的有所不同。

Urban Outfitters 網(wǎng)站上的產(chǎn)品描述包括一個(gè)名為“Urban Renewal Recycled”的部分，它有效地解釋了沒(méi)有兩種產(chǎn)品是完全相同的。

使用圖片或視頻來(lái)回答問(wèn)題。產(chǎn)品圖像設(shè)定了用戶對(duì)他們選擇和購(gòu)買的產(chǎn)品的期望。圖片和視頻應(yīng)與描述一起使用，以全面了解產(chǎn)品。一種產(chǎn)品視圖通常不足以回答用戶的問(wèn)題。用戶欣賞該網(wǎng)站提供的多種視圖或動(dòng)畫視圖，包括旋轉(zhuǎn)圖像、細(xì)節(jié)、放大圖像以及使用中或上下文中的產(chǎn)品圖像。

eBages 上的用戶正在考慮根據(jù)類別頁(yè)面上的圖像購(gòu)買手提包。當(dāng)她點(diǎn)擊進(jìn)入完整的產(chǎn)品頁(yè)面時(shí)，她說(shuō)：“我想知道包的內(nèi)部是什么樣的?！碑?dāng)她進(jìn)入產(chǎn)品頁(yè)面時(shí)，她說(shuō)：“哦，這里！這個(gè)看起來(lái)很漂亮！它有兩個(gè)內(nèi)袋。”然后，她返回列表頁(yè)面繼續(xù)選擇自己喜歡的其他包包，并點(diǎn)擊進(jìn)入相應(yīng)的商品詳情頁(yè)面查看這些包包的內(nèi)飾等詳細(xì)圖片。 “它的襯里很好，有一個(gè)方便的側(cè)拉鏈，”她談到另一個(gè)包時(shí)說(shuō)道。她購(gòu)物時(shí)沒(méi)有看任何產(chǎn)品說(shuō)明，只是看圖片做出選擇。最喜歡的產(chǎn)品。

eBags.com 上的購(gòu)物者很大程度上依賴手提包和公文包的詳細(xì)圖像來(lái)確定哪些包最適合他們的需求。

3.幫助用戶比較產(chǎn)品用戶經(jīng)常在網(wǎng)站上比較產(chǎn)品，并希望看到他們正在考慮的每個(gè)產(chǎn)品的相同信息。有關(guān)可比產(chǎn)品的一致信息是關(guān)鍵。信息的顯示也會(huì)影響比較產(chǎn)品的難易程度。一些網(wǎng)站更改頁(yè)面設(shè)計(jì)或有關(guān)產(chǎn)品的可用信息，從而迫使用戶搜索他們需要的信息。

購(gòu)物者需要三個(gè)不同層面的可靠信息：

產(chǎn)品規(guī)格：

當(dāng)購(gòu)物者考慮某種產(chǎn)品的選項(xiàng)（例如尺寸、顏色或口味）時(shí)，他們希望所有尺寸的產(chǎn)品都能獲得相同的信息。

一位研究參與者對(duì)Adagio.com 上有關(guān)產(chǎn)品尺寸的不一致信息感到沮喪。該網(wǎng)站很好地告訴用戶根據(jù)樣品大小可以泡多少杯茶。然而，對(duì)于較大的尺寸，它卻無(wú)法做到這一點(diǎn)。相反，它列出了每杯的成本，以便用戶可以根據(jù)價(jià)格評(píng)估選項(xiàng)。這很有幫助，但不一致會(huì)激怒用戶。她說(shuō)：

“當(dāng)我訂購(gòu)時(shí)，在包裝說(shuō)明上，對(duì)我有幫助的是，在樣品下方，它說(shuō)明了包裝尺寸可以泡多少杯茶。但在其他情況下，它沒(méi)有提到多少杯。只是我可以泡一杯茶?！奔僭O(shè)。但是知道你可以制作多少個(gè)杯子會(huì)很有幫助。但事實(shí)并非如此。它只在樣品下方說(shuō)明了這一點(diǎn)，沒(méi)有其他內(nèi)容?！?

一位用戶贊賞Adagio 的網(wǎng)站指示可以根據(jù)樣品尺寸制作多少杯茶，但希望它對(duì)于較大的產(chǎn)品尺寸也能這樣做。

產(chǎn)品分類：

購(gòu)買某種產(chǎn)品的客戶希望網(wǎng)站能夠顯示不同品牌和型號(hào)的相似類型的詳細(xì)信息。例如，購(gòu)買洗衣機(jī)的購(gòu)物者希望能夠比較有關(guān)容量、所需空間和可用洗滌周期類型（例如精細(xì)洗滌、生態(tài)洗滌和快速洗滌）的信息。對(duì)于數(shù)據(jù)密集型規(guī)范，比較表可能是呈現(xiàn)此類信息的最佳方式。

全站產(chǎn)品頁(yè)面：

通常，當(dāng)人們?cè)诰W(wǎng)站內(nèi)的頁(yè)面之間切換時(shí)，他們希望頁(yè)面具有一致的外觀和感覺(jué)。這是用戶界面設(shè)計(jì)的十種啟發(fā)式方法之一。對(duì)于產(chǎn)品頁(yè)面，客戶希望吸塵器的產(chǎn)品頁(yè)面看起來(lái)與一對(duì)家用揚(yáng)聲器的頁(yè)面類似。每個(gè)頁(yè)面上的信息數(shù)量和類型可能會(huì)根據(jù)產(chǎn)品類型而有所不同，但外觀和感覺(jué)、站點(diǎn)范圍的導(dǎo)航和搜索都應(yīng)保持一致。

競(jìng)爭(zhēng)對(duì)手產(chǎn)品頁(yè)面：

值得努力了解用戶可能在競(jìng)爭(zhēng)對(duì)手的網(wǎng)站上看到哪些信息，并在您的產(chǎn)品頁(yè)面上提供相同的信息。例如，一位顧客在TuftAndNeedle.com 和Casper.com 上比較了床墊，但只有Casper 的網(wǎng)站在產(chǎn)品頁(yè)面上強(qiáng)調(diào)了免費(fèi)送貨。 “Casper 提供100 晚試用期、免費(fèi)退貨或提貨以及免費(fèi)送貨，”他解釋道。 “因此，Tuft & Needle 之間的價(jià)格差異可能歸結(jié)為運(yùn)輸成本?！比缓笏袚Q到瀏覽器選項(xiàng)卡，那里顯示了Tuft & Needle 的網(wǎng)站：“我必須進(jìn)一步了解Tuft & Needle 的購(gòu)買流程，看看他們是否免費(fèi)送貨。好的，所以我選擇Queen Size，然后添加到購(gòu)物車，哦，免費(fèi)送貨。”

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

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

最后，產(chǎn)品頁(yè)面向購(gòu)物者展示相關(guān)或相關(guān)產(chǎn)品的建議很有幫助。這些建議可以幫助用戶發(fā)現(xiàn)他們可能沒(méi)有想過(guò)要尋找的產(chǎn)品替代品。即使是高度相關(guān)（例如您可能也喜歡）或具有社會(huì)影響（例如購(gòu)買該商品的顧客也購(gòu)買了它）的推薦也會(huì)受到贊賞。請(qǐng)謹(jǐn)慎使用，僅提供高度相關(guān)的建議，因?yàn)樵诋a(chǎn)品頁(yè)面上顯示太多建議可能會(huì)分散注意力或掩蓋重要的產(chǎn)品信息。

4. 展示客戶體驗(yàn)——即使是糟糕的體驗(yàn)，即使是最完整的產(chǎn)品描述也會(huì)給一些用戶留下疑問(wèn)。其他客戶或?qū)＜业漠a(chǎn)品評(píng)論將為網(wǎng)站帶來(lái)另一種聲音，幫助客戶更多地了解該產(chǎn)品。

用戶經(jīng)常使用產(chǎn)品評(píng)論來(lái)收集有關(guān)潛在購(gòu)買的更多信息。在許多情況下，這些評(píng)論準(zhǔn)確回答了用戶提出的問(wèn)題，通常與產(chǎn)品的使用相關(guān)。產(chǎn)品描述可以描述產(chǎn)品功能，但產(chǎn)品評(píng)論可以深入了解產(chǎn)品的使用方式。

Fossil.com 上的一位購(gòu)物者讀到了有關(guān)這款智能手表的褒貶不一的評(píng)論。他說(shuō)：“有些人說(shuō)橡皮筋很難用。另一些人說(shuō)表帶制作成本很低，就像兒童手表一樣。但其他人則說(shuō)材料很棒?！弊罱K，這款手表雖然有負(fù)面評(píng)價(jià)，但也得到了正面評(píng)價(jià)。這足以說(shuō)服他繼續(xù)考慮這只手表。他離開(kāi)評(píng)論并返回產(chǎn)品功能、規(guī)格和產(chǎn)品圖像。

Fossil 移動(dòng)網(wǎng)站上的一位用戶發(fā)現(xiàn)這款智能手表褒貶不一的評(píng)論很有幫助。好評(píng)多于差評(píng)。

購(gòu)物者已經(jīng)開(kāi)始期待包含正面和負(fù)面評(píng)論的強(qiáng)大評(píng)論，并且可以快速瀏覽。我們?nèi)匀徊粩嘤^察那些想要首先跳過(guò)負(fù)面評(píng)論的用戶，以了解“產(chǎn)品可能發(fā)生的最糟糕的情況是什么”。以下是在產(chǎn)品頁(yè)面上成功進(jìn)行客戶評(píng)論的一些重要指南：

明確區(qū)分正面評(píng)論和負(fù)面評(píng)論：

僅僅提供評(píng)論是不夠的。用戶希望并且需要查看評(píng)論摘要以了解產(chǎn)品的整體質(zhì)量。用戶需要能夠快速找到正面和負(fù)面評(píng)論，以了解其他客戶所說(shuō)的最好和最差的評(píng)論。經(jīng)常使用工具對(duì)評(píng)論進(jìn)行排序或過(guò)濾。

提供審稿人的相關(guān)詳細(xì)信息：

對(duì)于用戶來(lái)說(shuō)，了解發(fā)布評(píng)論者的一些信息也很有幫助，例如評(píng)論者的年齡、體型、產(chǎn)品用途或其他相關(guān)詳細(xì)信息。用戶不需要查看整個(gè)用戶配置文件，但在確定評(píng)論是否相關(guān)且適用于用戶的情況時(shí)，基線信息會(huì)派上用場(chǎng)。

Macys.com 上的購(gòu)物者根據(jù)產(chǎn)品評(píng)論來(lái)決定在網(wǎng)站上購(gòu)買什么。她談到書包審查時(shí)說(shuō)：

“我喜歡這個(gè)，因?yàn)樽髡吆臀彝g。我想知道我這個(gè)年紀(jì)的人怎么想。因?yàn)槲矣X(jué)得他們可能有相似的生活方式。像23歲的人，他們?yōu)槭裁磿?huì)用這個(gè)包，為什么喜歡這個(gè)包，對(duì)我來(lái)說(shuō)可能很不一樣。”

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

5. 開(kāi)始購(gòu)買流程產(chǎn)品頁(yè)面是用戶決定購(gòu)買產(chǎn)品并將商品移至購(gòu)物車的關(guān)鍵區(qū)域。為此，用戶必須知道他們的產(chǎn)品選項(xiàng)是什么以及如何選擇它們。

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

解釋每個(gè)產(chǎn)品的變化：

用戶必須了解每個(gè)選項(xiàng)—— 的含義，無(wú)論是顏色、尺寸、內(nèi)存量還是任何其他產(chǎn)品功能。選項(xiàng)的選擇也必須簡(jiǎn)單，以便用戶可以輕松地選擇他們想要的產(chǎn)品。

傳達(dá)產(chǎn)品可用性：

如果產(chǎn)品具有不同顏色或尺寸的不同可用性，這一點(diǎn)尤其重要。用戶應(yīng)該知道商品何時(shí)缺貨，而不必將商品添加到購(gòu)物車后才發(fā)現(xiàn)缺貨或售罄。

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

讓用戶進(jìn)入購(gòu)買流程的最后一步是將商品放入購(gòu)物車。令人驚訝的是，有多少次購(gòu)物者因?yàn)椴恢蕾?gòu)物車中是否有商品而遇到問(wèn)題。

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

更好的方法是顯示一個(gè)突出的持久窗口或?qū)?，通知用戶該?xiàng)目已添加，或者將用戶帶到另一個(gè)頁(yè)面以確認(rèn)該項(xiàng)目已成功添加。當(dāng)用戶將商品添加到購(gòu)物車時(shí)，Chewy.com 會(huì)將用戶移動(dòng)到插頁(yè)式頁(yè)面。在此頁(yè)面上，用戶可以確認(rèn)已添加正確的商品，并可以繼續(xù)結(jié)帳或查看購(gòu)物車。

將商品添加到購(gòu)物車后，Chewy.com 會(huì)將購(gòu)物者導(dǎo)航到插頁(yè)式頁(yè)面。從那里，人們可以確認(rèn)已添加正確的商品，并直接結(jié)賬或查看購(gòu)物車。插頁(yè)式頁(yè)面還應(yīng)包含“繼續(xù)購(gòu)物”按鈕，以便用戶在當(dāng)時(shí)未準(zhǔn)備好結(jié)賬時(shí)不必使用瀏覽器的“后退”按鈕。 （Chewy.com 不包含此類鏈接。）

6. 結(jié)論購(gòu)物者可以在商品頁(yè)面判斷商品是否滿足自己的需求。為了取得成功，電子商務(wù)網(wǎng)站必須首先進(jìn)行研究，以確定客戶對(duì)其產(chǎn)品的疑問(wèn)。設(shè)計(jì)師應(yīng)該使用描述和圖像來(lái)回答用戶的問(wèn)題，幫助他們比較產(chǎn)品，并使人們能夠盡可能快速、輕松地開(kāi)始購(gòu)買過(guò)程。

有關(guān)如何設(shè)計(jì)電子商務(wù)產(chǎn)品頁(yè)面的更多提示，請(qǐng)閱讀我們的完整報(bào)告以及85 個(gè)產(chǎn)品頁(yè)面用戶體驗(yàn)指南。

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

本文由@Hitomi 翻譯發(fā)布在《人人都是產(chǎn)品經(jīng)理》上。未經(jīng)作者許可禁止轉(zhuǎn)載。

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