表单验证设计的用户体验基本原则

喜欢ヅ旅行 2022-07-14 06:42 164阅读 0赞

> 本文整理自[表单验证设计的用户体验基本原则][Link 1]  
> 查资料时无意中遇到这篇文章，感觉很有帮助，于是截取了部分内容，对文章结构进行分类（两种类型、五个原则、一个工具），同时也添加了一些自己的内容。

## 两种类型 ##

**提交后验证**

当用户提供了所有数据同时提交表单之后，通常会点击按钮，信息会发送到服务器同时进行验证。“验证器”的返回信息发送会用户的电脑同时它显示一段确认的信息（“所有东西都正确！”）或者一系列的错误信息。

**在线验证**

验证信息在用户输入数据到表单字段后直接展示。通常，信息会展示在字段旁边同时鼓励用户采取直接行动。

## 五个原则 ##

*  **合适的时间**
 *  **合适的位置**
 *  **恰到好处的颜色**
 *  **合理的表单结构**
 *  **清晰的表达**

**合适的时间**

> 在用户输入信息后，立刻显示验证的成功/失败信息。

一个常见的例子是，当用户在填写注册表单时，输入了用户名/邮箱地址，这时候需要验证用户名是否存在/邮箱是否已经注册过。如果在用户输入完成离开该输入框的时候显示出验证结果，而非等待提交表单后再予以反馈，这种立即响应的形式将节省大量的时间。  
Twitter考虑的要更细致，**在提供验证结果的同时给用户提供可能的解决方法**，如下图Emali address一栏的提示信息：

![图1][1]

**合适的位置**

> 验证信息放置的原则——  
> 1、总是将信息放到操作的上下文中  
> 2、如果你想通知用户一个特殊字段发生了错误-在文本域后面显示信息  
> 3、如果错误是通用的（比如向服务器发送数据错误）并且没有刷新页面，可以在提交按钮后面显示信息  
> 4、如果刷新了页面，在页面的顶部显示信息

下图是Light CMS的注册表单，很好的体现了第一个原则：

![图2][2]

而像facebook的注册表单这样，为错误信息提供一个可视化的视觉效果——**文本域使用红色边框标红并且有了一个红色的信息框**，沟通的意图更加清晰明了

![图3][3]

如果表单的结构没有给你足够的空间显示清晰的错误信息，你可以使用  
Vimeo的这种**提示条**的形式来显示错误的字段信息，避免了布局的混乱。颜色的相关性也是很有用的，错误的字段红色的信息提示和一个红色背景、边框相一致。

![图4][4]

**恰到好处的色彩**

> 一般来说，错误为红色，通知为蓝色，警告为黄色，成功确认为绿色。  
> 当然，你可以对这些颜色进行细化，使用那些视觉效果更为舒服的相关色。  
> 这里推荐一个实用的配色网站[ColorHunt][]，包含了一系列漂亮炫酷的色彩组合，网站会每天更新配色方案，并且根据浏览数排列出最漂亮的方案。  
> 然后，嵌入图标也是一个很好的想法。

下面是一些例子：

Twitter，确认信息被非常清晰地用绿色标记并且将小的验证图标嵌入到整个大框体中。  
注意密码输入字段，绿色的指示条显示了你密码的安全级别。

![图5][5]

**合理的表单结构**

![图6][6]

Pinterest，六个字段被分成两个区段。一个区段是关于登录到服务器的信息和要求格式。另一个区段是个人信息-姓名和性别。这样的划分很有意义，因为你的姓名和性别不是必填项。  
然而，**没有指明哪些字段是必填项哪些是非必填项**，用户处在一个盲区的边缘。人们可能会感觉这是在诱使他们输入姓名和性别（可能用于定位广告宣传的原因）。  
我可以看到他们获取数据非常有效的策略，但是我将小心地做这样的实践。**通常，我推荐在注册流程完成后询问用户是否要填写非必要信息**。

**正确的语言**

> 作为一条验证消息，  
> 它应该能够清晰地表明：  
> 1、当前发生了什么事，  
> 2、下一步用户应该做什么(成功的确认消息除外)；  
> 还应避免使用专业术语。

当然，又要拿Twitter来说事儿了，它的语言用的相当简明扼要。  
如果你的Email地址可用，Twitter会告诉你「我们会把确认信息Email给你」；如果Email早已被其他人注册过了，她会让你选择，是登录呢，还是恢复密码。如果你创建了一个很完美的密码，她甚至会夸你「完美的密码！」  
是不是很nice？所有这一切，都像是日常闲聊一样自然。

Delicious在表单验证方面犯了许多错，不过在语言这个部分倒是蛮有意思的。

![图7][7]

首先，他们**在密码输入的地方加了提示信息“试试用句子作为强密码。“，**这个我超喜欢。很不错吧？这种东西我可等了好久了。在密码的安全性方面确实很有意义，**比那种要求用户使用大写字母和数字什么的做法要好太多了**。

然后，Delicous在提示用户名错误的时候也做的很漂亮：

1) “抱歉，用户名marcin已经被别人用了” - 很明确地告诉用户发生了什么事情。

2) “请选择另一个名字” - 明确地告诉用户下一步应该做什么。

可惜，他们忘了一个后备选项。万一我已经有账号，只是一下子忘了这回事而已？  
不管怎么说，Delicous虽然在时间、地点、颜色等等各个方面都搞砸了，但是胜在语言方面干的不坏，所以它们的表单依然还具有相当的可用性。反过来也说明，语言是多么重要啊。

除了验证信息，还应该考虑一些其他的内容，看下面两个图片：

Segmentfault

![图8][8]

Postman

![图9][9]

直接在注册表单的右侧添加了这样一些提示信息，告诉用户注册会带来什么好处，我觉得这些也是可以增强用户体验的重要部分，虽然一般来说注册是必须的，但是这样能让用户感到自身并不是被强迫的，而是主动进行选择，表单最下方也提供了skip this，go straight to the APP的选项。

## 一个工具 ##

**UXPin** [https://www.uxpin.com/][https_www.uxpin.com]  
是DeSmart团队开发的一个简易快速的实体模型和在线可点击原型创作工具。它基于优秀的用户体验设计原则，在构建原型中，它提供了一个完整的工具包（该工具包具有良好的用户设计模式和元素）来从头构建一个出色的原型，非常适合UX设计人员。

强烈推荐戳 [原文][Link 2] 阅读原作者在整篇文章最后部分附上的一个表单验证的原型设计实例，然后尝试使用工具制作一个自己的表单原型，实践永远是掌握知识的最好方法。

## 几门技术 ##

以下是我在进行项目过程中遇到的与实现表单验证有关的技术，  
接下来会逐一写博客分享使用过程中的一些体验。

*  **HTML 5**
 *  **纯js ajax**
 *  **struts2 ajax**
 *  **jquery ajax**
 *  **jquery validate**
 *  **Bootstrap Validator**

[Link 1]: https://www.oschina.net/translate/ux-form-validation
[1]: /images/20220714/d4643a9d2c864dbdba36cf46ac32d8b9.png
[2]: /images/20220714/f45e04df71ae43669605f40b6caca94c.png
[3]: /images/20220714/5b5a83a9652149b8b9707badf7804bb5.png
[4]: /images/20220714/4e734fc1b484490990910ffcae0eae2d.png
[ColorHunt]: http://colorhunt.co/
[5]: /images/20220714/4150deabbdd84b8f9602b74c4a1c665e.png
[6]: /images/20220714/e0b1ef8579b44a50b52560561e9aea94.png
[7]: /images/20220714/03b3d90ae8584a9fa8a187c65baaed1f.png
[8]: /images/20220714/ddae4be07e064534ae5faac48eca7e48.png
[9]: /images/20220714/82284a0fee724703bcb05b4b322f2d11.png
[https_www.uxpin.com]: https://www.uxpin.com/
[Link 2]: https://designmodo.com/ux-form-validation/