制作web表单的10条注意事项

找到一些解决表单的方案,使用户不再为它而烦恼。 尽管人机交互在不断发展,但表单仍然是用户最重要的交互类型之一。使用你的应用程序或网站的人都有一个特定的目标,表单 […]

2018年9月24日

找到一些解决表单的方案,使用户不再为它而烦恼。

尽管人机交互在不断发展,但表单仍然是用户最重要的交互类型之一。使用你的应用程序或网站的人都有一个特定的目标,表单通常介于用户和他们的目标之间。每天,我们都用它们来做我们的基本活动——完成购物、注册社交网络、对我们购买的产品提供反馈等等。

因此,能够快速而不混乱地完成在线表单对用户来说是非常重要的。用户在填写表单上花费的努力越少,他们就越快乐。作为设计师和开发人员,应该努力为用户提供更快、更简单、更高效的表单体验。

在我的两篇文章的第二篇中,探索如何构建更好的表单(在这里找到第一个),这里是我设计表单的10个技巧。

01.只问需要什么

减少所需要的信息数量可以使表单更容易填写。你应该会问到客户为什么要请求信息,和客户该如何使用请求的信息。要尽量减少字段的数量,因为你添加到表单中的每个字段都会影响它的转化率。特别是当你请求用户提供大量信息时,限制问题和字段的数量可以减少表单的加载。

02.对字段的逻辑排序

 

 

把你的表单形式想象成一场对话; 你要以对用户有意义的顺序来进行分组和排列字段。

把表单想象成一种类似于对话的形式是很有帮助的。客户和你的应用程序应该像正常对话一样,由双方的逻辑语言来表达。详细信息应该按照用户对话般提出的顺序,而不是应用程序或数据库里面的顺序。例如,在问别人的名字之前问他的地址是不正常的。

将相关问题分组也是非常重要的,从一组问题到下一组问题的流程更像是一场对话。对相关字段进行分组还可以帮助用户理解他们必须填写的信息。

上图是两个注册表单的例子。如果不将相关字段分组,将左边的表单与右边的改进的表单进行比较,长表单可能会让人感觉很不舒服。

分组需要在可视化和代码中进行。例如,您可以使用< fieldset >和     < legend >与相关表单有关的要素:

 

 

03.保持标签简短

字段标签是告诉用户输入对应字段后是什么意思。清除标签是让用户界面更容易访问的主要方法。标签告诉用户这个领域的用途,但他们不提供帮助。因此,确保他们轻松浏览是一项优先任务——您应该设计简洁、简短的描述性标签(将它们保留为一两个单词)。

04.不要重复字段

 

 

不要让你的用户输入两次信息——你只会浪费他们的时间让他们失望

这个问题在注册表单中尤为常见:几乎每个人都遇到过这样的表单,它要求你输入两次电子邮件地址或密码。以往来说,这是为了防止输入错误。然而,当应用程序允许的时候,大多数用户只是复制粘贴了必要的字段。如果原始字段的数据包含一个错误,它就会被复制。

05.突出显示可选字段

理想情况下,最好没有可选字段。按照规则:如果不需要这条信息,那么就没有必要浪费用户的时间。但是如果您确实使用它们,你应该要清楚地知道哪些输入区不能留空白。通常像星号(*)或“可选”标签这样的小标记就足够了。

06.小心默认值

避免包括静态默认值,尤其当它是必填字段时,除非你相信你的大部分用户(例如90%)会选择这个值。为什么?因为使用这种方法,你可能会让他们错误的浏览表单。别认为他们会花时间来分析所有的选择。有价值的东西可能已经被他们不经意的跳过了。

唯一的例外是智能默认设置——比如那些根据地理位置数据预先选择用户所在国家/地区的默认设置——这样就能更快更准确地完成表单。但是你仍然要小心使用这些,因为用户可能会保留预先选择的字段。

07.尽量减少打字的需要

打字是一种慢且易出错的过程,对于移动设备来说尤其痛苦,因为用户要面对有限的屏幕空间。随着越来越多的人使用小屏幕,任何不必要的输入将会改善用户体验。在适当的情况下,您可以使用自动填充和预填充等特性来获取数据,所以用户只需要输入最少的信息量。

在任何在线注册表单中,填写地址信息通常是最麻烦的部分,因为有的字段和名称很长。通过实现这些字段的预填充,让你的用户不必输入他们的整个地址。像Google Maps这样的存储库提供了一个简单的JavaScript API来实现这一点。你可以在这里找到一个有效的解决方案。

08.使用实时验证

 

 

如果用户犯了错误,要立即通知他们——不要等到他完成整个表单在告诉他。

在理想的世界里,用户会填写必要的信息并成功完成他们的工作,但是在现实世界中,人们经常会犯错误。在填写表格期间,提交的时候才发现犯了错误,这是很让人很沮丧的。

在提交信息后,立即告知他人他们提供的数据是否成功。这就是实时验证开始发挥作用的地方。它会立即提醒用户注意错误,使他们可以更快地改正错误,而非等到他们按下“提交”按钮时才发现自己填写错误。

记住,验证不应该只告诉用户他们哪做错了;还应该告诉他们怎么做是正确的。这会让用户更快的完成表单。

Parsley是一个优秀的JavaScript模板验证库。它是开放源代码的,并且以ui为中心,所以你可以覆盖几乎所有默认行为以满足您的确切需求。下面的代码是一个简单的“信息”字段的Parsley验证示例。该字段应该至少20个字符,但没有超过100个字符。

 

 

你可以在这里找到完整的代码示例。

09.避免固定的输入格式

强制使用固定格式的最常见原因是验证脚本的限制(后端无法确定所需的格式),这在大多数情况下是执行的问题。与其在用户输入过程中强制使用电话号码之类的格式,不如将用户输入的内容转换为你想要显示或存储的格式。

10.不要使用重置按钮

 

 

在提交选项旁边放一个重置按钮并没有什么好处

重置按钮几乎从不帮助用户。很难想象有人会想要一个按钮来取消他们所有的工作,更不用说他们想要那个按钮放在保存按钮的旁边。如果所有的重置按钮都被移除,网络将会使更多人满意。


 

作者:Nick Babich          翻译:王浩          责编:于瑾瑶

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注