電子商務用戶體驗——基本設計策略和原則

隨著整體零售格局的不斷發展和實體連鎖店的掙扎，電子商務市場已蓄勢待發。 到 2021 年，全球電子商務銷售額預計將增長到超過 4.48 萬億美元，是 2017 年的兩倍多。

密切關注用戶體驗並遵守一套標準的電子商務用戶體驗設計原則的電子商務零售商和設計師可以利用這一市場增長並獲得切實的財務回報。

購物流程是一個通用的用戶旅程，如果實施得當，會導致更多的衝動購買、更少的購物車放棄和更高的整體轉化率。

用戶旅程包括：

• 網站發現
• 產品搜索和瀏覽
• 產品頁面
• 大車
• 退房
• 確認

本文涵蓋了用戶旅程的這些關鍵點，以及電子商務設計師如何讓客戶體驗愉快、直接和輕鬆。

網站發現

明確品牌定位

訪問者在短短 50 毫秒內就形成了對網站的第一印象。 電子商務網站需要通過清晰、快速地展示其銷售的產品以及適合整個市場的位置來吸引用戶的注意力。

例如，奢侈品珠寶零售商的網站可能與註重預算的大賣場網站在外觀和感覺上大不相同。 高端電子產品零售商 Bang & Olufsen 通過使用優雅的字體、精緻的調色板和時尚的產品圖像來傳達其品牌品質。

顯示相關的號召性用語

當用戶到達主頁時，用及時的內容和具體的行動號召 (CTA) 迎接他們。 與當前季節或特定事件相對應的大橫幅圖像以及適當的 CTA 可幫助用戶進入購物流程的下一步。 創建 CTA 時，請避免使用無法清楚地告訴用戶接下來會發生什麼的通用短語，例如“開始”。

寶麗來通過幫助購買禮物的用戶在節日期間創建了有效的 CTA。 寶麗來沒有使用通用短語，而是使用了“購買禮物”，明確表示用戶將被帶到網站上的某個區域，並提供禮物建議。

為 SEO 定制登陸頁面

通過將來自谷歌等搜索引擎的用戶搜索詞連接到特定的登錄頁面，電子商務零售商可以捕獲那些致力於尋找特定產品的用戶。

當用戶搜索某物時，他們很有可能想要購買它。 為常見的產品搜索詞創建自定義登錄頁面會增加零售商獲得銷售的機會（可能還有新客戶）。 文具公司 Papier 在谷歌搜索結果中專門為婚禮請柬設計的頁面做得很好。

產品搜索和瀏覽

提供現場搜索

雖然它看起來很基本，但許多網站仍然不提供一般的站點範圍搜索，或者即使提供，也沒有適當優化。 但現場搜索是穩固電子商務購物體驗的基礎。

根據 Invesp 的數據，60% 的在線購物不是衝動的。 人們通常知道他們在尋找什麼，在電子商務網站的搜索欄中輸入查詢（例如產品名稱或型號）比篩選菜單選項要快得多。

預測搜索或自動完成等附加功能可幫助用戶快速查看選項。 Apple 將這種策略與搜索字段一起使用，該搜索字段通過產品快速鏈接和流行的建議搜索動態更新。

在探索模式中激發訪客

雖然許多購物者會考慮購買特定商品，但並非所有訪客都如此確定。 根據 Nielsen Norman 的說法，有五種類型的電子商務購物者，其中一種是“瀏覽器”。 瀏覽器不一定要尋找特定的東西。 相反，他們正在悠閒地環顧四周，看看是否發現了一些有趣的東西。

電子商務網站可以通過向購物者展示新產品或暢銷產品並讓他們輕鬆快速地查看產品類別來支持發現模式的購物者。

Etsy 通過向瀏覽器展示當前流行的內容以及在導航和主頁內容中清晰地顯示整體產品類別來吸引瀏覽器。

使用過濾器和分面搜索

分面搜索使用過濾並通過允許用戶一次選擇多個屬性將其更進一步。

創建過濾器時，不要將選項限制為尺寸、顏色或價格等一般標準，而是為所售產品的特定類別添加特定過濾器。 這些過濾器可以是衣服的合身度或面料、字體或邀請場合，以及小工具的屏幕尺寸或處理器。

一旦用戶應用了過濾器，應該立即在 UI 中顯示應用了哪些過濾器。 用戶還應該能夠輕鬆刪除應用的過濾器。

ASOS 顯示了每個類別的詳細過濾器範圍，並清楚地顯示了已應用的過濾器。

產品頁面

突出顯示主要操作

用戶永遠不應該想知道如何做一些重要的事情，比如將產品放入購物車。 將“添加到購物車”或“立即購買”等主要操作顯示為按鈕，並將它們放在屏幕上相對於其餘內容的顯眼位置。

家居裝修零售商 Lowe's 讓用戶知道如何將產品添加到他們的購物車中，其中一個綠色的大按鈕是頁面上最突出的內容之一。

提供詳細的產品信息

展示高質量、專業的照片和詳細的描述，幫助買家了解產品。

使用漸進式披露和視覺層次結構為用戶提供他們需要的適量信息。 立即向他們提供最重要的信息，然後在頁面下方為想要了解更多信息的用戶添加詳細信息。

將長描述分成幾個部分； 例如，概述、尺寸/尺寸、詳細功能和運輸信息。 像 Myprotein 一樣，對其他部分使用展開/折疊導航有助於防止用戶感到不知所措。

建立客戶信任

避免讓客戶猜測運輸選項、產品可用性和退貨政策。 確保所有這些信息都隨時可用，這可以建立客戶的信心和信任，並可能有助於推動不確定的客戶進行購買。 了解他們是否以及如何退貨有助於他們做出更明智的決定。

ASOS 使用從每個產品名稱下的鏈接訪問的模式清楚地在每個產品頁面上顯示重要的運輸和退貨信息。

添加社會證明

社會認同是一個概念，意味著人們會受到他人行為的影響。 這個概念是 Robert Cialdini 博士（影響力科學領域的主要研究人員）說服原則的一部分，並且已被證明是有效的。

電子商務零售商可以通過添加客戶評級、評論和評論來增強買家的社會認同感。 亞馬遜上的產品通常有數千條評論，用戶可以按星級對其進行排序。

購物車

顯示清晰的訂單摘要

在買家完成購買之前，向他們展示一份清晰簡潔的訂單摘要，其中包括購買的商品、每件商品的數量和價格以及訂單總額。 允許用戶編輯他們可能想要更新或刪除的任何項目，並通過包含運輸摘要來避免運輸費用意外。

Modist 顯示清晰的訂單摘要和收據。 用戶可以輕鬆管理他們選擇的商品（移至願望清單、刪除、更改數量），並查看運費和稅費的摘要和詳細明細。

退房

讓用戶以訪客身份簽出

衝動購買佔電子商務支出總額的近 40%。 通過允許買家以客人身份結賬，消除創建帳戶或登錄的額外障礙。 在以客人身份退房過程中，創建帳戶的簡單集成可能會將一些客人轉換為帳戶用戶。

Aesop 允許用戶以訪客身份輕鬆結帳，同時還提供登錄或註冊選項。 以單一形式提供多個選項可以為想要快速結賬的用戶消除潛在的購買障礙，但也為想要註冊的用戶提供了這樣做的機會。

在結賬過程中提供視覺反饋

包括一個進度條可以幫助客戶了解他們在結賬過程中的位置以及他們還有多少要完成。

Apple 會向用戶展示流程中的每個步驟，並允許他們使用進度鏈接在步驟之間導航。 進度已保存，因此用戶在步驟之間移動時不會丟失任何內容。

使用常見的付款方式

除了允許通過主要信用卡付款外，添加其他流行的付款方式（如 PayPal）可能會增加不想交出信用卡信息的買家的轉化率。

在荷蘭，iDEAL 經常用於電子商務交易，60% 的荷蘭消費者在最近的一次購買中使用過它。 服裝零售商 Scotch & Soda 允許買家使用 iDEAL 和 PayPal 結賬。

訂單確認

購買後顯示詳細的訂單確認

客戶完成購買後，向他們確認，其中包括成功的付款處理和交付詳細信息，例如地址、交付方式和預計交付日期。

亞馬遜確認電子郵件的概念顯示了訂單號，概述了購買的商品，並提供了發貨日期和一些未來購買的建議。

通過電子郵件發送訂單和運輸更新

除了確認屏幕之外，發送確認電子郵件有助於讓用戶了解他們的購買狀態。 雖然所有客戶都應該收到電子郵件確認，但這在用戶以訪客身份結賬並且沒有網站上的帳戶來查看他們過去的訂單的情況下特別有用。

如果訂單發生任何變化，例如交貨延遲，請發送更新。 商品發貨後，請發送包含跟踪號的電子郵件更新。

概括

本文中的原則提供了每個電子商務設計師都應該遵循的用戶旅程接觸點的基線，但這僅僅是開始。 如需進一步了解有關移動電子商務 UX 的更多細節，請訪問移動體驗電子商務或閱讀有關登錄頁面設計如何設計有效登錄頁面的更多信息。

不斷增長的電子商務市場為零售商帶來了許多機會。 那些認識到用戶體驗的重要性並遵循電子商務用戶旅程最佳實踐的人可以保持競爭力並對他們的底線產生積極影響。

• • •

進一步閱讀 Toptal 設計博客：

• 顯著的電子商務趨勢及其對設計的影響（附信息圖）
• 移動體驗的電子商務 UX
• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 電子商務網站設計終極指南
• 電子商務重新設計：微小的變化如何帶來重大的用戶體驗改進