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

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

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

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

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

糟糕的產品頁面會導致兩個主要后果，兩者都會損害客戶與網站的關系：

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

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

一、產品頁面中應包含哪些內容

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

二、預測并回答產品問題

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

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

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

要完整，但不要冗長或松散。用戶并不是在尋找營銷上的混亂，而是想要對產品、產品的使用方式、外觀和功能有一個可靠的描述。用戶通常在線閱讀時會略讀文本，閱讀更多的是在描述的開頭，而不是在結尾；更多在行首，而不是在行尾。不要浪費產品描述的前幾行——直截了當地抓住要點。

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

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

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

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

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

三、幫助用戶比較產品

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

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

產品規格：

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

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

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

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

產品類別：

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

網站范圍的產品頁面：

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

競爭對手的產品頁面：

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

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

與Casper的網站相反，Tuft&Needle的網站要求用戶在購物車中加一個床墊才能發現送貨是免費的。

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

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

即使是最完整的產品描述，也會留下一些用戶疑問。來自其他客戶或專家的產品評論將為網站帶來另一種聲音，從而幫助顧客進一步了解產品。

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

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

Fossil移動網站上的一位用戶發現，智能手表的混合評論很有幫助。好評勝過差評。

購物者已經開始期望獲得包括正面和負面評論并且可以快速瀏覽的強大評論。我們仍然不斷地觀察用戶，他們希望首先跳過差評，以便了解“該產品最糟糕的情況可能是什么”。以下是產品頁面上成功進行客戶評論的一些重要準則：

明確區分好評和差評：

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

提供有關審閱者的相關詳細信息：

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

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

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

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

五、開始購買過程

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

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

解釋每個產品的變化：

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

溝通產品可用性：

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

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

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

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

更好的方法是顯示一個顯眼的持久窗口或通知用戶該商品已添加的圖層，或將用戶帶到另一個頁面上，該頁面確認已成功添加該商品。當用戶將商品添加到購物車時，Chewy.com將用戶移動到插頁式頁面。在此頁面上，用戶可以確認添加的商品正確，可以繼續結帳或查看購物車。

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

六、結語

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

有關如何設計電子商務產品頁面的更多提示，請閱讀我們的完整報告，其中包含針對產品頁面的85 UX準則。

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

本文由 @Hitomi 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自 Pexels，基于CC0協議