无论是注册流程,多视图步进器还是单调的数据输入界面,表单都是数字产品设计中最重要的组成部分之一。本文重点介绍表单设计的常见注意事项。这些是一些常用的规则,当然每条规则都有例外。
表格应该是一列
多列会破坏用户的垂直视角,切换视角会增加用户的使用成本。
顶部对齐标签
顶对齐以对比左对齐用户更高效率的完成表单填写。顶部对齐的标签在移动设备上也可以很好的使用。但是,对于具有可变选项的大型数据集条目,请考虑使用左对齐标签,因为它们更容易一起扫描,它们降低了高度,并且比顶部对齐的标签更值得考虑。
将标签及其输入分组
将标签和输入放在一起,确保字段之间有足够的高度,这样用户就不会感到困惑,能够很轻易分清哪一个标题和内容框是一组的。
避免全部大写
全部大写字母不符合我们的阅读习惯。
全部显示低于6个的选项按钮
在选择器下拉列表中放置选项至少需要两次单击,并且还要隐藏选项内容。如果有超过5个选项,请使用输入选择器。如果有超过5个选项,则在下拉列表中包含上下文搜索。
使用占位符文本作为标签抵制
通过将占位符文本用作标签来优化空间很有诱惑力。但是尼尔森诺曼集团的凯蒂·舍温总结了许多可用性问题。
为了方便浏览将复选框(和无线电)放在彼此之下
将复选框放在彼此之下可以更容易浏览。
使引导按钮(CTA)具有描述性
引导按钮应该意图明确。
错误提示
在用户发生错误的位置显示提示并说明原因。
在用户填写内容后使用内联验证
用户是输入状态时不要使用内联验证,除非它能带来提示帮助,例如创建密码、用户名或带字符数的消息时。
不要隐藏基本的辅助文本
尽可能在输入框旁边展示辅助文本。对于复杂的辅助文本,请考虑在聚焦状态期间将其放在输入旁边。
区分主要功能和次要功能
当用户输入后,在引导按钮上提供一些变化,不但可以引导用户还可以区分功能的主次
使用字段长度作为输入框的长度
输入框的长度提供了答案的长度。可以将此用于已知字符数的字段,如电话号码、邮政编码等。
尝试抛弃 * 并表示可选输入
用户并不总是知道所需字段标记(*)意味着什么。相反最好清晰的表示那些内容选项是可选的。
整合相关信息
让用户分批思考,冗长的表单会让人感到压力。通过创建分组,用户可以更快地理解表单。
为什么一定要选择让用户输入来收集信息呢?
省略输入框考虑其他收集数据的方法。始终问自己这个问题是否可以推断、推迟、或完全排除。
数据输入越来越自动化。例如,移动和可穿戴设备在没有用户意识的情况下收集大量数据。想一想你可以利用社交软件、短信、电子邮件、语音、位置、指纹、生物识别等方法。
让它变得有趣
没有人想填写表格。设计师的角色是通过表达自己公司的品牌来引发情感反应。如果操作得当将会提高完成率。请确保您没有违背上面列出的这些规则。
作者:Andrew Coyle