編輯導讀：產(chǎn)品的頁面是幫助用戶決定是否購買和購買什么的地方，頁面必須包含完整的產(chǎn)品信息，以直接的方式教育和告知用戶有關(guān)該產(chǎn)品的信息。本文作者提出了電商產(chǎn)品頁面的UX準則，與你分享。

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

摘要：在線購物的客戶依靠產(chǎn)品頁面來決定購買什么。通過回答問題、進行比較、提供評論并促進購買過程來幫助他們。

在電子商務(wù)中，產(chǎn)品頁面對網(wǎng)站的成功至關(guān)重要?？蛻粜枰凶銐虻男畔碜龀雒髦堑馁徺I決定。產(chǎn)品頁面，或產(chǎn)品詳情頁面，是用戶決定是否購買和購買什么的地方。該頁面必須包含完整的產(chǎn)品信息，以直接的方式教育和告知用戶有關(guān)該產(chǎn)品的信息。

在線客戶無法觸摸產(chǎn)品、向銷售人員提問、試穿商品或在購買前試用商品。當然，有動力的購物者可能會訂購色板來感受材料?；蛘咚麄兛梢酝ㄟ^實時聊天（通常是不得已）提出問題。最勇敢的購物者甚至可能愿意嘗試虛擬的試穿工具。但是所有這些都具有很高的交互成本，需要強大的動力和意愿將大量時間花在應(yīng)用程序或網(wǎng)站上。在許多情況下，客戶不想花費太多時間，因此產(chǎn)品頁面需要幫助他們盡快獲取信息。確保回答用戶的問題，并準確展示產(chǎn)品，這才符合店鋪的最大利益。

糟糕的產(chǎn)品頁面會導致兩個主要后果，兩者都會損害客戶與網(wǎng)站的關(guān)系：

1. 購物者不能決定產(chǎn)品是否符合他們的條件，因此放棄購買。（安全總比遺憾好）
2. 購物者根據(jù)不準確的假設(shè)購買了錯誤的產(chǎn)品，從而導致顧客不滿意或退貨。（以這種方式被惹惱的人越多，當遇到薄弱的產(chǎn)品頁面時，他們會更加懷疑，并根據(jù)場景1做出反應(yīng)。）

在分析了我們《對49個電子商務(wù)網(wǎng)站的研究》中最新的數(shù)百個例子之后，我們得出了如何設(shè)計有效產(chǎn)品詳情頁指南。本文簡要概述了我們的發(fā)現(xiàn)和建議。

一、產(chǎn)品頁面中應(yīng)包含哪些內(nèi)容

產(chǎn)品頁面是承擔很多責任和要做的工作的主力，回答客戶的問題并促使購物者準備購買。因此，至關(guān)重要的是網(wǎng)站和應(yīng)用程序都能正確地做到這一點。精心設(shè)計的產(chǎn)品頁面具有以下特點，我們將其歸類為“必不可少功能”、“錦上添花功能”、和“花里胡哨功能”。（不要被“花里胡哨”功能的名稱所迷惑——如果這些元素不是真正必要或執(zhí)行得很好，它們可能會分散注意力和令人失望）。

二、預測并回答產(chǎn)品問題

購物者正在尋找產(chǎn)品頁面來回答他們所有的產(chǎn)品問題。在我們的研究中，很少關(guān)注產(chǎn)品頁面的，只有那些已經(jīng)知道他們想要的產(chǎn)品的人。即使是那些以產(chǎn)品為中心的購物者都需要產(chǎn)品頁面來確認他們找到了正確的商品。

許多網(wǎng)站提供的產(chǎn)品信息不足，給用戶留下了無法回答的問題，也沒有足夠的信息來幫助做出購買決策。雖然不可能知道每個人對產(chǎn)品提出的每個問題，但有些網(wǎng)站甚至連基本的產(chǎn)品信息也沒有提供到。

網(wǎng)上購物的一個常見問題是必須退貨。當網(wǎng)站完全描述產(chǎn)品時，用戶可能會購買正確的產(chǎn)品，并對購買充滿信心。他們并不擔心潛在的回報。有效的產(chǎn)品頁面應(yīng)使用文字和圖像描述產(chǎn)品：

要完整，但不要冗長或松散。用戶并不是在尋找營銷上的混亂，而是想要對產(chǎn)品、產(chǎn)品的使用方式、外觀和功能有一個可靠的描述。用戶通常在線閱讀時會略讀文本，閱讀更多的是在描述的開頭，而不是在結(jié)尾；更多在行首，而不是在行尾。不要浪費產(chǎn)品描述的前幾行——直截了當?shù)刈プ∫c。

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

“Urban Outfitters”網(wǎng)站上的產(chǎn)品說明包括了一個名為“Urban Renewal Recycled”部分，該部分有力地解釋了沒有兩個產(chǎn)品是完全一樣的。

使用圖片或視頻回答問題。產(chǎn)品圖片可設(shè)定用戶對他們選擇和購買的產(chǎn)品的期望。圖片和視頻應(yīng)與說明一起使用，以便對產(chǎn)品有一個完整的理解。一個產(chǎn)品視圖往往不夠回答用戶的問題。用戶欣賞網(wǎng)站提供多種視圖或動畫視圖，包括旋轉(zhuǎn)圖像、細節(jié)、放大的圖片以及使用中或上下文中的產(chǎn)品圖像。

eBages上的一位用戶正在根據(jù)類別頁面上的圖片考慮購買手提袋。當她點擊進入完整的產(chǎn)品頁面時，她說：“我想知道包的內(nèi)側(cè)是什么樣子?！碑斔竭_產(chǎn)品頁面時，她說：“哦，在這里！這個看起來很漂亮！它有兩個內(nèi)側(cè)袋。”然后，她返回列表頁繼續(xù)挑選她喜歡的其他包包，并點擊進入對應(yīng)的產(chǎn)品詳情頁，查看那些包的內(nèi)部和其他詳細圖片。她談到另一個包時說：“它的襯里很好，并且有一個方便的側(cè)面拉鏈?！彼x購時沒有讀過產(chǎn)品說明的任何文字信息，僅僅只看了圖片，就已經(jīng)挑好了心儀的商品。

eBags.com上的購物者在很大程度上依賴于手提包和公文包的詳細圖片，以確定哪些袋子最適合他們的需求。

三、幫助用戶比較產(chǎn)品

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

購物者需要在三個不同的層次上獲得可靠的信息：

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

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

一名研究參與者對Adagio.com上關(guān)于產(chǎn)品尺寸的不一致信息感到沮喪。該網(wǎng)站很好地告訴用戶，根據(jù)樣本量可以制作多少杯茶。然而，對于更大的尺寸，它卻沒有這樣做。相反，它列出了每杯的成本，這樣用戶就可以根據(jù)價格來評估選項。這是有幫助的，但是不一致會激怒了用戶。她說：

“當我訂購時，在包裝說明上，對我有幫助的是，在樣品下面它注明了該包裝量下能泡多少杯茶。但在其他情況下，卻并沒有提到多少杯。只能做個假設(shè)。但如果能知道可以泡多少杯，將很有幫助。但它沒有。它只在樣品下有注明，其他的都沒有?！?/p>

一位用戶贊賞Adagio的網(wǎng)站指出了可以從樣品量中沖出多少杯茶，但希望它對于較大的產(chǎn)品尺寸也能做到這一點。

產(chǎn)品類別：

購買某種產(chǎn)品的顧客期望該網(wǎng)站在不同品牌和型號之間顯示相似的詳細信息類型。例如，看洗衣機的購物者希望能夠比較有關(guān)容量、需要占用的空間，以及可用的洗滌周期類型（如精洗，環(huán)保洗和快洗）的信息。對于數(shù)據(jù)密集的規(guī)格，比較表可能是展示這類信息的最佳方式。

網(wǎng)站范圍的產(chǎn)品頁面：

通常，當人們在一個網(wǎng)站中的頁面之間切換時，他們期望頁面的外觀和感覺一致。這是用戶界面設(shè)計的十種啟發(fā)式方法的其中之一。對于產(chǎn)品頁面，客戶希望吸塵器的產(chǎn)品頁面看起來與一對家用揚聲器的頁面相似。每個頁面上的信息量和信息類型可以隨產(chǎn)品類型的不同而變化，但是外觀和感覺，訪問站點范圍的導航和搜索都應(yīng)該保持一致。

競爭對手的產(chǎn)品頁面：

值得努力了解用戶可能會在競爭對手的網(wǎng)站上看到哪些信息，并在您的產(chǎn)品頁面上提供相同的信息。例如，客戶在TuftAndNeedle.com和Casper.com上比較了床墊，但只有Casper的網(wǎng)站在產(chǎn)品頁面上強調(diào)了免費送貨。他解釋說：“Casper有100晚試睡，免費退貨或取貨，并免費送貨。因此，Tuft＆Needle與這之間的價格差可能歸結(jié)為運費?！叭缓?，他切換到瀏覽器選項卡，其中Tuft＆Needle的網(wǎng)站已打開：“我必須進一步進入Tuft＆Needle的購買過程，看看他們的送貨是否免費。好的，所以我選擇Queen Size，然后添加到購物車，哦，免費送貨?！?/p>

Casper的產(chǎn)品頁面提到了免費送貨。用戶注意到免費送貨，并在評估床墊價格時將其考慮在內(nèi)。

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

最后，產(chǎn)品頁面向購物者顯示相關(guān)或相關(guān)產(chǎn)品的建議，是很有幫助的。這些建議可幫助用戶發(fā)現(xiàn)他們可能沒有想過要尋找的產(chǎn)品替代品。即使是一類高度相關(guān)的推薦（例如您可能也喜歡）或具有社會影響力的推薦（例如購買此商品的顧客也同時購買），也受到贊賞。請謹慎使用并僅提供高度相關(guān)的建議，因為在產(chǎn)品頁面上顯示過多建議可能會分散或模糊重要的產(chǎn)品信息。

四、展示客戶體驗-即使是糟糕的體驗

即使是最完整的產(chǎn)品描述，也會留下一些用戶疑問。來自其他客戶或?qū)＜业漠a(chǎn)品評論將為網(wǎng)站帶來另一種聲音，從而幫助顧客進一步了解產(chǎn)品。

用戶經(jīng)常使用產(chǎn)品評論來收集有關(guān)潛在購買的更多信息。在許多情況下，這些評論回答了用戶提出的確切問題，這些問題通常與產(chǎn)品的使用有關(guān)。產(chǎn)品描述可以描述產(chǎn)品特征，但是產(chǎn)品評論可以提供對產(chǎn)品使用的了解。

Fossil.com上的一位購物者閱讀了有關(guān)智能手表褒貶不一的評論。他說：“有人說橡皮筋很難用。還有人說表帶做得很廉價，就像兒童手表一樣。但后來又有人說這些材料很棒?！白罱K，盡管該表有差評，但好評足以說服他繼續(xù)考慮該表。他離開了評論，并返回到產(chǎn)品特性、規(guī)格和產(chǎn)品圖像。

Fossil移動網(wǎng)站上的一位用戶發(fā)現(xiàn)，智能手表的混合評論很有幫助。好評勝過差評。

購物者已經(jīng)開始期望獲得包括正面和負面評論并且可以快速瀏覽的強大評論。我們?nèi)匀徊粩嗟赜^察用戶，他們希望首先跳過差評，以便了解“該產(chǎn)品最糟糕的情況可能是什么”。以下是產(chǎn)品頁面上成功進行客戶評論的一些重要準則：

明確區(qū)分好評和差評：

僅僅提供評論是不夠的。用戶想要并需要查看評論摘要，以了解產(chǎn)品的整體質(zhì)量。用戶需要能夠快速找到正面和負面評論，才能看到其他顧客所說的最好和最差。經(jīng)常使用對評論進行排序或篩選的工具。

提供有關(guān)審閱者的相關(guān)詳細信息：

對于用戶來說，了解有關(guān)發(fā)布評論的人的一些信息也很有幫助，例如，評論者的年齡、體型、產(chǎn)品用途或其他相關(guān)詳細信息。用戶不需要查看整個用戶個人資料，但是在確定評論是否與用戶情況相關(guān)且適用時，基線信息就派上了用場。

Macys.com上的一位購物者使用產(chǎn)品評論來決定在網(wǎng)站上購買什么。她談到書包的評論時說：

“我喜歡這個，因為筆者和我一個年齡。我想知道我這個年紀的人是怎么想的。因為我想他們可能有類似的生活方式。就像一個23歲的年輕人，他們?yōu)槭裁匆眠@個包，為什么喜歡這個包，這可能和我大不相同?！?/p>

由于一些購物者懷疑評論者是否誠實，因此網(wǎng)站可以通過指示評論何時被網(wǎng)站驗證來幫助建立信任。

五、開始購買過程

產(chǎn)品頁面是用戶決定購買產(chǎn)品并將商品移至購物車的關(guān)鍵區(qū)域。為此，用戶必須知道他們的產(chǎn)品選項是什么，以及如何選擇它們。

為了幫助用戶開始購買過程，產(chǎn)品頁面必須：

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

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

溝通產(chǎn)品可用性：

如果產(chǎn)品的各種顏色或尺寸的可用性不同，這一點尤其重要。用戶應(yīng)該知道什么時候沒有可用的物品，而不必將物品添加到購物車中只是為了發(fā)現(xiàn)其缺貨或售罄。

將商品添加到購物車后，提供清晰的反饋：

將用戶轉(zhuǎn)移到購買過程的最后一步，是將商品放入購物車中。令人驚訝的是，購物者有多少次遇到問題，因為他們不知道購物車中是否放置了物品。

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

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

將商品添加到購物車后，Chewy.com將購物者導航至插頁式頁面。從那里，人們可以確認添加的商品正確，直接結(jié)賬或查看購物車。插頁式廣告頁還應(yīng)包含“繼續(xù)購物”按鈕，這樣，如果用戶當時不準備結(jié)賬，則不必使用瀏覽器的“后退” 按鈕。（Chewy.com沒有包含這樣的鏈接。）

六、結(jié)語

購物者可以在產(chǎn)品頁面上確定產(chǎn)品是否符合他們的需求。要想取得成功，電子商務(wù)網(wǎng)站必須首先進行研究，以確定客戶對其產(chǎn)品的疑問。設(shè)計師應(yīng)使用描述和圖像來回答用戶的問題，幫助他們比較產(chǎn)品，并使人們能夠盡快，輕松地開始購買過程。

有關(guān)如何設(shè)計電子商務(wù)產(chǎn)品頁面的更多提示，請閱讀我們的完整報告，其中包含針對產(chǎn)品頁面的85 UX準則。

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

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

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