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

《分享表单设计经验,用户体验基本原则》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、分享表单设计经验，用户体验基本原则引言几年前当我第一次看到Twitter的表单验证时很惊讶.对用户界面呆板厌烦的你应该知道我在说什么.当时我几乎兴奋的要跳起来.Twitter精心设计的分离式表单验证相当引人注意.当我输入错误时右侧弹出错误提示信息,立即就能让我消除错误.”在线验证”帮助我明白什么是正确的方向.我能感受到这种简洁的形式是想跟我有个随时的对话.这是一个启示!我不必等待加载整个页面来检查这个表单添写的是否正确.这个体验完全改变了我对表单的设计方法.它让我明白表单验证意味着和用户的交流并引导他们改正错误和

2、不确定的输入.术语“表单验证”可能需要一些说明。表单验证是一门处理在一个web表单里检查用户提供的信息是否正确的技术。这个处理的输出结果更多是情绪上的而不是技术上的。表单或者指出用户操作错误，或者确认提供的数据是准确的。给你一个例子：如果一个用户在一个标签为“emailaddress”的表单字段里提供了数据，表单应该检查提供的文本是否在正确的格式(user@example.com)和提供的e-mail地址是否已经注册了。通常来说，有两种类型的表单验证：提交后验证——当用户提供了所有数据同时提交表单之后，通常会点击

3、按钮，信息会发送到服务器同时进行验证。“验证器”的返回信息发送会用户的电脑同时它显示一段确认的信息(“所有东西都正确!”)或者一系列的错误信息。在线验证——验证信息在用户输入数据到表单字段后直接展示。通常，信息会展示在字段旁边同时鼓励用户采取直接行动。表单验证的重要性表单验证是web/手机浏览者与界面交互时重要的一个核心沟通流程。它的重要性远超过我们所认识到的，不相信我?试想一下你经常遇到的需要表单验证的情形:注册/登录表单购物车–支付表单邮件表单在你的界面整个流程中这是一些重要的流程，不是吗?你业务方面的努力可

4、能全体现在这里了。.比较一下在线和离线两种状态下的不同，这会让事情进入一个熟悉的视角。让我们做一个简单的类比：表单验证相当于在购买东西之前和推销员之间的一次谈话-所有的事情还在成交的边缘上。如果推销员粗鲁无礼并且拒绝提供帮助，你自然会离开商店不买他的东西.。如果推销员很专业，有礼貌并且乐于助人-你就会乐意掏钱包了。大多数表单验证都像是个粗鲁无礼的推销员。表单的错误提示信息形如：“数据库错误!”，“错误的邮箱地址!”这样的提示不仅没有礼貌-还会导致用户的高流失率。缺乏沟通导致了不友好的业务设计，有很多类似的例子。L

5、ukeWroblewski进行的研究清楚地表明了使用一个内联的表单验证将带来巨大的不同效果:“相比我们的控制版本，内联验证表单对数据的验证信息显示更加醒目并且更加友好。尤其是，我们看到的:增加了22%的成功率,减少了22%的错误率,增加31%的满意度,完成时间缩短42%,减少了47%时间的视觉停留。这些不能被忽视。合理的表单验证设计可能会大幅的提升你的业务量!我们来跳出理论进入实践，让我们看看在实际设计中什么才是最好的设计方法，并且通过循序渐进的方式来设计一个完美的表单验证。兴奋了吧?下面使用的每一个例子都可以在

6、UXPin–TheUXDesignApp下载.。避免困惑通常来说一个好的表单验证包含下面的四个重要元素:合适的时间通知验证的成功与失败合适的地方来显示验证信息合适的颜色清晰的表达所有的这些元素有一个清晰的目标：避免困惑。困惑是表单转化的死敌。如果你不想冒用户流失率的风险，创建一个消除用户困惑的表单验证。这是一条通往高转化率的路子。合适的时间正如我们在LukeWroblewski的研究例子中看到的-显示成功/失败信息的合适时间是在用户提交信息后。内联表单验证会立刻通知用户输入数据的正确性，这也提高了用户的转化率。T

7、witter就是个典型的例子，他们做了大量的工作来避免用户产生困惑。在下面的截图中你可以看到我试图使用一个已使用的邮箱地址注册，表单会提示我应该在第二步停下并且让我考虑其他备选方案，这样我就不会对最终的结果失望了。传统的“提交验证”需要等我填写完整个表单后，重新加载页面才让我知道哪些地方填写的不合理。Twitter选择了一个更好的时机让我们停下–这是毫无疑问的。立即响应的形式为我节省了大量的时间(是的，3分钟对于一天来说是个巨大的浪费)。更棒的是什么—Twitter实际上尝试作为一个熟人和我们进行一场谈话。多亏了

8、内联验证，它可以立刻提供给我们一些选择。或许我是这个邮箱账号的主人，那么我只想登录?谁晓得呢-也许我只是忘记了密码?这不仅是一个漂亮的表单验证，它也增加了表单的转化率;同时这也是一个顶级的客户服务。这是一个消除表单困惑的好的尝试。Etsy表单验证–ErrorMessageEtsy表单验证–UploadWireframingTemplatetoUXPin如果表单的结构没有给