[自译]表单设计的新规则

【表单设计的新规则】

每天,我们都会在网上使用表格。我们填写完整的购买流程;注册邮箱的列表;社会网络或者更多其他;去参加讨论;去描述看起来非常美味的午餐照片。一点也不夸张去说数字信息分享是他们的生命根源。多年来,表格却很少有改进,它的使用仅仅是满足工作但体验不是特别的优秀。如今现代的技术-在正确的使用情况下-允许设计师们去生产更快,更简单,更有效率的体验形式。

表格的使用体验形式是更短才更好。尽管这个是看起来合理的,但这个指导方针没有考虑其他的因素,例如,使用了哪些字段,他们是如何设计的,如何参与表格体验。

在2015年Call To Action 的展示活动中,Michael Aagaard of Unbounce 分享类似关注的研究。有一种特殊形式提高潜在客户转化的任务,他第一次把表格从9减到6减少了大量的字段.转化率减少了14%。深挖研究,他发现大部分参加的用户会删除字段,导致更少吸引力的体验。在第二轮中,他调整了清晰度和组织原来的形式,但保留所有9个字段。转换率增加了19%。所以不是表格越短越好。

所以,不把表格变的更短的基础上,我们如何使用现代的技术创造更好的表格?让我们考虑下新的规则:

·浏览优先级

·提供方便的格式化

·减少输入

·地理位置


浏览优先级

Jakob Nielsen很久之前就告诉我们用户是从上到下的浏览网页而不是仔细的阅读网页 。甚至当填写表格的时候-尽管他们的创造者可能更希望充分关注-用适用相同的规则。根据效率,有效的浏览是决定性限制错误和失误的字段,尤其是当表格只能一个人填写一次(填写地址表格, 登录表格,等等)。

本地标注

很多搜索被保存为本地标注,但这个是有限度。表格大师Luke Wroblewski 研究过 确定对齐的标签使用户能够最短时间的完成,因为可以减少眼睛移动的时间。对于通常理解的标签形式,右对齐是建议在页面被高度限制的情况下最快的选择。左对齐标签能够减少浏览完成的时间,并且这样的形式能够在数据请求很少的情况下让用户快速的理解。

提示

占位符文本(也称提示文本),从另一方面讲,被普遍认为是无用的。一旦在这个领域获取焦点标签里的提示文本就会消失,也就意味着用户再也看不到提示文本了。这将导致加重短期记忆的负担,增加错误的几率。

如果提示建议和标签是分离的,乍一眼看上去,这个领域是可以填写的。NN集团眼动研究已经说明了空白领域比有文本在里面的领域更能抓住用户的注意力,并且用户更喜欢跳过有文本提示的领域。另一方面,所谓有用的提示文本确实是弊大于利,并且会对浏览者造成困扰。

Good :an empty form field
Bad: a form field obscured with help text

在一些例子中,文本提示的颜色比正常文本的颜色要浅一些,这样也许缓和了上面提到的问题。然而,这样的做法产生了新的问题:白底上的浅灰色文本通常不符合无障碍网页(4.5:1的正常文本)普遍接受的准则。此外,根据W3C,提示文本没有被广泛使用的辅助技术支持,使之给这些用户准确地填写表格造成了困难。

浮动标签

这有个新的交互设计风格—浮动(自适应)标签迅速普及开来。在这些设计中,标签文本刚开始和占位文本一样,一旦用户开始输入提示就会移到输入框的上方。尽管这样可以有效的减少页面的长度,尤其在手机上使用非常有用,但是没有解决上述的关于文本提示已经填写的问题。因此,NN集团建议,除非页面的长度是主要关心的部分才保持以上的标签,否则就要避免这样的体验。


提供方便的格式

在过去,很多参与者填写表格是靠猜测。比如说,我忘记了自己的信用卡号码怎么办?在键盘上的@标识在哪里?新的技术能够使我们不用寻找就可以做出选择,带来更简洁的体验。

输入掩码

尽管在外观上相似,领域隐藏的技术帮助用户入门格式的文本比占位符文本明显不同。首先,当用户集中在一个场景,防止上述浏览的问题只出现一个隐藏文本。其次,当填写表格时,掩码能够自动的格式化文本,使用户更关注所需要的数据,更容易避免错误。在下面的例子里,当输入号码时,括号,空格,破折号都会自适应。


这个简单的技巧为填写电话号码,信用卡号,货币等节省了时间和精力。

输入区域为HTML

现在许多设计者知道,手机键盘显示一些正确的主要数据,但是会产生有一些哪种是正确的键盘类型的困惑。

现在通常使用的数字键盘,例如,不带字母的键盘。这显示了常规键盘和数字键的显示,包括比按键更小的数字键盘。


"Number" keyboard  vs."tel" keypad

对于只是用数字的领域,比如,电话号码,信用卡等,电话式键盘的按键范围较大是为了确保用户准确的输入。全键盘设置数的状态,依旧是混合字段通常以数的字开头就像一个街道地址非常有用。

这有几个可以添加其他文本和消除错误等的属性。

·自动完成:浏览器功能展示先前输入的列表。

·自动完成:更改过程中显示错误的单词。

·自动大写:使第一个字母大写。适用于名字,不适用于电子邮箱地址输入。

·拼写检查:用红色下划线标注拼色的单词。

减少输入

随着越来越多的人使用小屏手机,不管做什么要防止不必要的打字以提高用户的满意度,降低错误率。

地址预填

填写地址是线上注册中最繁琐的部分。各种领域,很长的名字等等。通过调整这个单一领域,消除了巨大的输入量。

输入地址(街道,城市,州,邮编,国家)到谷歌的总部,完整的形式可以用10个按键完成,与潜在的50多个手动输入。


电子邮件的预先填写

减少打字输入的另一种方式是电子邮件领域内提供常用的域名列表。Staples使用预先填写解决了当用户一旦开始输入@键,会出现高达12项的水龙头的方案。

Notice the field label "email address" has disappeared


地理位置

尽管地理位置数据的移动应用经常使用,我们不能忘记在整个平板电脑和台式机的利用方式。特别是触屏打字比较麻烦,如果基于位置预填写信息,可以节省宝贵的时间,提高转化率。

这有一个比较好的例子,Nordstrom的网站产品就是要求知道用户的邮政编码,根据用户所在的产品详情页面的位置自动在用户周围最近的商店查找该产品。


Nordstrom.com

尽管预先填写地址可能会带来准确性不够的问题。谷歌Places API提供了一套两全其美的解决方案:同时使用地理位置和地址预填充对用户的确切的位置提供准确的信息。


Zuppler.com

当然,由于不精确性,任何操作都允许用户手动编辑数据。

形成更好的表单

简而言之,遵循下面这些规则是一种成功的方式,也会给用户带来快乐。

·优先级浏览:通过设计易读的标签,可以避免外来的内容使浏览者产生困惑。

·提供方便的格式化:对每个条目类型输入的掩码和适当的键盘提供格式化

·减少输入:提供预填写

·地理位置:不添加点击的地理位置

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

推荐阅读更多精彩内容