本文主要介紹了在設計電商商品詳情頁面時需要注意的交互設計準則，并給出相關示例說明商品頁面在哪些方面做改進能有效幫助用戶選購商品并最終促成交易。

在線購物的客戶通過商品頁面來做出購買決定，回答問題、進行比較、提供評價都可以幫助用戶推進購買過程。

在電子商務網站中，商品頁面對網站的成功至關重要，客戶需要有足夠的信息來做出購買決定。

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

在線客戶無法觸摸商品、向銷售人員提問、試穿商品或在購買前試用商品。當然，購買動機強的購物者可能會訂購色板來體驗材料，或者通過實時聊天（通常是不得已的情況下）提出問題，最勇敢的購物者甚至可能愿意嘗試虛擬的試穿工具。但是所有這些都具有很高的交互成本，需要強大的動力和意愿，將大量時間花在應用程序或網站上。

在許多情況下，客戶不想花費太多時間，因此商品頁面需要幫助他們盡快獲取信息。確?；卮鹩脩舻膯栴}，并準確地展示商品，這才符合店鋪的最大利益。

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

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

在分析了數百個例子之后，我們得出了如何設計有效商品詳情頁指南，本文簡要概述了我們的發現和建議。

商品頁面中應包含哪些內容

商品頁面是承擔很多責任和工作的主力，回答客戶的疑問并促使購物者準備購買。因此，重要的是讓網站和應用程序都能正確地做到這一點。

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

預測并回答商品疑問

購物者瀏覽商品頁面的目的，是尋找他們關于商品疑問的解答。

在我們的研究中，只有那些已經確切了解該商品的人，才不會仔細的查看商品頁面。即使是那些已經關注商品的購物者，也需要通過商品頁面來確認找到了正確的商品。

許多網站提供的商品信息不足，給用戶留下了無法回答的疑問，也沒有足夠的信息來幫助做出購買決策。雖然了解不同人對商品提出的所有疑問是一件不可能的事情，但有些網站甚至連基本的商品信息也沒有提供。

網上購物的一個常見疑問是退貨，當網站充分描述商品時，用戶可能會購買正確的商品，并對購買充滿信心，不用擔心以后會退貨。

好的商品頁面在使用文字和圖像描述商品時，應該是：

描述完整，但不要冗長或松散

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

用戶通常在線閱讀時會略讀文本，閱讀更多的是在描述的開頭，而不是在結尾；更多在行首，而不是在行尾——不要浪費商品描述的前幾行，直截了當地抓住要點。

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

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

使用圖片或視頻解答疑問

商品圖片定義了用戶對商品的期望，圖片和視頻應與說明一起使用，以便對商品有一個完整的理解。

一個商品圖往往是不夠的，用戶更喜歡網站提供多種視圖或動畫視圖，包括旋轉圖像、細節、放大的圖片以及使用中或環境中的商品圖像

eBages上的一位用戶正在根據商品列表頁上的圖片選購手提包。她點擊進入完整的商品頁面時說：“我想知道包的內側長什么樣子?！碑斔吹缴唐穲D片時，她說：“哦，在這里！這個看起來很漂亮！它里面有兩個側袋?！?/p>

然后，她返回列表頁繼續挑選她喜歡的其他包包并點擊進入對應的商品詳情頁，查看那些包的內部和其他詳細圖片。她在談到另一個包時說：“它的襯里很好，并且有一個方便的側面拉鏈?！?/p>

這位用戶在選購手提包時并沒有讀過商品說明的任何文字信息，僅僅只看了圖片，就已經挑好了心儀的商品。

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

幫助用戶比較商品

用戶經常比較網站上的商品，并希望看到有關他們正在考慮的每個商品的相同信息。

有關可比商品的一致信息是關鍵，信息的顯示也影響了比較商品的難易程度。一些網站改變了商品的頁面設計或可用信息，從而迫使用戶搜索他們需要的信息。

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

商品規格

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

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

該網站很好地告訴用戶，根據樣本量可以制作多少杯茶。然而，對于更大的尺寸，它卻沒有這樣做。相反，它列出了每杯的成本，這樣用戶就可以根據價格來評估選項，這是有幫助的。

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

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

商品類別

購買某種商品的顧客，期望該網站在不同品牌和型號之間顯示相似的詳細信息。

例如，看洗衣機的購物者希望能夠比較有關容量、需要占用的空間，以及可用的洗滌周期類型（如精洗，環保洗和快洗）的信息。對于數據密集的規格，比較表可能是展示這類信息的最佳方式。

一致的商品頁面

通常，當人們在一個網站中的頁面之間切換時，他們會期望頁面的視覺保持一致。這是用戶界面設計的十種啟發式方法的其中之一。

對于商品頁面，客戶希望吸塵器的看起來與家用音箱的頁面相似。頁面上的信息量和信息類型可以隨商品類型的不同而變化，但是視覺上來說，網站內的導航和搜索都應該保持一致。

競爭對手的商品頁面

努力了解用戶可能會在競爭對手的網站上看到哪些信息，并在您的商品頁面上提供相同的信息。

例如，客戶在TuftAndNeedle.com和Casper.com上比較了床墊，但只有Casper的網站在商品頁面上強調了免費送貨。

他解釋說：“Casper有100晚試睡，免費退貨或取貨，并免費送貨。因此，Tuft＆Needle與這之間的價格差可能歸結為運費?！?/p>

然后，他切換到瀏覽器查看Tuft＆Needle的網站：“我必須進入Tuft＆Needle的購買過程，看看他們的送貨是否免費。當我選擇Queen Size，然后添加到購物車，哦，原來是免費送貨?！?/p>

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

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

最后，商品頁面向購物者顯示相關或相關商品的建議，這是很有幫助的。

這些建議可幫助用戶發現他們可能沒有想過的替代品。即使是一類高度相關的推薦（例如「您可能也喜歡」）或具有社會效應的推薦（例如「購買此商品的顧客也同時購買」），這都會讓用戶喜歡。請謹慎使用并僅提供高度相關的建議，因為在商品頁面上顯示過多建議可能會分散或模糊重要的商品信息。

展示買家評價——即使是糟糕的體驗

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

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

Fossil.com上的一位購物者閱讀了有關智能手表褒貶不一的評價。他說：“有人說表帶很難用。還有人說表做得很廉價，就像兒童手表一樣。但后來又有人說這些材料很棒?！?/p>

最終，盡管這塊表有差評，但好評足以說服他繼續考慮購買。于是他不再繼續看評價，回去看商品特性、規格和商品圖像的信息。

Fossil移動網站上的一位用戶發現，對于智能手表的混合評價很有用，其中的好評勝過差評。

現在的購物者，已經開始期望看到包括正面和負面評價，并且要能夠進行快速瀏覽。

我們在不斷地觀察用戶，他們希望首先跳到差評，以便了解“該商品最糟糕的情況可能是什么”。

以下是商品頁面上成功展示買家評價的兩個重要準則：

明確區分好評和差評

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

提供有關評價者的相關詳細信息

對于用戶來說，了解有關發布評價者的一些信息也很有幫助。例如，評價者的年齡、體型、商品用途或其他相關詳細信息。

用戶不需要查看整個用戶個人資料，但是在確定評價是否與用戶情況相關且適用時，基本信息就派上了用場。

Macys.com上的一位購物者使用商品評價來決定在網站上購買什么，她談到書包的評價時說：“我喜歡這個，因為作者和我是一個年齡。我想知道我這個年紀的人是怎么想的，因為他們可能有類似的生活方式。就像一個23歲的年輕人，他們為什么要用這個包，為什么喜歡這個包，這其中的原因可能和我大不相同?！?/p>

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

開始采購過程

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

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

解釋每個商品的變化

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

說明商品庫存

如果商品的各種顏色或尺寸的庫存不同，這一點尤其重要。用戶應該知道哪些是沒有庫存的物品，而不必等到將物品添加到購物車后，才發現其缺貨或售罄。

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

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

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

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

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

結語

購物者可以在商品頁面上，確定商品是否符合他們的需求。要想取得成功，電商網站必須首先進行研究，以確定客戶對其商品的疑問。

設計師應使用描述和圖像來回答用戶的疑問，幫助他們比較商品，并使人們能夠盡快，輕松地開始購買過程。

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

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

本文由 @海外設計參考 翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議