感覺占位文本有問題?11個原因在這里!
自從占位文本被引入到界面設計之后,它們已經(jīng)被廣泛運用到表單中來作為提示信息。雖然這種做法聽起來不錯,但實際上是有問題的,因為占文文本所代表的提示信息跟表單項的實際有效值之間,關系似乎不清不楚。至于原因,來看看這篇文章。
相當多的事實已經(jīng)歸結出來,把可用的信息當做占位文本放在表單里其實并不總是能發(fā)揮應有的作用。而如果使用占位文本作為標簽的替代品,那情況就更糟了。原因在這里:
1、占位文本消失后很容易被忘記
占位文本在用戶開始輸入時就會消失,所以用戶會很容易就忘記這段提示信息。這種問題在復雜一些的表單中會表現(xiàn)的尤其突出。
在設計一個登錄表單時,你可能不假思索就省略了文本標簽,因為在極簡主義的思想引誘下,你理所當然的認為只有輸入框就足夠了。
2、并不是所有的瀏覽器都支持占位文本
雖然大部分的瀏覽器都支持占位文本,但是也難免會有一些用戶使用的瀏覽器并不支持這一特性,這時候這部分用戶看到的文本框就是空白的一片,如果再沒有使用標簽,那他們就不可能知道這個文本框的意義,又怎么能正確的完成輸入呢?
3、表單項中預置的值難于理解
當一個表單加載出來就包含預置值,在沒有標簽的情況下用戶很難理解這個值究竟代表著什么意義。比如:
4、用戶回看時會帶來困難
如果一個用戶填寫了一個很長的表單,他現(xiàn)在想回過頭看看他所填入的這些內容,用戶就不得不記住每個表單項的內容分別代表什么。而且,有些瀏覽器會錯誤的自動完成輸入,這無疑會加重該問題。
5、錯誤的輸入很難修正
一個出錯的表單項有時很難得到修正,因為在沒有標簽的情況下錯誤信息也不夠清晰。例如:
這里的錯誤信息提示用戶只能輸入純數(shù)字,但數(shù)字型式究竟如何卻并未指明。為了更明確的解釋,錯誤信息不得不變得啰嗦些,比如“有效期限只能是數(shù)字”。
無論如何,如果加上一個標簽,就不會有這樣的問題出現(xiàn)了:
6、有些瀏覽器在將焦點置于表單項時占位文本就會消失
當瀏覽器首次加載顯示出占位文本后,它們會在獲取焦點后很快消失。這就意味著用戶在打字之前甚至沒有足夠的時間來閱讀這段提示信息,使得用戶不得不小心的在將焦點置于表單項之前先讀它們。
雖然大多數(shù)瀏覽器只有在用戶開始打字的時候才會隱藏占位文本,但不免還是存在一些瀏覽器使用這種老套的做法。
7、占位文本可能被誤認為是一個有效值
人們有時可能會回過頭來看看是不是還有空的表單項沒有填寫,但是已經(jīng)填寫的有效值跟占位文本的差異可能不夠明顯,使用戶誤以為所有表單都已填寫完整,結果跳過了這些空的表單項,最后在系統(tǒng)對表單進行校驗的時候才被告知有錯誤出現(xiàn)。
8、對比反差不夠明顯
占位文本通常采用淺灰色,帶來的問題出在兩個原因上: 首先,跟有效值的顏色上的差別用戶很難注意得到。其次,顏色的對比度不足以讓那些有視覺障礙的用戶正常閱讀。
9、 屏幕閱讀器可能不能讀取到它們
占位文本可能不能被屏幕閱讀器讀取出來,其效果也就跟毫無意義的空白表單項無異。而標簽往往能夠別讀取到。
10、沒有帶標簽的表單項減少了其熱區(qū)范圍
這意味著有運動技能障礙的人們會更難使用他們的手指或鼠標來將焦點放置到表單項上。
11、占位文本的大小受限于表單項的長度
如果占位文本超出了表單項的顯示長度,那你只能看得到截取顯示出的那一部分,這就限制了你對文本信息的理解。而使用標簽的話就不會有這種問題了。
但是不是在使用了標簽的前提下再使用占位文本就沒問題了呢?
那倒不見得。這樣當然會更友好但依然存在問題。
如果一段文本對用戶的體驗確實是有意義的——拿本文中探討的占位文本來講,如果能有效的幫助用戶填寫表單內容或者是顯示一些必要的提示信息、指明輸入格式,那么在不會造成上述任何問題的情況下拿過來使用自然是極好的。
另一方面,如果在有標簽的情況下還使用了占位文本,而其本身卻并沒有包含任何重要的信息,那還為何要在毫無價值的情況下使用到占位文本呢?
總結
文中討論的所有11個問題都是會給用戶填寫表單時帶來問題的,因此也是我們在創(chuàng)建一個優(yōu)秀的用戶體驗設計時要規(guī)避的問題。
如果你確實想要幫助到用戶,那么最好的開始就是在表單項中使用一個清晰可見的標簽。
有時候,在標簽之外同時顯示占位文本可能確實有一定作用,但是一定要明智而審慎的使用它們,如果你心存疑慮,不妨在不同的場景和瀏覽器環(huán)境下,邀請不同的人群做用戶測試,最后再做出最好的決定。
原文地址:medium
譯文地址:http://www.uisdc.com/text-placeholder-dont-work
開頭那appleid 的就兩個輸入框 而且是登錄界面,智障才不知道是啥呢,其他項在設計過程中注意下細節(jié)完全可以避免錯誤,想多了… 占位文本的出現(xiàn)是將最早出現(xiàn)在框外的提示文字結合進框內,應該屬于設計的進步額。
這個移動端的設計個pc端的文本設計不一樣吧