占位文本有問題?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閱讀 229,406評論 6 538
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,034評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,165評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,559評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,781評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,327評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,084評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,278評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,495評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,010評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,241評論 2 375

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,807評論 18 139
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,156評論 4 61
  • 表單中的文本占位符讓用戶難以記住這個地方的標題是什么,當用戶檢查表單或者補全錯誤的時候,也不知道這個輸入框的標題是...
    燦一個閱讀 1,742評論 0 0
  • 今天上午在我回家的路上,因為嘴饞跑去重慶小面里面吃麻辣燙。一進店我就聞到了食物和廚房的味道,因為還沒到吃飯時間所以...
    半仙兒rongen閱讀 168評論 0 0
  • 認準了的事情就立馬去做,不要等待徘徊,你沒有那么多時間浪費,給自己一個未來,你才有干勁。
    A分享閱讀 2,210評論 2 1