电子商务用户体验——基本设计策略和原则

随着整体零售格局的不断发展和实体连锁店的挣扎，电子商务市场已蓄势待发。 到 2021 年，全球电子商务销售额预计将增长到超过 4.48 万亿美元，是 2017 年的两倍多。

密切关注用户体验并遵守一套标准的电子商务用户体验设计原则的电子商务零售商和设计师可以利用这一市场增长并获得切实的财务回报。

购物流程是一个通用的用户旅程，如果实施得当，会导致更多的冲动购买、更少的购物车放弃和更高的整体转化率。

用户旅程包括：

• 网站发现
• 产品搜索和浏览
• 产品页面
• 大车
• 退房
• 确认

本文涵盖了用户旅程的这些关键点，以及电子商务设计师如何让客户体验愉快、直接和轻松。

网站发现

明确品牌定位

访问者在短短 50 毫秒内就形成了对网站的第一印象。 电子商务网站需要通过清晰、快速地展示其销售的产品以及适合整个市场的位置来吸引用户的注意力。

例如，奢侈品珠宝零售商的网站可能与注重预算的大卖场网站在外观和感觉上大不相同。 高端电子产品零售商 Bang & Olufsen 通过使用优雅的字体、精致的调色板和时尚的产品图像来传达其品牌品质。

显示相关的号召性用语

当用户到达主页时，用及时的内容和具体的行动号召 (CTA) 迎接他们。 与当前季节或特定事件相对应的大横幅图像以及适当的 CTA 可帮助用户进入购物流程的下一步。 创建 CTA 时，请避免使用无法清楚地告诉用户接下来会发生什么的通用短语，例如“开始”。

宝丽来通过帮助购买礼物的用户在节日期间创建了有效的 CTA。 宝丽来没有使用通用短语，而是使用了“购买礼物”，明确表示用户将被带到网站上的某个区域，并提供礼物建议。

为 SEO 定制登陆页面

通过将来自谷歌等搜索引擎的用户搜索词连接到特定的登录页面，电子商务零售商可以捕获那些致力于寻找特定产品的用户。

当用户搜索某物时，他们很有可能想要购买它。 为常见的产品搜索词创建自定义登录页面会增加零售商获得销售的机会（可能还有新客户）。 文具公司 Papier 在谷歌搜索结果中专门为婚礼请柬设计的页面做得很好。

产品搜索和浏览

提供现场搜索

虽然它看起来很基本，但许多网站仍然不提供一般的站点范围搜索，或者即使提供，也没有适当优化。 但现场搜索是稳固电子商务购物体验的基础。

根据 Invesp 的数据，60% 的在线购物不是冲动的。 人们通常知道他们在寻找什么，在电子商务网站的搜索栏中输入查询（例如产品名称或型号）比筛选菜单选项要快得多。

预测搜索或自动完成等附加功能可帮助用户快速查看选项。 Apple 将这种策略与搜索字段一起使用，该搜索字段通过产品快速链接和流行的建议搜索动态更新。

在探索模式中激发访客

虽然许多购物者会考虑购买特定商品，但并非所有访客都如此确定。 根据 Nielsen Norman 的说法，有五种类型的电子商务购物者，其中一种是“浏览器”。 浏览器不一定要寻找特定的东西。 相反，他们正在悠闲地环顾四周，看看是否发现了一些有趣的东西。

电子商务网站可以通过向购物者展示新产品或畅销产品并让他们轻松快速地查看产品类别来支持发现模式的购物者。

Etsy 通过向浏览器展示当前流行的内容以及在导航和主页内容中清晰地显示整体产品类别来吸引浏览器。

使用过滤器和分面搜索

分面搜索使用过滤并通过允许用户一次选择多个属性将其更进一步。

创建过滤器时，不要将选项限制为尺寸、颜色或价格等一般标准，而是为所售产品的特定类别添加特定过滤器。 这些过滤器可以是衣服的合身度或面料、字体或邀请场合，以及小工具的屏幕尺寸或处理器。

一旦用户应用了过滤器，应该立即在 UI 中显示应用了哪些过滤器。 用户还应该能够轻松删除应用的过滤器。

ASOS 显示了每个类别的详细过滤器范围，并清楚地显示了已应用的过滤器。

产品页面

突出显示主要操作

用户永远不应该想知道如何做一些重要的事情，比如将产品放入购物车。 将“添加到购物车”或“立即购买”等主要操作显示为按钮，并将它们放在屏幕上相对于其余内容的显眼位置。

家居装修零售商 Lowe's 让用户知道如何将产品添加到他们的购物车中，其中一个绿色的大按钮是页面上最突出的内容之一。

提供详细的产品信息

展示高质量、专业的照片和详细的描述，帮助买家了解产品。

使用渐进式披露和视觉层次结构为用户提供他们需要的适量信息。 立即向他们提供最重要的信息，然后在页面下方为想要了解更多信息的用户添加详细信息。

将长描述分成几个部分； 例如，概述、尺寸/尺寸、详细功能和运输信息。 像 Myprotein 一样，对其他部分使用展开/折叠导航有助于防止用户感到不知所措。

建立客户信任

避免让客户猜测运输选项、产品可用性和退货政策。 确保所有这些信息都随时可用，这可以建立客户的信心和信任，并可能有助于推动不确定的客户进行购买。 了解他们是否以及如何退货有助于他们做出更明智的决定。

ASOS 使用从每个产品名称下的链接访问的模式清楚地在每个产品页面上显示重要的运输和退货信息。

添加社会证明

社会认同是一个概念，意味着人们会受到他人行为的影响。 这个概念是 Robert Cialdini 博士（影响力科学领域的主要研究人员）说服原则的一部分，并且已被证明是有效的。

电子商务零售商可以通过添加客户评级、评论和评论来增强买家的社会认同感。 亚马逊上的产品通常有数千条评论，用户可以按星级对其进行排序。

购物车

显示清晰的订单摘要

在买家完成购买之前，向他们展示一份清晰简洁的订单摘要，其中包括购买的商品、每件商品的数量和价格以及订单总额。 允许用户编辑他们可能想要更新或删除的任何项目，并通过包含运输摘要来避免运输费用意外。

Modist 显示清晰的订单摘要和收据。 用户可以轻松管理他们选择的商品（移至愿望清单、删除、更改数量），并查看运费和税费的摘要和详细明细。

退房

让用户以访客身份签出

冲动购买占电子商务支出总额的近 40%。 通过允许买家以客人身份结账，消除创建帐户或登录的额外障碍。 在以客人身份退房过程中，创建帐户的简单集成可能会将一些客人转换为帐户用户。

Aesop 允许用户以访客身份轻松结帐，同时还提供登录或注册选项。 以单一形式提供多个选项可以为想要快速结账的用户消除潜在的购买障碍，但也为想要注册的用户提供了这样做的机会。

在结账过程中提供视觉反馈

包括一个进度条可以帮助客户了解他们在结账过程中的位置以及他们还有多少要完成。

Apple 会向用户展示流程中的每个步骤，并允许他们使用进度链接在步骤之间导航。 进度已保存，因此用户在步骤之间移动时不会丢失任何内容。

使用常见的付款方式

除了允许通过主要信用卡付款外，添加其他流行的付款方式（如 PayPal）可能会增加不想交出信用卡信息的买家的转化率。

在荷兰，iDEAL 经常用于电子商务交易，60% 的荷兰消费者在最近的一次购买中使用过它。 服装零售商 Scotch & Soda 允许买家使用 iDEAL 和 PayPal 结账。

订单确认

购买后显示详细的订单确认

客户完成购买后，向他们确认，其中包括成功的付款处理和交付详细信息，例如地址、交付方式和预计交付日期。

亚马逊确认电子邮件的概念显示了订单号，概述了购买的商品，并提供了发货日期和一些未来购买的建议。

通过电子邮件发送订单和运输更新

除了确认屏幕之外，发送确认电子邮件有助于让用户了解他们的购买状态。 虽然所有客户都应该收到电子邮件确认，但这在用户以访客身份结账并且没有网站上的帐户来查看他们过去的订单的情况下特别有用。

如果订单发生任何变化，例如交货延迟，请发送更新。 商品发货后，请发送包含跟踪号的电子邮件更新。

概括

本文中的原则提供了每个电子商务设计师都应该遵循的用户旅程接触点的基线，但这仅仅是开始。 如需进一步了解有关移动电子商务 UX 的更多细节，请访问移动体验电子商务或阅读有关登录页面设计如何设计有效登录页面的更多信息。

不断增长的电子商务市场为零售商带来了许多机会。 那些认识到用户体验的重要性并遵循电子商务用户旅程最佳实践的人可以保持竞争力并对他们的底线产生积极影响。

• • •

进一步阅读 Toptal 设计博客：

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