“确定”和“取消”按钮

1、“确定”和“取消”按钮 12月 19, 2008 | Filed in: 魔琳修炼-工作学习就上次魔琳和DINO讨论的表单按钮问题，魔琳又去查阅了一些资料和博文。这里有一篇文章是Luke Wroblewski和Etre通过眼睛追踪和可用性研究所得出的一些结论，主要是分析表单中的主要操作和次要操作（确定和取消的操作）。简单看了看，这里拿出来和大家分享一下。因为是E文的，俺的能力有限，内容大概按自己的理解来翻译的 不明白的地方大家可以查阅原文。主要&次要操作一个典型的Web表单通常包含一些“结束”的行为。例如“提交”、“保存”、“继续”，旨在用户能够顺利的完成表单的填写，让任务流结束，所以

2、它们通常被认为是主要的操作。另一方面，次要操作使用户能够重置之前数据输入。如“取消”、“重置”或“返回”作为次要的操作，不同于填写表单这样的主要操作。由于次要操作会产生消极结果，特别是在用户不经意的情况下。所以，我常常认为他们不应该在表单中存在。想像一下，当在填写一长串表单数据时，不小心点击“重置”按钮将清空所有的数据。这就说明这些次要操作的位置意义重大（“稍后保存”、“输出”等）。在这种情况下，我主张通过视觉来区别主要和次要的操作，使人们有更清晰的思路和目标明确。减少次要操作在视觉表现上的突出性，最大限度的减少误操作并进一步引导用户成功的完成目标。但是，用什么方式来进行区别才是最好的呢？不同

3、应用的主要和次要动作应该放在哪里呢？要找到这些答案，Etre 和我做了几个试验。为了评估主要和次要操作哪种方式最好，我们对23个用户的眼睛追踪和可用性指标做了6个不同的测试，这六个设计会被随机的测试（使偏差减到最小）。并且，他们需要对表单填写全面和准确。视觉区别当做完第五个或第六个设计后人们完成了他们的任务，选项A、B、C、D和F取得的成功率为100%，没有造成错误。他们也看了可比较的任务完成时间并且接受了同样地高满意度。选项B表现最佳，做这个测试所花费的时间最少，并且人们能完成迅速和高效。当评论选项A时，一些用户反映，让“取消”以链接形式展现是有用的。一个用户提到，这样隐性的设计按钮，让按钮

4、难以被发现可以帮助防止偶然的误操作。还有一些则认为“提交”是很重要的选择，因而“取消”这样的按钮在页面中不应该有和提交一样重要的地位。有几个人也对C的灰色“取消”做了评论，一个测试用户说它的着色更加容易察觉“正确的按钮” (即“Submit”)，另外的则说，不同颜色的按钮让你能停下来检查你所做的点击。有趣的是，（这里怎么都翻不太通，大概是说用户也许更加喜欢看似不能点击的灰色按钮。）总体而言，他们对突出“取消”的设计方案都表示出了好感即使这样的设计会使操作慢一点。这表明，相对于完成提交的速度，他们更关心的是避免这些数据丢失。位置只有选择E在我们的测试中表现不佳，六个用户错误的点击了设计中的“取消

5、”按钮，同时在犯错误前有更多的徘徊。比起使用B的设计，使用此设计，多出大约6秒的时间。根据我们的数据收集，选择A、B和C是三个最有效的设计。这些设计共有的特点是：“提交”和“取消”按钮都在页面的左侧。这表明，左对齐是对这个两个按钮最好的设计选择-尤其当前面的填写和内容也在左侧时。把这两个按钮放在左侧意味着减少了人们的视线距离。根据他们眼睛的运动，人们在选择F时效率最低。使用F时，用户的视线距离拉得最长，原因多数是因为用户预计按钮会在页面的左侧，但是，一旦发现情况并非如此时，又不得不向页面周围的其他位置搜索按钮。这一显示一个设计原则：指明一个明确的完成路径。使输入和提交成为垂直的轴径，清晰的指明如何去完成。这能由用户在下面的注视路径的热区图看见。（注：一种元素预处理也可能影响到这里的所有其他的设计，我们测试了“提交”按钮显示左边的“取消”按钮。 ）多数网页表单设计的目标是使人们尽可能顺利的完成目标，对于主次功能的视觉区分是一个不错的方法，有效的在视觉上帮助人们进行了区分。如果这种区别是想更加突出按钮或链接，那是选择A还是颜色做了区别的C？选择A的完成的时间更好一点，平均人数固定，平均总长度固定，说明人们完成的速度更快，但并不多。当然，如果没有次要操作的存在，就不用对他们进行