英文原文：
The Ultimate UX Design of Form Validation
引言
几年前当我第一次看到Twitter的表单验证时很惊讶. 对用户界面呆板厌烦的你应该知道我在说什么. 当时我几乎兴奋的要跳起来.
Twitter精心设计的分离式表单验证相当引人注意.当我输入错误时右侧弹出错误提示信息, 立即就能让我消除错误."在线验证"帮助我明白什么是正确的方向. 我能感受到这种简洁的形式是想跟我有个随时的对话. 这是一个启示! 我不必等待加载整个页面来检查这个表单添写的是否正确.
这个体验完全改变了我对表单的设计方法. 它让我明白表单验证意味着和用户的交流并引导他们改正错误和不确定的输入.
其它翻译版本 (1)
加载中
术语“表单验证”可能需要一些说明。表单验证是一门处理在一个web表单里检查用户提供的信息是否正确的技术。这个处理的输出结果更多是情绪上的而不是技术上的。表单或者指出用户操作错误，或者确认提供的数据是准确的。给你一个例子：如果一个用户在一个标签为“email address”的表单字段里提供了数据，表单应该检查提供的文本是否在正确的格式（user@example.com)和提供的e-mail地址是否已经注册了。
通常来说，有两种类型的表单验证：
- 提交后验证——当用户提供了所有数据同时提交表单之后，通常会点击按钮，信息会发送到服务器同时进行验证。“验证器”的返回信息发送会用户的电脑同时它显示一段确认的信息（“所有东西都正确！”）或者一系列的错误信息。
- 在线验证——验证信息在用户输入数据到表单字段后直接展示。通常，信息会展示在字段旁边同时鼓励用户采取直接行动。
表单验证的重要性
表单验证是web/手机浏览者与界面交互时重要的一个核心沟通流程。它的重要性远超过我们所认识到的，不相信我？试想一下你经常遇到的需要表单验证的情形:
在你的界面整个流程中这是一些重要的流程，不是吗？你业务方面的努力可能全体现在这里了。.
比较一下在线和离线两种状态下的不同，这会让事情进入一个熟悉的视角。让我们做一个简单的类比：表单验证相当于在购买东西之前和推销员之间的一次谈话-所有的事情还在成交的边缘上。如果推销员粗鲁无礼并且拒绝提供帮助，你自然会离开商店不买他的东西.。如果推销员很专业，有礼貌并且乐于助人-你就会乐意掏钱包了。
大多数表单验证都像是个粗鲁无礼的推销员。表单的错误提示信息形如：“数据库错误！”，“错误的邮箱地址！”这样的提示不仅没有礼貌-还会导致用户的高流失率。
缺乏沟通导致了不友好的业务设计，有很多类似的例子。Luke Wroblewski进行的研究清楚地表明了使用一个内联的表单验证将带来巨大的不同效果:
“相比我们的控制版本，内联验证表单对数据的验证信息显示更加醒目并且更加友好。尤其是，我们看到的:
- 增加了22%的成功率,
- 减少了22%的错误率,
- 增加31%的满意度,
- 完成时间缩短42%,
- 减少了47%时间的视觉停留。
这些不能被忽视。合理的表单验证设计可能会大幅的提升你的业务量！
我们来跳出理论进入实践，让我们看看在实际设计中什么才是最好的设计方法，并且通过循序渐进的方式来设计一个完美的表单验证。
兴奋了吧?
下面使用的每一个例子都可以在UXPin – The UX Design App下载.。
避免困惑
通常来说一个好的表单验证包含下面的四个重要元素:
- 合适的时间 通知验证的成功与失败
- 合适的地方 来显示验证信息
- 合适的颜色
- 清晰的表达
所有的这些元素有一个清晰的目标：避免困惑。困惑是表单转化的死敌。如果你不想冒用户流失率的风险，创建一个消除用户困惑的表单验证。这是一条通往高转化率的路子。
其它翻译版本 (1)
加载中
合适的时间
正如我们在Luke Wroblewski的研究例子中看到的-显示成功/失败信息的合适时间是在用户提交信息后。内联表单验证会立刻通知用户输入数据的正确性，这也提高了用户的转化率。
Twitter就是个典型的例子，他们做了大量的工作来避免用户产生困惑。
在下面的截图中你可以看到我试图使用一个已使用的邮箱地址注册，表单会提示我应该在第二步停下并且让我考虑其他备选方案，这样我就不会对最终的结果失望了。传统的“提交验证”需要等我填写完整个表单后，重新加载页面才让我知道哪些地方填写的不合理。
Twitter 选择了一个更好的时机让我们停下 - 这是毫无疑问的。立即响应的形式为我节省了大量的时间（是的，3分钟对于一天来说是个巨大的浪费）。
更棒的是什么 — Twitter实际上尝试作为一个熟人和我们进行一场谈话。多亏了内联验证，它可以立刻提供给我们一些选择。或许我是这个邮箱账号的主人，那么我只想登录?谁晓得呢-也许我只是忘记了密码？
这不仅是一个漂亮的表单验证，它也增加了表单的转化率；同时这也是一个顶级的客户服务。
Twitter 表单验证 – 错误信息
Twitter 表单验证 – 错误信心 – Upload Wireframing Template to UXPin
合适的位置
验证信息所在的显示位置与正确的显示时机一样重要。在讨论的Twitter例子中-如果提示信息不在文本域后面，而是在它下面，我就不会很快的注意到它。如果我没有留意它···好吧，这将产生了困惑，迫使我离开没有完成的表单。
当你疑惑把验证信息放在哪个位置时，遵循下面的一条原则-总是把信息放到操作的上下文中。如果你想通知用户一个特殊字段发生了错误-在文本域后面显示信息，如果错误是通用的（比如向服务器发送数据错误）并且没有刷新页面-可以在提交按钮后面显示信息，如果刷新了页面-在页面的顶部显示信息。
看看下面的例子。Light CMS把错误信息显示到了每一个文本域的下一行，这很容易注意和理解它。
Light CMS 表单验证 – Error Message
Light CMS 表单验证 – Upload Wireframing Template to UXPin
Etsy的表单也是一个很好的放置验证信息位置的例子。在这种情况下我也很喜欢表单的结构和错误信息的视觉效果。明确的划分成段（使用facebook注册，主要的注册表单）为注册流程提供了清晰的向导。
错误信息有了一个可视化的视觉效果-文本域使用红色边框标红并且有了一个红色的信息框-沟通的意图清晰明了。
这是一个消除表单困惑的好的尝试。
Etsy 表单验证 – Error Message
Etsy 表单验证 – Upload Wireframing Template to UXPin
如果表单的结构没有给你足够的空间显示清晰的错误信息，你可以使用Vimeo这种形式。
Vimeo 表单验证 – Error Message
Vimeo，使用提示条的形式来显示错误的字段信息，避免了布局的混乱。颜色的相关性也是很有用的，错误的字段红色的信息提示和一个红色的背景、边框相一致。
错误信息被放在了操作上下文的位置，提供了一个很好的沟通基础。
当然这里的问题是“提交验证”需要等到服务器验证通过后才能获取错误信息。然而，对于这样一个短小的表单，我不希望它是一个关键性的设计错误。
Vimeo Form Validation – Upload Wireframing Template to UXPin
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
