WEB表单设计-4动作

作者: minggg | 来源:发表于2016-12-13 21:53 被阅读50次

一、主动作和次动作


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

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

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

图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方案AC),提出视觉差异有助于避免错误。方案AC满意度都高于方案B

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

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

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

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

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

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

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

相关文章

  • WEB表单设计-4动作

    一、主动作和次动作 标签列出表单要求人们回答道问题。输入框让人们填写答案。但两者实际都不能让人们填写完表单。完成表...

  • 《web 表单设计》-标签

    web表单设计有三个基本要素:1、标签 2、输入框 3、动作。标签负责提出问题,输入框供人们填写信息,动作负责提交...

  • 5款优秀的在线表单设计器

    1、Ueditor Formdesign Plugins Web表单设计器 Ueditor Formdesign ...

  • 工作流开发推荐使用表单引擎

    所谓的表单引擎 表单引擎,也可以称为表单流程,流程表单和工作流表单,是基于Web界面上可视化编辑的表单设计系统。它...

  • 基于web的自定义表单引擎

    所谓表单引擎 表单引擎,又可称之为表单流程、流程表单、工作流表单,是基于Web界面上可视化编辑的表单设计系统,可设...

  • 网页设计中的“表单”问题

    在WEB产品的设计中经常要用到设计表单,表单中的元素众多,尤其是许多后台操作系统中表单元素的组合就更加复杂...

  • 无处不在的表单

    这两天看了《web表单设计》,根据自己以前对表单的理解,写下总结。 表单的组织 先考虑人,再考虑像素。用户真正关心...

  • Flask Web 开发【 Chapter 4 】 Web 表单

    【Chapter 4】 Web 表单 4.1 跨站请求伪造保护 默认情况下,Flask-WTF 能保护所有表单免受...

  • 关于Web表单设计的经验分享

    表单在UI设计中的出现场景还是比较多的,尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计,就想把...

  • 表单的标签和输入区-表单设计的对齐方式

    转自:http://www.yixieshi.com/5459.html 在web页面设计中,在表单设计中经常会遇...

网友评论

    本文标题:WEB表单设计-4动作

    本文链接:https://www.haomeiwen.com/subject/oplmmttx.html