高效表单设计：结构、输入、标题和操作

【国外设计翻译第2期】

Translated by LuZiwen

用户使用你的APP或来到你的网站都有其各自的目标。目前，无论在网站还是APP中，表单对于用户来说还是最重要的交互形式之一。用户为了达成他的目标，经常需要完成一件事情：表单。事实上，表单经常是用户完成目标的最后一步。

表单仅仅是达成目标的一个途径。因此，用户应该能够快速、毫不疑惑地完成表单。

在本文中，读者可以看到由可用性实验（usability testing）、田野实验（field testing）、眼动实验（eye tracking），以及真实用户的意见所提炼出的有实际操作性的指南。

表单的组成

1个典型的表单有以下5个组成部分：

· 结构：包括字段的排序、页面的样式以及各类字段之间的逻辑联系。

· 输入字段：包括文本框、密码框、单选框、复选框、滑块，以及其他需要用户输入的字段。

· 字段标签：即告诉用户对应的输入字段的含义。

· 操作按钮：当用户点击操作按钮的时候，就会执行操作。举个例子，按下按钮就提交数据。

· 反馈：反馈能够帮助用户理解输入的结果。大多数APP和网站使用“消息”来作为反馈的形式。“消息”通知用户操作的结果，可能是积极的（例如，表明表单已经成功提交），也可能是消极的（“你所提供的号码不正确”）。

有的表单也可能还有以下几个部分：

· 协助性信息：任何向用户解释如何填写表格的东西。

· 有效性验证：自动校验可以保证用户的数据是有效的。

本文将涵盖有关结构、输入字段、字段标签和操作按钮的多个方面。

---

结构

每个表单就是一次和用户的会话。和所有对话一样，对话体现为双方有逻辑性的交流，也就是用户和你的APP之间。

只询问必要的问题

只询问用户你真正需要的东西。你添加的每一个额外的输入框都会影响转化率。因此，你应该始终反问自己：你为什么要向用户要这些信息，以及你是如何使用这些信息的。

根据用户逻辑安排问题

从用户的角度考虑设置的问题是否符合逻辑，而不是从APP或者数据库的角度。举个典型的例子，先问用户的地址，再问用户姓名，就非常不符合用户的思维。

整合相关信息

把相关信息组合到逻辑相关的区域或者组中。当对话是由一系列问题组成的信息流时，双方能更好地交流。同理，表单中的各个问题根据内容分成不同的系列，也能更好地组织表单。此外，将相关信息整合，也帮助了用户理解他们要填写的信息。

下面是一个通讯录的例子。

一列Vs多列

表单绝对不能超过一列。有多列的表单很容易让用户产生误解。如果一个表单水平上有相邻的多列输入框，用户会呈“Z字型”查看表单，这会减缓用户的理解速度，并且混乱完成任务的用户路径。但如果表单只有一列，用户就能直线型地浏览页面，完成任务的用户路径就更加清晰。

---

输入字段

输入字段就是允许用户填写东西的地方。根据表单要求的信息类型，就有多种的输入框：文本输入框

密码输入框、下拉菜单、复选框、单选框、日历选择器等等。

输入框的数量

尽可能减少输入框的数量。特别是当你要求用户填写很多信息的时候，这可以让表单看上去没那么复杂。不过，也不要过分精简。没人会喜欢看上去只有3个输入框，但实际要填写30个输入框的内容。

强制填写项Vs选填项

在表单中尽量避免可选填的字段。但是，如果你一定要使用可选填的字段，你至少应该清楚地标明哪个输入框用户是必须填写的。现在的惯例是使用星号（*）或者“选填”字样来标明（“选填”字样对于有多种要求填写的长表单比较合适）。

设置默认值

应该避免静态的默认值，除非你的大多数用户（比如90%）会选择这个值。尤其是那些必填的输入框，更不应该使用静态的默认值。为什么呢？因为用户在线浏览表格的速度是非常快的—不要预先假设他们会花时间解析所有选项。因此，他们可能会漫不经心地跳过某些已经有默认值的输入框，这就造成错误了。

不过，适当的默认值可以帮助用户更快更准确地完成表单。举个例子，根据用户的地理位置数据预先选择好用户的国家。但是，你还是应该谨慎使用默认值，因为用户倾向于忽略那些有预填项的输入框。

使表单的键盘更加友好（仅针对桌面端）

应该做到能让用户只使用键盘就可以激活和编辑每个输入框。那些键盘的重度用户，应该能够使用“Tab”键，在输入框中便捷地切换和进行必要的编辑，而不需要把他们的手指从键盘上移开。在以下网站可以查阅到详细的键盘交互模式：http://www.w3.org/TR/wai-aria-practices/#aria_ex

输入框自动聚焦（仅针对桌面端）

输入框自动获取焦点可以提示用户表单的起点，让用户可以快速开始填写表单。你应该向用户提供一个清晰明显的视觉“告示”，表明焦点已经移到了所指位置：颜色变化、字段渐隐、光标跳动等等。亚马逊的注册表单既自动获取焦点，又给出了视觉提示。

为输入框匹配合适的键盘（仅针对移动端）

用户喜欢为输入框提供合适的键盘的APP。你需要确定这一点统一地贯彻于整个APP，不要仅针对某个人任务。

---

字段标签

清晰易懂的标签文本是使UI更可用的一个主要途径。标签告诉了用户这个输入框的目的，在输入框获取焦点的时候有用，在完成输入后也是有用的。

文字的数量

标签不是协助性文字。你应该使用简明的、简短的和描述性的文字（一个或两个词）作为标签，这样用户可以快速浏览你的表单。亚马逊注册表单的早期版本，有较多的多余的词，导致完成率下降。

现在的版本好多了，使用的就是短标签。

句子形式Vs标题形式{译者注：这一点可能和中文表单关系不是很大}

应该是“Full Name”还是“Full name”？句子形式比标题形式读起来更快更简单。但是你也不能全部使用大写字母。因为这时候字母间就没有高度差，用户很难去阅读你的表单，也无法进行快速浏览。

标签的对齐方式：左对齐Vs右对齐Vs顶部对齐

Matteo Penzo 2006年有关标签位置的文章（原文地址：http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php）表明标签在输入框上面的表单能更快地被填完。如果你希望用户尽可能快地浏览表单，这种表单就很合适。

然而，进一步研究（原视频地址：https://www.slideshare.net/cjforms/labels-and-buttons-on-forms）表明顶部对齐标签和右对齐标签没有明显区别。

顶部对齐标签。顶部对齐标签的一大优势—它能使不同大小的标签和不同的语言版本更容易适配UI（这点对区域有限的移动端屏幕来说特别好）。

左对齐标签。左对齐标签的最大劣势—相对而言，最长的填写时间。这很有可能是因为标签和输入框之间的视觉距离。标签越短，它离输入框的距离就越长。但是，慢完成率并不总是坏事，特别是当表单需要的是重要数据的时候。如果你要求用户填写的是司机驾照或是社保号码，你可能就希望用户慢一点，确保他们自己填写的东西是正确的。

右对齐标签。右对齐标签的最大优势—标签和输入框之间有很强的视觉联系。因为靠在一起的东西会显得具有相关性。把相关的东西放在一起的原则并不是什么新鲜事。事实上，它就是格式塔心理学的接近原则。对于短表单来说，右对齐标签有更好的完成率。不过，右对齐标签的劣势在于舒适度。右对齐标签的表单的左边边缘是不整齐的，这使它看上去不怎么舒服并且不便于阅读。

总结：如果你希望你的用户快速浏览表单，把你的标签放在输入框上面。这种排版更易于阅读，用户可以从上到下浏览表单。然而，如果你想要你的用户仔细阅读，把标签放在输入框左边。这种排版读起来相对慢，用户是“Z字形”浏览表单的。

行内标签（占位文本）

占位文本对于简单的用户名和密码表单来说特别好用。

但是当有很多信息的时候，这是一个很差的体验。是的，他们很流行，是的，他们看起来挺好看的。但是，当用户点击了输入框，行内标签就消失了，用户无法再次确认他们写的是不是表单所要求的信息。此外，如果用户看到文本框里已经有文字了，他们可能会以为这里已经预先填好了，然后直接忽略他们。

占位文本有个不错的解决方法就是浮动标签。文本框内默认显示占位文本，当用户点击输入框并输入文本的时候，占位文本就逐渐消失，作为顶部标签出现（最好添加适当的动画效果，展示这个变化的过程）。

总结：不要完全依靠行内标签，也不要依靠字段标签。一旦输入框被填上内容后，用户就再也看不见占位文本了。你可以使用浮动标签来帮助用户确认自己填写了正确的内容。

---

操作按钮

当用户点击的时候，这种按钮就触发一个操作，比如提交表单。

主要用户操作Vs次要操作

首要操作和次要操作如果没有明显的视觉区分，会很容易导致失误。减少次要操作的视觉突出，可以最小化潜在的失误，进一步引导用户达到预期的结果。

按钮位置

复杂的表单往往需要一个撤销按钮。如果这样的按钮放在输入区域的右下方，用户可能会不小心点到它。由于撤销按钮是次要操作按钮，它应该被放在用户的视线之外。【】

命名规则

避免使用通用的词语，例如“提交”，因为他们会给人这样的印象：这个表格自己也是通用的。因此，应该使用点击这个按钮所要发生的操作作为按钮的名称，例如“提交我的免费账户”“为我发送每周报价”。

多操作按钮

避免多操作按钮，因为它可能会分散用户完成目标（提交表单）的注意力。

重置按钮是个魔鬼

不要使用重置按钮。如果重置按钮能真正消失的话，网站会成为一个更美好的地方。这个按钮几乎从未帮助过用户，反而经常伤害用户。

视觉外观

确保操作按钮看上去像个按钮。把按钮设计成弹起来的样式，以此标明他们是可以被点击的。有关按钮的更多信息可以读另外一篇文章《Button UX Degisng: Best Practices, Types and State》。（原文地址：https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.gpoihk2f0 ）{译者注：粗略读了一下这篇文章，文章内容为概括性地总结了按钮的各个方面，包括外观、位置、名称、形状、状态（正常、获得焦点、按下、不可用）。还提炼了按钮的五种样式：立体按钮、扁平按钮、切换按钮/开关按钮、隐形按钮/幽灵按钮、悬浮按钮。}

视觉反馈

你应该把你的“提交”按钮设计成这样的：用户点击“提交”按钮之后，能够清楚地明白这个表单正在处理中。这给用户提供了反馈，同时也避免了用户重复提交。

---

结论

当面对表单时，用户可能会很犹豫，所以你应该让填写表单的过程尽可能简单。细小的改变—比如整合内容相关的输入框并说明每块区域所要收集的信息—可能就会很大的提高表单的可用性。在表单设计中，可用性测试不可或缺。通常，进行一些小测试或者邀请你的同事完成一遍你所设计的表单原型，你就可以充分了解这个表单的可用性如何。

有关上文提到的协助性信息和有效性验证，可以进行扩展阅读，《Designing More Efficient Forms: Assistance and Validation》。（原文地址：https://uxplanet.org/designing-more-efficient-forms-assistance-and-validation-f26a5241199d#.luuaek9l1）{译者注：粗略读了一下这篇文章，文章内容分为两块。第一块有关协助性信息的：对于特殊的、有关隐私的、帮助用户计算的，都可以给出协助信息。也可以提供动态协助信息，但要注意动态框会不会对其他信息造成遮挡。第二块有关有效性验证和反馈的：在合适的时间和位置，使用合适的颜色提供有效性验证，并需要给出如何更改的反馈。}

原文链接：