您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

11个表单设计小Tips

自译外文 分类: 规范/资料 版权: 原作者: Jeremiah Lam
281 5 1 0
2019-07-03
1.6
普通推荐

表单设计可能有点无聊,用户也总是很讨厌填写表单。

Image title

Ouch.pics的插画


表单是任何网站的必要组成部分;无论是联系人表单、支付细节表单、帐户创建表单、潜在客户表单等,用户在使用您的产品时肯定是需要与某种表单进行交互的。本文的目的是提出在设计更好的表单时遵循的一些准则。

保持表单简短


没人喜欢冗长的表单。在设计中“定义范围”的步骤里,花一些时间来询问用户是否需要回答每一个问题来达成他们的目标。这可能需要更多的时间,但是相信我,减少用户的工作将会吸引更多的用户提交您的表单。


Image title

ASOS注册表单很冗长,并且包含多余字段。


~~~


可视化地分组字段及标签


标签应该靠近它们各自的字段。特别是当标签位于字段上方时,使用空白来分隔它们。

始终将标签放在更靠近关联字段的位置,而不是其他字段。这是因为人类会把紧密结合在一起的事物建立联系——格式塔原则。


Image title

Amazon 注册表单在每个字段之间使用足够的空白,以便于清楚得看懂。


~~~


清楚地展示你的需求


告诉用户他们需要什么,不要等到他们完成表单后才显示错误信息——这是一种消极强化的形式。如果没有明确的验证规则指示,用户不知道从这些规则中得到什么。这特别适用于“密码”字段,因为不同的产品有不同的要求。


Image title

Mailchimp的不仅减轻了密码错误的可能,而且为用户创建新帐户提供了积极的动力。


~~~


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


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

问题是一旦用户输入字段,占位符就会消失。如果用户忘记了字段的用途,必须单击字段外才能再次看到占位符,这可能会令人很烦躁。

Image title谷歌使用智能微交互来解决这个问题。


当用户单击输入字段时,占位符文本将淡出,并成为左上角的一个迷你字段标签。


~~~


使用自动对焦


我非常喜欢表单自动聚焦第一个输入字段,因为我只需要输入、回车、输入、回车便可以了。虽然它只为我节省了一次额外的点击,但确实以一种微妙的方式提升了整体体验。

当允许自动对焦时,也要突出显示活动字段,以通知用户第一个字段已经被选中,他们可以继续填写它。

高亮活跃的区域
这通常是改变边框的颜色和大小来提供更强的视觉提示。确保所选字段的颜色从表单的其他部分中突出出来,以便潜意识地帮助用户关注活动字段。同样的概念也可以用于错误提示,通常情况下,如果出现错误文本字段将用红色突出显示。


Image title

通过高亮显示活动字段,可以很容易地关注到它。


~~~


通知用户大写锁定已打开


这是一个如此简单的特性,但并没有很多产品实现它。有些时候,我没有意识到大写锁定是打开的,当我不断被拒绝时感到很沮丧。更糟糕的是,错误信息甚至没有告诉我大写锁定打开了,它只是不停地说我的密码错了。这对用户来说真的很烦人。


Image title

Mac OS在通知用户大写锁定是否开启方面做得很好。


~~~


使用视觉的限制


视觉约束有助于增强用户所需的信息。例如,如果“月”字段只需要两个字符,那么它就不需要与“名字”字段一样长,否则可能会引起用户的混淆。


Image title

可以根据所需的信息提供不同的字段长度大小。


~~~


不要隐藏错误消息


使用一些提示来传递错误消息。通过在文本字段旁边放置一个警告图标,当用户将鼠标悬停在该图标上时,将出现错误消息的提示。这是个非常糟糕的交互,因为它需要用户付出更多的努力来纠正他们的错误。有些用户甚至不知道他们需要执行额外的操作(将鼠标悬停在图标上)来查看错误消息。


Image title

只在文本字段底部显示错误提示不是更好吗?


~~~


清楚地标记选项字段


如果您忽略了第一个技巧(保持表单简短),请确清楚地标记出可选字段。它将提供一个更强的视觉提示,用文本“可选”标记字段,而不只是使用星号。有些用户可能也不理解星号的含义,因为它有时用来表示验证错误。


Image title

标记处可选字段比使用星号标记更清楚。


~~~


使用图片来增强理解力


当需要有含义时,可以使用图像来选择以改善用户体验。如果您想更好地使用文本、图标或图像解释每个选择,这是很好的选择。


Image title

谷歌使用图像来描述他们的广告类型。


~~~


尽可能使用预测搜索


这主要适用于要求用户输入具有许多预定义选项信息时,比如他们的度假目的地,允许用户只输入几个字母来找到他们的目的地城市,而不是输入整个城市的名字——这是一项非常烦人的任务。


它还降低了搜索失败的几率,因为用户不太可能拼错他们的搜索词。


Image title

Airbnb使用预测性搜索帮助用户轻松找到他们的度假目的地。


我知道表单设计可能是一个无聊的过程,大多数用户总是讨厌填写表单。但是按照上面的指导方法,并在交互中加入一些幽默,您可以改进用户的体验并引发情感反应。

这样做无疑会提高完成率,这也是用户体验设计师的目标之一。


感谢阅读!



原文链接:https://uxdesign.cc/11-form-design-guidelines-4b2f1c659414

作者链接:https://uxdesign.cc/@nataniellam

阿嗣_

2697粉丝/65关注

身经百战人气明星首页达人原创小生勤学标兵lv.1
产品设计的期望与现实七个设计的基本原则

扫描二维码
去手机端查看海报

阿嗣_

TA已经获得9枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN