网页表单设计:怎样提高表单可用性？

一、信息内容的合理组织。

考虑用户填写表单的目的，哪些表单需要填写，去掉没必要的表单项，确定完表单内容。如何组织起来呢?表单项并不是一个个从上到下无序罗列，而是根据表单内容，按照一定的逻辑，经过组织，分成不同的内容组，不同的主题。同时各个逻辑组和同一个主题的表单项，也是按照逻辑顺序或者用户熟悉的模式顺序，使用户浏览和填写自如。如果表单过长时，也可拆解成不同网页，类似于任务拆解，让用户一步步填写。

品牌1.0系统，新建订单时，将表单内容，进行逻辑划分为两个内容组：基本信息(重要/必填)和附加信息 (次要/选填)，通过分割线区分内容组，结构清晰，易于浏览。考虑区分内容组时，应当考虑采用较少的视觉信息，过多的视觉信息可能会导致注意力分散，给表单带来大量视觉噪音。

新建百度Union账户，表单内容较长，同时有若干主题，一个网页信息量太大，所以采用多个网页来组织表单，分步骤给用户，提供清晰的路径步骤，即清晰又简单。用户在填写时，提供进程指示，避免紧张和疑惑。

二、简化表单，突出重点。

根据用户使用数据，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。比如品牌1.0的新建创意表单，90%的人不进行曝光监控链接的填写，那么默认收起，保持表单的简洁，让绝大多数用户快速完成，避免大量的表单给用户的焦虑，而又满足了小众用户的需求。

三、清晰的浏览线。

思考如何设计表单结构和路径时，需要有个基本原则：由始至终提供清晰的浏览线。采用眼动仪实验即可检验用户的浏览线。如标签的对齐方式、输入框的布局等都影响着用户的浏览线。当提供了垂直单一路径，使用户减少注意力分散，可以迅速对问题作出回答，完成任务所花时间少。

四、考虑用户场景，**主流程顺畅。

我们在设计表单时，定义了清晰的线性步骤，但很少真正实现。考虑用户场景，**主流程不要中断，将导致人们放弃填写的元素解决。例如，招商银行卡号密码的付款流程，分为三项表单步骤：填写银行卡号、填写其他验证信息、支付成功。但在用户填完卡号和其他验证信息后，经常会发现付款额超出每日限额，以前的流程是，用户中断付款流程，不得不新打开一个网页，招行主页 → 网上个人银行登录 → 选择一卡通(输一卡通卡号、查询密码、附加码)登录后→ 网上支付 → 网上支付额度管理调整额度，然后再次重新支付，使用户在两个操作流程中切换，让用户各种折腾。而改版后的设计，可谓十分贴心，给予信息提示的同时，用户可在当前流程设置限额，避免了付款流程的中断，同时大大节省了用户的操作成本。

还有新建广告位时，选择所属频道，如果没有想要的频道，就需要新建频道，增加额外的页面来添加新频道，而在设计时，考虑到用户的此场景，在下拉选择框旁边，增加“新建频道”按钮，为用户提供便捷，减少了新建广告位流程的打断。

五、选择合适的标签对齐方式。

“输入框标签应该是顶对齐、右对齐、左对齐还是输入框内标签?”是我们在设计表单时常见的问题。其实业界有很多针对此问题的实验和研究(Matteo Penzo的眼动实验、Luke Wroblewski的Luke Wroblewski’s findings、Vitaly Friedman的web表单设计之注册表单)，都表明每种方式有不同的优缺点，根据具体目标等因素具体考虑。

Matteo Penzo的眼动实验发现，顶部标签方式，标签移动到输入框需50毫秒，比左对齐标签方式(500毫秒)快了10倍，比右对齐标签方式(240毫秒)快了5倍左右。

总之，顶部标签方式，填表时间短。但如果尽量减少垂直面积，可以考虑右对齐方式。如果希望用户填表时认真浏览标签，了解仔细考虑表单的每个输入框时，可以采用左对齐方式。

六、提供帮助。

为了用户快地填写表单，一般在难以理解的表单项增加帮助信息，引导用户成功填表。帮助信息，提示用户应该如何填写，常见的帮助，一般在标签或者输入框旁提供帮助文字，交互方式也有一直展现(即一直出现在输入框右侧、下方或输入框内)、即时帮助(即激活输入框时，帮助文字自动出现)、用户激活的即时帮助(即帮助信息默认不显示、用户鼠标悬浮触发帮助图标来显示帮助)、用户激活的区域帮助(将表单所有的帮助信息统一放在一个位置)等多种方式。