从电子商务项目中吸取的用户体验经验

我曾在一家电商机构担任 Magento 1 和 Magento 2 认证前端开发人员四年。我开发并维护过多个网店，从小型到大型企业，并且审核过无数网站的前端性能和用户体验。

在转向非电子商务项目后，我注意到我可以运用在电子商务工作中学到的经验教训来创建具有出色 UX 功能的非常用户友好且性能良好的前端。

在本文中，我将概述我在 4 年电子商务项目工作生涯中学到的一些经验教训和 UX 最佳实践。

尽可能减少用户的工作量

电子商务网站可以通过提供各种有用的功能使购物体验尽可能清晰和简单：

• 已保存的账单和送货地址
• 已保存的付款方式
• 轻松登录（社交媒体登录）
• 使用保存的客户详细信息快速结账
• 客户愿望清单
• 清晰的购物流程（统一的 CTA 元素）
• ETC。

通过减少用户在购物上投入的精力，并将精力集中在需要的领域，我们可以提高转化率和总体收入。

考虑到这一点，我们可以通过为用户提供各种加速和简化流程的方法，来减少用户的工作量。务必注意流程中的重复流程以及可以自动化或加速的流程。

网站的标题和第一印象

标题及其导航代表网店品牌，向客户介绍其提供的产品和服务类型并提供有用的信息。

它有几个功能：

• 代表品牌（带标志）
• 导航提供产品目录的总体概述（顶级类别）
• 显示帐户状态（访客或登录）
• 显示购物车状态（购物车中的商品数量）
• 显示搜索元素（输入或切换）
• （可选）仅提供最有用的链接（常见问题解答、账单、运输、退货等）

通过查看页眉，客户需要熟悉品牌，并立即知道网站上可以找到哪些内容和一般主题。除此之外，页眉还需要提供有用的工具和链接，以便更轻松地浏览网站。

行动号召元素

在电子商务中，行动号召 (CTA 元素) 需要在页面上具有最大的视觉重量，保持一致并引导用户浏览产品目录、将单个产品添加到购物车并成功完成结帐。

例如，新闻通讯元素上的“订阅”按钮的视觉权重应小于“添加到购物车”按钮。

网站上视觉权重最高的 CTA 元素需要引导用户进入网站主流程或他们选择遵循的流程。页面上过多的 CTA 元素可能会让用户感到困惑，因此建立元素层次结构并根据上下文（主要流程、次要流程、可选流程等）使用适当的元素非常重要。

响应式设计的重要性

使用移动设备访问网络的用户数量超过了使用桌面设备的用户，因此越来越多的消费者选择使用移动设备进行在线购物。越来越多的网站注重在移动设备和平板电脑上提供出色（甚至更卓越）的用户体验。移动设备和平板电脑的收入和购买量逐年增长。

通过使用 Google Analytics 等分析工具，我们可以确定移动设备用户与桌面设备用户的比例，并跟踪每个群体的各种指标（例如转化率）。网站所有者和管理人员可以在改进网站或规划新功能时做出各种决策。

每一秒的加载时间都至关重要

每秒的加载成本是多少？

网站加载速度太慢，用户自然会放弃访问，这并不奇怪。以电商网站为例，如果用户在结账前因为加载时间过长而放弃访问，就会造成收入损失。

许多网店发现，缩短加载时间并优化前端和后端可以显著增加收入。

在从事电商项目之后，我从一开始就开始优化代码和资源文件大小，从一开始就消除任何潜在的性能瓶颈。这些瓶颈和问题在所有网站中都很常见。我在之前的一些文章中讨论过如何提升前端性能。

网页图片优化——深入指南

Adrian Bece 为 PROTOTYP 拍摄 ・ 19 年 10 月 1 日

#webdev #beginners #productivity #html

提升 CSS 性能和文件大小——深入指南

Adrian Bece 为 PROTOTYP 拍摄 ・ 19 年 10 月 16 日

#css #webdev #生产力

在 React 中实现骨架加载

Adrian Bece for PROTOTYP ・ 2019 年 9 月 4 日

#react #webdev #教程

使用 schema.org 描述内容

通过向网站添加schema.org标签，Google 和其他搜索引擎可以更好地理解它们抓取和显示的网站。schema.org标签只是一些简单的 HTML 属性的集合，可以轻松添加到网站。有很多用例和标签可以详细描述您的网站，由于可能的用例和选项数量众多，可以作为未来文章的主题。

以下是一些关于如何实现schema.org标签的有用链接

• Schema.org 模式
• 如何在电子商务网站上使用 schema.org
• 了解结构化数据的工作原理

分析用户流以确定性能瓶颈 - 类别页面示例

标准类别页面由产品目录（以网格或列表显示）、带有排序和显示选项的工具栏、分层导航（过滤器）和分页组成。

这种布局通常也适用于搜索结果页面。

据我们所知，我们可以注意到以下几点：

• 每次用户与过滤器、排序选项、显示选项、分页或搜索页面交互时，都会重新加载此页面
• 图像在页面大小和请求数量中起着最大的作用

例如，如果类别页面上显示了 24 种产品，但在用户视图中加载时只有 8 种产品，则我们将下载 16 张用户可能看不到的图像，但这会大大减慢页面加载速度（取决于图像大小和优化）。

考虑到这一点，我们可以在分类页面上做的最佳改进是优化图片大小并添加延迟加载。我在下面的文章中更详细地介绍了图片优化。

网页图片优化——深入指南

Adrian Bece 为 PROTOTYP 拍摄 ・ 19 年 10 月 1 日

#webdev #beginners #productivity #html

通过跟踪用户流程，我们可以发现页面上的潜在瓶颈，并从一开始就进行优化。了解页面上的内容类型（图片、文字、视频）并相应地应用优化技巧也很有帮助。

用户焦点和表单 - 结帐页面示例

删除分散注意力的页面元素

当用户决定结账并购买购物车中的商品时，我们需要确保用户不会分心并离开结账页面。最好的方法是简化页眉和页脚（或完全删除页脚）。理想的结账页面包含以下元素：

• 仅带有品牌的标题 - 让用户确信他们在同一个网站上，但不会被导航和链接分散注意力
• 结帐表格 - 分为几个部分或步骤。
• 安全部分（简短信息、锁定图标等）——用户放心，他们在结账时提供的数据（地址、付款数据等）是安全的，并且他们可以信任该网站。

让我们看一下结帐简化页面布局的示例。

首先，让我们看一下主页上的标题是什么样的。

结账界面是这样的。它让用户的注意力集中在结账表单上，同时让用户确信他们仍然在同一个网站上。

我们有能力在用户浏览网站时引导他们的注意力。重要的是要知道何时需要减少页面上分散注意力的元素数量，以便将用户的注意力集中在重要的流程上，或者在页面上为用户提供多个焦点。

表单布局

很多时候，创建多列表单很诱人，但这可能会导致一些问题。用户在填写这些表单时可能会选择不同的路径。

这会让用户感到非常困惑，他们可能会失去进步的感觉，并且可能无法成功结账。

通过将表单输入保留在单个列中并将其划分为多个部分和步骤，客户可以更清楚地扫描输入，更好地了解进度，并有更好的机会成功提交表单并遵循用户流程。

表单验证

在结账时，需要在用户输入数据时进行表单验证。

如果我们在用户点击“提交”按钮时进行验证，而输入的某个部分出现了错误，用户就需要返回去查找错误并修复才能继续下一步。这会破坏用户的进度感，也无法让他们确信自己的数据在有效期内是有效的。

此外，必填字段需要清晰标记，并且其标签需要在表单中更加突出。

如果地址或电话等数据需要遵循某种模式或格式，则需要通过表单旁边的工具提示清楚地传达给用户。

此外，您还可以使用这些工具提示向用户保证，他们的电子邮件和/或电话号码仅用于对网站流程重要的目的，而不是用于促销（除非用户未明确给予许可）。

结论

在电子商务行业工作了 4 年后，我学会了如何正确地跟踪页面上的用户流程并找出潜在的性能和用户体验瓶颈、各种用户体验最佳实践、每一秒的加载时间如何重要等等。当我转到电子商务以外的项目时，我成功地运用了这些经验教训，它改变了我看待和分析网站的方式。

我希望这篇文章对您有所帮助，并希望您能够在自己的项目中运用这些用户体验改进。我仅介绍了一些我学到的用户体验经验，欢迎在评论区分享您自己的用户体验技巧和想法。

这些文章都是咖啡带来的灵感。所以，如果你喜欢我的文章，觉得它有用，不妨请我喝杯咖啡！我会非常感激的。

感谢您花时间阅读这篇文章。如果您觉得它有用，请点赞 ❤️ 或 🦄，分享并评论。