结帐体验可以说是您在线商店中最关键的方面。任何打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的凯文·克拉克(Kevin Clark)
除了基本的安全感外,Shopify的购买体验还应该易于理解,简单且快速。
设计与事务一样具有事务性和流程驱动性的最佳方法是测试所有内容。
例如,为了测试关于结帐体验应包含多少步骤的假设,他和他的团队进行了一项测试,将一页,两页和三页的体验进行了比较,每种体验都具有相同的信息。
单页结帐示例:

两页结帐的示例:

结果表明,一页让用户感到不知所措,因为它在一页上显示了太多的信息,两页将步骤划分为尴尬,而三页则变得简单易行。
这三个步骤是客户信息,运输方式和付款:

我们了解到,通过将相关信息按组进行分组并按逻辑顺序进行排列,可以使用户一次专注于一项任务。但是,有一个限制。您不想走得太远,就像拥有十步结帐的经验。
— Shopify的凯文·克拉克(Kevin Clark)
这三个步骤在所有站点上都是一成不变的。但是除此之外,商店所有者还可以进行一些定制以匹配其品牌。
我们查看了成千上万家商店,并确定可以通过为用户提供五个默认的自定义选择来复制几乎每个商店的设计:字体,强调色,按钮颜色,标题图像和徽标。
但是对于自定义,Kevin建议不要过度使用:
不要给用户太多绳索,以至于他们会自己吊死。
相反,应该设置适当的控件来保护一致,熟悉和安全的基准体验。一个示例就是Shopify系统根据对比度算法(即深色背景上的浅色文字)知道要使用和不使用的颜色,并调整其可读性。
高端网站设计的团队创建的结帐系统为在此基础上构建未来的工作奠定了基础。这是一个基于组件的系统,因此可以添加新的组件(例如字段和按钮元素),并且可以修改或添加功能,而无需对整个系统进行全面检查。
2.最终目标:“无摩擦”
Windows和Internet Explorer的父亲是前微软传奇人物Steven Sinofsky,目前为Product Hunt,Box等公司提供咨询服务,并是Andreessen Horowitz的董事会成员。他是一位内心的设计师,也是产品开发的大师。在他的无摩擦产品设计文章中,他指出了极简主义和无摩擦设计之间的区别。
他写道,虽然极简设计减少了体验的表面积,但无摩擦设计是要减少体验所需的能量。这在结帐设计中尤其重要。
他给出了无摩擦设计的6条原则:
- 确定默认值而不是选项
- 创建功能或任务的一条路径
- 提供个性化而非定制
- 坚持所做的更改
- 构建功能,而不是装饰
- 一直正确地猜测
在REI,凯瑟琳最近在一个项目上实施了无摩擦设计的示例。她的团队发现,当客户准备将商品添加到购物车中时,登录后会将客户转到新的网页,从而破坏了购物体验。为了解决此问题,她A / B测试了登录小部件,该小部件打开了下拉登录模式,从而将体验保持在页面上,而不是将购物者发送到新的登录页面。