设计网站商城的最佳体验

结帐体验可以说是您在线商店中最关键的方面。任何打h和客户都可能会分心，失望或离开，从而使贵公司的收入（支付您的薪水）流失了。它需要是完美的。作为用户体验设计师，确保结帐体验无缝有效是您的工作。没错

在本文中，我想讨论结账设计和一些原则，以实现最佳的购物付款体验。我知道。当您听到“结帐设计”时，您可能会很高兴……

…但是，在网上赚钱的过程中，橡胶恰逢其路。没有结帐，您将不会获得报酬。所以最好变好。

为了回答最佳结帐体验的问题，我在主要的电子商务品牌中寻找了三位经验丰富的UX设计师：ThinkGeek，Shopify和REI。这些公司看到数以百万计的美元，并且用户每天都要通过其结帐“通道”。这三个人是：

• ThinkGeek用户体验总监 Matt Chwat。马特（Matt）在ThinkGeek（互联网第一大（也是最讨厌）的在线商店）工作了九年。他既是UX设计人员，又是前端开发人员。
• Shopify的设计总监Kevin Clark。凯文·克拉克（Kevin Clark）是Shopify位于蒙特利尔的购买体验设计团队的设计主管。他负责监督负责整个电子商务平台的结帐体验的团队。用户单击购物车图标后，您就进入了Kevin团队的域。从电子邮件收据，商户与客户的互动，到实时订单状态页面，所有内容-如果您是在Shopify网站上购买商品的，那么奇数就是凯文及其团队的帮助。
• REI高级UX设计师 Catherine Ho。凯瑟琳曾在Intuit工作，在REI西雅图工作了两年。她喜欢UX，因为它专注于人，并且既具有技术性又具有创造性。她在REI的角色是研究与设计之间的混合体。她的项目包括店内设备，例如用于POS系统的iPod touch，iOS应用程序以及会员和帐户，特别是重新设计了登录和愿望清单体验。

在与他们的对话中，我注意到设计无缝结帐时要记住的5条通用原则。

1. Shopify结帐体验的三个黄金标准：易于理解，简单和快速

2016年，Kevin Clark及其团队负责重新设计所有Shopify网站的结帐体验。那几乎是一百万家商店。作为电子商务领域的榜首，人们的期望很高。

凯文（Kevin）和他的团队与主题小组紧密合作，致力于标准化通用Shopify结帐体验。所有Shopify主题都是相同的。

除了基本的安全感外，Shopify的购买体验还应该易于理解，简单且快速。

设计与事务一样具有事务性和流程驱动性的最佳方法是测试所有内容。

例如，为了测试关于结帐体验应包含多少步骤的假设，他和他的团队进行了一项测试，将一页，两页和三页的体验进行了比较，每种体验都具有相同的信息。

单页结帐示例：

两页结帐的示例：

结果表明，一页让用户感到不知所措，因为它在一页上显示了太多的信息，两页将步骤划分为尴尬，而三页则变得简单易行。

这三个步骤是客户信息，运输方式和付款：

— Shopify的凯文·克拉克（Kevin Clark）

这三个步骤在所有站点上都是一成不变的。但是除此之外，商店所有者还可以进行一些定制以匹配其品牌。

但是对于自定义，Kevin建议不要过度使用：

相反，应该设置适当的控件来保护一致，熟悉和安全的基准体验。一个示例就是Shopify系统根据对比度算法（即深色背景上的浅色文字）知道要使用和不使用的颜色，并调整其可读性。

凯文和他的团队创建的结帐系统为在此基础上构建未来的工作奠定了基础。这是一个基于组件的系统，因此可以添加新的组件（例如字段和按钮元素），并且可以修改或添加功能，而无需对整个系统进行全面检查。

2.最终目标：“无摩擦”

Windows和Internet Explorer的父亲是前微软传奇人物Steven Sinofsky，目前为Product Hunt，Box等公司提供咨询服务，并是Andreessen Horowitz的董事会成员。他是一位内心的设计师，也是产品开发的大师。在他的无摩擦产品设计文章中，他指出了极简主义和无摩擦设计之间的区别。

他写道，虽然极简设计减少了体验的表面积，但无摩擦设计是要减少体验所需的能量。这在结帐设计中尤其重要。

他给出了无摩擦设计的6条原则：

1. 确定默认值而不是选项
2. 创建功能或任务的一条路径
3. 提供个性化而非定制
4. 坚持所做的更改
5. 构建功能，而不是装饰
6. 一直正确地猜测

在REI，凯瑟琳最近在一个项目上实施了无摩擦设计的示例。她的团队发现，当客户准备将商品添加到购物车中时，登录后会将客户转到新的网页，从而破坏了购物体验。为了解决此问题，她A / B测试了登录小部件，该小部件打开了下拉登录模式，从而将体验保持在页面上，而不是将购物者发送到新的登录页面。

数据分析显示流量或流量没有差异，因此他们保留了这一点。访客可以登录并继续从同一页面购物，而不会失去位置感。这是Sinofsky＃2原则的一个示例：为功能或任务创建一条路径。用户的路径是单边的，而不是在道路上创建叉子来登录或继续购物。

同样值得一提的是Sinofsky的＃5原则：构建功能，而不是装饰效果。什么是“吹毛求疵者”？

Futzer是巧妙地伪装成名词的“ futzing”（可能听起来更熟悉）一词。这是导致无意义的摆弄和浪费时间的事情。

这是设计师被绊倒的地方。您如何确定特征与保险丝之间的区别？正如Sinofsky所暗示的那样，它需要一个微妙的平衡，既要给用户提供他们想要的东西，又不能给用户太多。

说明这一点的一个好方法是查看购物者放弃购物车的主要原因。我想重点介绍两项购物车放弃研究，并从两者中汲取见解。

在第一项研究（2013年）中，支付处理公司Worldpay调查了人们为何不付钱就离开在线购物车的原因。

给出的六个原因与特征和装饰效果之间的平衡有关。一探究竟：

1. “网站导航太复杂了”…引号过多。
2. “过程花费的时间太长”…过多的小装饰。
3. “过多的支付安全检查”…过多的装饰。
4. “有关付款安全性的担忧”…功能不足。
5. “交付选项不合适”……功能不足。
6. “价格以外币表示”…功能不足。

换句话说，公司的收入减少是因为购物者在装满毛绒玩具而功能不足的情况下会离开。

在Baymard Institute在2016年进行的一项类似研究中，可用性研究人员发现，有27％的美国在线购物者仅因“结账过程太长/太复杂”而放弃了购物车。“

Baymard的基准数据库显示，美国平均结帐流程包含默认显示给用户的23.48个表单元素。但是，研究结果表明，可以将平均结帐长度减少20-60％。

结帐研究的定性1：1适度可用性测试和眼动追踪研究表明，理想的结帐流程可以减少到12个表单元素（7个表单字段，2个复选框，2个下拉菜单和1个单选按钮）接口）。

您的结帐有多少个表单元素？大于12的数字可能表示您的结帐流程中存在炸锅。如何减少表单元素的数量？唯一的测试是最终的答案，但是就目前而言，接下来的步骤就足够了。

3.维护数据

这是一个要问您的结帐设计师的问题：您如何在整个结帐流程中利用数据？

ThinkGeek的Matt认为，最佳的结帐体验只会收集必要的数据，然后在交易结束之前一直保持这些数据：

如果您的数据库包含有关客户的信息，请使用它来减少他或她必须填写的字段数。亚马逊的一键式购买功能就是一个很好的例子。

通过了解客户的数据，它可以以零的工作量正确地“猜测”用户的首选送货方式，地址和付款明细。通过一键式一键式结帐，就没有机会遇到瓶颈。

Shopify会使用“检查点”维护数据。这意味着，如果用户继续进行运输但在付款过程中退出，则收集的数据将得到维护，并且用户可以在他们离开的地方继续上路。

4.原谅设计

这三个品牌之间的最终共同点是“宽恕设计”的想法-设计者的目标是防止在结帐过程中出现任何错误。出色的结帐功能并没有严格限制错误，而是让用户摆脱懒惰，因为缺少更好的词汇。

以下是结帐流程中“宽容设计”的三个示例：1）添加礼品卡和折扣，2）禁用“提交”按钮，以及3）输入电话号码。

在第一个示例中，所有三个品牌都具有礼品卡和折扣-完善的在线交易结束工具。但通常情况下，并不总是很清楚在哪里输入代码或兑换卡。

据凯文·克拉克说：

在Shopify，大量的工程工作使用户可以将礼品卡或折扣代码粘贴到同一字段中，然后系统会自动对其进行分类。犯错是不可能的。

其次，有时商店会禁用或“灰显”提交/继续按钮，直到用户填写所有必填字段。

你应该这样做吗？在UX社区中，关于是否启用“提交/继续”按钮一直是一个激烈的辩论，但根据Stack Exchange上一位用户的非正式研究，一小部分网站中大约有5％或更少的网站使“提交/继续”按钮处于禁用状态。

在Shopify，ThinkGeek和REI，即使缺少信息，也始终启用“提交/继续”按钮。为什么？出于三个原因：

1. 它可以防止用户混淆。“显示为灰色”按钮告诉购物者出了什么问题，但没有指出确切的位置，而是盲目地寻找错误。一个活动的按钮将传达可点击性，这将在需要有效输入的字段上显示一条简单消息（通常为红色）。
2. 网站设计制作。在某些情况下（罕见），用户可能在其浏览器中禁用了Javascript，这将阻止按钮的动态状态更改从禁用变为启用。
3. 它可以防止开发人员出错。可能已经错过了有效的用例或应该激活提交/继续按钮的输入（即，国际性），使购物者陷入困境，只能刷新或退出。