移动体验的电子商务 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 设计博客：

• 显着的电子商务趋势及其对设计的影响（附信息图）
• 电子商务用户体验——最佳实践概述（附信息图）
• 电子商务用户体验——基本设计策略和原则
• 电子商务网站设计终极指南
• 电子商务重新设计：微小的变化如何带来重大的用户体验改进