占位文本有問(wèn)題希柿?11個(gè)原因在這里

自從占位文本被引入到界面設(shè)計(jì)之后诊沪,它們已經(jīng)被廣泛的使用到表單中來(lái)作為提示信息。雖然這種做法聽起來(lái)不錯(cuò)曾撤,但實(shí)際上是有問(wèn)題的端姚,因?yàn)檎嘉奈谋舅淼奶崾拘畔⒏韱雾?xiàng)的實(shí)際有效值之間的關(guān)系似乎不清不楚。

相當(dāng)多的事實(shí)已經(jīng)歸結(jié)出來(lái)挤悉,把可用的信息當(dāng)做占位文本放在表單里其實(shí)并不總是能發(fā)揮應(yīng)有的作用渐裸。而如果使用占位文本作為標(biāo)簽的替代品,那情況就更糟了装悲。原因在這里:?

1昏鹃、占位文本消失后很容易被忘記

占位文本在用戶開始輸入時(shí)就會(huì)消失,所以用戶會(huì)很容易就忘記這段提示信息诀诊。這種問(wèn)題在復(fù)雜一些的表單中會(huì)表現(xiàn)的尤其突出洞渤。

在設(shè)計(jì)一個(gè)登錄表單時(shí),你可能不假思索就省略了文本標(biāo)簽属瓣,因?yàn)樵跇O簡(jiǎn)主義的思想引誘下您宪,你理所當(dāng)然的認(rèn)為只有輸入框就足夠了。

2奠涌、并不是所有的瀏覽器都支持占位文本

雖然大部分的瀏覽器都支持占位文本宪巨,但是也難免會(huì)有一些用戶使用的瀏覽器并不支持這一特性,這時(shí)候這部分用戶看到的文本框就是空白的一片溜畅,如果再?zèng)]有使用標(biāo)簽捏卓,那他們就不可能知道這個(gè)文本框的意義,又怎么能正確的完成輸入呢?

3怠晴、表單項(xiàng)中預(yù)置的值難于理解

當(dāng)一個(gè)表單加載出來(lái)就包含預(yù)置值遥金,在沒有標(biāo)簽的情況下用戶很難理解這個(gè)值究竟代表著什么意義。比如:

4蒜田、用戶回看時(shí)會(huì)帶來(lái)困難

如果一個(gè)用戶填寫了一個(gè)很長(zhǎng)的表單稿械,他現(xiàn)在想回過(guò)頭看看他所填入的這些內(nèi)容,用戶就不得不記住每個(gè)表單項(xiàng)的內(nèi)容分別代表什么冲粤。而且美莫,有些瀏覽器會(huì)錯(cuò)誤的自動(dòng)完成輸入,這無(wú)疑會(huì)加重該問(wèn)題梯捕。

5厢呵、錯(cuò)誤的輸入很難修正

一個(gè)出錯(cuò)的表單項(xiàng)有時(shí)很難得到修正,因?yàn)樵跊]有標(biāo)簽的情況下錯(cuò)誤信息也不夠清晰傀顾。例如:

這里的錯(cuò)誤信息提示用戶只能輸入純數(shù)字襟铭,但數(shù)字型式究竟如何卻并未指明。為了更明確的解釋短曾,錯(cuò)誤信息不得不變得啰嗦些寒砖,比如“有效期限只能是數(shù)字”。

無(wú)論如何嫉拐,如果加上一個(gè)標(biāo)簽哩都,就不會(huì)有這樣的問(wèn)題出現(xiàn)了:

6、有些瀏覽器在將焦點(diǎn)置于表單項(xiàng)時(shí)占位文本就會(huì)消失

當(dāng)瀏覽器首次加載顯示出占位文本后椭岩,它們會(huì)在獲取焦點(diǎn)后很快消失茅逮。這就意味著用戶在打字之前甚至沒有足夠的時(shí)間來(lái)閱讀這段提示信息璃赡,使得用戶不得不小心的在將焦點(diǎn)置于表單項(xiàng)之前先讀它們判哥。

雖然大多數(shù)瀏覽器只有在用戶開始打字的時(shí)候才會(huì)隱藏占位文本,但不免還是存在一些瀏覽器使用這種老套的做法碉考。

7塌计、占位文本可能被誤認(rèn)為是一個(gè)有效值

人們有時(shí)可能會(huì)回過(guò)頭來(lái)看看是不是還有空的表單項(xiàng)沒有填寫,但是已經(jīng)填寫的有效值跟占位文本的差異可能不夠明顯侯谁,使用戶誤以為所有表單都已填寫完整锌仅,結(jié)果跳過(guò)了這些空的表單項(xiàng),最后在系統(tǒng)對(duì)表單進(jìn)行校驗(yàn)的時(shí)候才被告知有錯(cuò)誤出現(xiàn)墙贱。

8热芹、對(duì)比反差不夠明顯

占位文本通常采用淺灰色,帶來(lái)的問(wèn)題出在兩個(gè)原因上: 首先惨撇,跟有效值的顏色上的差別用戶很難注意得到伊脓。其次,顏色的對(duì)比度不足以讓那些有視覺障礙的用戶正常閱讀魁衙。

9报腔、 屏幕閱讀器可能不能讀取到它們

占位文本可能不能被屏幕閱讀器讀取出來(lái)株搔,其效果也就跟毫無(wú)意義的空白表單項(xiàng)無(wú)異。而標(biāo)簽往往能夠別讀取到纯蛾。

10纤房、沒有帶標(biāo)簽的表單項(xiàng)減少了其熱區(qū)范圍

這意味著有運(yùn)動(dòng)技能障礙的人們會(huì)更難使用他們的手指或鼠標(biāo)來(lái)將焦點(diǎn)放置到表單項(xiàng)上。

11翻诉、占位文本的大小受限于表單項(xiàng)的長(zhǎng)度

如果占位文本超出了表單項(xiàng)的顯示長(zhǎng)度炮姨,那你只能看得到截取顯示出的那一部分,這就限制了你對(duì)文本信息的理解米丘。而使用標(biāo)簽的話就不會(huì)有這種問(wèn)題了剑令。

但是不是在使用了標(biāo)簽的前提下再使用占位文本就沒問(wèn)題了呢?

那倒不見得拄查。這樣當(dāng)然會(huì)更友好但依然存在問(wèn)題吁津。?

如果一段文本對(duì)用戶的體驗(yàn)確實(shí)是有意義的——拿本文中探討的占位文本來(lái)講,如果能有效的幫助用戶填寫表單內(nèi)容或者是顯示一些必要的提示信息堕扶、指明輸入格式碍脏,那么在不會(huì)造成上述任何問(wèn)題的情況下拿過(guò)來(lái)使用自然是極好的稍算。

另一方面典尾,如果在有標(biāo)簽的情況下還使用了占位文本,而其本身卻并沒有包含任何重要的信息糊探,那還為何要在毫無(wú)價(jià)值的情況下使用到占位文本呢钾埂?

總結(jié)

文中討論的所有11個(gè)問(wèn)題都是會(huì)給用戶填寫表單時(shí)帶來(lái)問(wèn)題的,因此也是我們?cè)趧?chuàng)建一個(gè)優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)時(shí)要規(guī)避的問(wèn)題科平。

如果你確實(shí)想要幫助到用戶褥紫,那么最好的開始就是在表單項(xiàng)中使用一個(gè)清晰可見的標(biāo)簽。

有時(shí)候瞪慧,在標(biāo)簽之外同時(shí)顯示占位文本可能確實(shí)有一定作用髓考,但是一定要明智而審慎的使用它們,如果你心存疑慮弃酌,不妨在不同的場(chǎng)景和瀏覽器環(huán)境下氨菇,邀請(qǐng)不同的人群做用戶測(cè)試,最后再做出最好的決定妓湘。

如果喜歡我的文章查蓉,請(qǐng)點(diǎn)個(gè)??;如果有任何意見或看法榜贴,請(qǐng)留下您的評(píng)論豌研。更歡迎各位持續(xù)的關(guān)注,謝謝!

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末聂沙,一起剝皮案震驚了整個(gè)濱河市秆麸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌及汉,老刑警劉巖沮趣,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異坷随,居然都是意外死亡房铭,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門温眉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)缸匪,“玉大人,你說(shuō)我怎么就攤上這事类溢×枋撸” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵闯冷,是天一觀的道長(zhǎng)砂心。 經(jīng)常有香客問(wèn)我,道長(zhǎng)蛇耀,這世上最難降的妖魔是什么辩诞? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮纺涤,結(jié)果婚禮上译暂,老公的妹妹穿的比我還像新娘。我一直安慰自己撩炊,他們只是感情好外永,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著衰抑,像睡著了一般象迎。 火紅的嫁衣襯著肌膚如雪荧嵌。 梳的紋絲不亂的頭發(fā)上呛踊,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音啦撮,去河邊找鬼谭网。 笑死,一個(gè)胖子當(dāng)著我的面吹牛赃春,可吹牛的內(nèi)容都是我干的愉择。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼锥涕!你這毒婦竟也來(lái)了衷戈?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤层坠,失蹤者是張志新(化名)和其女友劉穎殖妇,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體破花,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谦趣,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了座每。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片前鹅。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖峭梳,靈堂內(nèi)的尸體忽然破棺而出舰绘,到底是詐尸還是另有隱情,我是刑警寧澤葱椭,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布除盏,位于F島的核電站,受9級(jí)特大地震影響挫以,放射性物質(zhì)發(fā)生泄漏者蠕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一掐松、第九天 我趴在偏房一處隱蔽的房頂上張望踱侣。 院中可真熱鬧,春花似錦大磺、人聲如沸抡句。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)待榔。三九已至,卻和暖如春流济,著一層夾襖步出監(jiān)牢的瞬間锐锣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工绳瘟, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留雕憔,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓糖声,卻偏偏與公主長(zhǎng)得像斤彼,于是被迫代替她去往敵國(guó)和親分瘦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理琉苇,服務(wù)發(fā)現(xiàn)嘲玫,斷路器,智...
    卡卡羅2017閱讀 134,659評(píng)論 18 139
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)并扇、插件趁冈、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,105評(píng)論 4 62
  • 表單中的文本占位符讓用戶難以記住這個(gè)地方的標(biāo)題是什么渗勘,當(dāng)用戶檢查表單或者補(bǔ)全錯(cuò)誤的時(shí)候,也不知道這個(gè)輸入框的標(biāo)題是...
    燦一個(gè)閱讀 1,711評(píng)論 0 0
  • 今天上午在我回家的路上俩莽,因?yàn)樽祓捙苋ブ貞c小面里面吃麻辣燙旺坠。一進(jìn)店我就聞到了食物和廚房的味道,因?yàn)檫€沒到吃飯時(shí)間所以...
    半仙兒rongen閱讀 166評(píng)論 0 0
  • 認(rèn)準(zhǔn)了的事情就立馬去做扮超,不要等待徘徊取刃,你沒有那么多時(shí)間浪費(fèi),給自己一個(gè)未來(lái)出刷,你才有干勁璧疗。
    A分享閱讀 2,189評(píng)論 2 1