占位文本有问题?11个原因在这里

自从占位文本被引入到界面设计之后,它们已经被广泛的使用到表单中来作为提示信息。虽然这种做法听起来不错,但实际上是有问题的,因为占文文本所代表的提示信息跟表单项的实际有效值之间的关系似乎不清不楚。

相当多的事实已经归结出来,把可用的信息当做占位文本放在表单里其实并不总是能发挥应有的作用。而如果使用占位文本作为标签的替代品,那情况就更糟了。原因在这里: 

1、占位文本消失后很容易被忘记

占位文本在用户开始输入时就会消失,所以用户会很容易就忘记这段提示信息。这种问题在复杂一些的表单中会表现的尤其突出。

在设计一个登录表单时,你可能不假思索就省略了文本标签,因为在极简主义的思想引诱下,你理所当然的认为只有输入框就足够了。

2、并不是所有的浏览器都支持占位文本

虽然大部分的浏览器都支持占位文本,但是也难免会有一些用户使用的浏览器并不支持这一特性,这时候这部分用户看到的文本框就是空白的一片,如果再没有使用标签,那他们就不可能知道这个文本框的意义,又怎么能正确的完成输入呢?

3、表单项中预置的值难于理解

当一个表单加载出来就包含预置值,在没有标签的情况下用户很难理解这个值究竟代表着什么意义。比如:

4、用户回看时会带来困难

如果一个用户填写了一个很长的表单,他现在想回过头看看他所填入的这些内容,用户就不得不记住每个表单项的内容分别代表什么。而且,有些浏览器会错误的自动完成输入,这无疑会加重该问题。

5、错误的输入很难修正

一个出错的表单项有时很难得到修正,因为在没有标签的情况下错误信息也不够清晰。例如:

这里的错误信息提示用户只能输入纯数字,但数字型式究竟如何却并未指明。为了更明确的解释,错误信息不得不变得啰嗦些,比如“有效期限只能是数字”。

无论如何,如果加上一个标签,就不会有这样的问题出现了:

6、有些浏览器在将焦点置于表单项时占位文本就会消失

当浏览器首次加载显示出占位文本后,它们会在获取焦点后很快消失。这就意味着用户在打字之前甚至没有足够的时间来阅读这段提示信息,使得用户不得不小心的在将焦点置于表单项之前先读它们。

虽然大多数浏览器只有在用户开始打字的时候才会隐藏占位文本,但不免还是存在一些浏览器使用这种老套的做法。

7、占位文本可能被误认为是一个有效值

人们有时可能会回过头来看看是不是还有空的表单项没有填写,但是已经填写的有效值跟占位文本的差异可能不够明显,使用户误以为所有表单都已填写完整,结果跳过了这些空的表单项,最后在系统对表单进行校验的时候才被告知有错误出现。

8、对比反差不够明显

占位文本通常采用浅灰色,带来的问题出在两个原因上: 首先,跟有效值的颜色上的差别用户很难注意得到。其次,颜色的对比度不足以让那些有视觉障碍的用户正常阅读。

9、 屏幕阅读器可能不能读取到它们

占位文本可能不能被屏幕阅读器读取出来,其效果也就跟毫无意义的空白表单项无异。而标签往往能够别读取到。

10、没有带标签的表单项减少了其热区范围

这意味着有运动技能障碍的人们会更难使用他们的手指或鼠标来将焦点放置到表单项上。

11、占位文本的大小受限于表单项的长度

如果占位文本超出了表单项的显示长度,那你只能看得到截取显示出的那一部分,这就限制了你对文本信息的理解。而使用标签的话就不会有这种问题了。

但是不是在使用了标签的前提下再使用占位文本就没问题了呢?

那倒不见得。这样当然会更友好但依然存在问题。 

如果一段文本对用户的体验确实是有意义的——拿本文中探讨的占位文本来讲,如果能有效的帮助用户填写表单内容或者是显示一些必要的提示信息、指明输入格式,那么在不会造成上述任何问题的情况下拿过来使用自然是极好的。

另一方面,如果在有标签的情况下还使用了占位文本,而其本身却并没有包含任何重要的信息,那还为何要在毫无价值的情况下使用到占位文本呢?

总结

文中讨论的所有11个问题都是会给用户填写表单时带来问题的,因此也是我们在创建一个优秀的用户体验设计时要规避的问题。

如果你确实想要帮助到用户,那么最好的开始就是在表单项中使用一个清晰可见的标签。

有时候,在标签之外同时显示占位文本可能确实有一定作用,但是一定要明智而审慎的使用它们,如果你心存疑虑,不妨在不同的场景和浏览器环境下,邀请不同的人群做用户测试,最后再做出最好的决定。

如果喜欢我的文章,请点个👍;如果有任何意见或看法,请留下您的评论。更欢迎各位持续的关注,谢谢!

译自:https://medium.com/simple-human/10-reasons-why-placeholders-are-problematic-f8079412b960#.qq1c7l8wu

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,087评论 18 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,596评论 4 59
  • 表单中的文本占位符让用户难以记住这个地方的标题是什么,当用户检查表单或者补全错误的时候,也不知道这个输入框的标题是...
    灿一个阅读 1,638评论 0 0
  • 今天上午在我回家的路上,因为嘴馋跑去重庆小面里面吃麻辣烫。一进店我就闻到了食物和厨房的味道,因为还没到吃饭时间所以...
    半仙儿rongen阅读 153评论 0 0
  • 认准了的事情就立马去做,不要等待徘徊,你没有那么多时间浪费,给自己一个未来,你才有干劲。
    A分享阅读 2,091评论 2 1