Heidi格物志

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

Apple store的结账表单重构
December 16, 2009 by Luke Wroblewski
原文地址：https://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注：
首要操作和次要操作的视觉等级关系表达如图所示：

————————————————————————————————————————

全新的苹果结算页面

苹果重新设计过的结算界面采用了一个“手风琴”式的交互让用户完成一系列的问题。这消除了先前设计中的多个页面和进度条的问题。当人们完成了每一块时，下面的表单也会随即伸开。你可以在apple store上自己体验。

手风琴的设计

Heidi注1：

个人觉得apple的收货地址的交互细节做得不错：
它将收货地址分成了两部分：收货联系人与收货地址：

实际上这两部分信息是应该被明确区分的，以便解决收货人并不是联系人的问题，比如代购。当订单发生问题时，我们倾向于与下单人而不是收货人进行联系。这个问题我在淘宝上帮爸爸买礼物时曾经出现过一次，卖家联系我爸爸说那个颜色没有了，需要不需要更换一下，我爸爸莫名其妙，因为我本来是准备给他一个惊喜。

• Heidi注2：什么是手风琴的设计方式？

在yahoo patterns里有手风琴（accordion）设计的详细定义：https://developer.yahoo.com/ypatterns/navigation/accordion.html
简而言之，它是一组可伸缩的信息面板集合。手风琴面板恰当使用能够解决信息比较多但是空间受限制的问题。

先前的表单设计使用了顶端对齐的方式去向用户呈现问题，新的设计仅仅将版块标题顶部对齐，而将标签（Labels）放到了输入框（Input Field）内。在可用的屏幕面积不足（比如手风琴表单）的情况下，将标签与输入框整合在一起作为一个用户界面元素，可能是一个不错的节省面积的尝试。
当然，这里也有一些值得考虑的若干因素。

在输入框里的标签（label）

将标签放置到输入框里的交互要求当用户将他们的鼠标放入输入框时，标签能够立即消失，这样，用户才能够比较容易地进行输入。不然，标签将会变成他们答案的一部分。

当用户输入答案时，标签就消失了，所以这也导致答案对应的上下文也消失了。所以，当你突然忘记了你的答案对应的问题是什么的时候，很不幸的是，你无法找到它。所以，将标签放到输入框的做法并太适用于不是长的或者哪怕是中等长度的表单。当你填完了整个表单后，所有的标签都消失了。这导致你重新回头去检查你的答案非常有难度。

苹果的解决方案也许能够缓解此问题，因为表单要求填写的内容有着通用的已知格式。寄件地址，打个比方，有一个众所周知的格式，从而能够帮助用户理解如何去回答关于收货地址或者账单地址的问题。另外的例子包括“first name”和“last name”，日期和时间，或者一组电话号码。当标签消失后，这些输入组合仍然能够提供额外的线索帮助用户输入。始终可见版块标题也能够起到作用。

最后，在输入字段标签应该用一种方式，它能够使人乍一看就明白他们是标签，而不是答案。Apple的表单将标签文字做成灰色，以区别答案。

自动选择的城市和州

在苹果新的结算表单上，用户被要求首先输入他们的邮编，然后要求选择他们的城市和州（如上图）。Heidi注：这种交互方式就是，让你填写了邮编后，系统会自动匹配符合该邮编的城市和州的组合给你选择，而不是默认的所有选项。好的一面，这种做法消除了一种回答问题的笨拙的方式，具体地说——不得不从50个选项的下拉菜单里进行选择。不好的一面，当用户面对一组符合寄件地址结构的输入表单时（正如上文提到的），他们会经常跳过标签（下意识地进行填写）。而这个地址表单的元素与布局对于美国所有人都是熟悉的——苹果网站由于将邮编的顺序调整打破了用户熟悉的表单结构。

• Heidi注：通用的地址表单的字段顺序如下：

动态的交互
你在表单里要求用户回答的问题，都需要他们进行分析、结构化答案，然后填写到相应的输入框里。要警惕每一个你询问用户的问题，去除那些不是绝对必要的问题，或者在更合适的时机、地方询问，或者能够自动推知出来。你问越少的问题，用户更快更容易完成你的表单机会也会越大。

信用卡号码遵循一致的结构。美国运通卡号要么以34开始，要么以37开始。万事开头号码在51-55之间。 Visa卡以数字4开始。依此类推。这些信息可用以推断用户使用的是什么类型的信用卡——只要看看他的信用卡号码就可以了。

在重新设计的结算页面，苹果正是如此做的。当有人填写了一个信用卡号码后，对应的信用卡类型也会高亮选中了。这消除了要求用户选择信用卡类型的需要。——减少一个需要用户分析、思考和响应的问题。

关联输入（selection dependent inputs）

关联输入（selection dependent inputs）要求人们在回答了一个问题，基于答案去回答后续的问题——通常不用去另外一个网页上。新的苹果结算表单的付款版块使用了“selection dependent input”方式，在用户选择了付款方式后（Heidi注：用户先选择付款方式的标签），然后需要回答后续的问题。水平排列的付款方式tabs允许用户查看每种付款方式后关联的后续问题。

• Heidi注：虽然我们将label和tab都翻译成标签，但是实际上在这篇文章里，两种方式截然不同。需要加以区分：

虽然大多数用户已经对导航上使用tabs的方式很熟悉了，但是他们填写表单的方式可能会使得这个方法不那么有效。很多用户是至上而下完成一个表单，所以可能会忽视掉水平的选项。同时，这里也缺少一个明确的声明，这些水平的tabs是否是相互排斥关系的。我需要同时提交三个tab下的信息还是仅仅提交当前的tab下的信息呢？

• Heidi注：其实，这个问题确实带来了迷惑。Tab与radio button相比，tab没有明显的“选择”的意思，而更加像一个导航。在这种情况下，或许使用radio button或者drop-down menu会更加好一些。

然而，在为我的书《web form design》所做网站表单设计的水平tab方式测试中发现，参与者都没有出现任何错误。他们都能够相当快完成任务，并且对此设计提供了不错的满意度评分。看来，苹果是选择了一种最适合的界面设计。

首要操作
正如我们看到的，apple先前的结算表单设计有几个不同的形状和颜色的“召唤行动”的操作按钮。新的设计非常明显地减少了次要操作的视觉重量，将所有的焦点都放到了首要操作上：continue。

错误信息

错误提示：苹果的新的结算表单还采用了在上下文中的错误提示信息。现在，错误被显示在造成错误的输入区域旁并且提供了清晰的解决建议。

然而，将顶部的错误信息提示去除也就意味着会遭遇到一个状态：出现的错误仅仅通过一个浅黄色的背景颜色来呈现。当我修改我的信用卡信息的时候遇到了此问题。信用卡号以及安全码填错了，但是除了浅黄背景外，没有任何提示告诉我。当你考虑到苹果的浏览器（safari）和其他的浏览器，都会使用一个相似的黄色背景来提示那些帮你自动填充好的输入区域时，这个问题尤其让人烦恼。

事实上，在apple之前的结算表单设计中，一个浅黄色的背景就是表达了那些自动完成的输入区域的。而在新的结算表单里，它却用来表达一个错误。为什么apple不使用一个红色（表达错误的标准颜色）呢？哈哈，这也许是保留着为free shipping使用的！

• Heidi注：其实free shipping可以用绿色的。那样红色就可以使用到错误信息上了嘛。