自從占位文本被引入到界面設(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