如何更好的设计表单

自译外文 分类: 规范/资料 版权: 原作者: Andrew Coyle
978 18 11 3
2016-10-26
4.5

Image title


无论是注册流程还是数据录入界面,表单都是最重要的产品设计的组成部分。下面着重于常见的表单设计的注意事项。请谨记,这些指导方针和规则也是有例外的。


表单应该是一列的

Image title

                多列的违反了用户的垂直视觉习惯


顶部对齐标签

Image title

        用户对顶部对齐标签比左对齐标签反应更迅速。顶部对齐标签也可以应用在移动端。然而,考虑到左对齐标签更易一起扫描,在大型资料处理系统时都是用左对齐标签,他们降低了高度,比顶部对齐标签考虑更多。


分组与输入

Image title

        现在的标签与输入框很近,并确保了足够的高度,因此用户不会感到困惑。


避免全部大写

Image title

        全部大写使之不易于阅读


选项少于6个则显示所有

Image title

        放置在下面选择下拉选项需要两次点击,还需要隐藏选项。如果超过5个选项则使用输入器选择。如果超过25个选项,在上下文进行搜索。


禁止使用占位符作为标签

Image title

        用占位符最为标签很容易有话空间。但也导致了许多可用性的问题,Nielsen Norma团队的Katie Sherwin做了总结。


复选框要可扩展的依次向下排列

Image title


行为召唤要具有描述性

Image title

        行为召唤的状态必须是有意义的。


明确的指明错误

Image title

        显示用户发生的错误,并提供一个原因。


在用户填完表格后再验证(除非是在过程中帮助他们)

Image title


不要隐藏基本的辅助文本

Image title

        尽可能公开基本的辅助文本。对于复杂的辅助文本,考虑把它放在输入状态的旁边。


区分主要和次要动作

Image title

        有一个更大的哲学理论在争论是否把第二个选项也包括在内。


使用足够的字段长度

Image title

        字段的长度是提供给答案的。使用字符定义好的字段长度,如电话号码、邮政编码等。


标*和指明可选项

Image title

        用户并不能总是明确的知道做标记的含义(例如 *)。指明可选项会更好些。


相关信息分组

Image title

        用户会分组进行思考,太长的表单可能会让人不知所措。通过创建逻辑分组让用户更快的完成表单。


为什么提问?

可以省略可选字体或其他方法来收集数据。经常问自己这个问题能否被推断出、推迟或者完全排除在外。


数据条目越来越自动化。例如,移动端和可穿戴设备在用户毫无意识的情况下收集大量数据。考虑如何利用社交、对话UI、短信、邮件、语音、OCR、定位、指纹、生物等。


变得有趣些

生命短暂。没有人想去填表格。变得口语化些,有趣些,逐步完成,做到意想不到。这是设计师在表达公司的品牌所引发的情绪反应。如果做的对,它将提高完成率。只要你不违反上述规则。



原文地址:https://uxdesign.cc/design-better-forms-96fadca0f49c#.1zadjimur

作者地址:https://uxdesign.cc/@CoyleAndrew

厉嗣傲

UI/UX设计师

1689粉丝/63关注

基于AR技术的6个UI/UX问题人性的设计

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