移動體驗的電子商務 UX

“移動商務”一詞是 20 年前由 Kevin Duffey 提出的，當時他提出移動設備可以作為客戶口袋中的零售店。 考慮到當時的技術限制，誰能想到有一天我們可以在袖珍型的小設備上輕鬆瀏覽、查看和購買商品？

我不能誇大移動如何改變我們與消費者互動的方式。 我們必須接受這些變化。 ——沃爾瑪首席執行官喬爾·安德森

電子商務的驚人增長也推動了移動電子商務的增長，目前價值近 7000 億美元。 移動電子商務目前是巨大在線市場的最大份額。 上個月，超過 80% 的美國人在網上購物——三年前，這一數字僅為 11.6%。

Business Insider Intelligence的一份報告顯示，到 2020 年，移動商務將增長 45%。ComScore 的研究對此表示贊同，並在 2016 年報告稱，與 2015 年相比，移動設備的支出增長了 44%。

儘管銷售額很高，但超過 60% 的用戶仍然擔心在使用手機時他們的財務信息被黑客入侵。 儘管如此，客戶滿意度仍然相當高，亞馬遜和蘋果等移動零售巨頭的滿意度均超過 80%。

成功的移動電子商務用戶體驗最佳實踐

通過捏合和雙擊手勢支持圖像縮放

人們熟悉雙擊和捏合等手勢，以便在移動設備上放大圖像。 在一項移動電子商務可用性研究中，Baymard Institute 發現，購物者很自然地希望能夠徹底檢查產品並關注小細節。 有興趣購買產品但無法通過放大來探索它的用戶不會覺得購買它很舒服，並且通常不會承諾銷售。

令人驚訝的是，在收入最高的 50 個移動電子商務應用程序中，超過 40% 的應用程序不支持縮放手勢。 即使是提供圖像特寫版本的網站也經歷了類似的跳出率，這表明在移動電子商務應用程序中支持產品圖像縮放手勢至關重要。

考慮到移動設備的小屏幕尺寸，這是一個特定於平台的問題。 支持這些功能中的至少一項將使應用程序進入前 50% 的電子商務應用程序的公司，即收入最高的列表。

需要考慮的幾個因素：

• 低分辨率圖像相當於無縮放圖像。 用戶有興趣清楚地看到產品的細節，並且需要高分辨率圖像來做到這一點。 放大低質量圖像的選項幾乎沒有用，因為它不允許用戶查看細節。
• Baymard 研究所發現 50% 的應用程序沒有向用戶表明他們可以捏合或雙擊產品圖像。 指示圖像縮放的可用性很重要。 雖然這些手勢對於移動用戶來說是眾所周知的，但仍然需要證明它們是可用的。 為了做到這一點，建議使用圖標或視覺表示。

為購物車提供“保存”功能

如前所述，移動設備的小屏幕尺寸是移動電子商務的主要障礙。 Baymard 研究所觀察到，超過 61% 的移動用戶會經常使用台式機而不是手機來完成購買。

“保存購物車”功能減少了放棄購物車的次數，並使購物者能夠保存商品以備日後購買。 持久購物車允許客戶繼續購物，而無需在退貨時搜索所需的產品——55% 的購物者會使用這一功能。

以下是留住這些客戶的方法：

1. 通過保存添加到購物車的項目，使購物車成為願望清單。
2. 創建一個選項以允許購物者接收包含已保存商品的電子郵件。 顯示他們可以使用桌面完成購買的提醒。

使用描述性、標記良好的表格

為移動表單應用最佳實踐是另一個考慮因素。 電子商務應用程序或網站的用戶體驗設計在消除任何混淆的同時，允許用戶盡快完成表單，這一點很重要。

以下是移動表單可用性的最佳實踐：

• 在表單上方放置表單標籤以提高可讀性、易用性和清晰度。 解釋為什麼需要某些信息將減少用戶在手機上填寫表格時的焦慮。
• 將文本輸入與適當的鍵盤匹配。 輸入電話號碼和信用卡數字時顯示撥號盤，輸入地址和文本時顯示文本鍵盤。 這將減少用戶錯誤並加速表單完成。
• 限制輸入字段的數量以減少輸入工作量。 更少的輸入字段將生成更少加載的表單，並將改善 UX 結帳流程。
• 完成後自動將每個字段向上移動到屏幕上。 這樣做不會妨礙對不完整字段的任何查看。
• 使用步進器而不是下拉菜單來減少購物者的工作量。 步進器用於按恆定量增加或減少值，是一種使用起來更快、更吸引人的解決方案。

提供智能自動建議、自動檢測、地址查找和錯誤

自動建議背後的主要目的是讓用戶更輕鬆、更快捷地填寫表格。 自動建議可預測常見的搜索查詢並幫助購物者更輕鬆地找到產品。

使用信用卡類型自動檢測可以進一步提高移動可用性。 自動檢測通過為支持的卡類型提供即時反饋來簡化購買過程。 盡可能多地自動化數據輸入流程——最好是視覺化——改善用戶體驗，並將積極影響轉化率。

地址查找和驗證加快了結帳過程——各種 API（例如 Google Places 和 USPS）可以輕鬆實現此功能。

為錯誤提供內聯輸入驗證也是移動 UX 設計中的最佳實踐。 缺乏快速性能是電子商務購物者的主要挫敗感。 這可以通過向用戶提供有關其進度的實時反饋（例如，在結帳期間）來幫助，尤其是當他們犯了無意的錯誤時。 這允許用戶立即修復他們的錯誤，從而以積極的方式影響可用性。

使用微交互改善移動購物用戶體驗

微交互是產品界面中的細節，旨在完成單個任務，同時改善自然產品流程。 喜歡和評價產品、選擇顏色和尺寸以及向下滑動以刷新數據都是微交互的示例。

考慮到它們的普遍性，微交互可以成就或破壞移動電子商務應用程序的用戶體驗。

微交互可用於：

• 以更直觀的方式引導用戶瀏覽應用程序；
• 由於更順暢、更自然的互動，傳達更好的信任感，減少購物者的焦慮，並提高整體心理舒適度；
• 防止未來出現錯誤，並根據用戶已完成的活動向用戶提供即時反饋； 和/或
• 通過響應通知改善用戶與應用程序的交互。

提供簡單、以拇指為導向的交互

了解購物者持有移動設備的最常見方式可以改善移動電子商務用戶體驗和可用性。 2013 年，Steven Hoober 提出“用戶如何真正持有移動設備？” 並觀察了人們如何與智能手機交互和握持智能手機，並註意到應該指導移動用戶體驗設計的三種主要行為模式。

使界面適應人們自然使用手機的方式將提高用戶舒適度並減少購物者的焦慮。 移動設備和屏幕尺寸各不相同，但設計和用戶體驗的關鍵方面“拇指區”保持不變。

圍繞“拇指區”進行設計：

• 解決導航和探索的潛在問題
• 通過更好地適應手勢和手指觸及來改善交互
• 通過將重要元素放置在“易於觸及”的區域中來更好地轉換並提高可用性

面向轉化的移動電子商務設計的注意事項

在移動電子商務應用程序中傳達安全感

安全是用戶在移動設備上購物時最關心的問題之一。 傳達他們的交易是安全的為購物者對商店的積極看法增加了很多價值。

以下是一些 UX 設計技術，可以向用戶傳達安全性並減少用戶焦慮：

• 使按鈕標籤對購物者的去向具有提示性和清晰性。 “繼續”、“安全”和“加密”等詞語將增強用戶的心理舒適度。
• 使用鎖定符號向購物者保證他們的交易是安全的。
• 使用 McAfee Secure 和 Norton 等安全提供商提供的信任徽章。 這有助於用戶積極地看待網站（貝瑪德研究所研究）。
• 在設計中應用色彩心理學原理，以更好地了解購物者的信任。 其中一些原則包括面向受眾和特定性別的顏色。

優先搜索（並將其放在首位）

購物者使用移動電子商務網站或應用程序來探索產品或購買特定產品； 因此，精心設計的搜索對於移動電子商務應用程序至關重要。 eBay 認為其網站搜索是移動購物者最重要的功能之一，並通過將其放置在界面的中心和上方來強調它。

移動搜索的重要注意事項：

• 確保它是可見的！ 保持搜索欄易於訪問且位於首屏，讓購物者可以輕鬆搜索產品。
• 通過使用從常見搜索模式中獲取的數據提供前瞻搜索，並在搜索結果頁面上顯示相關產品。
• 提供高級過濾選項，讓客戶可以快速輕鬆地找到他們想要的產品。

顯示搜索表單時要考慮的一個重要方面是它們僅在用戶與應用程序交互的第一階段才有價值。 用戶通常在購物旅程開始時搜索應用程序，並且在旅程後期顯示搜索表單可能會損害用戶體驗。

例如，在結賬過程中，搜索不再有用，只會分散注意力，因為它可能使用戶失去注意力並放棄他們對購買的承諾。

提供順暢、輕鬆、快速的結賬

研究表明，結賬過程是完成在線購買過程中壓力最大的部分。 Baymard 研究所報告的購物車放棄率為 35%，因為需要在購買前創建一個帳戶。 為了降低購物車放棄率，設計一個不要求購物者先註冊的簡單、快速的結賬流程非常重要。

可用性研究發現，超過 60% 的用戶難以找到訪客結賬選項； 因此，客人結帳選項必須清晰可見且易於訪問。

以下是改進電子商務結帳流程的一些建議：

• 為了提高用戶參與度，請通過編號和顯示當前活動的步驟來標記結帳過程的每個步驟。
• 使用進度條等視覺表示來顯示結帳過程中的前進。
• 提供在結帳過程中註冊和登錄的選項，但要讓它成為一個選擇。
• 為了減少焦慮和跳出率，如果用戶以訪客身份結賬，建議用戶在結賬後登錄或註冊。
• 應用漸進式披露技術來提高用戶關注度並將內容加載速度提高 30%。

總結：成功的移動電子商務設計有哪些關鍵特徵？

• 提供快速簡便的註冊和結帳流程
• 通過顯示適當的圖標、徽章、評論和推薦來灌輸安全感和信任感
• 提供圍繞拇指友好區域設計的交互
• 使用一致和簡潔的導航
• 結合快速搜索和輕鬆過濾產品
• 了解移動應用程序的用戶壓力、焦慮和轉化率之間的直接聯繫
• 提供移動網站的快速加載、響應式體驗
• 支持手勢放大產品圖片

移動電子商務空間只會變得更大

移動電子商務趨勢表明，移動電子商務市場呈指數級增長，行業的發展為賣家創造了眾多利益。 然而，隨之而來的是許多移動電子商務設計的最佳實踐和標準，賣家要想獲得成功就必須遵循這些最佳實踐和標準。

購物者期望移動應用程序運行良好、外觀漂亮並適應他們的行為。 儘管每個應用程序都有其自身的局限性和目標，但遵循本文中概述的基本原則將有助於創建成功的移動電子商務應用程序。

下載移動電子商務用戶體驗改進備忘單

• • •

進一步閱讀 Toptal 設計博客：

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