在设计页面的时候,表单是一种使用率非常高的元素。
这篇文章将会讲解设计师在设计页面时表单时经常会犯的一些错误。
请注意,文章中所说的都是一般性规则,在实际工作中,每一个规则都有例外情况。
表单应该为单栏式样
多栏式样表单会扰乱用户的垂直动量。
说明标签放在输入框上面
数据显示,当说明标签在输入框上面的时候,用户完成表单的几率要远高于标签位于输入框左边的时候。顶部说明标签在移动设备上也能更好的显示。然而,如果输入框数量较多,你可以考虑将标签放在输入框左边,因为这样做可以降低表单的高度。
缩小文字和输入框的距离
让说明标签紧挨着对应的输入框,还要确保每一个输入区域之间要留有足够的高度,以免用户混淆。
避免使用全大写文字
完全大写的单词会给用户造成阅读困难。
如果待选项少于6个,则在表单中全部显示
用下来菜单的方式显示带选项,需要用户进行两次点击。只有在带选项多于6个的时候才应考虑下拉菜单。
避免使用占位文本代替说明标签
很多人都喜欢用占位文本代替说明标签,觉得这样可以优化空间。但是这会导致很多可用性方面的问题。
将复选框垂直排列
将复选框垂直排列,易于用户检索
让CTA更具描述性
行为召唤按钮要突出其目的。
对出错信息进行具体说明
向用户展示究竟是哪里出了错,并且给出出错原因。
在用户完成输入之前不要出现错误提示(除非这样做能够更好的帮助他们完成流程)。
用户在输入的过程当中不要出现出错提示,例如他们在输入密码和用户名的时候。
不要隐藏基本的帮助文本
尽可能的显示基本的帮助文档。对于那些复杂的帮助文档,可以考虑将其发在输入框旁边。
突出显示主要的行为召唤按钮
很多人都在讨论一个问题:是否应该在页面中去除次要行为召唤按钮
输入框长度与输入文字长度相匹配
输入框的长度应该与用户输入文本的长度相对应。在设计电话号码、邮政编码等输入框的时候,你一定要考虑到这一点。
去除*,直接写上“可选”的字样
很多用户都不知道*这个符号代表的是什么意思。你应该去掉这个服务,在标签边上直接写上“可选”的字样。
标注文本群组信息
用户都有批量思维,较长的表单会让他们感到困惑。通过创建逻辑群组,用户能够更快的理解表单的构成。
通过其他方式获得数据
移 除那些可选输入框,考虑用其他的方式来获得数据。例如,移动设备和可穿戴设备都可以帮你获得很多用户的相关数据,你完全可以利用他们来减少用户的数据输入 成本。考虑一下你是否可以通过社交媒体、会话式UI、SMS、电子邮件、OCR、定位、指纹和生理指标等方式来获得目标数据。
把表单做的有趣
生 命很短暂,谁也不想把时间浪费在填无聊的表单上。你可以把你的表单做成会话式的,把它做的有趣,让用户在填表的过程中获得快感。设计师的指责是传递公司的 品牌,来引出用户的情感反应。如果做的好,表单的完成率可以提高。只要不违反上面提到的基本规则,你可以尽情发挥创意。