在一般的web页面的表单中,总会存在一些"actions"(比如“Submit”,“Save”,或者“Continue”),当用户的信息填写完成后会触发这些actions,完成表单的提交,这样的操作为我们称之为主要的用户操作(primary actions),另一方面,次要的用户操作(Secondary actions)是指那些不经常使用的,如“Cancel”、“Reset”、“Go Back”等。

通常,Secondary actions具有一些副面的作用,特别是误操作(比如表单已经填写好了,准备提交,可是点了一下"Reset"按扭,刚才的工作就白做了)。所以怎样更好的让用户区分primary actions和Secondary actions是很有必要的,通常,使用视觉上的区分方式具有很好的效果。这样可以让用户填写完表单后快速的进行提交而不出现失误。

从视觉上减轻Secondary actions的表现可以将潜在的失误减少到最小,有什么最好的办法能展现他们的区别呢?国外的专家根据23个试验者使用热成像的方法跟踪他们在提交表单时眼睛视着点的移动和试验者最后提交表单的结果得出了很完整的统计数据,解决了这一问题。
这23名试验者通过随机的顺序提交6种不同样式的表单,表单如下:

这六种表单主要分两种类型:Visual Distinctions和Placement,数据分析如下:
1、Visual Distinctions:
在这六种表单中,A、B、C、D、F都被所有试验者正确的提交,方案B的表现最好,试验者眼睛视着点的变换次数最小,所花的时间也最少。

在提到A方案时,有些试验者提出将“cancel”作为一个连接很有帮助,其中有一个实验者指出用该方法可以让“Cancel”不是第一时间被用户看到,因此可以避免错误的"cancel"操作。另一个试验者感觉"Submit"是最重要的操作,因此在用户界面不应该跟"Cancel"具有同样的效果。
也有一些试验者对方案C给出了肯定的评价,认为“Cancel”的颜色可以让用户很容易找到正确的操作选项,也可以减慢用户提交的动作,避免不必要的失误。
有趣的是,试验者在方案C上的视着点变化次数要比方案B多,这两种方案除了“cancel”颜色不一样,其他都一样,这说明,方案方案B可以让用户更高效的完成他们的操作,但另一方面,它有可能让用户产生错误的操作。

总的来说,用户希望“Cancel”以某种方式与“Submit“区别开来,虽然这样可能降低他们的效率,但可以尽量的避免他们的数据不丢失,因为在他们看来,数据的重要性要比效率高。

2、Placement
只有方案E的测试效果最不理想,6个试验者在提交表单时错误了点击了”Cancel“,更多的试验者在即将犯同样的错误时认出了这是一个陷阱,所有的试验者在该方案上所花的时间要比在B方案上花的时间最少多出6秒。

从统计到的数据来看,方案A, B, 和 C是最有效的,他们有共同的特点:两个按钮都是左对齐。这说明表单中按钮左对齐是一个很不错的设计方案,特别是表单上的内容也是左对齐,这样可以让让用户更少的转移视线。
根据试验者视着点的变化,方案F的效率最低,根据用户的习惯,在阅读每一行时总是以最左边开始,所以用户最希望按钮出现在左边,然而该方案不得不让用户多花时间在页面的中部才找到他们所需要的。

下面的图显示了试验者在提交表单时视着点变化的热成像图,可以很清楚的看到用户的关注点在哪个部位。

3、总结
虽然很多web表单的设计是为了让用户更快更高效的完成他们的目标,但在某些情况下使用一定的方式让用户的行为慢下来也是可取的,在设计primary actions 和 secondary actions时,visual distinctions不失为一种很好的方法,让用户可以更好的作出选择。
这种需求可能不是很明确的,需要确认在表单中是否真的需要secondary action,不要不加选择的将其加进去。
actions的对齐可以为用户提供清晰的操作路径,帮助他们更快的完成表单的提交。
