本文主要介紹了設(shè)計電商商品詳情頁面時需要注意的交互設(shè)計原則，并舉例說明了商品頁面的改進(jìn)如何能夠有效幫助用戶購買商品并最終促成交易。

網(wǎng)購客戶通過產(chǎn)品頁面做出購買決定?；卮饐栴}、進(jìn)行比較和提供評論都可以幫助用戶推進(jìn)購買過程。

在電子商務(wù)網(wǎng)站中，產(chǎn)品頁面對于網(wǎng)站的成功至關(guān)重要，客戶需要有足夠的信息來做出購買決定。

產(chǎn)品頁面或產(chǎn)品詳情頁面是用戶決定是否購買以及購買什么的地方。頁面必須包含完整的產(chǎn)品信息，并以直接的方式教育和告知用戶有關(guān)產(chǎn)品的信息。

在線顧客在購買前不能觸摸商品、向銷售人員提問、試穿商品或試用商品。當(dāng)然，積極性很高的購物者可能會訂購樣品來試用材料或通過實時聊天提出問題（通常作為最后的手段），最勇敢的購物者甚至可能愿意嘗試虛擬試穿工具。但所有這些都伴隨著高昂的交互成本，需要強(qiáng)烈的動力和意愿在應(yīng)用程序或網(wǎng)站上花費大量時間。

很多情況下，客戶不想花費太多時間，因此產(chǎn)品頁面需要幫助他們盡快獲取信息。確?；卮鹩脩舻膯栴}并準(zhǔn)確展示您的產(chǎn)品符合您商店的最佳利益。

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

客戶無法決定該商品是否符合他們的標(biāo)準(zhǔn)，因此放棄購買（比事后后悔購買要好）?？蛻艋诓粶?zhǔn)確的假設(shè)購買了錯誤的商品，導(dǎo)致客戶不滿意或退貨（越是這樣惱火的人，在遇到內(nèi)容較少的產(chǎn)品頁面時就會越懷疑，并根據(jù)場景1做出反應(yīng)）。在分析了數(shù)百個示例后，我們提出了設(shè)計有效的產(chǎn)品詳細(xì)信息頁面的指南，本文簡要概述了我們的發(fā)現(xiàn)和建議。

產(chǎn)品頁面中應(yīng)包含哪些內(nèi)容產(chǎn)品頁面是主力，負(fù)責(zé)回答客戶問題并讓購物者做好購買準(zhǔn)備。因此，讓網(wǎng)站和應(yīng)用程序正確執(zhí)行此操作非常重要。

精心設(shè)計的產(chǎn)品頁面具有以下功能，我們將其分類為“基本功能”、“不錯的功能”和“花哨功能”（如果這些元素不是“花哨功能”，請不要被“花哨功能”的名稱所迷惑）不是真正必要的?；蛘邎?zhí)行得很好，它們可能會分散注意力和令人失望）。

預(yù)測并回答產(chǎn)品問題購物者瀏覽產(chǎn)品頁面的目的是尋找產(chǎn)品問題的答案。

在我們的研究中，只有那些已經(jīng)了解該產(chǎn)品的人才不會仔細(xì)查看產(chǎn)品頁面。即使是已經(jīng)關(guān)注產(chǎn)品的購物者也需要檢查產(chǎn)品頁面以確認(rèn)他們找到了合適的商品。

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

網(wǎng)上購物的一個常見問題是退貨。當(dāng)網(wǎng)站充分描述某件商品時，用戶可能會購買正確的商品，并對購買充滿信心，而不必?fù)?dān)心以后退貨。

一個好的產(chǎn)品頁面應(yīng)該使用文字和圖像來描述產(chǎn)品：

要完整，但不要冗長或松散。用戶并不是在尋找混亂的營銷信息，而是在尋找對商品、如何使用它、它的外觀以及它的用途的可靠描述。

用戶在在線閱讀時經(jīng)常會瀏覽文本，更多地閱讀描述的開頭而不是結(jié)尾；更多的是在行的開頭而不是結(jié)尾。 —— 不要浪費前幾行產(chǎn)品描述，開門見山。

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

Urban Outfitters 網(wǎng)站上的產(chǎn)品描述中有一個名為“Urban Renewal Recycled”的部分，充分說明沒有兩件商品是完全相同的。

使用圖片或視頻來回答問題。產(chǎn)品圖片定義了用戶對您的產(chǎn)品的期望。圖像和視頻應(yīng)與描述一起使用，以提供對產(chǎn)品的完整理解。

一張產(chǎn)品圖像通常是不夠的，用戶更喜歡提供多種視圖或動畫視圖的網(wǎng)站，包括旋轉(zhuǎn)圖像、細(xì)節(jié)、放大圖像以及正在使用的產(chǎn)品或其環(huán)境中的圖像。

eBages 上的用戶正在根據(jù)產(chǎn)品列表頁面上的圖片購買手提包。 “我想知道包的內(nèi)部是什么樣子，”她點擊進(jìn)入完整的產(chǎn)品頁面時說道。當(dāng)她看到產(chǎn)品圖片時，她說：“哦，這里！這個看起來很漂亮！里面有兩個側(cè)袋?！?

然后她返回列表頁面繼續(xù)選擇自己喜歡的其他包包，并點擊進(jìn)入相應(yīng)的商品詳情頁面查看這些包包的內(nèi)飾等詳細(xì)圖片。 “它的襯里很好，有一個方便的側(cè)拉鏈，”她談到另一個包時說道。

該用戶在購買手提包時沒有閱讀產(chǎn)品說明中的任何文字信息。他只是看了一眼圖片，就已經(jīng)選出了他最喜歡的產(chǎn)品。

eBags.com 上的購物者嚴(yán)重依賴詳細(xì)圖片來確定哪些包最適合他們的需求。

幫助用戶比較項目用戶經(jīng)常在網(wǎng)站上比較項目，并希望看到有關(guān)他們正在考慮的每個項目的相同信息。

關(guān)于可比商品的一致信息是關(guān)鍵，信息的呈現(xiàn)也會影響比較商品的難易程度。一些網(wǎng)站更改頁面設(shè)計或某個項目的可用信息，從而迫使用戶搜索他們需要的信息。

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

產(chǎn)品規(guī)格當(dāng)購物者考慮產(chǎn)品的選項（例如尺寸、顏色或口味）時，他們希望所有規(guī)格都提供相同的信息。

一位研究參與者對Adagio.com 上有關(guān)產(chǎn)品尺寸的不一致信息感到沮喪。

該網(wǎng)站很好地告訴用戶根據(jù)樣品大小可以泡多少杯茶。然而，對于較大的尺寸，它卻無法做到這一點。相反，它列出了每杯的成本，以便用戶可以根據(jù)價格評估選項，這很有幫助。

然而，不一致可能會激怒用戶。她說：“當(dāng)我訂購時，在包裝說明上，對我有幫助的是，在樣品下方，它說明了包裝尺寸可以泡多少杯茶。但在其他情況下，它沒有提到多少。杯，我只能做出一個假設(shè)。但是知道你可以制作多少個杯子會很有幫助，但事實并非如此。它只在樣品下方注明，沒有其他任何內(nèi)容。”

用戶表示，他們很欣賞Adagio 的網(wǎng)站，說明該樣品可以泡多少杯茶，但也希望它說明可以泡多少其他尺寸的茶。

產(chǎn)品類別購買某種產(chǎn)品的客戶希望網(wǎng)站能夠顯示不同品牌和型號的類似詳細(xì)信息。

例如，購買洗衣機(jī)的購物者希望能夠比較有關(guān)容量、所需空間和可用洗滌周期類型（例如精細(xì)洗滌、生態(tài)洗滌和快速洗滌）的信息。對于數(shù)據(jù)密集型規(guī)范，比較表可能是呈現(xiàn)此類信息的最佳方式。

一致的產(chǎn)品頁面通常，當(dāng)人們在網(wǎng)站內(nèi)的頁面之間切換時，他們希望頁面保持視覺上的一致。這是用戶界面設(shè)計的十種啟發(fā)式方法之一。

對于產(chǎn)品頁面，客戶希望吸塵器看起來與家用揚聲器的頁面相似。頁面上的信息量和類型可能因產(chǎn)品類型而異，但從視覺上看，網(wǎng)站內(nèi)的導(dǎo)航和搜索應(yīng)保持一致。

競爭對手的產(chǎn)品頁面努力了解用戶可能在競爭對手的網(wǎng)站上看到哪些信息，并在您的產(chǎn)品頁面上提供相同的信息。

例如，一位顧客在TuftAndNeedle.com 和Casper.com 上比較了床墊，但只有Casper 的網(wǎng)站在產(chǎn)品頁面上強(qiáng)調(diào)了免費送貨。

他解釋說：“Casper 提供100 晚試用、免費退貨或提貨以及免費送貨。因此Tuft & Needle 之間的價格差異可能歸結(jié)為運費?！?

然后他切換到瀏覽器查看Tuft & Needle的網(wǎng)站：“我必須進(jìn)入Tuft & Needle的購買流程，看看他們是否免費送貨。當(dāng)我選擇Queen Size并添加到購物車時，哦，原來是免費的船運。 ”

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

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

最后，產(chǎn)品頁面向購物者顯示相關(guān)或相關(guān)產(chǎn)品的建議，這很有幫助。

這些建議可以幫助用戶發(fā)現(xiàn)他們可能沒有想到的替代方案。即使是高度相關(guān)的推薦（例如“您可能也喜歡”）或具有社交效果的推薦（例如“購買了該商品的顧客也購買了”）也會讓用戶喜歡。請謹(jǐn)慎使用，僅提供高度相關(guān)的建議，因為在產(chǎn)品頁面上顯示太多建議可能會分散注意力或掩蓋重要的產(chǎn)品信息。

顯示買家評論—— 即使是糟糕的體驗，即使是最完整的產(chǎn)品描述也會給一些用戶留下疑問。其他買家或?qū)＜业脑u論將為網(wǎng)站帶來另一種聲音，幫助客戶更多地了解該產(chǎn)品。

用戶經(jīng)常使用產(chǎn)品評論來收集附加信息。在許多情況下，這些評論準(zhǔn)確回答了用戶提出的問題，這些問題通常與產(chǎn)品的使用相關(guān)。產(chǎn)品描述可以描述產(chǎn)品的特性，但買家評論可以提供有關(guān)產(chǎn)品使用情況的信息。

Fossil.com 上的一位購物者讀到了有關(guān)這款智能手表的褒貶不一的評論。 “有人說這條帶子很難使用，”他說。 “其他人說這款手表做工很便宜，就像兒童手表一樣。但后來也有人說材料很棒。”

最終，盡管這款手表受到了負(fù)面評價，但正面評價足以說服他繼續(xù)考慮購買。于是他不再看評論，又回去看產(chǎn)品的功能、規(guī)格以及產(chǎn)品圖片信息。

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

如今的購物者已經(jīng)開始期望看到正面和負(fù)面的評論，并能夠快速瀏覽它們。

我們不斷觀察那些想要首先跳轉(zhuǎn)到負(fù)面評論的用戶，以便他們知道“該商品可能發(fā)生的最糟糕的情況是什么”。

以下是在產(chǎn)品頁面上成功顯示客戶評論的兩個重要準(zhǔn)則：

明確區(qū)分正面和負(fù)面評論僅僅提供評論是不夠的，用戶希望并且需要查看評論摘要以了解產(chǎn)品的整體質(zhì)量。用戶需要能夠快速找到正面和負(fù)面評論，以了解其他客戶所說的最好和最差的評論。用于排序或過濾評論的工具也經(jīng)常使用。

提供有關(guān)審閱者的相關(guān)詳細(xì)信息用戶了解有關(guān)發(fā)布審閱者的人的一些信息也很有幫助。例如，評論者的年齡、體型、產(chǎn)品使用情況或其他相關(guān)詳細(xì)信息。

用戶不需要查看整個用戶個人資料，但在確定評論是否相關(guān)且適用于用戶的情況時，基本信息會派上用場。

Macys.com 上的一位購物者根據(jù)產(chǎn)品評論來決定在網(wǎng)站上買什么，談到書包評論時說道：“我喜歡這個，因為作者和我同齡。我想知道我這個年紀(jì)的人在做什么“我想，因為他們可能有相似的生活方式。就像一個23歲的人，他們?yōu)槭裁从眠@個包，為什么喜歡這個包，原因可能和我的很不一樣。”

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

開始購買流程產(chǎn)品頁面是用戶決定購買產(chǎn)品并將其放入購物車的關(guān)鍵區(qū)域。用戶必須知道他們的產(chǎn)品選項是什么以及如何選擇它們。

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

解釋每個項目的變化用戶必須理解每個選項—— 的含義，無論是顏色、大小、內(nèi)存量還是任何其他項目特征。這些選項也需要簡單，以便用戶可以輕松選擇他們想要的項目。

描述產(chǎn)品庫存如果產(chǎn)品沒有各種顏色或尺寸的庫存，這一點尤其重要。用戶應(yīng)該知道哪些商品缺貨，而不必等到將商品添加到購物車后才發(fā)現(xiàn)缺貨或已售完。

將商品添加到購物車后，提供清晰的反饋，將用戶引導(dǎo)至購買流程的最后一步，即將商品放入購物車。令人驚訝的是，有多少次購物者因為不知道購物車中是否有商品而遇到問題。

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

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

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

結(jié)論購物者可以在產(chǎn)品頁面上確定產(chǎn)品是否滿足他們的需求。為了取得成功，電子商務(wù)網(wǎng)站必須首先進(jìn)行研究，以確定客戶對其產(chǎn)品的問題。

設(shè)計師應(yīng)該使用描述和圖像來回答用戶的問題，幫助他們比較物品，并使人們能夠盡可能快速、輕松地開始購買過程。

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

本文翻譯自Nielsen Norman Group 高級用戶體驗專家Katie Sherwin 的《電子商務(wù)產(chǎn)品頁面用戶體驗指南》。

本文由@海外設(shè)計參考翻譯發(fā)布在《人人都是產(chǎn)品經(jīng)理》上。未經(jīng)許可禁止轉(zhuǎn)載

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