好学若饥 - 让我们共同前行!

好学网



当前位置: 好学网首页 > IT教育 > 网页设计 >

网页表单设计:主要行为与次要行为

时间:2010-09-25 14:34来源: 作者: 点击:
网页表单设计:主要行为与次要行为,一个典型网页表单通常包含数个“决定性”行为。例如“提交”“保存”或者“继续”等行为,他们都是被用来“完成表单”,而“完成表单”则是任何用户开始填写表单之后的主要目标。因为能够被用来触发表单中最重要的行为(完成

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

作者介绍:,目前在Yahoo!担任首席设计师(Chief Design Architect),主要进行互联网、移动设备、电视等等产品线及前瞻性的客户体验整合。在这之前他曾是eBay公司平台组的用户界面设计领导者。他同时也是两本知名网页设计书籍的作者( 和 )。

译文:

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

主要行为与次要行为

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

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

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

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

降低次要行为的视觉影响可以最小化出现潜在错误的几率,同时也能指引用户更靠近成功的结果。但是如何才是实现这种目标的最好方法?主要行为与次要行为应该被放置于何处?他们之间到底需要有多大的差别?为了回答这些问题,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以某种方式突出的设计的反馈还不错,即使这些设计在一定程度上减慢了他们的速度。这说明相对于提交表单的速度,用户更关注避免丢失自己输入的数据。

摆放位置

只有表单E在测试中的表现最差。有6位用户在使用这个表单并试图完成任务时错误的按下了Cancel按钮,并且有其他更多的用户在这个按钮上徘徊数次,直到他们意识到自己即将犯下一个错误。从整体上来看,完成表单E的时候用户会比使用表单B之时慢大约整整6秒钟(值得考虑的一点是这两个表单之间的差别仅仅是按钮摆放位置的不同而已)。同时,与视觉焦点数据的平均值相比,完成表单E需要的这个数值更高(以视觉焦点移动距离总和与平均视觉焦点移动距离进行比较)。

一举我们收集的数据,表单A,B和C是最有效率的三个设计。这些设计原型拥有一个共同特征:所有的Submit与Cancel选项都是出现在页面的最左侧。这说明将这两个选项进行左对齐是最好的设计选择,尤其是当其他表单控件也是左对齐的时候。将Submit与Cancel按钮放置于左侧意味着用户的视觉焦点只需要更少的距离就能到达。(责任编辑:haoxuee)

      学友请扫描下方二维码,或微信搜索公众号 haoxueecom 获取更多学习生活资讯!
     好学网微信公众号

赞一个
(0)
0%
嘘一下
(0)
0%
------分隔线----------------------------