网页表单中的行为也分主次 1

原文地址：Primary & Secondary Actions in Web Forms

作者介绍：Luke Wroblewski，目前在Yahoo！担任首席设计师（Chief Design Architect），主要进行互联网、移动设备、电视等等产品线及前瞻性的客户体验整合。在这之前他曾是eBay公司平台组的用户界面设计领导者。他同时也是两本知名网页设计书籍的作者（Web Form Design和 Site-Seeing: A Visual Approach to Web Usability）。

版权声明：译文转载请注明来自阿斯猫的兵工厂

译文：

最近几个月以来，我一直忙于在我的新书中通过实际测试数据来重写设计建议，这本书名叫《网页表单设计最佳练习》（Web Form Design Best Practices）。为完成这件事，我很荣幸的和伦敦的可用性专家Etre一起合作，并进行了大量的专门针对网页表单设计的眼动实验和可用性研究。其中的一项测试便是研究主要行为与次要行为之间的差异化。

主要行为与次要行为

一个典型网页表单通常包含数个“决定性”行为。例如“提交”“保存”或者“继续”等行为，他们都是被用来“完成表单”，而“完成表单”则是任何用户开始填写表单之后的主要目标。因为能够被用来触发表单中最重要的行为（完成表单），所以他们常被归为主要行为。

另一方便，次要行为的使用趋势越来越少，同时大多数通常允许用户撤销已经输入的数据。例如“取消”“重置”或“返回”之类的选项，他们代表了与用户填写表单时的首要目标刚好相反的次要行为。

由于次要行为包括否定结果，我过去常常和人们争论说他们应该不应该出现在表单中，尤其是他们常被用户无意中使用。相像一下这样的情景，你在填写一个冗长的在线表单的时候不小心点了“重置”按钮，于是你输入的所有数据都被抹掉了。

当然某些情况下次要按钮时也是有意义的，例如“暂存”“导出”等等。在这些条件下，我主张最好的方式是通过视觉样式来区别主要和次要行为，这样才能确保用户可以找到一条清晰的路径来完成自己的首要目标：完成表单。

降低次要行为的视觉影响可以最小化出现潜在错误的几率，同时也能指引用户更靠近成功的结果。但是如何才是实现这种目标的最好方法？主要行为与次要行为应该被放置于何处？他们之间到底需要有多大的差别？为了回答这些问题，Etre和我一起进行了一些测试。

为了评估主要和次要行为的哪种表现方式的使用效果更好，我们共邀请了23位用户，通过使用眼动仪和可用性标准测试了6种不同的设计。我们按照随机顺序给参与者介绍了这6种不同的设计（随机是为了最小化因相似性而引起的偏差），同时告诉他们“请准确并完整的完成这个表单”。

视觉差异

用户使用其中五种设计的时候都完美的完成了任务。表单A,B,C,D和F的成功率都是100%，他们并未导致用户出现任何错误。这五个表达的完成时间相差都不大，同时也都收到了类似的较高满意度评价。

表单B完成的最好。 使用这个表单时用户的视觉焦点移动距离较短并且停留次数较少。同时相对于其他表单，用户使用表单B能更快更有效率的完成任务。

不过也有意外，一些用户评论表单A时认为将“Cancel”选项设计为链接的样式挺有用。其中一位用户提到说，这个隐性的表现形式让这个选项较难发现，同时也避免了意外性（和灾难性）取消的发生。另外一些用户觉得“Submit”更重要一些，这是因为他们认为在界面表现上“Cancel”没有被给予平等的地位。

针对表单C中的灰色“Cancel”按钮，一些用户表达了积极的看法。一个测试者说它的颜色让人更容易识别出那些“正确的按钮”（例如“Submit”），然而另一部分用户则认为不同颜色的按钮“减慢了你的速度（同时）让你核对自己是否正在点击正确的按钮”

有趣的是相对于完成表单B，同样的用户须要额外大约8次的视觉焦点停留来完成表单C；而表单B中的设计中，两个选项都使用了颜色接近完全相同的绿色并且左对齐的按钮。看起来是这样，灰色让表单C中的“Cancel”更容易识别，但却导致用户在使用这种设计的时候完成速度更慢一些。这表明，使用表单B之时，一些用户表现出他们关心自己“可能很容易就点到错误的按钮”。

总的来说，看起来用户针对这种将“Cancel”以某种方式突出的设计的反馈还不错，即使这些设计在一定程度上减慢了他们的速度。这说明相对于提交表单的速度，用户更关注避免丢失自己输入的数据。