[自译]15招技巧设计更好的表单

原文作者:Andrew Coyle

原文链接:Design Better Forms

无论是注册流程,多图递进,或单调的数据录入界面,表单都是数字产品设计的重要组成部分。这篇文章会着重于一些表单设计中常见的dos&don’ts。把这些执导规则熟记于心,当然每项也都会有例外。

表单应该在一列上


多列表单会破坏用户的垂直视线。

顶部对齐标签

在顶部对齐标签的情况下,用户完成表单的速度会比左对齐标签更快。顶部对齐标签的形式也同样适用于移动端。然而,考虑到在大量系统变量存在的资料系统中,左对齐的方式更容易被一同扫视,而且能够降低页面高度,所以会在这种情景下多加思考。

将标签和输入框组合

让标签和输入框更接近,确保输入框与下一标签有足够高的间距,这样用户不会感到困惑。

避免全部大写

全部大写会很难扫视和理解。

如果少于6项就展示全部选项

放置在下拉列表中,会隐藏选项,而且需要点击两次,所以在超过5个选项的时候再去使用。如果下拉列表的选项超过了25个,那么应该增加一个搜索。

抵制使用占位符文本作为标签

虽然使用占位符文本作为标签,很容易就能够优化空间。但是这也会导致许多可用性的问题,Nielsen Norman团队的Katie Sherwin已经总结过了。

单选框和复选框应该顺向排列

将每一个复选框排列在下方更易于浏览。

让唤起动作描述准确

一个唤起动作应该有清楚的目的。

指定错误内联

展示给用户哪里出错了,并提供一个理由。

在用户输入结束后使用内联校正(除非它会在过程中帮助到他们)

不要在用户输入的时候使用内联校正,除非它会帮助用户-像是创建密码,用户名的数字提示或消息。

不要隐藏基础的帮助文本

尽可能的展示出基础帮助文本。对于复杂的帮助内容,考虑将它放在输入框旁边,当输入框被注意到的时候。

区分主次动作

这也是一个很大的哲学问题,应不应该将第二个也包含进去。

字段长度提供可供性

字段的长度提供为答案的长度,使用这个定义的字段可以是字符计数,例如电话号码,邮政编码等。

区分*及可选字段

如果没有*用户可能不知道哪些是选填的内容。所以加上*能够更好的暗示用户。

组合相关信息

用户希望批量的去思考处理,但是长表单会让人觉得不知所措。所以通过创建逻辑组合,用户将会理解的更快。

why ask?

省略可选字段和其他方法来收集数据,总是文自己是否问题能被推断,推迟,或完全排除。

数据条目越来越自动化。移动和可穿戴设备手机大量的数据而用户毫无察觉。思考Nike 以如何利用社交,会话界面,短信,电子邮件,语音,OCR,LBS,指纹,生理信息。

让表格有趣,生命是短暂的。没有人想要去填表格。增强互动,变得有趣,逐步递进。让人惊喜。这就是设计师扮演的角色,表达出他们公司品牌传递出来的情绪。如果做得对,就会提高完成率。想想自己有没有犯上述的一些错误呢?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 表单是什么? 表单是一个包含表单元素的区域,使用表单标签( )定义。 表单元素是允许用户在表单中输入信息的元素,主...
    Meowmaid阅读 5,314评论 1 7
  • 网上鲜有用户体验的文章会把事情发生的原因给你讲的那么详细。相对于本文作者给出的方法,那些追溯源头的研究更值得一看。...
    D27阅读 5,573评论 0 5
  • 一. 表单设计的影响与原则 1.1 表单的产生 由内而外,网站根据自身信息存储格式要求,从数据库映射成表单。 由外...
    晓梦蝉君阅读 14,197评论 1 30
  • 不论是网页设计还是APP UI设计,表单都是界面中最常见、最重要的组件之一。它们的应用范畴非常广,用户注册、订阅服...
    笨小孩vying阅读 4,659评论 0 2
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 8,711评论 2 14

友情链接更多精彩内容