添加行业资讯

栏目更新

栏目热门

相关文章

    无相关信息

当前位置:首页 > 热点资讯

Apple Store Checkout表单重构

时间:2010-07-08 03:19:26  来源:个人网站  作者:Heidi
[前言]读英文的博客和英文的书,也读了不少,读的时候摇头晃脑也读得懂,可是读过之后,感觉却没啥收获,想来是因为读中文,一边读一边是在思考和反刍,而读英文,却是一边读一边在词对词翻译。这次,做订单项目,对各个电子商务的订单流程很感兴趣,所以试用了若干个电子商务网站,进而对订单表单设计很有兴趣,恰逢此时,看到大名鼎鼎的luke写了一篇《The Apple Store's Checkout Form Redesign》,这次,为了避免读而不懂的问题,干脆找个时间翻译了出来,也旨在能够帮助到与我遇到同样问题的同学们,翻译水平有限,请见谅。
—————————————————分割线———————————————————————————

Apple store的结账表单重构
December 16, 2009 by Luke Wroblewski
原文地址:http://www.lukew.com/ff/entry.asp?968

即使大部分人不会将苹果公司的网站作为一个重要的上网目的地,在11月,apple还是跻身于全美的TOP10网站列表。详情 在这个月里,62,000,000的网络用户在一个月里访问了apple store,平均每个用户的花费的时间是1个小时18分钟。对比一下,Google在11月份里,访问的独立用户是155,000,000.

如销售报表所示,与去年同期对比,10月到11月, Mac的销售额在此期间上升了21%——苹果的在线商店一定发挥了重要的作用。非常有意思的是,苹果网店的付款流程也在这期间进行了重构。

先前的苹果结算页面
先前的苹果结算页面分成了几个页面,并且使用了一个顶部的进度条来提示人们在流程中的哪个位置。错误信息放在页面顶部,没与造成错误的输入域进行关联,也没有提供可操作的补救措施。最终的结算确认页面没有提供一个单个的按钮以便用户更容易产生行动,而是提供了会造成迷惑的多个按钮。

进度提示条(Process indicator)
尽管让人们知道他们所处的一个过程还有多远能够完成是个很好的主意,但是你要提防那些进度条——他们并没有正确表示要完成一个表单所需的页面或者步骤数量。

考虑一下,一个典型的电子商务结算表单进度条显示了你预期中的三个页面的输入工作:收货地址、账单地址和结账。当到了选择收货地址的页面时,页面一是从当前存在的地址簿里直接选择一个。如果并没有存在你想要运输到的地址时,一个额外的页面就出现了,你需要去新增一个地址。于是,步骤一就变成了两个步骤。当在第二步选择账单地址时,你可能需要去验证一个在线的付款服务提供商,登录到他们的网站,选择资金来源或者提供一个新的账单地址。现在,步骤二就变成了四个步骤。

所以我们需要用6步完成我们告诉用户用2步可以完成的工作。
让人们感觉到需要多少步骤并不是件坏事,问题是我们很少说实话。
一个解决方案是避免进度条,并且尽快让用户完成任务。另一种解决方案是让进度条更高级,避免明确的预期产生。

错误信息

造成出错的输入框应该不仅仅在页面上可见,并且应该被明显标注出来。无论是顶部的错误提示信息还是这个出错的输入框都应该给用户清楚的指导,去帮助他们更换一个答案或者去寻求更多帮助。

首要操作
像“提交”、“保存”、或者“继续”这些操作,是旨在完成(enable completion)的,这是一个刚开始填写表单的用户期望的首要目标。因为他们是一个表单最重要的操作(完成)。它们多作为“首要操作”。另一方面,次要操作,较少被利用,它们通常是允许用户重设刚录入的数据的。由于次要操作有可能带来负面的效果,尤其是当被无意中点到的时候,所以我经常建议他们应该从表单中去除。

不过,在某些情况下,次要操作是有意义的,比如暂时保存、预览、导出等。虽然在这种场景下,我们倾向于将“上一步”,“下一步”作为同等的操作对待,但是让用户使用一个首要的“继续”的操作和次要的“后退”要更加有效率。毕竟,我们是期望用户完成这些表单的,不是吗?当你让次要操作的视觉不那么突出后,就减少了潜在的风险和错误并且让用户更加接近成功的结果。

Heidi注:
首要操作和次要操作的视觉等级关系表达如图所示:

————————————————————————————————————————
 1/3    1 2 3 ›› ›|

来顶一下
近回首页
返回首页
发表评论 查看所有 条评论
 
用户名: 密码:
验证码: 匿名发表