電子商務網站設計終極指南

美國電子商務銷售額在 2018 年繼續達到新的高度。在全球範圍內，電子商務將繼續實現 2.3 萬億美元的穩健收益。 但是，是什麼讓一個電子商務網站勝過另一個？

有幾個因素決定了電子商務網站的整體成功，包括產品質量、品牌知名度、運輸成本、退貨政策、可信度和客戶服務。 然而，周到的用戶體驗設計也是為客戶提供令人滿意的無摩擦體驗的關鍵。 它不僅可以將潛在的點擊轉化為實際的電子商務交易，還可以讓客戶一次又一次地回來。

這是一個全面的電子商務 UX 設計指南，用於創建出色的電子商務網站，並附有示例。

為信任和安全設計電子商務

首先，重要的是設計一個購物者認為他們可以信任的網站。 大多數購物者都關心隱私以及網站是否會通過提供安全交易來保護他們的個人數據。 如果網站感覺不值得信賴，他們只會選擇到別處購物。

以下是一些傳達可信度的方法：

• 包括業務概述：

  • 提供一般信息
  • 企業背後的人的照片
  • 聯繫信息
  • 社交媒體鏈接
  • 常見問題 (FAQ) 頁面

• 發布商店政策並確保它們不太難找到：

  • 運輸和退貨政策
  • 概述退貨流程以及可以退貨的產品
  • 提供對涵蓋購物者個人和財務信息的隱私政策的輕鬆訪問（這是至關重要的）

用通俗易懂的語言寫作，避免使用法律或內部政策術語。

• 分享產品評論。 提供產品評論，幫助購物者更多地了解產品； 這將有助於減輕他們可能存在的任何擔憂並提供出色的電子商務用戶體驗。 通過提供產品評論以及有關評論者的其他信息或總結評論，更進一步。 此步驟可以幫助購物者更輕鬆地充分利用他人的意見。
• 使用安全的服務器。 購物者希望他們的個人信息在他們在線購物時能夠保持安全。 SSL（安全套接字層）證書驗證網站的身份並加密需要保持安全的信息。 這是一個重要的標誌，表明結賬是安全的。 通過實施 SSL 和顯示 SSL 證書徽章向購物者保證他們的數據受到保護。

• 添加公認的信任印章。 信任印章驗證網站的合法性和安全性。 如果交易被證明是欺詐性的，一些信託公司甚至通過提供一些保險來增加額外的保護層。 使用公認的信任印章可確保潛在購物者的交易流程安全，從而增加銷售額並提供更好的電子商務用戶體驗。
• 表現出對細節的關注。 通過避免拼寫錯誤、丟失圖像、斷開鏈接、404 錯誤（未找到頁面）或其他電子商務 UX 扼殺錯誤，使網站看起來合法和專業。

電子商務 UI 設計注意事項

網站的外觀和感覺是第一印象的主要驅動力。 研究得出結論，人們將在 50 毫秒內確定他們是否喜歡一個網站。

以下是一些基本的用戶界面設計技巧：

• 遵循品牌標識。 品牌應該在整個網站上都很明顯。 選擇反映品牌的顏色，並設置風格，以明確銷售的產品類型。 確保品牌體驗在所有渠道（無論是在線、店內還是移動設備上）都保持一致。 這將有助於建立牢固的品牌與客戶關係。
• 採用視覺層次結構。 最關鍵的內容應顯示在首屏。 在某些情況下，使用較少的空白將項目拉得更近比將關鍵內容推到首屏更好。
• 不要過度設計。 限製字體格式，例如字體、大小和顏色。 當文字看起來太像圖形時，就會被誤認為是廣告。 使用高對比度的文本和背景顏色使內容盡可能清晰。
• 堅持已知的符號。 使用易於識別的圖標或符號。 不熟悉的圖標只會讓購物者感到困惑。 避免任何可能的混淆的一個好方法是為圖標提供標籤。
• 避免彈出窗口。 彈出窗口會分散注意力。 即使它們包含有價值的信息，購物者也很可能立即將其解僱——一旦離開，即使他們願意，購物者也很難再次找到這些信息。

無摩擦電子商務網站導航的重要性

無摩擦是存在的方式。 導航是關於人們在網站上移動、找到他們正在尋找的內容並最終採取行動的難易程度。 電子商務購物體驗應該是無縫的，這樣購物者就不會在整個過程中途放棄。

易於導航的電子商務網站設計的一些關鍵方麵包括：

定義明確的產品類別

頂級導航應顯示網站提供的類別集。 將產品分組到有意義的類別和子類別中。 類別標籤最適合作為描述產品範圍的單個詞，因此購物者可以瀏覽它們並立即了解它們所代表的內容。 最好盡可能多地對用戶測試網站導航以獲得出色的電子商務 UX，因為它是網站的關鍵成敗功能。

產品搜索

簡而言之，如果購物者找不到產品，他們就無法購買產品——建立一個搜索功能，幫助他們輕鬆找到他們正在尋找的東西：

• 讓搜索無處不在。 將搜索框放在每個頁面和熟悉的位置。 該框應可見、可快速識別且易於使用。 實現搜索框的標準位置是頁面的右上角或頂部中心，或者在主菜單上。
• 支持各種查詢。 搜索需要支持所有類型的查詢，例如產品名稱、類別和產品屬性，以及客戶服務相關信息。 在輸入字段中包含示例搜索查詢以向購物者建議使用各種功能是一個好主意。
• 具有搜索自動完成功能。 自動完成功能使購物者更容易找到他們正在尋找的東西，並通過在他們已經搜索的區域內提出建議來增加銷售潛力。
• 允許對結果進行排序和過濾。 讓購物者根據各種標準（暢銷書、最高或最低價格、產品評級、最新商品等）對搜索結果進行排序，並排除不屬於某個類別的商品。

過濾產品

給的選擇越多，選擇就越難。 通過實施過濾器幫助購物者找到合適的產品。 它將幫助他們縮小選擇範圍並直接跳轉到他們想要的產品範圍。

產品快速瀏覽

“快速查看”通過消除不必要的頁面加載，減少了購物者找到合適產品的時間。 通常，產品詳細信息顯示在查看頁面上方的模式窗口中。 不要嘗試顯示所有產品詳細信息，而是包含指向完整產品頁面的鏈接以查看完整詳細信息。 此外，請務必包含一個顯眼的“添加到購物車”按鈕以及“保存到願望清單”功能。

特別優惠

購物者總是在尋找特別優惠、折扣或最優惠的價格。 使獨家優惠可見，以便購物者了解它們。 即使價格差異不是很大，節省一些錢的心理感覺也會產生佔上風的錯覺。

電子商務產品頁面設計

當購物者成功找到他們想要的產品時，為了獲得出色的電子商務用戶體驗，讓他們了解產品。 設計一個產品頁面，通過包含大量圖像、詳細描述和任何其他有用的和相關的產品信息，創造盡可能類似於親身購物體驗的體驗。 讓我們深入看看這意味著什麼。

提供出色的產品圖片

通過電子商務，購物者無法觸摸、感受或試用產品。 相反，一切都取決於他們在網上看到的內容。 這就是為什麼提供清楚展示產品所有方面的產品圖像至關重要的原因。 這是完美產品圖片的清單：

• 使用白色背景。 產品圖片的背景不應分散注意力或與產品本身發生衝突。 白色背景效果最好，因為它可以讓產品脫穎而出，並且適用於幾乎任何風格或配色方案。
• 使用高質量的大圖像。 好的圖像銷售產品。 高質量的圖像會引起購物者的興趣，並準確地向他們展示他們所購買的東西。 擁有大圖像可以讓購物者放大並詳細檢查產品。

• 使用各種圖像。 從多個不同的角度展示產品，並包括特寫鏡頭，以提供更完整的產品感。 一個 360 度的視圖，他們可以在其中移動產品，這是一種很好的方式，可以提供一種接近實體進入商店並與之互動的體驗。 VR 電子商務是這種體驗的下一波浪潮。
• 使用視頻。 視頻能夠在短時間內傳遞大量信息。 使用視頻展示正在使用的產品，並提供盡可能多的功能信息。
• 始終如一。 使用跨多個頁面一致的圖像，並且與網站其餘部分的外觀和感覺保持一致。 這將使一切看起來乾淨整潔。 網站所有區域的主要產品圖片應相同，例如產品亮點或特色商品部分。

提供適量的產品信息

向購物者提供有關產品的詳細信息，以便他們做出明智的購買決定。 顯示可用性、不同尺寸或顏色的選項、尺寸、尺寸表、使用的材料、總成本、保修等。 他們對產品的剩餘問題越少，他們購買的可能性就越大。

採用有說服力的設計

根據稀缺性原理，人類對稀缺的事物賦予較高的價值，而對豐富的事物賦予較低的價值。 通過顯示稀缺性來在銷售過程中營造一種緊迫感——顯示剩餘的產品數量、將缺貨的尺寸變灰或顯示銷售截止日期。 稀缺性將激勵潛在買家採取行動。

越來越多的公司正在使用先進的心理學研究，為了推動更多的參與和購買，他們將曾經是一門藝術的東西變成了一門科學。 電子商務中的有說服力的設計是獲得更多購買的一種非常有效的方式。

顯示相關和推薦產品

展示購物者可能也喜歡的類似產品，這些產品與當前產品或其他人購買的產品配合得很好。 這可以顯示在產品詳細信息頁面或購物車中，並有助於引導購物者找到滿足其需求的產品，從而可能鼓勵他們繼續購物——這是交叉銷售相關產品的好方法。

購物車設計

購物車是必不可少的，因為購物者可以在這裡查看他們選擇的產品、做出最終決定並進行結賬。 購物車的主要目標是引導購物者結賬。 以下是有關設計用戶友好型購物車的提示，並將鼓勵購物者進一步購買。

• 使用明確的號召性用語 (CTA)。 購物車頁面上的主要號召性用語應該是結帳按鈕。 使用明亮的顏色、大量的可點擊區域和簡單的語言使結帳按鈕可見、簡單且易於使用。
• 提供充分的反饋。 確保在將產品添加到購物車時立即明確確認。 購物者會因反饋不足而感到困惑，例如顯示不顯眼的確認文本。 一個好主意是使用動畫，因為運動會吸引人的眼睛。
• 使用迷你購物車小部件。 允許購物者使用迷你購物車將產品添加到購物車，而無需離開他們所在的頁面。 它還允許他們導航、發現和添加更多產品。 迷你購物車小部件應始終鏈接到整頁購物車。

• 顯示產品詳細信息。 在購物車中顯示產品名稱、圖像、尺寸、顏色和價格等詳細信息有助於購物者記住每個產品，並比較產品。 將購物車中的產品鏈接回其完整的產品頁面，以便購物者在必要時查看更多詳細信息。
• 使購物車易於編輯。 刪除、保存以備後用或更改尺寸、顏色或數量等細節的功能應該很容易訪問。
• 避免意外的運輸成本和稅收帶來的驚喜。 意外的運費是購物者放棄購物車的主要原因之一。 將運輸選項和稅款與成本的精確計算以及預期的交貨日期提前聯繫起來。

電子商務結帳設計

時尚和新潮的設計並不能決定一個成功的電子商務網站，也不一定能提供出色的電子商務用戶體驗。 電子商務的成功僅通過完成購買的數量來衡量。 以下是構建精心設計的結帳頁面的幾種方法，這將有助於成功轉換：

• 提供多種付款方式。 不同的購物者在付款方面有不同的偏好。 迎合盡可能多的付款方式（視目標受眾而定），以擴大客戶群，讓購物者輕鬆完成訂單。
• 把事情簡單化。 盡量減少完成購買的字段和步驟的數量。 默認情況下使用送貨地址作為賬單地址是減少字段數量的好方法——理想情況下，設計一個單頁結賬，購物者可以在其中查看他們的購物車並輸入送貨和付款信息。

• 使註冊成為可選的。 強迫購物者在第一次購買之前創建一個帳戶將把購物者趕走。 在購買完成後為他們提供註冊選項，並在要求他們註冊時突出註冊的好處。 好處包括更快結帳，這要歸功於保存的送貨地址或付款信息等個人信息，以及訪問僅適用於註冊會員的獨家優惠。
• 使用明確的錯誤指示。 沒有什麼比無法購買或找出原因更令人沮喪的了。 不是在提交表單後顯示錯誤，而是實時顯示錯誤通知。 將清晰簡潔的錯誤消息直接放在需要更正的商品上方或旁邊，以便購物者註意到並理解它們。

• 讓人們走上正軌。 使用多頁結賬時，包括一個進度條，顯示完成購買還剩多少步驟。 這將消除任何歧義，並向購物者保證他們走在正確的軌道上。 購買完成後，顯示訂單確認和訂單狀態以及發貨跟踪。
• 提供支持。 在整個結賬過程中加入實時聊天或聯繫號碼，這樣當購物者有問題時，他們可以快速得到答案，而不必離開網站去其他地方。

概括

無論如何，在線購物者都希望獲得順暢的體驗。 在設計電子商務網站時，不僅僅是建立一個網站，而是創造一種在線購物體驗，將被動購物者轉變為付費客戶。

希望本電子商務網站設計指南能夠幫助您做出重要的設計決策，以構建專業、有吸引力、用戶友好的出色電子商務用戶體驗，並讓購物者一次又一次地光顧。 快速增長加上相對較低的市場份額意味著新參與者仍有巨大機會超越傳統行業領導者。

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——基本設計策略和原則
• 移動體驗的電子商務 UX
• 如何通過 UX 設計吸引電子商務購物者
• 電子商務重新設計：微小的變化如何帶來重大的用戶體驗改進