网页设计中表单应该如何设计更高效，用户体验更好

使用您的应用或网站的人有一个特定的目标。通常，站在用户和他们的目标之间的一件事是一种形式。表单仍然是网络和应用程序中用户最重要的互动类型之一。事实上，形式通常被认为是完成目标的最后一步。表格只是一种手段。用户应该能够快速完成并且没有混淆。

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

形式

典型的形式有以下五个组成部分：

• 结构
  这包括字段的顺序，表单在页面上的外观以及多个字段之间的逻辑连接。
• 输入字段
  这些包括文本字段，密码字段，复选框，单选按钮，滑块和为用户输入设计的任何其他字段。
• 字段标签
  这些告诉用户相应的输入字段是什么意思。
• 动作按钮
  当用户按下此按钮时，执行动作（如提交数据）。
• 反馈
  用户通过反馈了解其输入的结果。大多数应用程序和网站使用纯文本作为反馈形式。消息将通知用户有关结果，并且可以是积极的（表示表单提交成功）或否定（“您提供的号码不正确”）。

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

• 帮助
  这是如何填写表单的任何说明。
• 验证
  此自动检查确保用户的数据有效。

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

表格结构

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

只要求什么

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

订购表格逻辑

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

组相关信息

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

一列可以 多栏

将表单域排列成多列的问题之一是用户可能会不一致地解释这些字段。如果表单具有水平相邻的字段，则用户必须以Z模式进行扫描，减慢理解速度并使路径变得完整。但是，如果表单位于单个列中，则完成的路径是页面上的直线。

输入字段

输入字段是用户填写表单的方式。存在所需信息的各种类型的字段：文本字段，密码字段，下拉列表，复选框，单选按钮，日期选择器等。

字段数

形式设计中的一个经验法则是更短更好。这当然看起来很直观：用户的努力减少将导致更高的转换。因此，尽量减少字段的数量。这将使您的表单感到更少的加载，特别是当您要求很多信息时。但是，不要过度; 没有人喜欢变成30场询问的三场形式。在给定时间只显示五到七个输入字段是常见的做法。

强制性 可选

尽量避免表单中的可选字段。但是如果你使用它们，至少要明确区分哪些输入字段不能留空。惯例是为必填字段使用星号（*），对于非必填字段使用“可选”字样（以多个必填字段为前提）。如果您决定使用星号作为必填字段，请在表单底部显示一个提示，说明星号是什么，因为并不是每个人都明白这是什么意思。

设置默认值

避免设置默认值，除非您认为大部分用户（例如，其中90％的用户）将选择该值。特别避免需要的字段。为什么？因为你可能会引入错误。人们快速扫描在线表格，所以不要以为他们会花时间来解析所有的选择。他们可能会跳过已经有价值的东西。

但是，此规则不适用于智能默认值 – 也就是说，根据有关用户的信息设置的值。智能默认可以使表单更快更准确。例如，根据地理位置数据预先选择用户的国家/地区。不过，请谨慎使用这些，因为用户往往会保留预选的字段。

输入掩码

场屏蔽是一种帮助用户格式输入文本的技术。一旦用户将焦点放在一个字段上，就会出现一个掩码，并且会在字段被填写时自动格式化文本，帮助用户专注于所需的数据并更容易地注意到错误。在下面的示例中，随着手机和信用卡号码的输入，自动应用括号，空格和破折号。这种简单的技术可以节省电话号码，信用卡，货币等等的时间和精力。

仅桌面：使键盘友好

用户应该只能使用键盘专注和编辑每个字段。倾向于使用键盘的高级用户应该能够轻松地勾选和编辑字段，而不用把手指从键盘上拉出来。您可以在W3C的设计模式指南中找到键盘交互的详细要求。

仅桌面：输入字段的自动对焦

自动对焦一个字段给用户一个指示和起点，以快速开始填写表单。提供一个清晰的视觉信号，焦点已经移动到那里，无论是通过改变颜色，在框中褪色，闪烁箭头，无论如何。亚马逊的注册表格具有自动对焦和视觉指标。

仅限移动设备：将键盘与输入连接相匹配

手机用户欣赏为正在请求的文字提供适当键盘的应用程序。在整个应用程序中实现这一点，而不仅仅是为了某些任务而不是其他任务。

限制打字（自动完成）

随着越来越多的人使用移动屏幕，任何可以做的事情，以防止不必要的打字将改善用户体验和减少错误。自动完成可以消除大量的打字。例如，填写地址字段通常是任何注册表单中最有问题的部分。诸如Place Autocomplete Address Form（使用地理位置和地址预先填充以提供基于用户确切位置的准确建议）的工具使用户能够以比常规输入字段更少的按键输入其地址。

标签

明确书写的标签是使UI更易于访问的主要方式之一。一个好的标签告诉用户该字段的目的，当焦点在字段本身时保持其有用性，并且即使在字段已被填写之后仍然可见。

字数

标签不是帮助文本。使用简洁，简短的描述性标签（一两个字），以便用户可以快速扫描您的表单。以前版本的Amazon的注册表单包含很多单词，导致完成率很慢。目前的版本好多了，标签很短。

句子案例 标题案例

在今天的大多数数字产品中，有两种方式来利用单词：

• 标题案例：大写每个字。“这是标题案例”。
• 句子：大写第一个字。“这是句子”。

用于标签的句子案例比标题案例有一个优点：它稍微更容易（因此更快）阅读。虽然短标签的差异可以忽略不计（“全名”和“全名”），但对于较长的标签，句子情况更好。现在你知道在标题中读长文有多困难。

避免所有CAPS LINK

切勿使用所有盖帽，否则表单将难以阅读，并且难以快速扫描，因为字符高度不会有变化。

标签对齐：左对齐 右对齐 热门

Matteo Penzo 2006年关于标签放置的文章表明，如果标签位于领域之上，则表单更快地完成。如果您希望用户尽快扫描表单，顶部对齐的标签很好。

顶部对齐标签的最大优点是不同尺寸的标签和本地化版本可以更轻松地适应UI。（这对于空间有限的屏幕特别好）

左对齐标签的最大缺点是完成时间最慢。这可能是因为标签和输入字段之间的视觉距离。标签越短，输入越远。然而，缓慢的完成率并不总是一件坏事，特别是如果表单要求敏感数据。如果您要求驾驶执照号码或社会安全号码，您可能会故意减慢用户的速度，以确保其正确输入。因此，读取敏感数据标签所花费的时间并不重要。左对齐标签还有一个缺点：它们需要更多的水平空间，这可能是移动用户的问题。

右对齐标签的最大优点是标签和输入之间的强大的视觉连接。靠近的物品似乎是相关的。这个原则不是新的; 它从派生接近的法律，从格式塔心理学。对于简单的形式，右对齐的标签可以有很好的完成时间。缺点是不适; 这样的形式缺乏硬的左边缘，这使得看起来更难舒服，更难阅读。

外卖：如果您希望用户快速扫描表单，请将标签放在栏位上方。布局将更容易扫描，因为眼睛将直接向下移动页面。但是，如果您希望用户仔细阅读，请将标签放在字段的左侧。这种布局会减慢阅读器的速度，并使它们以Z形运动扫描。

内联标签（占位符文本）

在输入字段中设置为占位符的标签将在场获得焦点后消失; 用户将无法再查看。虽然占位符文本可能适用于两个字段的形式（带有用户名和密码字段的简单登录表单），但是从用户需要更多信息时，它是可视化标签的替代品。

一旦用户点击输入字段，标签将消失，因此用户不能仔细检查他们是否写了要查询的内容。这增加了错误的几率。另一个问题是用户可能会将占位符文本错误地用于预填充数据，因此忽略它（如尼尔森诺曼集团的眼动跟踪研究证实）。

占位符文本的一个很好的解决方案是浮动标签。默认情况下会显示占位符文本，但一旦输入字段被点击并输入文本，则占位符文本会淡出，并且顶部对齐的标签将生效。

外卖：不要只依靠占位符; 也包括标签，因为一旦字段已经填写，占位符将不再可见。使用浮动标签，以便用户确信已填写正确的字段。

动作按钮

单击时，操作按钮会触发一些活动，例如提交表单。

主要的 次要操作

初级和次级动作之间缺乏视觉上的区别很容易导致失败。降低次要行为的视觉突出性可以最大限度地减少错误的风险，并强化人们成功取得成功的途径。

按钮位置

复杂形式通常需要一个后退按钮。如果这样的按钮位于输入字段的正下方（如下面的第一个屏幕截图），用户可能会意外点击它。因为后退按钮是次要操作，所以使其更少可访问（下面的第二个表单具有按钮的正确位置）。

命名约定

避免使用诸如“提交”这样的通用单词，因为它们给人的印象是表单本身是通用的。相反，说明按钮在单击时将执行什么操作，例如“创建我的帐户”或“订阅每周优惠”。

多个动作按钮

避免使用多个操作按钮，因为它们可能会使用户分散用户提交表单的目的。

重置按钮是纯邪恶的

不要使用复位按钮。这个按钮几乎从来没有帮助用户，经常伤害他们。如果几乎所有重置按钮被删除，网页将会更快乐。

视觉外观

确保操作按钮看起来像按钮：指示可以点击或点击它们。

视觉反馈

设计“提交”按钮，方式是清楚地指示用户在操作后正在处理表单。这样可以在防止双重提交的同时向用户提供反馈。

验证

表单验证错误是不可避免的，并且是数据输入的一个自然部分（因为用户容易出错）。是的，容易出错的情况应该最小化，但验证错误永远不会被消除。所以最重要的问题是，如何让用户从错误中恢复呢？

内联验证

用户不喜欢完成填写表单的过程，只能在提交后发现他们发生错误。特别令人沮丧的是完成一个长的表格，按“提交”后，您会收到多条错误消息。当不清楚你所犯的错误和在哪里时，这更烦人了。

验证应在用户输入数据后立即通知用户文本的正确性。良好形式验证的主要原则是：与用户交谈！告诉他们是什么错！实时在线验证立即通知用户其数据的正确性。这种方法允许他们更快地纠正任何错误，而不必等到他们按“提交”按钮来查看错误。

但是，避免对每个按键进行验证，因为在大多数情况下，您无法验证，直到有人输入答案为止。在数据输入期间验证的表单在用户开始输入数据时立即对用户进行惩罚。

另一方面，在数据输入后验证的表单不会很快通知用户他们已经修复了错误。

MihaelKonjević在“ 在线验证形式：设计经验”的文章中，研究了不同的验证策略，并提出了一种满足双方的混合策略：早点奖励，惩罚迟到。

• 如果用户在处于有效状态的字段中输入数据（即先前输入的数据有效），则在数据输入后验证。
• 如果用户在处于无效状态的字段中输入数据（即先前输入的数据无效），则在数据输入期间进行验证。

保护数据

杰夫·拉斯金（Jef Raskin）曾经说过：“系统应该把所有的用户输入视为神圣的。”这对于表单是绝对正确的。当您开始填写表单，然后意外刷新页面但数据保留在字段中时，这是非常好的。像Garlic.js这样的工具可以帮助您在表单中提供表单的值，直到表单提交。这样，如果用户意外关闭标签页或浏览器，用户将不会丢失任何宝贵的数据。

对话界面：设计表单的新方式

最近，我们已经看到了很多关于会话界面和聊天室的兴奋。有几个趋势正在促成这一现象，但特别是人们在消息应用中花费的时间比在社交网络上花更多的时间。这导致了许多实验，支持一系列的交互，如购物，线程对话，通常以模仿消息传递的方式。即使在这种趋势下，网络形式的元素已经发生了变化。设计师正在将传统的网页形式转化为交互式会话界面。

自然语言界面

每个界面都是一个对话。传统形式（我们每天设计的）与谈话非常相似。唯一的区别是我们问问题的方式。但是，如果我们设计表单以更加真实的反映真实的人（不是机器）对话的格式来提问问题呢？所以，而不是用一个不人道的话来与一台机器进行通信，你可以和你的机器进行交互。下面显示的形式创建一个会话上下文，有助于理解，而不依赖于Web表单的传统元素（如标签和输入字段）。

对话形式

对话形式是一种开放源代码的概念，可以将网页上的任何形式轻松转换成对话界面。它具有会话替换所有输入元素，以前的问题的可重用变量，以及对样式的完整定制和控制。这个项目代表了我们如何思考用户体验和交互的一个有趣的转变，更倾向于基于文本的对话，以帮助用户实现他们的目标。

结论

用户可能不愿意填写表单，所以使过程尽可能简单。次要更改 – 例如分组相关字段并指示每个字段中的信息 – 可以显着提高可用性。可用性测试在表单设计中是不可或缺的。很多时候，只用几个人进行测试，或者只是要求一位同事通过一个原型，可以很好地洞察一个表单的可用性。