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

2017-07-09 16:04:00

通常，使用你的应用或网站的人都会有一个特定的目标。而表单恰恰就是介于用户和目标之间的桥梁。表单目前仍然是网络和应用程序中用户最重要的互动类型之一。事实上，表单被认为是完成目标的最后一步。你的目标就是让用户快速完成填写，而不会让用户感到混淆。

在本文中，你将看到从可用性测试、现场测试，眼动跟踪研究和实际案例中用户的投诉中收集来的实用技术。这些技术 - 正确使用时，使设计人员能够生成更快，更简单和更高效的表单体验。有一种方法可以创建和设计自己的原型：你只需下载Adobe XD（免费）即可开始使用。在文章结尾处，你还将找到设计表单的新方法。

表单的组件

典型的表表单以下五个组成部分：

结构
这包括字段的顺序，表单在页面上的外观以及多个字段之间的逻辑连接。
输入字段

这些包括文本字段，密码字段，复选框，单选按钮，滑块和为用户输入而设计的任何其他字段。

字段标签

这些告诉用户相应的输入字段是什么意思。

操作按钮

当用户按下此按钮时，执行操作（如提交数据）。

反馈

用户通过反馈了解其输入的结果。大多数应用程序和网站都使用纯文本作为反馈形式。消息将通知用户有关结果，反馈可以是积极的（表示表单提交成功）或否定（“您提供的号码不正确”）。

表单也可能包含以下组件：

帮助

这是如何填写表单的说明。

验证

自动检查确保用户的数据有效。

本文涉及与结构，输入字段，标签，操作按钮和验证有关的许多方面。

表格结构

表单是一种对话类型。和任何对话一样，它应该由双方之间的逻辑沟通组成：用户和应用程序。

只问必需的东西

确保只问你真正需要什么。你添加到表单的每个额外字段将影响其转化率。一定要考虑为什么要从用户那里请求某些信息以及如何使用它。

表单排序逻辑

从用户的角度逻辑地询问详细信息，而不是从应用程序或数据库的角度。通常，在问用户的名字之前要求某人的地址是不好的。

将相关信息分组在一起

将相关信息组合成逻辑块或集合。从一组问题到下一个问题的流程将更好地类似于一个对话。将相关领域分组在一起，也将帮助用户了解他们必须填写的信息。请在下面的联系信息表中比较它的工作原理。

一列VS.多列
将表单域排列成多个列的问题之一是用户可能会不一致地解释这些字段。如果表单具有水平相邻的字段，则用户必须以Z形状扫描表单，这会减慢理解速度。但是，如果表单位于单个列中，则完成的路径是页面上的直线。
- 输入字段
  输入字段是用户填写表单的方式。你需要的信息的各种类型的字段有：文本字段，密码字段，下拉列表，复选框，单选按钮，日期选择器等。
  字段数量
  表单设计中的经验法则是越短越好。这是很直观的：用户完成表单所需的时间越短将带来更高的转换。因此，尽量减少字段的数量。这将使你的表单看起来加载的东西比较少，特别是当你要求很多信息时。在给定时间只显示五到七个输入字段是常见的做法。
  强制 VS. 可选
  尽量避免表单中的可选字段。但是如果你要使用它们，至少要明确区分哪些输入字段不能留空。惯例是为必填字段使用星号（*），对于非必填字段使用“可选”字样（最好在有多个必填字段的长表单中使用）。如果你决定使用星号作为必填字段，请在表单底部显示一个提示，说明星号是什么，因为并不是每个人都明白这是什么意思。
  设置默认值
  避免设置默认值，除非你认为大部分用户（例如，其中90％的用户）将选择该值。特别是避免在必填字段中使用。为什么？因为你可能会引入错误。人们会快速扫描在线表单，所以不要以为他们会花时间来仔细看所有的选择。他们可能会跳过已经有默认值的东西。
  但是，此规则不适用于智能默认值，即基于有关用户可用信息设置的值。智能默认值可以使表单更快更准确。例如，根据地理位置数据预先选择用户的国家/地区。不过，请谨慎使用它们，因为用户往往会保留预选的字段。
  Input Masks
  Input mask是一种帮助用户格式化输入文本的技术。在字段被填写时将自动应用格式化文本，从而帮助用户专注于所需的数据并更容易地注意到错误。在下面的示例中，随着手机和信用卡号码的输入，自动应用括号，空格和破折号。这种简单的技术可以节省填写电话号码，信用卡，货币等等的时间和精力。
  （
  桌面专用：使键盘对表单友好
  用户应该只能使用键盘来专注和编辑每个字段。倾向于使用键盘的高级用户应该能够轻松地勾选和编辑字段，而无需把离开键盘。你可以在 [W3C的设计模式指南中找到键盘交互的详细要求](https://www.w3.org/TR/wai-aria-practices/# aria_ex)。
  即使是一个简单的日期选择器也应遵循W3C的指导方针。
  桌面专用：输入字段时自动对焦
  自动对焦一个字段为用户提供了一个指示和起点，以快速开始填写表单。提供一个清晰的视觉信号，焦点已经移动到那里，无论是通过改变颜色，在框中褪色，闪烁箭头，无论如何。亚马逊的注册表格具有自动对焦和视觉指标。
  仅限移动设备：将键盘与输入相匹配
  手机用户更喜欢为输入文字提供适当键盘的应用程序。在整个应用程序中实现这一点，而不仅仅是为了某一个任务。
  减少打字（Autocomplate）
  随着越来越多的人使用移动屏幕，如果你能让用户少打字，这就能极大改善用户体验和减少错误。自动完成可以让用户减少打字。例如，填写地址字段通常是任何注册表单中最有问题的部分。诸如 Place Autocomplete Address Form（使用地理位置和地址预填充功能的工具可以根据用户的确切位置提供准确的建议），使用户能够以比常规输入字段更少的按键来输入地址。
  标签
  明确书写的标签是使UI更易于访问的主要方式之一。一个好的标签将会告诉用户该字段的目的。
  字数
  标签不是help文本。使用简洁，简短的描述性标签（一两个字），以便用户可以快速浏览你的表单。以前版本的Amazon的注册表单包含很多单词，导致完成率很慢。目前的版本好多了，标签很短。
标签对齐：左对齐右对齐顶部对齐
Matteo Penzo 2006年关于标签放置的文章表明，如果标签位于字段之上，则表单会更快地完成。如果你希望用户尽快浏览表单，顶部对齐的标签是很好选择的。
顶部对齐标签的最大优点是不同尺寸的标签和本地化版本可以更容易地适应UI。（这对于空间有限的屏幕特别好）
左对齐标签的最大缺点是完成时间最慢。这可能是因为标签和输入字段之间的视觉距离。标签越短，输入越远。然而，缓慢的完成率并不总是一件坏事，特别是当表单要求的是敏感数据。如果你要求的是驾驶执照号码或社会安全号码，你可能会故意放慢用户的速度，以确保其正确输入。因此，读取敏感数据标签所花费的时间并不重要。左对齐标签具有另外的缺点：它们需要更多的水平空间，这可能是移动用户的问题。
右对齐标签的最大优点是标签和输入之间的强大的视觉连接。靠近的物品似乎是相关的。这个原则不是新的; 它来自于格式塔心理学的邻近定律。对于简短的形式，右对齐的标签可以有很好的完成时间。缺点是这种形式缺乏左边缘，这使得看起来更难受，更难阅读。
Note ：如果你希望用户快速扫描表单，请将标签放在字段上方。布局将更容易扫描，因为眼睛将直接向下移动页面。但是，如果你希望用户仔细阅读，请将标签放在字段的左侧。这种布局会减慢阅读器的速度，并使其以Z形运动浏览表单。
内联标签（占位符文本）
在输入字段中设置为占位符的标签将在输入域获得焦点后消失; 用户将无法再查看。虽然占位符文本可能适用于两个字段的形式（简单的用户名和密码字段的登录表单），但是需要从用户处更多信息时，这对于可视化标签来说是一个很差的替代品。
一旦用户点击输入字段，标签就会消失，因此用户无法仔细检查他们是否写了要查询的内容。这增加了错误的几率。另一个问题是用户可能会将占位符文本误认为是预先填充的数据，因此忽略它（ Nielsen Norman Group的眼动跟踪研究证实）。
占位符文字的一个很好的解决方案是浮动标签。默认情况下会显示占位符文本，但是一旦输入了文本，占位符文本会淡出，但是顶部对齐的标签将生效。
Note：不要只依靠占位符; 包括一个标签，因为一旦一个字段已经填写，占位符将不再可见。使用浮动标签，以便用户确信已填写正确的字段。
动作按钮
单击时，操作按钮会触发某些活动，例如提交表单。
主要的 VS. 次要操作
初级和次级动作之间缺乏视觉上的区别很容易导致失误。减少次要行为的视觉突出性可以最大限度地减少错误的风险，并强化人们成功取得成功的途径。
按钮位置
复杂形式通常需要一个后退按钮。如果这样的按钮位于输入字段的正下方（如下面的第一个屏幕截图），用户可能会意外点击它。因为后退按钮是次要操作，所以需要使其更少可访问（下面的第二个表单具有按钮的正确位置）。
命名约定
避免使用通用单词，例如“提交”操作，因为它们给人的印象是表单本身是通用的。相反，最好说明按钮在单击时将执行什么操作，例如“创建我的帐户”或“订阅每周优惠”。
多个动作按钮
避免使用多个操作按钮，因为它们可能会使用户分散用户提交表单的目的。
重置按钮是很危险的
不要使用复位按钮。这个按钮几乎永远都不会帮助到用户。如果所有复位按钮都被删除，网页会更美好~
视觉外观
确保操作按钮看起来像按钮：暗示用户可以点击或轻碰它们。
视觉反馈
设计“提交”按钮，方式是清楚地表明用户在操作后正在处理表单。这样可以在防止双重提交的同时向用户提供反馈。
验证
表单验证错误是不可避免的，并且是数据输入的一个自然部分（因为用户容易出错）。是的，容易出错的情况应该最小化，但验证错误永远不会被消除。所以最重要的问题是，如何使用户从错误中恢复？
内联验证
用户不喜欢只能在提交后才会发现他们填写时的错误。让你特别不爽的是当你千辛万苦完成一个长的表单，按“提交”后，你会收到多条错误消息。当不清楚你所犯的错误和在哪里时，这更麻烦了。
一旦用户输入数据，验证应通知用户正确的文本。良好表单验证的主要原则是：与用户交谈！告诉他们是什么错！实时内联验证立即通知用户其数据的正确性。这种方法允许他们更快地纠正任何错误，而不必等到他们按“提交”按钮来查看错误。
但是，避免对每个按键进行验证，因为在大多数情况下，只有在完成键入答案之后才能验证。
另一方面，数据输入后验证的表单不会很快通知用户他们已经修复了错误。
MihaelKonjević在他的文章“ [在线验证形式：设计经验](https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce# .fl86493cl) ”中，研究了不同的验证策略，并提出了一种满足双方的混合策略：早期奖励，惩罚迟到。
- 如果用户在处于有效状态的字段中输入数据（即先前输入的数据有效），则在数据输入后进行验证。
- 如果用户在处于无效状态的字段中输入数据（即先前输入的数据无效），则在数据输入期间进行验证。
保护数据
杰夫·拉斯金曾经说过：“系统应该把所有的用户输入视为神圣的。”这对于表单是绝对正确的。当你开始填写表单，意外刷新页面但数据仍保留在字段中时，这是会让用户非常开心的。像 Garlic.js这样的工具可以帮助你在表单中提供表单的本地值。这样，如果用户意外关闭标签页或浏览器，用户将不会丢失任何宝贵的数据。
对话界面：设计表单的新方式
最近，我们已经看到了很多关于会话界面形式的表单的兴起。有几个趋势正在促成这一现象，特别是人们在消息应用中花费的时间比在社交网络上花费更多的时间这一点。这导致了许多实验，支持一系列交互，如线索对话中的购物，通常以模仿消息传递的方式。即使在这种趋势下，网络形式的元素已经发生了变化。设计师正在将传统的网络表单转化为交互式会话界面。
自然语言界面
每个界面都是一个对话。传统表单（我们每天设计的）与会话非常相似。唯一的区别是我们问问题的方式。但是，如果我们设计了我们的表单来以更加真实的人（而不是机器）对话的格式提出问题呢？所以，而不是按照自己的不人道的条件与机器进行通信，你可以与你的机器进行交互。下面所示的表单创建一个会话上下文，便于理解，而不依赖于Web表单的传统元素（如标签和输入字段）。
对话表单
对话表单是一种开源概念，可以将网页上的任何形式轻松转换为会话界面。它用会话替换所有输入元素，可重复使用的变量，以前的问题，以及完整的定制和控件的样式。这个项目代表了我们如何思考用户体验和交互的一个有趣的转变，这更倾向于基于文本的对话，以帮助用户实现他们的目标。
结论
用户很可能不愿意填写表单，所以使过程尽可能简单。次要更改 - 例如分组相关字段并指示每个字段中的信息 - 可以显着提高可用性。可用性测试在表单设计中是不可或缺的。很多时候，只用几个人进行测试，或者只是要求一位同事通过一个原型，就可以很好地洞察一个表单的可用性。