用户体验:表单设计中的注意事项

08: 54: 10每个人都是产品经理

在下面的文章中,我们来看看有助于您设计不同可用性表单的10个最佳实践。希望它对设计人员和开发人员都有用。

05e7d6c3f92bfeca14f80ce2275e2249.jpeg

好的,我们开始吧!

“形式”是什么意思,它在哪里使用?

通常,表单是一个包含标签和字段的框,其中包含号召性用语按钮。

以下是网站和应用程序许多部分中使用的表单的一些示例:

登录/注册采购订单门票预订房间预订付款结账通讯订阅咨询/审核请求捐赠调查自定义表格.

那么你如何设计一个用户友好的表格?

通常,表单设计为用户方隐藏了许多困难和痛苦。因此,有必要设计一个用户友好的表格。

让我们首先讨论表单设计的两个主要规则:

首先,表单设计的最佳实践是进行用户测试,永远不会忽略用户意见,即使您不同意。

进行用户测试可以帮助您识别生活技巧,例如测量何时与表单交互,检测痛点,观察用户如何使用界面,他被困在哪里,或者没有找到必要的元素。

执行这些活动可以帮助初学者避免形式世界中最大和无知的错误。

提示1:单列布局

避免曲折接口空间的布局。从眼动追踪测试中可以看出,用户花费更多时间从一列跳到另一列,并且无法在表单中查找特定字段。

相比之下,单列设计只能从上到下读取,这样就可以与表单进行简单的交互。

具有多列设计的表单通常会导致用户省略字段,原因很简单,因为他们没有注意到字段,或者因为他们误解了多列的含义,或填写了不相关或不正确的字段,因为用户会误解为所需的输入。

d6fc19be6543c40e906fdbbce69f74a3.jpeg

单柱设计更有效

提示2:完成并对齐路径

巴塞尔大学的研究人员发现左对齐优于中心对齐是减少完成时间路径的最佳方法,例如左对齐,眼睛不需要跳过页面。

标签的正确对齐将凝视时间减少近一半,这表明该布局极大地减少了用户完成任务所需的认知负荷。

004a964a0426bbdd3207418720b79bd4.jpeg

曲折需要更多时间才能完成

使用向导

当您需要设计大数据表单时,请确保表单中的所有字段都是必要的,唯一的和非重复的。即使您没有机会优化大数据表单,也可以使用带有步骤的向导。

很简单:

该段的组表单字段;记住保存按钮:它保护用户处理和填充的数据;逐步显示填充进度:有助于用户知道已完成的步数以及剩余的步数。ac98b56e4dbdb2f4156a4d5f86de15ed.jpeg

使复杂的表格清晰

提示4:不要忘记将相关信息分组

,整洁有序。因此,相关信息在标题或分隔符下分组为长格式。

为什么要分组相关信息?

假设用户在填写表单时想要更改任何特定字段的内容,并突然觉得他们需要更改任何字段。在这种情况下,分组将帮助用户快速记住所需字段的哪一部分出现。

3af12bfca58f6005d8fe8a6088164979.jpeg

相关内容组

提示5:可选而非必需

在大多数情况下,所有字段都是必需的,只有少数字段是可选的。用星号标记必填字段是一种普遍的做法,但实际上这种形式以红色星号开头。

顺便说一句,红色可以导致用户端的负关联,因为红色仅用于错误。

根据我的经验,当我测试原型时,用户问我关于星号的内容是什么?它是书中的标签还是描述中的标签?

奇怪,不是吗?我们看到星号不适合所有类型的用户。

为避免这种误解,最好使用“仅可选字段”。

45c03ff58d268d4d11804158e3ec448d.jpeg

对非必填字段使用可选标签

提示6:使用自动完成功能

用户很懒,这是事实。

所以,当你有机会让自己的生活更轻松时,他们将非常感激。自动填充/自动填充可将表单完成率提高30%。因此,分析可以自动填充/自动填充表单元素。

为了给您一个想法,您可以自动化城市,国家,电话,电子邮件和其他元素。

f9a0b3877af16037fab20de0df28d36c.jpeg

自动完成功能简化了用户生活

技巧7:自定义输入格式

请注意输入字段格式。在任何地方只使用简单的输入或下拉框是不好的做法。

如果字段类型更多,则用户喜欢数据字段的不同表示并不重要。

表示引人入胜的信息的最简单方法是:

使用单选按钮进行性别类型,不要害怕使用图标;金融领域使用带有货币文本的标签来自动区分数百万和数百万;设计手机号码,工作日,日期和其他明显的领域;使用自动提醒高级搜索以防止用户手动填写许多字段。9dd197733236b8ec0603196c56659efe.jpeg

尝试对数据字段进行不同的修改

此外,永远不要忘记有关输入格式的规则:

字段的长度提供了答案的长度;电子邮件字段验证预填充/尽可能自动检测;最小/最大长度;数字,字母,字母数字,所有符号;依赖;占位符。

技巧8:CTA(号召性用语)风格规则

用户不应该花费大量时间来确定应该使用哪个按钮来执行操作。例如:此按钮用于提交表单还是删除表单?

因此,请务必在表单中正确定义和区分主按钮和辅助按钮。

您可以简单地使用不同的颜色。避免对主按钮和辅助按钮使用相同的颜色,因为它们会误导用户或使用对比色来区分它们。

297f12295350a5e4d0c04877e5c6df60.jpeg

主按钮和辅助按钮分开

技巧9:CTA Microfilm

使用简短明确的CTA按钮名称。此按钮的主要目的是吸引用户的注意力并让他们采取必要的行动。当它短而清晰时,读取时间将减少,完成时间将减少。

c0262555df5cc464fb2f77e04bf95e84.jpeg

简短意味着明确。

提示10:使用内联表单字段进行验证

永远不要忽视表单验证的设计!不要把它放在开发人员的肩膀上。它是各种形式功能中最重要的部分。

作为设计人员,您必须准备文本和视图,帮助文本以及与用户进行不同类型错误状态通信的其他方法。花点时间验证微缩模型。如果没有资源为每种类型的错误准备文本,请考虑全局错误副本。

9b413f08c9baf4ef3df02c8b96140f26.gif

网络

永远记住,当您为错误消息准备文本列表时,不要因为用户的错误而责怪他。相反,请确保您传达的信息清晰且相关。

关键是需要实时验证用户数据。不要让您的用户填写所有字段,然后单击“提交”按钮以查看出现了什么问题。

8bae27d1b38d2528de6b5f8faa3a47eb.jpeg

不要强迫用户查找错误

总结

为了使您的表单设计更好,请避免以下情况:

复杂的信息;提交后的全球验证;长期的领域称号; CTA按钮的长名称;未分组的信息;放弃自我实施/自动完成;一页无尽的领域;为所有内容使用一种输入格式;忽视(色盲);使用多柱设计;在字段中使用标签而不是占位符;容易混淆完成路径;避免用户测试;不要使用建议和指南。

所以,继续考虑你的新表格设计,祝你好运!

作者:Chris,公共号码(ID:LDesign1)

本文最初由