深度探析如何提高Web表单的可用性

该文是对Smashing Magazine上一篇老文章《 An Extensive Guide To Web Form Usability》的译文，温故而知新，希望大家从中可以得到新的收获。

可能与你平时阅读到的资料相反，你在表单中增加华丽的按钮、漂亮的颜色和排版以及大量的jQuery插件不会增加表单的可用性。这样做，你只完成了提高表单可用性三分之一的工作。

本文将提供一些易于遵循的实用指南。这些指南已通过了可用性测试、表单测试、网站跟踪、眼球追踪、Web分析，并解决了不满用户向客户支持人员反应的各种抱怨。

Web表单可用性的重要性

ISO 9241标准对Web可用性作出了如下定义：“产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness）、效率（efficiency）和用户主观满意度（satisfaction）”。当用户使用网站时，他们会带到特定的目的。如果网站设计的好，该网站就可以满足这一目的，并与网站背后公司的目的相结合。而连接用户目的与公司目的的通常是表单，因为尽管人机交互已取得了较大进展，但表单仍是用户在Web上进行交互的主要形式。事实上，表单通常被认为是完成访问目的最后，也是最重要的一站。

表单的三个主要用途可以证明最后一点。正如Luke Wroblewski在他的著作《 Web Form Design: Filling in the Blanks》中表明的那样，每个表单因三个主要原因之一而存在：商业、社区和生产力。下表将三个原因背后的用户目的和商业目的进行了一一解析：

表单的作用，源于Luke Wroblewski所著的《 Web Form Design: Filling in the Blanks》。

因此，表单与可用性之间的关系有两个方面：

1.表单可使一个网站可用，也可使这个网站不可用。因为它直接影响着用户达成他们的目的。

2.表单必须可用，以帮助用户完成他们的目的。

该文主要专注于第二点，因为可用的表单将自然地服务于网站的整体可用性，即第一点。

Web表单的六大组件

Web表单是必须的，同时也是设计者和用户的痛点。随着时间的推移，用户对表单的外观和操作方式都有了一定的期望。他们通常期望Web表单由以下六个组件组成：

1.标签（Label）

告诉用户相应输入框中应填写的内容。

2.输入框

输入框使用户提供反馈。包括文本输入框、密码框、单选框、多选框、滚动条等。

3.操作（Action）

包括链接、按钮，当用户点击后，可完成一个动作，如提交表单。

4.帮助

帮助用户完成表单的填写。

5.信息

针对用户的输入，提供反馈信息。可能是积极的信息（如提示表单成功提交），也可能是消极的（如“你选择的用户名已被注册”）。

6.验证

该信息确保用户提交的数据符合参数规则。

Skype的注册表单包含这所有的六个组件

通过表单的三方面内容解决可用性问题

尽管表单在布局、功能和目的上各不尽相同，但都包含三方面的内容，正如Caroline Jarrett和Gerry Gaffney合著的《 Forms That Work: Designing Web Forms for Usability》一书上所写的那样：

1.关系

表单在用户和公司之间建立了关系。

2.对话

表单在用户和公司之间建立了对话。

3.表现

通过外观表现，表单建立了关系与对话。

要想表单可用，必须解决好这三方面的问题。下面将依次分析这三个方面，看表单需要遵循哪些指导方针，才能真正好用。

第一方面：关系

17世纪的英国诗人、讽刺作家、律师和牧师 John Donne曾说过：“没有人就是一座孤岛”。确实，人类在关系中成长，比如恋爱关系、友好关系、职业关系或者商务关系。表单是建立、增强用户与公司之间关系的一种方式。如果做得不好，它就会终结此关系。

鉴于此，便产生了以下规则：

● 关系建立在信任的基础上，因此在表单中建立信任至关重要。通过logo、图像、配色、排版和措辞可达到这一目的。当用户知道表单所属公司是一个真诚的组织，他们就会踏实，安心。

● 每一种关系都有目的，浪漫关系的目的是爱和幸福，商业关系的目的是经济收益。自问一下，你表单的目标是什么？

● 基于表单的目的，为它命名。表单名将告知用户表单是关于什么的，以及他们为什么填写。

● 正如在一段关系中，了解对方是很必要的。了解你的用户，并不断思考表单上的问题是否合适，如果合适，它们是否及时。该思考可以使你的表单更加自然流畅。

● 了解用户，对你选择合适的语言，去除冗余的问题也有很大帮助。这样创建出来的页面才能平衡好你和用户之间的需求。

● 不要问表单范围以外的问题。一段关系中，如果某人问了不合适的问题，你就会对他失去信任。网上同样如此。跟相关股东们商量下哪些信息确实是必须的。

● 性能或界面的突然改变会让用户无所适从。同样，各表单之间以及一个表单的几个步骤之间，绝对不能存在突然变化。

了解你的用户。让注册用户易于登录，让新用户易于注册。在 Debenhams网站将这两种表单间的区别做到了最小。

另一方面， Amazon将登陆页面与注册页面进行了融合，大大简化了过程。

第二方面：对话

一个表单就是一次对话。一次对话代表着双方之间的相互交流，在这里，双方即为用户与公司。实际上，用户填写表单就是为了与公司交流、对话。

例如，在社交网站中，用户通过填写注册表单来告知公司他们愿意加入。在接受用户申请时（无论自动还是手动），公司会（以标签的形式）问用户一些问题，如姓氏、名字、电邮地址等。基于用户的接受（或拒绝）情况，公司会给用户以反馈结果，然后完成对话全过程。

从这个角度来看表单，可以得以下实用指南：

● 正如上面提到的，表单是对话，而不是问话。标签处强势的用语会让用户无法接受，（如果他们并没因此而离去的话）他们最有可能给你一个你想听到的答案，但并非事实。  

● 按逻辑顺序对标签进行排序，以反映对话的自然流程。例如，先问某人一大堆问题后，再问其姓名，不是很奇怪吗？相关度越高的问题越应该放到表单的后面问。

● 将同类信息进行归类，如个人资料归为一类。一组问题接一组问题组成的表单流程更像一次对话。  

雅虎的注册表单通过紫色标题和细线将相关内容进行了有效的归类。

Constant Contact将相关内容进行了归类，但类别太多，让用户感到困惑

● 跟真实对话一样，每个标签每次应该对应一个主题，以帮助用户在相应的输入框中作出回应。

● 对话中自然的停顿，反应到表单中即为留白，如何归类标签，以及是否需要将表单进行分页。

● 任何对话，人们都会因背景噪音而分心。因此，去除诸如banner和不必要导航等让用户分心的杂乱信息。

Dropbox的注册表单是一个很好案例。留白适宜，页面简洁。

第三方面：界面

界面（或者UI）对于Web表单的可用性极为重要，针对此有如下指南。

1.标签 

● 单词 vs. 句子。

如果目的很简单，比如询问姓名或电话号码，那么标签处用一到两个单词便足矣。但是短语或句子更能准确表述。对于消除多义性，一个短语、句子可能是比较合适的。

亚马逊的注册表单用的全是句子，尽管有的地方单个词语就能搞定。

● 句子大小写vs.标题大小写。

是写成“Name and Surname” 还是“Name and surname”？句子大小写从语法角度比标题更容易（更快）理解。有一点是肯定的：一定不要全用大写，不然表单会看起来不专业且难以阅读。

快速阅读 Barnes & Noble的注册表单真不是件容易的事啊？

● 标签后面加冒号。一些桌面程序和诸如Windows之类的操作系统建议在表单标签后面加冒号。一些Web表单设计师一直坚持这一原则，主要因为老的屏幕阅读器主要依据冒号来识别标签。而新的屏幕阅读器则依据标记（尤其是“label”标签）。另外，冒号的使用只是一种偏好而已，只要风格统一，既不会增强也不会减弱表单的可用性。

● 标签的对齐方式：上对齐、左对齐或右对齐。与一般建议相反，输入框上方并不总是放置标签的最佳位置。如果你想让用户尽快填完表单，这样做是理想的。但有时你会故意让他们慢下来，以便他们认真地阅读标签。还有，将长长的表单以一列的形式显示出来，让用户通过下拉页面来观看，要比多列显示，以便所有表单信息显示在第一屏上更好。每种对齐方式各有利弊。

从Matteo Penzo所著的《 Label Placement in Forms》一书上获取的数据。

表单绝不可多列显示。   Makeup Geek 上这个表单的右列，很容易被忽略掉（更别说底部的“必填项”声明了）。

2.输入框

● 输入框类型。根据需要选择合适的输入框类型。每种输入框都有它自己的、用户熟悉的特性。例如，如果只允许选择一个，就用单选按钮，如果可以多选则用复选框。

● 定制输入框。不要发明新的输入框类型。这种情况在早期的Flash网站上很常见，现在似乎又有回归的迹象：我曾看到一些通过jQuery来实现的、奇怪的输入框。简单通常是最实用的。尽量让输入域看起来跟HTML中展现的一个样。

改变输入框的界面会让用户感到困惑。

● 限制输入框的格式。如果要限制用户输入数据的格式，那至少要采用一种不会激怒用户的方法。例如，代替在日期文本框后加“MM/DD/YYYY”备注，可采用三个下拉列表框，更好的办法是，用日历控件来控制。

● 必填项和选填项。要让用户清楚地知道哪些输入框是必填的。一般用*号表示必填。其他符号也可以用，只要指明它所代表的意思即可（即使是*号，也应有说明）。

3.操作

● 主要操作和次要操作。主要操作就是菜单中完成“最后”功能的链接和按钮，例如“保存”和“提交”。次要操作，如“后退”和“取消”，允许用户取消已经输入的数据。如果误点了，次要操作一般会产生不愉快的结果，所以在可能的情况下只保留主要操作。如果必须要有次要操作，那就让它们看起来没主要操作那么显眼。

主要操作与次要操作之间的区别不明显很容易导致失误。在圣路易斯社区大学长长的表单下面有这样两个操作按钮，试想一下如果误按了“重设表单（reset form）”会有什么后果。

● 命名规则。避免使用“注册”之类的常规词语，这样会让用户觉得整个表单都没意思。用“加入LinkedIn”之类的描述性单词或短语会更好一些。

虽然可口可乐将主要操作放在了更重要的位置，并突出显示，但却用了很平常的“注册（Submit）”一词，要是换成“加入我们（Register with us）”效果会更好。

4.帮助

● 表单帮助文字。你永远不应该向用户解释如何填写表单。如果它看起来不像表单或很难填写，那么只有重新设计了。帮助文字只应出现在需要的地方，比如解释为什么需要信用卡信息，或者解释出生日期的用途。这些文字很容易被忽视，所以要尽量简洁易读。第一准则就是，解释文字（总共）不要超过100字。

● 用户触发和动态帮助。与其每个输入域后都加上帮助文字，不如让其只在需要时才出现。可以在输入框旁边放个小图标，让用户在需要时自行点击。更好的方法是，当用户在输入框里输入数据时，动态显示帮助信息。这种应用越来越普遍，使用JavaScript的库，诸如jQuery，很容易实现这种效果。

Skype的注册表单既包含了用户触发帮助（蓝色的文本框是通过点击问号图标触发的），也包含了动态帮助（下面列出的建议使用的用户名）。

5.信息

● 错误信息。告知用户有错误发生，一般会阻止用户继续填写表单。可采用以下方法突出错误信息：颜色（通常是红色），熟知图形（如警告标志），突出显示（通常在表单上方或是发生错误的侧边），大字体，或者以上综合。

● 成功信息。用以告知用户其在表单上取得了较大进步。如果表单很长，成功信息可以鼓励用户继续填写。和错误信息一样，成功信息也应突出显示。但是不能阻碍用户继续填写表单。

6.验证

● 只在需要时验证。过多的验证跟完全没有的效果一样差，因为它们都会让用户受挫。验证仅限于确认关键信息（比如用户名的可用性），确保答案真实（不允许130岁以上的年龄）等。

● 智能缺省。使用智能缺省是为了让用户更快更准确填写表单。例如，根据用户的IP地址事先选定其国家。但是使用这些时要格外小心，因为用户一般不会去改变这些事先选定好的项。

Twitter的注册表单使用了动态验证（在姓名、邮箱、密码和用户名上）和智能缺省（“保持登录状态”）。

结束语，开端

结束语这个词用在这里不准确。让该文成为你新的起点，学习我在本文中讲述的，并把它们应用到你的表单中。可喜的是，关于所有的这些，仍有大量内容可讲，针对每一点，你可以发现大量的资源。正如我在文章开始说的，只调整UI，这一捷径不会让你的表单更好用。（编译/陈秋歌 责编/魏兵）

原文链接： An Extensive Guide To Web Form Usability