[译]表单设计原则

来源:uxbooth

表单设计中似乎有一条不可侵犯的原则,即越短越好。从逻辑上来说没有错——用户付出的越少,其转换率越高。然而这条原则缺乏对诸如字段类型,设计样式等因素的考虑。

十年前,Imaginary Landscape机构研究发现,当把需要填写的字段从11个减少到4个时,用户转换率提升了160%。但是这仅仅是涉及两个变量(字段数量和转换率)的实验。有没有将这4个字段分组排布呢?没有。10个字段和11个字段相比,转换率有什么变化呢?5个和4个字段呢?该机构并没有做这些研究。所以,这就是一个特殊的案例,当然了,减少64%的信息量确实能让表单更容易填写。

Unbounce(一家提供着陆页测试的公司)的Michael Aagaard 分享过一个类似的研究,他先将需要填写的字段由9个见到6个,发现转换率降低了14%。进一步研究发现,对于用户来说,字段的排列组织得更好会减轻填写的强迫感。第二轮研究中,他对9个字段进行分类和组织,转换率提高了19%。这项研究证明了并不是字段越少越好。

如果不能减少字段数量,我们如何通过其他手段提升表单填写体验呢?我认为有以下四个原则:

•  让用户能够全览表单

• 提供轻松的样式

•减少不必要的输入


让用户能够全览表单

尼尔森告诉我们用户自上而下浏览网站而不是阅读网站。即便是填写表单的时候,这条原则依旧适用,即便设计者希望用户能全神贯注地填写。用户能快速而有效地浏览表单对于减少填写错误或者漏填是至关重要的,尤其是我们指望用户能在一次填完整个表单时。

标签位置

关于标签位置的研究很多,至今仍存在争议。一项研究表明,标签顶部对齐时,填写时间最短,因为减少了用户用户的眼球移动。右对齐是次快的方式,当界面高度有限时,可以采用这种方式。左对齐的标签的方式,将导致用户填写时间最长。

提示

预先填好示例字段并没有什么用,即便其获取焦点后,这些字段会消失。因为这种方式会增加用户短期的记忆负担,增加失败的几率。


要:提供空表格
不要:提供令人费解的示例字段



浮动标签

浮动标签,是一种比较新的交互设计,非常受欢迎。在这种设计中,标签文字作为占位符出现,当用户键入内容时,他们会缩到文本框的上方位置,如下图的效果:

浮动标签

尽管这种方式能减少界面的长度,在移动端会非常好用,但是可能会造成用户很难区分已填写字段和未填写字段。所以也有人建议应该避免这种设计,应当保持标签一直在上面,除非页面长度真的是个问题时,再考虑这种交互方式。

提供轻松的样式

过去,用户去通过猜测才能完成表单填写。比如电话号码的填写需要遵循什么格式?需要填区号吗?怎么填?我是不是漏了一位信用卡数字?@符号在键盘哪个位置?好在现在能通过一些手段为用户提供更明了的体验,让用户填写时不去考虑这些问题。

提供结构化样式

获取焦点后,结构化的样式出现在文本框内,用户填写时,字符能够同时自动编排,让用户专注于填写本身。如下图所示,当用户填写电话号码时,括号、横线、空格都被用户输入的数字所取代。


结构化样式

在填写电话号码、信用卡、货币金额等场景下,这种方式能够节省用户不少时间和经历。

提供适当的输入键盘

许多设计师知道根据不同的输入场景展示相应的小键盘,但对于哪一个才是正确的键盘类型,其实很多人还存在困惑。

“数字”键盘 vs. “电话”键盘

当仅仅需要输入数字时,如电话号码,日期,邮编,信用卡号等,上图中右侧“电话”键盘可能对用户更友好,输入更省力。左侧的“数字”键盘,适合于混合的输入场景,比如最开始输入的是数字,后面需要输入一些符号等。

还有一些其他方式,能够减少用户输入时的压力和输入错误:

•自动完成:在输入时,帮助用户自动联想之前输入过的内容。切记涉及敏感数据时不要使用此功能。

•自动校验:当拼写错误时能够自动校正。当输入类似姓名、地址等信息时,关闭此功能。

•首字母大写:填写姓名时,保证首字母大写,填写电子邮箱时,不必。

•拼写检查:对于拼写错误的单词通过红色下划线提示用户。名字和地址这种字段无需提示。

减少不必要的输入

预填充地址

越来越多的人使用移动设备,所以减少不必要的输入对于提升用户满意度和减少错误率来说很重要。

地址填写对于注册来说是最繁琐的一步了,需要填写省份、城市、街道、邮编等。

Google有相关的API方案,能够解决这一个问题,但是可能无法细节到门牌号这种程度。所以预填充后,要允许用户对其修改。


Email 预填充

在用户输入用户电子邮箱地址时,可通过提供常见邮箱后缀来减少用户输入。如网易邮箱:

邮箱地址预填充


地址预填充

尽管使用地理位置定位的技术在移动应用中非常常见,但是我们可别忘了在笔记本或者桌面电脑使用这种技术,尤其是触屏设备,它的输入相当繁琐,基于地理位置的预填充信息能够有效节省用户时间,提高转换率。

预填充地理位置不一定精准,应当允许用户对其进行再编辑。

地址预填充示例

地址预填充示例



总之,遵循这些原则能够为用户带来良好的填写表单体验:

•让用户通过阅读标签对表单全览,避免无关的内容项干扰用户

•通过结构化的表单设计和恰当的键盘,让用户输入更轻松

•通过预填充减少用户输入

•充分利用基于地理位置的技术

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

推荐阅读更多精彩内容

  • 网上鲜有用户体验的文章会把事情发生的原因给你讲的那么详细。相对于本文作者给出的方法,那些追溯源头的研究更值得一看。...
    D27阅读 1,548评论 0 5
  • 优先保证表单的可浏览性 很早之前Jakob Nielsen的研究告诉我们,用户通常只是快速浏览网页而不是细致地从上...
    张安松阅读 640评论 0 3
  • 表单是什么? 表单是一个包含表单元素的区域,使用表单标签( )定义。 表单元素是允许用户在表单中输入信息的元素,主...
    Meowmaid阅读 1,385评论 1 7
  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 3,408评论 2 14
  • 【表单设计的新规则】 每天,我们都会在网上使用表格。我们填写完整的购买流程;注册邮箱的列表;社会网络或者更多其他;...
    HsuDoNBu柏阅读 330评论 1 2