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

原文作者:Andrew Coyle

原文链接:Design Better Forms

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

表单应该在一列上


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

顶部对齐标签

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

将标签和输入框组合

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

避免全部大写

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

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

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

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

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

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

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

让唤起动作描述准确

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

指定错误内联

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

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

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

不要隐藏基础的帮助文本

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

区分主次动作

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

字段长度提供可供性

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

区分*及可选字段

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

组合相关信息

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

why ask?

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

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