设计更好的表单

无论是注册流程、多页面的步进还是单纯的数据录入,表单都是最重要的组件之一。这篇文章将会介绍在表单设计中我们该做什么,不该做什么。需要说明的是,本文只是一篇常规的设计指南,实际生产过程中,每一条规则都可能有例外。

表单应该是单列的

多列的表单有损用户的垂直注意力

标签应该顶部对齐

相对于左对齐的标签,用户更有可能完成标签顶部对齐的表单。另外,顶部对齐的标签在移动设备中的显示效果通常也更好。不过对于有大量字段需要输入的表单,可以考虑采用标签左对齐,这样可以减少表单高度,让字段一目了然。

标签和对应的输入控件要在视觉上形成一组

标签与输入控件靠近一些,确保用户不会产生疑惑

杜绝大写

大写的单词会增加阅读难度。当然,中文没这毛病

如果选项小于6个,将他们全部展示出来

把选项放在Select中要求用户进行两次点击。只有当选项数目超过6个,才考虑将他们放入select中,如果超过25个,还需要为下拉控件提供搜索功能

不用要占位符替代标签

用占位符替代标签很诱人,考虑到能节省不少控件。但这样做会导致很多可用性问题

checkbox和radio采用垂直布局,方便扫视

采用垂直布局,用户更方便扫视

文字要能够触发行动

文字要站在用户的角度去描述,增加用户采取行动的机会

错误提示要与对应的控件在一行

当错误发生时,在错误发生的位置后面紧跟错误原因

在表单填写完成后使用内联验证

不要在用户输入没有完成时对表单进行验证,除非验证提示能对输入提供指导作用,比如实时统计用户名或者密码的字符长度

不要隐藏基本的帮助性文字

对于简单的帮助性文字,直接将其显示在对应的控件周围。对于复杂的文字描述,可以考虑在控件获得焦点后置于其后

区分主要动作和次要动作

现在甚至在讨论次要动作是否应该包括在内

输入控件的长度要反映出内容的可接受长度

对那些具有固定长度的字段请采用该方法,比如电话号码、邮编等。

不要再使用 * 标记必要字段,用“可选”把非必填字段标记出来

虽然*是一个常用的标记必要字段的符号,但仍不能保证所有的用户都能理解其含义,更好的选择是用文字标出非必填字段

把相关字段放在一起

有很多字段的表单可能会让用户不知所措,将相关的字段放置在一起有助于用户更快地进行思考和响应

为什么要问用户?

对于可选的内容,我们应该考虑采用其他的办法去搜集这部分信息而不是直接向用户提出。始终问自己这个问题是否可以通过已有数据推算得到、是否可以推迟甚至完全不需要。

数据获取正逐渐自动化,现在的移动设备和可穿戴设备可以在用户毫不知情的情况下获取大量信息。始终思考是否能购利用社交网络、对话式的UI设计、短信、电子邮件、语音、光字符阅读器(OCR)、位置、指纹和生物特征等来获得我们想要的信息。

有趣很重要

生命短暂、没人想把宝贵的时光浪费在填写表单上。所以,表单务必要友好、有趣,能慢慢吸引用户。要能打破常规,对设计者来说,将公司品牌传达给用户并激发出情感共鸣是自己的重要职责,如果做得好,将会在很大程度上增加用户完成表单的可能性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文作者:Andrew Coyle 原文链接:Design Better Forms 无论是注册流程,多图递进,或...
    ShusQ阅读 246评论 0 1
  • [译文]设计更好的表单(常见错误&如何解决) 字数525阅读639评论16喜欢25 无论是连贯试、分布式,亦或是单...
    匡亮UX阅读 471评论 1 6
  • 无论是登陆,分步骤的流程还是单调的日期输入,表单设计都是其中最重要的部分。这篇文章主要分析了表单设计中哪些是常用和...
    瓦力UX阅读 323评论 0 1
  • 无论是连贯试、分布式,亦或是单调的数据输入界面,表单都是数码产品的重要组成部分。这篇文章聚焦在表单设计中常见的该做...
    Z_Yuhan阅读 2,007评论 13 43
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 3,443评论 2 14