改善 WooCommerce 商店移動用戶體驗的 7 種簡單方法
已發表: 2022-05-04移動設備現在是最常見的訪問互聯網的方式，並且在線購物的移動用戶數量持續增長。 根據 eMarketer（通過 Statista）的數據，2017 年，全球 58.9% 的零售電子商務銷售額是在移動設備上完成的，到 2021 年，這一比例將上升到 72.9% 或 3.5 萬億美元。
如果您商店的 UX 方面沒有針對移動用戶進行優化，例如導航、速度和可訪問性，可能會損害您的利潤。
因此，您的 WooCommerce 商店的移動用戶體驗 (UX) 必須盡可能積極，這一點至關重要。
不過不用擔心，正如我們將在本指南中介紹的那樣，有一些簡單的方法可以改善您的 WooCommerce 商店的移動用戶體驗。 從採用一些工具到重新設計整個商店，您可以做很多事情來使其對移動用戶更加用戶友好。
為什麼您的 WooCommerce 商店需要適合移動設備的 UX
如前所述，在移動設備上進行的電子商務交易的份額繼續增長。 根據 Business Insider 的數據，從 2020 年到 2021 年，它們增長了 20%，達到 3593.2 億美元。
但是，如果您的商店沒有針對移動用戶進行優化，您可能會看到銷售額下降。
例如，一項可用性研究發現，結賬過程太長或太複雜導致 17% 的購物車放棄。 谷歌這次的另一項研究發現，更快的移動體驗會降低跳出率。 此外，您的網站越慢，轉化率就越低。
因此，雖然移動電子商務正在增加，但如果您的網站沒有針對這些用戶進行優化，您可能會錯失良機。
改善 WooCommerce 商店移動用戶體驗的 7 種簡單方法
既然您知道讓您的商店對移動設備友好是多麼重要，這裡有七種方法可以改善您的 WooCommerce 商店的移動用戶體驗。
1. 從移動優先設計開始
強烈建議從一開始就實施移動優先設計，從而在堅實的基礎上啟動您的 WooCommerce 商店。 使用適合移動設備的主題創建您的商店比嘗試改進未考慮移動用戶的設計的用戶體驗要容易得多。
但是，大多數閱讀本指南的人可能已經建立並運行了他們的商店。 如果是這種情況，請不要擔心，本文中有很多建議可以幫助您以其他方式改進商店的移動用戶體驗。
但是，如果您還沒有開設商店，那麼選擇移動優先或高度移動優化的主題或設計可以避免很多麻煩。
值得慶幸的是，WooCommerce 有一些出色的主題是為移動受眾而構建的。 當然，這些主題不會忽視桌面用戶。 但是，移動用戶應該享受為他們高度優化的體驗。
因此，如果您還沒有開始，請使用高度適合移動設備的主題或設計。
2.更改為更適合移動設備的主題
如果您已經推出了商店，但其設計並不像可能的那樣適合移動設備，那麼一切都不會丟失。
WordPress 和 WooCommerce 的一大優點是您可以隨時切換主題。
然而，雖然上傳和激活新主題的過程非常簡單，但對您的商店的影響可能是巨大的。
也許最大的一個是設計的改變可能會讓你的觀眾感到困惑。 你的品牌也可能被打亂，這取決於設計變化的激進程度。 更改主題也可能會破壞商店的某些方面，尤其是在您進行了大量定制工作的情況下。
總體而言，在已啟動並正在運行的商店中更改主題並不是一件容易的事。 但是，如果您當前的設計不適合移動設備，您的商店需要更新，或者您尚未建立您的受眾群體，那麼這可能是需要認真考慮的事情。
3. 為移動用戶優化內容和設計
無論您是否更改主題，您仍然可以做很多事情來改善您的 WooCommerce 商店的移動用戶體驗。
另一種選擇是確保您現有的內容和用戶界面針對移動用戶進行了優化。
一個需要關注的領域是優化圖像，以便訪問者在屏幕較小的設備上訪問您的商店時有替代版本。 這應該使頁面更易於查看並加快加載時間。 選擇最佳圖像格式也很重要。
實現自適應圖像大小是另外一個需要考慮的事情。 這樣做可以防止圖像溢出它們的容器——這在移動設備上可能特別煩人。
您可以做的其他事情是調整您的移動導航系統，以便智能手機用戶盡可能輕鬆地訪問您商店中最重要的頁面或功能。 一些元素在大多數商店中是一致的，例如搜索工具和購物車。
但是，檢查您的分析以了解您的客戶最常訪問哪些頁面是非常值得的。 然後，使用該信息來調整您的菜單，使這些頁面易於訪問。 此外，Google 建議將指向主要產品類別的鏈接添加到您商店的主頁。 一些主題包括創建僅限移動設備的導航系統所需的功能。 如果你沒有，像 WP Mobile Menu 這樣的免費插件可以提供幫助。
如果有任何非必要的項目可能使移動用戶體驗更加令人沮喪，那麼刪除它們是一個快速的勝利。 例如，您可能有一個視頻或滑塊在您的網站的桌面版本上看起來很棒，但除了裝飾之外沒有提供太多功能。
谷歌發現圖片較少的頁面在移動設備上創造了更多的轉化。 同樣的谷歌研究還發現，更少的頁面元素會對用戶體驗產生積極影響，因此簡化你的內容是值得考慮的事情。
您能否完全刪除圖像和不必要的元素，或者只是為移動用戶停用它們？ 這同樣適用於復雜的背景和動畫效果。
即使調整顏色以減少它們在較小屏幕設備上的干擾，也值得考慮。
更加熟悉在移動設備上使用商店的感覺，結合查看訪問者分析，應該可以讓您了解如何改進用戶體驗。
4.創建關鍵頁面的移動特定版本
除了優化您在上一步中為移動用戶確定的關鍵頁面外，您還可以更進一步，創建這些頁面的僅移動版本。
這些頁面可以設計為盡可能最好的用戶體驗，因為移動用戶只能看到它們。 對於那些在大屏幕上訪問內容的人來說，沒有必要做出妥協。
免費插件可以幫助您使用 WordPress 實現這一目標。 在您的網站上激活後，移動特定內容可讓您快速創建網站頁面的移動版本。
考慮為重要頁面創建僅限移動設備的版本，或編輯頁面以僅在桌面上顯示某些元素。 免費增值的 Elementor 插件就是 WordPress 頁面編輯器的一個示例，可讓您執行此操作。
5. 使用工具測試您商店的移動體驗
除了自己探索商店的移動用戶體驗外，您還可以使用工具來提供幫助。
谷歌有一個免費使用的評估移動網站的工具。 雖然它非常基礎，但它會為您提供有關商店移動 UX 的一些信息。 要進行更深入的分析，您可以將您的網站連接到 Google Search Console。
BrowserStack 等付費工具可以在一系列不同的設備和瀏覽器上測試您的商店，並讓您在不同的網絡速度和不同的位置體驗您的網站。
6. 在手機上親自測試表格
表單可能是您的電子商務商店中最重要的部分。 如果它們不能在移動設備上工作或難以使用，您的客戶將無法下訂單。
由於它們的重要性，您親自檢查網站上關鍵表單的用戶體驗至關重要。 雖然由 WooCommerce 提供支持的底層表單技術可能運行良好，但冗長或複雜的結賬流程是導致購物車被遺棄的主要原因。
針對移動設備優化表單的一些實用建議包括避免多列佈局、仔細考慮標籤和占位符以及刪除不必要的表單項，例如清除或重置按鈕。
7.優化網站速度
加快 WooCommerce 商店的速度有很多好處，包括更好的搜索引擎排名和更高的轉化率。 然而，更快的加載時間也對移動用戶體驗產生積極影響。
由於您可以做很多事情來加快您的網站速度，因此您可以從小處著手或全力以赴。
我們在文章“加速 WooCommerce 商店的 5 種簡單方法”中提到了一些有效的選項，包括圖像優化以及實現 HTML、CSS 和 JavaScript 優化。
啟用緩存和使用內容交付網絡 (CDN) 是您應該能夠以最小的努力加速您的商店以改進移動 UX 的另外兩種方式。
如果您想多做一點工作，您可以考慮更換為更快的網絡主機。 根據您網站的當前速度，這可能是值得進行的事情，因為主機之間的性能可能存在很大差異。 大多數高級網絡主機，例如 Kinsta，都提供免費的網站遷移。
結論
如您所見，您可以做很多事情來改善 WooCommerce 商店的移動用戶體驗。
有些快速簡單，例如安裝像 NitroPack 這樣的插件來實現圖像優化、緩存和 CDN。 相比之下，其他可能更耗時，包括重新設計您的商店、更改為更快的網絡主機以及創建內容的僅限移動版本。
然而，隨著移動互聯網使用量的持續增長和改進用戶體驗可以對轉化產生積極影響，盡您所能使您的商店盡可能適合移動設備應該是當務之急。