跳到主要内容

制作用户友好的Web表单的10条规则

Illustration of web forms on an iMac and tablet

尽管人机交互的发展,表单仍然是用户最重要的交互类型之一。使用您的应用程序或网站的人有一个特定的目标,并且通常在用户和他们的目标之间存在的一个问题是表单。每天,我们将它们用于我们的基本活动 - 完成购买,注册社交网络,提供我们购买的产品的反馈等等 - 它们是我们的重要组成部分用户体验

因此,能够快速完成在线表格并且不会产生混淆对我们来说非常重要。我们付出的努力越少,我们就越快乐。作为设计师和开发人员,我们应该努力为用户提供更快,更简单,更高效的表单体验。

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

01.只询问需要什么

减少所需信息的数量使表格更容易填写。您应该始终质疑为什么以及如何使用您请求的信息。尝试尽可能减少字段数,因为您添加到表单的每个字段都会影响其转换率。限制问题和字段的数量可以减少表单的负载,尤其是当您向用户请求大量信息时。

02.按逻辑顺序排列字段

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically

把你的形式想象成一个对话;您希望按照对用户有意义的顺序对字段进行分组和排序

将表单视为与会话类似是有帮助的。像任何正常的对话一样,它应该由两方之间的逻辑通信来表示:一个人和你的应用程序。应从用户的角度按顺序询问详细信息,而不是应用程序或数据库的顺序。例如,在他们的名字之前询问某人的地址是不寻常的。

以块为单位对相关问题进行分组也非常重要,因此从一组问题到下一组问题的流程将更好地类似于对话。对相关字段进行分组还可以帮助用户理解他们必须填写的信息。

上图是两种登记表的例子。如果不对相关字段进行分组,则长形式会感到压倒性 - 将左侧的表单与右侧的改进版本进行比较。

分组需要在视觉上和代码中进行。例如,你可以使用

关联相关表单控件的元素:

个人信息:

03.保持标签短

字段标签告诉用户相应的输入字段的含义。清除标签文本是使UI更易于访问的主要方法之一。标签告诉用户该字段的用途,但它们不是帮助文本。因此,确保他们轻松扫描是一个优先事项 - 您应该设计简洁,简短和描述性的标签(保持一两个字)。

04.不要复制字段

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password

不要让用户输入两次信息 - 你只会浪费他们的时间来挫败他们

此问题在注册表单中尤为常见:几乎每个人都遇到过要求您输入两次电子邮件地址或密码的表单。从历史上看,这是为了防止错误输入错误。但是,大多数用户只需在应用程序允许的情况下复制粘贴必要的字段。如果原始字段的数据包含错误,则会重复。

05.突出显示可选字段

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

06.小心默认值

除非您认为大部分用户(例如90%)会选择该值,否则请避免包含静态默认值 - 特别是如果它是必填字段。为什么?使用这种方法,您可能会引入错误,因为人们可以在线快速扫描表单。不要以为他们会花时间解析所有选择。他们可能会轻易跳过已经有价值的东西。

这一点唯一的例外是智能默认值 - 比如根据地理位置数据预先选择用户所在国家/地区的默认值 - 可以更快,更准确地完成表单。但是你仍然应该谨慎使用它们,因为用户倾向于保留预先选择的字段。

07.尽量减少打字的需要

打字是一个缓慢且容易出错的过程,在用户面临有限屏幕限制的移动设备上尤其痛苦。随着越来越多的人使用小屏幕,任何可以防止不必要的打字的事情都会改善用户体验。在适当的情况下,您可以使用自动完成和数据预填充等功能,因此用户只需输入最少量的信息。

填写您的地址信息通常是任何在线注册表单中最麻烦的部分,这要归功于多个字段,长名称等。通过实现这些字段的预填充,使您的用户不必输入整个地址。 Google地图等图书馆提供简单的JavaScript API为达到这个。您可以找到一个有效的解决方案

08.使用实时验证

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it

如果用户出错,请立即提醒他们 - 不要让他们等到他们完成整个表格

在理想的世界中,用户填写表格并提供必要的信息并成功完成工作,但在现实世界中,人们经常犯错误。通过填写整个表单的过程令人沮丧,只是为了在提交时发现您犯了错误。

是时候告知某人他们提供的数据是成功还是失败,就在他们提交信息之后。这是实时验证发挥作用的地方。它会立即警告用户错误,并使他们能够更快地纠正错误,而无需等到他们按下“提交”按钮。

请记住,验证不仅应该告诉用户他们做错了什么;它还应告诉他们他们做得对的是什么。这使用户更有信心在表单中移动。

香菜是一个优秀的JavaScript表单验证库。它是开源的,以UX为中心,因此您几乎可以覆盖所有默认行为以满足您的确切需求。在下面的代码中是一个简单的Parsley验证示例,用于“消息”字段。该字段应至少为20个字符,但不得超过100个字符。

 

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

09.避免使用固定的输入格式

强制固定格式的最常见原因是验证脚本限制(后端无法确定其所需的格式),这在大多数情况下是实现问题。您可以将用户输入的内容转换为您要显示或存储的格式,而不是在用户输入期间强制使用电话号码等格式。

10.不要使用重置按钮

Illustration shows Reset button next to a Save button below a form, with a red cross through it

包括“提交”选项旁边的“重置”按钮,实现了一点好处

重置按钮几乎从不帮助用户。很难想象有人想要一个按钮来解开他们所有的工作,更不用说他们希望那个按钮位于保存它的按钮旁边。如果删除几乎所有重置按钮,网络将是一个更快乐的地方。

这篇文章最初出现在,专业网页设计师和开发人员的杂志。在这里订阅网

相关文章:

查看更多Web设计方法

话题

网页设计
Magcontent
UX
Netmag
网页设计

相关文章



翻译字数超限