在smashingmagazine看到这篇文章,原作者:Christian Holst 。文章给了我很多启示和一些值得学习借鉴的内容。于是翻译后分享出来,其中也不乏我个人的理解,因为其中是以一些国外的网站作为实例,所以有些地方会与国内的环境和习惯有所不同,但大多数都是可以理解的。我在读这篇文章的时候,不仅是看实例,更看重其中的思考角度和分析方式,欢迎朋友们给予建议或讨论。如果有朋友转载,也请标明出处,不论是原作者还是作为翻译者的我,都是花了很多时间、精力和感情在其中,希望彼此尊重。
----------------------------------------------------------------------------------------------------------------------------
这是电子商务网站严酷的现实:根据最近的电子商务研究,至少有59.8%的潜在客户在过程中放弃自己的购物车(正如MarketingSherpa是59.8%,SeeWhy在83%和MarketLive是62.14%)。主要的疑问是用户为什么这样频繁的放弃他们的购物车? 是否有一些根本的错误是电子商务网站的设计者经常出现的?是否有任何的准则或示意,能够使我们的用户在购买产品的过程中更顺畅?或是一些更加易于理解的方式来改善我们的产品?这正是我们想要了解的。 2010年,我们招募了一批网络用户进行可用性研究,总要集中在用户结帐从“购物车“,到“已完成订单”这个用户体验过程。这项研究是利用“Think aloud”协议(可用性测试的一种:出声思考)和通过记录屏幕发生的一切所提供,之后再详细检查这些录音然后分析测试对象的行为。

这项研究表明,在用户只剩下提交信用卡细节这唯一的事时,它常常难以带领用户到结账的最后。
我们测试了15个电子商务网站:800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart and Zappos.
总体而言,测试对象被分别给出了500余可用性问题,范围从容易使人分心的动画形式制作的图像到偏离逻辑的结账流程,然后分析了这些问题,提炼出了63个结帐可用性指南在“电子商务结帐可用性”。本篇文章中,将与你分享那个报告中的 11个基本指南。
1. 结帐过程应该是完全线性的
问题: 有步骤内步骤的困惑,这事实上让用户产生了胁迫感,并且打破了线性的心理模型。
在我们的测试中发现,其中最严重的侵犯可用性问题之一是非线性的结帐过程。 我们在测试网站的非直线结帐过程中,出现了测试对象感到困惑和被胁迫。 在测试时,Walmart和Zappo都有一个非线性结算离开过程。
典型的非线性过程,就是“意外的”检验到结帐过程中的步骤内步骤。例如,当顾客设置“首选送货地址”或“创建帐户“时,会划分出一个单独的页面然后重新导向之前已经完成的结帐步骤。
看下图是沃尔玛的结帐流程, 注意它的非线性,因为“首选送货地址”分步指导用户到以前的步骤:
点击放大查看图片

幸好这个过程不算太长还算容易。 在这种情况下,如“创建账户”不应该重新导向到结帐过程中的上一步,应该是在用户结算过程的下一步。这是至关重要的,因为大多数用户的心智模式决定了这一结帐过程应该是线性的。 当两次看到同一个页面时,大多数用户会认为这是该网站的一个错误,因为这是验证错误常有的事。正如一位测试者说:“这看起来很像我在之前打开过的页面, 是不是我哪里没有做正确?”
2. 添加描述到表单域标签
问题: 如果没有说明,许多表单域标签很含糊,感觉模棱两可。
“这是什么? 地址第2行,是什么意思?”测试对象会喃喃自语,其他测试对象也被“帐单地址”搞糊涂了。
多数的测试对象都遇到过这样的标签问题也有各自遇到的不同标签问题。 一些情况下,一个用户放弃购买是因为她无法理解一个必填字段的标签,使她无法完成结帐。 因此,应该为每一个领域提供明确的指示。
HobbyTron中出现的状况,测试对象必须猜测“首选”是什么?

在Apple’s网站上大部分的测试对象开始键入他们的邮编,在标记为“区号”的领域:

当进入一个领域标签没有任何形式的解释,一些用户可能会搞不清楚哪些信息是需要他们回答的。 为了缓解这一问题,可以通过加入简短的说明在 标签旁边。但不是所有的用户都需要这样额外的帮助,所以可以尝试用例如“这是什么?这样带有链接的字段隐藏在后面,也可以用浅淡的灰色或是减少字体大小等方式。
下面这个例子是说明,如何在表单中加入可以帮助客户了解什么是他们需要注意的:

即使是明确的领域,如“电子邮件地址”,可能是一个充分的描述,但绝大多数人还是想知道你将如何使用他们的电子邮件地址。你为什么需要它?
最后对于用户必填的领域,指的是在页面或卡片,插图可以增强表达(例如,一个信用卡到期日期的图像)。
3. 避免上下文中出现“继续”一词
问题: 上下文字中出现 “继续”是含糊不清的,往往容易使用户混淆。
对于用户不同的心境,一个按钮标记为“继续”在购物车中可能意味着两件事情:
① 继续购物
也就是说,如果客户想要衬衫还想要牛仔裤。
② 继续结帐
用户所需要的产品都有了,只是希望支付。
这是另一个“返回”的例子。回的最后一页? 返回到搜索结果? 在哪里? 又有怎样的“继续”? 这些上下文词都会很据用户的心境发生变化产生不同的含义。
多个测试对象点击了HobbyTron的“继续”按钮,他们将检验这个部分:

在错误的点击了按钮后,一个测试对象说:“这令人困惑,因为我是想要继续下去,我没有想再继续购物,而是想继续下去结帐。”
这是一个上下文被随意理解混淆用户的很好例子。因为上下文词的问题,大约一半测试对象至少有一次点击了错误按钮。相反,使用更明确的词,例如“现在结账“,”查看更多店铺“等便会缓解此类问题。
4. 在视觉上加强付款页所有敏感领域
...Continue reading 电子商务结帐设计的基本准则