設計翻譯
行動電商平台：產品頁的小細節
魔鬼就藏在細節裡。
此文翻譯自的工程師兼 UI/UX 設計師 Nick Babich，本篇除封面圖片之內文及圖片，版權皆為作者所有。原文連結網站轉化到 app 時，沒有比產品頁面更重要的部分了。當使用者做出產品決策時，能夠輕鬆查看、了解產品的資訊，對使用者做出購買決定時，是至關重要的。
這裡有一些撇步可以幫你改善頁面、增進瀏覽者購買率。這些是你必須知道的：
產品細節跟選項
詳細的細節可以激發使用者購買還有讓他們安心，讓他們快速的了解購買能有哪些選項。使用者喜歡 app 或是網站可能展示所有須知訊息：庫存、尺寸、顏色選擇、產品描述、照片跟評論等等的。
產品訊息清楚又直覺
產品描述應該是能輕易瀏覽的（在找特定訊息時）。在下面的左邊例子中，使用者可能會因產品不完整的細節而感到沮喪：
- 尺寸：不清楚特定的尺寸是不是還有庫存，或是已經沒辦法購買了；不清楚 XL 尺寸的實際測量呎碼是多少。
- 顏色：沒有視覺顯示的顏色選項；放大鏡裡沒有提供查看實體顏色如何的足夠訊息。
- 庫存可用性：沒有足夠的訊息顯示庫存跟運送方式。
- 沒有商品描述。
將大量的產品頁必備資訊，格式化地壓縮在手機螢幕裡確實很困難。但是有些零售商展示了這是可能的：
降低讓使用者花在打字的力氣
手機 app 的主要錯誤大多出現在打字的 input 區塊。打字是一個容易出錯又耗時的高成本互動，即使是用整個鍵盤（在觸控螢幕上更是如此）。理想的狀況下，應該要移除產品頁上所有客戶應該輸入原始數據的區域（這會打開使用者錯誤的大門）。你應該用數字選項來避免讓使用者犯錯：用單選按鈕(radio)跟增減按鈕(steppers)讓使用者只能選擇一個特定的選項。
產品圖片
用產品圖片賣產品。無論你的產品怎麼樣，不管是電腦或是T恤，圖片都是頁面上最重要的元素。好的產品圖片能做到兩件很重要的事 — 留下深刻的印象跟提供資訊。
使用大尺寸跟高質感照片
為了讓影像更有效，它需要是大尺寸又高品質的圖片。這在消費者更關心細節的服飾店尤其重要。下圖展示了這個規則如何用於服裝產品頁面。
要確保這些檔案不會糟糕到顯示出像素。不只是原始的圖片應該是好的，放大後的照片也應該保持高品質。這樣使用者進行縮放時，可以確保你的照片能以高解析度展現。
下面是縮放問題的明顯案例。當圖片放大時，產品的辨識度非常低，他們很明顯用了劣質、根本無法使用的照片。
讓使用者控制他們縮放的程度
這個圖片是用來讓人感受到文字描述沒辦法做到的感覺。由於使用者通常很依賴產品照片來評估功能跟細節，他們可能會因為手機網站或 app 預設了放大程度而感到很沮喪。
你應該讓使用者依自己的喜好控制縮放。
需要數張圖片
一般來說，在你的產品介面上有越多商品照越好。但實際上，為了優化圖庫照片的使用量，應該試著去使用產品細節有特別描述有關的照片。
這裡有一些挑選圖片集的小撇步:
- 你應該展示實際的細節跟功能。舉例來說，如果你在販售 AV 接收器，就應該展示後面的端口，幫助使用者了解它的功能。
- 與文字內容相關的圖片也可以幫助使用者。 例如，在手機螢幕上，Harry’s 使用圖片來描述整個品牌故事。
為水平滑動設計圖片集
側邊滑動圖片是為大拇指設計的。使用者應該要可以快速水平滑動產品照，而且不需要向下滾動就可以看到一系列照片。
支援縮放跟雙擊手勢
在手機產品頁上，使用者經常使用縮放、雙擊等等的手勢去試著縮放圖片。然而，不是每個網站支援縮放圖片的網站都會通知你可以用什麼手勢。如果網站標示可以支援手勢時，確實是可以幫助使用者利用這些功能。
產品價錢
價錢是非常理性的，你應該花一些時間來制定對的產品定價策略。 有兩種不同的方式可以處理價格，並把它放置在頁面上的正確位置：
- 如果你是在競爭價格，也就是你和許多其他廠商販賣相同的產品，然後你付出較多的代價。 以經驗法則來說，如果你確信你的售價已經削弱了競爭對手的力量（就像 Asos 所做的那樣），就把價格放在前面（緊隨著圖片和產品名稱）：
- 如果你是用其他方式在競爭（例如，你販賣的是一件特別的產品），那你就要降低對價錢的強調。你也許會把價錢放在一連串的商品優點跟功能描述後面。
產品供應和運送選項
產品頁面被放棄的最大原因之一，是許多頁面沒有列出運送選項和價錢。 缺少運輸訊息，逼迫使用者去其他網頁上進行搜索，讓他們脫離本來要做的事。
顯示店面庫存
店內庫存是讓想要在實體位置購買或取貨的使用者的關鍵。 永遠要試著自動偵測使用者的位置，以顯示地點的庫存，並且讓使用者能輕鬆選擇喜歡的商店。有 一個常見的錯誤是，把使用者的位置定為預設值，而不提供更簡單的方式。
運費跟運送所需時間
使用者期待運費跟運送日期可以越快明確的顯示在螢幕上越好，但是當使用者購買一件物品時，他們通常還是想比較一下運費跟運送所需時間。
理想狀況下，你應該提供免費的運送服務跟優質的即時快遞選項。確保你設計的產品頁面上，有列出可選擇的運送服務跟相關費用。
有用的產品評論
網路購物是關於信譽，人們比較容易相信其他人的評價。消費者評價被使用者拿來做下列兩種用途：
- 產品評論能幫助評估產品的質感和客戶服務水準。 使用者希望能確認你在產品頁面上說的所有內容都是真的。
- 評論能幫助使用者找到他們對沒辦法顯示在頁面上的產品細節問題的答案。買家認為這些資訊就跟在店裡問銷售人員一樣有用。
如果你能建立一連串好的評價，他們會幫你在產品頁上建立良好的信譽，並且幫助你銷售產品。
讓使用者評論能被篩選
讓使用者能分類跟篩選，這樣他們就可以得到產品的“真實”資訊。
不要隱藏任何負面評論並且顯示全部的投票數
如果所有的評論都過度正面，這會導致使用者開始懷疑他的合理性。
當你陳列產品時，請確保你也展示了全部的投票數，來顯示這個評價是有意義的。
降低跳出率
透過提供額外的內容，讓使用者盡可能的長時間留在網站或 app 裡：提供相關跟最受歡迎的商品訊息。當使用者在考慮替代或附加的產品時，他們會很喜歡這些相關產品的推薦。試著在頁面底部加上醒目的產品推薦吧！
通過提供額外的內容，使可以盡可能長時間地與網站或應用程序互動：提供有關相關項目和最受歡迎產品的信息。 當使用者考慮更換或附加產品時，他們會欣賞產品頁面上的相關產品建議。 嘗試在頁面底部使用醒目的產品建議。
結論
如果頁面在手機上沒有進行優化的話，30％ 的手機使用者會放棄購買。設計手機購物體驗，在轉換率上面應該是電商網站或 app 的首要任務，特別是在產品頁上面。產品頁要有辦法提升買家的轉換率，因為使用者越容易購買產品的話，他們就更可能下單。
感謝!
追蹤 UX Planet: Twitter | Facebook
原文來自 babich.biz
如果這篇文章剛好對你有幫助的話，歡迎追蹤 Digital Sunday。在翻譯或設計上有任何建議，歡迎留言與我討論及分享喔！
