11个表单设计指南

Form design can be boring, and users invariably hate filling them out.

插图由Ouch.pics

表单是任何网站的一个必要组成部分; 无论是接触方式,付款细节,创建帐户,导致一代等,用户肯定需要使用你的产品的时候有某种形式的互动。这篇文章的目的是要突出一些,当涉及到设计更好的形式,我按照重要指导方针。

保持短

没有人喜欢一个长的形式。在设计过程中的“定义范围”步骤中,需要一些时间来询问每个字段是否是需要用户以实现他们的目标。这可能需要更多的时间,但相信我,减少用户的努力将导致更多的用户填写表单。

ASOS标志画面是不必要的长,包括冗余字段。

视觉组字段和它们的标签

标签应接近各自的领域。利用空格清楚地将它们分开,特别是如果标签是场以上。

始终将标签靠近相关领域比其他领域。这是因为人类的方式,他们通过做东西都是紧密组合在一起,连接有线 – 完形的原则。

亚马逊签约形式使用每个字段之间有足够的空白,可以很容易通过扫描

显示你的要求明确

分不清什么是需要从他们的用户。不要等到他们完成的形式,向他们展示一个错误信息 – 这是负强化的一种形式。用户不会知道什么期望了出来,如果有的验证规则没有明确的指示。这一点尤其适用于“密码”字段作为不同的产品会有不同的要求。

不仅Mailchimp的经验减轻密码错误摩擦,但同时也为用户提供了创建新帐户的积极势头。

避免使用占位符文本字段标签

占位符的作用通常是用来给上需要什么类型的信息,特定输入域的提示。但一些设计师都用它来代替字段标签,以减少混乱和更简约的外观。

这里的问题是,一旦用户与输入磁场相互作用的占位符将消失。如果用户忘记了场的目的,必须点击它外面再次看到占位符,这可能是恼人。

你可以阅读更多有关使用占位符文本字段标签的负面影响在这里

谷歌采用了智能微互动来克服这个问题

当用户点击输入框,占位符文本淡出,成为在左上角有一个小字段标签。


使用自动对焦

我真的很喜欢它,当形式自动对焦的第一个输入字段,因为我只需要输入,标签,类型选项卡,然后完成。虽然只节省了我一个额外的点击,它确实提高了微妙的方式整体体验。

当你允许自动对焦,确实也彰显活跃的领域,以通知用户第一场已经被选中,他们可以继续填写。

突出活跃的领域

这通常是通过改变边框颜色和大小给予更强的视觉线索来完成。确保所选字段的颜色从表格的其余部分中脱颖而出,使其下意识地帮助用户专注于活跃的领域。同样的概念可用于为好,一般的文本字段将以红色突出显示,如果有一个错误的错误。

通过突出活动领域,它可以很容易地专注于它

通知用户该大写锁定是上

这是这样一个简单的功能却没有多少产品中实现它。很多时候,我并没有意识到,大写锁定已开启,并且感到沮丧时,我一直被拒。更糟的是,该错误信息甚至没有告诉我,我的大写锁定了,它只是不停地说,我的密码是错误的。这对于用户来说可能真的很烦人。

在Mac OS做得很好,在告知用户,如果他们的大写锁定

使用Visual约束

视觉约束有助于增强用户所需的信息。例如,如果需要对“月”现场只有两个字符,那么就没有必要为它只要是为“名称”字段否则可能会导致用户混淆。

INVISION由具有基于所需信息的不同字段长度尺寸做得很好。

不要隐藏你的错误消息

有些设计使用提示中继的错误信息。这是通过旁边的文本字段的警告图标,当用户在图标上悬停,就会出现错误信息来完成。这是非常糟糕的UX,因为它需要用户更多的精力去纠正他们的错误。有些用户可能甚至不知道他们需要采取额外的步骤(悬停在图标上)来查看错误信息。

那岂不是更好地只显示在文本框底部的错误消息?

如果您想了解更多有关表单设计中的错误信息,你可以阅读更多关于它在这里

马克选项字段明确

如果你忽略第一次提示(让你的表格简洁),并使用可选字段,确保他们有清晰的是可选的。它将给一个更强的视觉线索来标记文本“可选”,而不是仅仅使用星号的字段。有些用户也可能不明白它的意思是星号,因为它有时也用来表示验证错误。

使用可选的文字清楚地相比,使用星号。

使用图片,增加参与

当它是有道理的,使用图片来选择,以改善用户体验。如果你想使用文本,图标和/或图像更好地解释每个选择这是一件好事。

谷歌广告使用图片来刻画他们的活动类型。

尽可能使用预测搜索功能

这主要工程时,用户被要求,有很多预定义的选项,输入信息,比如他们的度假胜地。这将允许用户只输入几个字母,以找到自己的目的地城市,而不是键入出整个名字 – 这可以说是相当刺激性的任务。

它也能减少搜索失败的可能性,因为用户不太可能拼错他们的搜索词。

制作的Airbnb使用预测搜索功能,以帮助他们的用户轻松找到自己的度假胜地。

我知道,设计形式可以是一个枯燥的过程,大多数用户总是不愿意填写出来。但按照上述指导方针和注入一些幽默到您的UX副本,可以提高用户的体验,引起的情绪反应。

原文地址:https://uxdesign.cc/11-form-design-guidelines-4b2f1c659414

Your email address will not be published. Required fields are marked *

UXG是一个长期关注用户体验(UE)的设计平台,内容包含用户界面(UI)、互动设计(ID)、交互设计(UX)、设计趋势以及服务设计等。

我们试图让更多读者了解设计师们的巧思,并推广Design Thinking的思维,欢迎大家加入这个开放社区。

More Stories
用户增长的关键:如何设计一个良好的Onboarding Experience?