分享表单设计经验，用户体验基本原则

　　几年前当我第一次看到Twitter的表单验证时很惊讶. 对用户界面呆板厌烦的你应该知道我在说什么. 当时我几乎兴奋的要跳起来.

　　Twitter精心设计的分离式表单验证相当引人注意.当我输入错误时右侧弹出错误提示信息, 立即就能让我消除错误.”在线验证”帮助我明白什么是正确的方向. 我能感受到这种简洁的形式是想跟我有个随时的对话. 这是一个启示! 我不必等待加载整个页面来检查这个表单添写的是否正确.

　　这个体验完全改变了我对表单的设计方法. 它让我明白表单验证意味着和用户的交流并引导他们改正错误和不确定的输入.

　　术语“表单验证”可能需要一些说明。表单验证是一门处理在一个web表单里检查用户提供的信息是否正确的技术。这个处理的输出结果更多是情绪上的而不是技术上的。表单或者指出用户操作错误录入软件，或者确认提供的数据是准确的。给你一个例子：如果一个用户在一个标签为“email address”的表单字段里提供了数据，表单应该检查提供的文本是否在正确的格式(user@example.com)和提供的e-mail地址是否已经注册了数据录入软件。

　　通常来说，有两种类型的表单验证：

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

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

　　表单验证的重要性

　　表单验证是web/手机浏览者与界面交互时重要的一个核心沟通流程。它的重要性远超过我们所认识到的，不相信我?试想一下你经常遇到的需要表单验证的情形:

　　注册/登录表单

　　购物车 – 支付表单

　　邮件表单

　　在你的界面整个流程中这是一些重要的流程，不是吗?你业务方面的努力可能全体现在这里了。.

　　比较一下在线和离线两种状态下的不同，这会让事情进入一个熟悉的视角。让我们做一个简单的类比：表单验证相当于在购买东西之前和推销员之间的一次谈话-所有的事情还在成交的边缘上。如果推销员粗鲁无礼并且拒绝提供帮助，你自然会离开商店不买他的东西.。如果推销员很专业，有礼貌并且乐于助人-你就会乐意掏钱包了。

　　大多数表单验证都像是个粗鲁无礼的推销员。表单的错误提示信息形如：“数据库错误!”通用表单数据录入系统，“错误的邮箱地址!”这样的提示不仅没有礼貌-还会导致用户的高流失率。

　　缺乏沟通导致了不友好的业务设计，有很多类似的例子。Luke Wroblewski进行的研究清楚地表明了使用一个内联的表单验证将带来巨大的不同效果:

数据录入软件 　　“相比我们的控制版本，内联验证表单对数据的验证信息显示更加醒目并且更加友好。尤其是，我们看到的:

　　增加了22%的成功率,

　　减少了22%的错误率,

　　增加31%的满意度,

　　完成时间缩短42%,

　　减少了47%时间的视觉停留。

　　这些不能被忽视。合理的表单验证设计可能会大幅的提升你的业务量!

　　我们来跳出理论进入实践，让我们看看在实际设计中什么才是最好的设计方法，并且通过循序渐进的方式来设计一个完美的表单验证。

　　兴奋了吧?

　　下面使用的每一个例子都可以在UXPin – The UX Design App下载.。

　　避免困惑