原文作者:Andrew Coyle
原文链接:Design Better Forms
无论是注册流程,多图递进,或单调的数据录入界面,表单都是数字产品设计的重要组成部分。这篇文章会着重于一些表单设计中常见的dos&don’ts。把这些执导规则熟记于心,当然每项也都会有例外。
表单应该在一列上
多列表单会破坏用户的垂直视线。
顶部对齐标签
在顶部对齐标签的情况下,用户完成表单的速度会比左对齐标签更快。顶部对齐标签的形式也同样适用于移动端。然而,考虑到在大量系统变量存在的资料系统中,左对齐的方式更容易被一同扫视,而且能够降低页面高度,所以会在这种情景下多加思考。
将标签和输入框组合
让标签和输入框更接近,确保输入框与下一标签有足够高的间距,这样用户不会感到困惑。
避免全部大写
全部大写会很难扫视和理解。
如果少于6项就展示全部选项
放置在下拉列表中,会隐藏选项,而且需要点击两次,所以在超过5个选项的时候再去使用。如果下拉列表的选项超过了25个,那么应该增加一个搜索。
抵制使用占位符文本作为标签
虽然使用占位符文本作为标签,很容易就能够优化空间。但是这也会导致许多可用性的问题,Nielsen Norman团队的Katie Sherwin已经总结过了。
单选框和复选框应该顺向排列
将每一个复选框排列在下方更易于浏览。
让唤起动作描述准确
一个唤起动作应该有清楚的目的。
指定错误内联
展示给用户哪里出错了,并提供一个理由。
在用户输入结束后使用内联校正(除非它会在过程中帮助到他们)
不要在用户输入的时候使用内联校正,除非它会帮助用户-像是创建密码,用户名的数字提示或消息。
不要隐藏基础的帮助文本
尽可能的展示出基础帮助文本。对于复杂的帮助内容,考虑将它放在输入框旁边,当输入框被注意到的时候。
区分主次动作
这也是一个很大的哲学问题,应不应该将第二个也包含进去。
字段长度提供可供性
字段的长度提供为答案的长度,使用这个定义的字段可以是字符计数,例如电话号码,邮政编码等。
区分*及可选字段
如果没有*用户可能不知道哪些是选填的内容。所以加上*能够更好的暗示用户。
组合相关信息
用户希望批量的去思考处理,但是长表单会让人觉得不知所措。所以通过创建逻辑组合,用户将会理解的更快。
why ask?
省略可选字段和其他方法来收集数据,总是文自己是否问题能被推断,推迟,或完全排除。
数据条目越来越自动化。移动和可穿戴设备手机大量的数据而用户毫无察觉。思考Nike 以如何利用社交,会话界面,短信,电子邮件,语音,OCR,LBS,指纹,生理信息。
让表格有趣,生命是短暂的。没有人想要去填表格。增强互动,变得有趣,逐步递进。让人惊喜。这就是设计师扮演的角色,表达出他们公司品牌传递出来的情绪。如果做得对,就会提高完成率。想想自己有没有犯上述的一些错误呢?