改善 WooCommerce 商店移动用户体验的 7 种简单方法

移动设备现在是最常见的访问互联网的方式，并且在线购物的移动用户数量持续增长。 根据 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。 相比之下，其他可能更耗时，包括重新设计您的商店、更改为更快的网络主机以及创建内容的仅限移动版本。

然而，随着移动互联网使用量的持续增长和改进用户体验可以对转化产生积极影响，尽您所能使您的商店尽可能适合移动设备应该是当务之急。