杭州网站建设和他的团队创建的结帐系统为在此基础上构建未来的工作奠定了基础。它是一个基于组件的系统,因此可以添加新的组件,例如字段和按钮元素,并且可以修改或添加功能,而无需对整个系统进行全面检查。
2.最终目标:“无摩擦”
Windows和Internet Explorer的父亲是前微软传奇人物Steven Sinofsky,目前为Product Hunt,Box等公司提供咨询服务,并是Andreessen Horowitz的董事会成员。他是一位内心的设计师,也是产品开发的大师。在他的无摩擦产品设计文章中,他指出了极简主义和无摩擦设计之间的区别。
他写道,虽然极简设计减少了体验的表面积,但无摩擦设计是要减少体验所需的能量。这在结帐设计中尤其重要。
他给出了无摩擦设计的6条原则:
- 确定默认值而不是选项
- 创建功能或任务的一条路径
- 提供个性化而非定制
- 坚持所做的更改
- 构建功能,而不是装饰
- 一直正确地猜测
在REI,凯瑟琳最近在一个项目上实施了无摩擦设计的示例。她的团队发现,当客户准备将商品添加到购物车中时,登录后会将客户转到新的网页,从而破坏了购物体验。为了解决此问题,她A / B测试了登录小部件,该小部件打开了下拉登录模式,从而将体验保持在页面上,而不是将购物者发送到新的登录页面。
数据分析显示流量或流量没有差异,因此他们保留了这一点。访客可以登录并继续从同一页面购物,而不会失去自己的位置感。这是Sinofsky#2原则的一个示例:为功能或任务创建一条路径。用户的路径是单边的,而不是在路上创建叉子来登录或继续购物。
值得一提的还有Sinofsky的#5原则:构建功能,而不是装饰效果。什么是“吹毛狗”?
Futzer是巧妙地伪装成名词的“ futzing”一词(您可能听起来更熟悉)。这是导致无意义的摆弄和浪费时间的事情。
这是设计师被绊倒的地方。您如何确定特征与保险丝之间的区别?正如Sinofsky所暗示的那样,它需要一个微妙的平衡,既要给用户提供他们想要的东西,又不能给用户太多。
说明这一点的一个好方法是查看购物者放弃购物车的主要原因。我想重点介绍两项购物车放弃研究,并从两者中汲取见解。
在第一项研究(2013年)中,支付处理公司Worldpay调查了人们为何不付钱就离开在线购物车的原因。
给出的六个原因与特征和装饰效果之间的平衡有关。一探究竟:
- “网站导航太复杂了”…引信过多。
- “过程花费的时间太长”…过多的小装饰。
- “过多的支付安全检查”…太多小装饰。
- “有关付款安全性的担忧”…功能不足。
- “交付选项不合适”……功能不足。
- “价格以外币表示”……功能不足。
换句话说,公司正在损失收入,因为购物者会在太多的装饰物和功能不足的情况下离开。
在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,即使缺少信息,也始终启用“提交/继续”按钮。为什么?出于三个原因:
- 它可以防止用户混淆。“显示为灰色”按钮告诉购物者出了什么问题,但没有指出确切的位置,并且使用户盲目寻找错误。一个活动的按钮将传达可点击性,这将在需要有效输入的字段上产生一条简单消息(通常为红色)。
- 可以访问。在某些情况下(罕见),用户可能在其浏览器中禁用了Javascript,这将阻止按钮的动态状态更改从禁用变为启用。
- 它可以防止开发人员出错。可能已经错过了应该激活提交/继续按钮的有效用例或输入(即,国际性),从而使购物者陷入困境,只能刷新或退出。