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

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

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

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

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

在許多情況下，客戶不想花費太多時間，因此商品頁面需要幫助他們儘快獲取信息。確保回答用戶的問題，並準確地展示商品，這才符合店鋪的最大利益。

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

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

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

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

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

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

預測並回答商品疑問

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

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

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

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

好的商品頁面在使用文字和圖像描述商品時，應該滿足以下兩點。

1. 描述完整，但不要冗長或鬆散

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

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

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

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

如何撰寫符合要求的文案？來看這篇文章：

閱讀文章 >>

2. 使用圖片或視頻解答疑問

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

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

eBages 上的一位用戶正在根據商品列表頁上的圖片選購手提包。她點擊進入完整的商品頁面時說：「我想知道包的內側長什麼樣子。」當她看到商品圖片時，她說：「哦，在這裏！這個看起來很漂亮！它裏面有兩個側袋。」

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

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

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

幫助用戶比較商品

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

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

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

1. 商品規格

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

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

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

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

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

2. 商品類別

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

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

3. 一致的商品頁面

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

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

4. 競爭對手的商品頁面

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

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

他解釋說：「Casper 有 100 晚試睡，免費退貨或取貨，並免費送貨。因此，Tuft＆Needle 與這之間的價格差可能歸結為運費。」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 明確區分好評和差評

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

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

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

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

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

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

開始採購過程

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

為了幫助用戶開始購買的過程，商品頁面必須滿足以下三項。

1. 解釋每個商品的變化

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

2. 說明商品庫存

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

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

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

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

更好的方法，是显示一個顯眼的持久窗口或通知用戶該商品已添加的圖層，或將用戶帶到另一個頁面上，該頁面確認已成功添加該商品。當用戶將商品添加到購物車時，Chewy.com 將用戶移動到過渡頁面。在此頁面上，用戶可以確認添加的商品正確，可以繼續結帳或查看購物車。過渡頁還應包含「繼續購物」按鈕。這樣，如果用戶當時不準備結賬，則不必使用瀏覽器的「後退」按鈕（Chewy.com沒有包含這樣的鏈接）。

△ 將商品添加到購物車后，Chewy.com 會显示過渡頁

結語

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

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

原文鏈接：《UX Guidelines for Ecommerce Product Pages》

歡迎關註譯者的微信公眾號：「海外設計參考」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五平台註冊登錄_想讓用戶下單？給你一份專家的商品詳情頁設計指南！