[前言]读英文的博客和英文的书,也读了不少,读的时候摇头晃脑也读得懂,可是读过之后,感觉却没啥收获,想来是因为读中文,一边读一边是在思考和反刍,而读英文,却是一边读一边在词对词翻译。这次,做订单项目,对各个电子商务的订单流程很感兴趣,所以试用了若干个电子商务网站,进而对订单表单设计很有兴趣,恰逢此时,看到大名鼎鼎的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步可以完成的工作。 让人们感觉到需要多少步骤并不是件坏事,问题是我们很少说实话。 一个解决方案是避免进度条,并且尽快让用户完成任务。另一种解决方案是让进度条更高级,避免明确的预期产生。 错误信息 ![]() 首要操作 ![]() 不过,在某些情况下,次要操作是有意义的,比如暂时保存、预览、导出等。虽然在这种场景下,我们倾向于将“上一步”,“下一步”作为同等的操作对待,但是让用户使用一个首要的“继续”的操作和次要的“后退”要更加有效率。毕竟,我们是期望用户完成这些表单的,不是吗?当你让次要操作的视觉不那么突出后,就减少了潜在的风险和错误并且让用户更加接近成功的结果。 Heidi注: 首要操作和次要操作的视觉等级关系表达如图所示: ![]() ———————————————————————————————————————— ![]() 苹果重新设计过的结算界面采用了一个“手风琴”式的交互让用户完成一系列的问题。这xx了先前设计中的多个页面和进度条的问题。当人们完成了每一块时,下面的表单也会随即伸开。你可以在apple store上自己体验。 手风琴的设计 个人觉得apple的收货地址的交互细节做得不错: 它将收货地址分成了两部分:收货联系人与收货地址: ![]() 实际上这两部分信息是应该被明确区分的,以便解决收货人并不是联系人的问题,比如代购。当订单发生问题时,我们倾向于与下单人而不是收货人进行联系。这个问题我在淘宝上帮爸爸买礼物时曾经出现过一次,卖家联系我爸爸说那个颜色没有了,需要不需要更换一下,我爸爸莫名其妙,因为我本来是准备给他一个惊喜。
先前的表单设计使用了顶端对齐的方式去向用户呈现问题,新的设计仅仅将版块标题顶部对齐,而将标签(Labels)放到了输入框(Input Field)内。在可用的屏幕面积不足(比如手风琴表单)的情况下,将标签与输入框整合在一起作为一个用户界面元素,可能是一个不错的节省面积的尝试。 当然,这里也有一些值得考虑的若干因素。 在输入框里的标签(label) ![]() 当用户输入答案时,标签就消失了,所以这也导致答案对应的上下文也消失了。所以,当你突然忘记了你的答案对应的问题是什么的时候,很不幸的是,你无法找到它。所以,将标签放到输入框的做法并太适用于不是长的或者哪怕是中等长度的表单。当你填完了整个表单后,所有的标签都消失了。这导致你重新回头去检查你的答案非常有难度。 苹果的解决方案也许能够缓解此问题,因为表单要求填写的内容有着通用的已知格式。寄件地址,打个比方,有一个众所周知的格式,从而能够帮助用户理解如何去回答关于收货地址或者账单地址的问题。另外的例子包括“first name”和“last name”,日期和时间,或者一组电话号码。当标签消失后,这些输入组合仍然能够提供额外的线索帮助用户输入。始终可见版块标题也能够起到作用。 {zh1},在输入字段标签应该用一种方式,它能够使人乍一看就明白他们是标签,而不是答案。Apple的表单将标签文字做成灰色,以区别答案。 自动选择的城市和州 ![]()
![]() 信用卡号码遵循一致的结构。美国运通卡号要么以34开始,要么以37开始。万事开头号码在51-55之间。 Visa卡以数字4开始。依此类推。这些信息可用以推断用户使用的是什么类型的信用卡——只要看看他的信用卡号码就可以了。 在重新设计的结算页面,苹果正是如此做的。当有人填写了一个信用卡号码后,对应的信用卡类型也会高亮选中了。这xx了要求用户选择信用卡类型的需要。——减少一个需要用户分析、思考和响应的问题。 关联输入(selection dependent inputs) ![]()
首要操作 ![]() 错误信息 ![]() ![]() 然而,将顶部的错误信息提示去除也就意味着会遭遇到一个状态:出现的错误仅仅通过一个浅黄色的背景颜色来呈现。当我修改我的信用卡信息的时候遇到了此问题。信用卡号以及安全码填错了,但是除了浅黄背景外,没有任何提示告诉我。当你考虑到苹果的浏览器(safari)和其他的浏览器,都会使用一个相似的黄色背景来提示那些帮你自动填充好的输入区域时,这个问题尤其让人烦恼。 事实上,在apple之前的结算表单设计中,一个浅黄色的背景就是表达了那些自动完成的输入区域的。而在新的结算表单里,它却用来表达一个错误。为什么apple不使用一个红色(表达错误的标准颜色)呢?哈哈,这也许是保留着为free shipping使用的!
|
||