WEB表单设计-4动作

一、主动作和次动作

标签列出表单要求人们回答道问题。输入框让人们填写答案。但两者实际都不能让人们填写完表单。完成表单的单一职责属于动作。

主动作：如提交、保存或继续等动作用来完成表单填写的行为。

次动作：较少使用，并且大多数情况下允许人们撤销输入的数据。如取消、重置或返回等，这些动作与大多数人填完表单的主要目标相勃。

图1.1  Web表单上的主动作和次动作可以通过表明其重要的方式来表示 为了评估主动作和次动作的最佳表现形式，我们通过眼动仪和可用性指标，测试了6种不同表现形式。 图1.2  测试所用6种主动作和次动作组合设计

6种设计方案中，人们能完美完成其中5种。方案A、B、C、D和F的成功率100%。而且这5项设计在任务完成时间和满意度方面都较好。

图1.3  B主动作和次动作视觉效果同样突出，测试者的眼球定位图

测试方案中虽然方案B表现最佳，方案B的眼球固定时间较短、次数较少（图1.3）。与其他方案相比，其完成任务更快、更有效率。但使用方案B时很多人表达出担心“非常容易点击错按钮”。一些人主张“Cancel”按钮应当设计成与众不同的方式（图1.4方案A和C），提出视觉差异有助于避免错误。方案A和C满意度都高于方案B。

图1.4  A和C用颜色区分主动作和次动作，测试者的眼球定位图

只有方案E表现很差。一部分测试者完成方案E时，错误点击了取消按钮。而更多人在意识到即将犯错前都犹豫不决（图1.5）。

图1.5  E主动作和次动作分开，测试者的眼球定位图

方案F，人们眼球定位时间最长。整体而言，方案F比方案B多用了6秒。

图1.6  F主动作和次动作放在表单中心时，测试者的眼球定位图

根据收集到的数据，6中方案中最有效的设计都有一个共同特征：提交和关闭按钮左对齐排列，与上方输入框和标签对齐。

表单设计的第一条原则：说明完成的明确路径。应当谨慎放置表单动作，主动和输入框对齐会减少填完表单所花的时间。