表單中的文本占位符讓用戶難以記住這個地方的標(biāo)題是什么，當(dāng)用戶檢查表單或者補(bǔ)全錯誤的時(shí)候，也不知道這個輸入框的標(biāo)題是什么，之前輸入的內(nèi)容是什么。這種設(shè)計(jì)還為視力和認(rèn)知障礙的用戶帶來額外的負(fù)擔(dān)。
上下文描述或提示可以讓用戶更加清楚的認(rèn)識到每個表單區(qū)域的內(nèi)容，從而提高完成率和轉(zhuǎn)化率。提供這種提示可以有很多種方法。一個常見的實(shí)現(xiàn)方法就是在表單里插入指示說明。但不幸的是，用戶測試不斷顯示，表單中的占位符往往帶來用戶體驗(yàn)的損害，比它帶來的幫助要多。
標(biāo)簽和占位符
標(biāo)簽告訴用戶這個表單域代表什么意義，并且標(biāo)簽通常位于表單域之外。文本占位符，位于一個表單域里面，是一個附加的提示、描述或填寫事例。這些提示信息在用戶點(diǎn)擊表單域的時(shí)候通常會消失。
占位符代替標(biāo)簽
有些表單使用表單域占位符來代替標(biāo)簽，這樣做可以減少頁面中雜亂的信息，或者縮短表單的長度。雖然這種方法是基于一定優(yōu)化設(shè)計(jì)的目的，但我們的研究展示它有很多消極的影響。
以下是占位符不能取代表單域標(biāo)簽的7個主要原因。
1、消失的文字占位符讓用戶的短期記憶有壓力。
用戶在填寫長表單的時(shí)候，不免會刪除一些寫過的內(nèi)容，如果用戶忘記了提示，他必須把內(nèi)容全部刪完才能再次看到文字占位符，回想起自己之前填寫的內(nèi)容是關(guān)于哪個方面的。
在一個理想的世界，用戶在填寫表單的時(shí)候會完全專注。但是，現(xiàn)實(shí)中，他們是多任務(wù)同時(shí)進(jìn)行的。他們可能會打開多個瀏覽器標(biāo)簽，也有可能他們突然接到一個電話或查看郵件。對于一個復(fù)雜的任務(wù)，他們可能必須停下來去查找相應(yīng)的文件或者訂單號。從我們的移動可用性研究中發(fā)現(xiàn)，我們知道移動用戶在使用設(shè)備時(shí)也經(jīng)常分心和中斷。所以，讓用戶回想起他們離開時(shí)候正在填寫的內(nèi)容就顯得很重要。
對于一個或兩個字段的簡單常用表單，例如搜素框或登錄表單，相比較復(fù)雜的或罕見的表單，用戶的記憶壓力會少一些。這是因?yàn)橛脩粼谔顚懞唵?、熟悉的表單的時(shí)候，能夠猜測到他們應(yīng)該輸入什么。盡管如此，在一個簡單的，但沒有標(biāo)簽的登錄表單，用戶也可能不記得他們可以輸入什么類型字符，用戶名、電子郵箱，或只是用戶名。
2、沒有標(biāo)簽，用戶不能在提交表單之前進(jìn)行有效的檢查
缺少了標(biāo)簽，用戶很難去快速瀏覽整個表單去保證他們填寫的內(nèi)容是正確的。類似地，自動填寫表單字段的瀏覽器也可能不能正確地填寫信息。如果沒有標(biāo)簽，或者特殊說明不再可見，用戶必須逐個刪除每個字段中的文本以顯示占位符文本，以確認(rèn)其符合說明。實(shí)際上，許多人甚至不會意識到這個錯誤的潛在可能，他們也將不會去做二次確認(rèn)。
3、當(dāng)錯誤的消息發(fā)生，用戶不知道如何去解決這個問題
如果表單已填寫，但在表單域之外沒有標(biāo)簽或指令可見，則用戶必須返回到每個字段以顯示描述，從而修正錯誤。
4、讓使用鍵盤進(jìn)行導(dǎo)航的用戶憤怒
那些使用鍵盤進(jìn)行導(dǎo)航的用戶，用Tab 鍵來快速從一個區(qū)域到另一個區(qū)域快速移動，他們需要在進(jìn)行Tab切換的之前，要記住下一個表單域需要填寫的內(nèi)容。。
5、已經(jīng)充斥內(nèi)容的表單域相較不容易發(fā)現(xiàn)
眼動實(shí)驗(yàn)顯示，用戶的眼睛容易被吸引到空白的地方。至少，用戶將花更多的時(shí)間找到一個非空的區(qū)域，這是一個麻煩。在最糟糕的惡情況下，他們可能會忽視這個表單域，認(rèn)為它已經(jīng)被填寫了，而這就是一個潛在的商業(yè)災(zāi)難。
6、用戶可能將占位符誤認(rèn)為自動填寫的數(shù)據(jù)
當(dāng)表單域中已經(jīng)有文字了，用戶不太可能意識到他們可以在那里輸入文字。某些用戶假設(shè)占位符文本是默認(rèn)值，并完全跳過該字段。
7、偶爾用戶必須手動刪除占位符文本
有些時(shí)候，文本占文符不會消失，當(dāng)用戶將光標(biāo)移入這個區(qū)域的時(shí)候。如果文本占位符作為可編輯文本保留在字段中，則用戶將需要強(qiáng)制手動選擇并刪除它。這對用戶造成不必要的負(fù)擔(dān)，并增加填寫表單的交互成本。
標(biāo)簽和文本占位符一同存在
使用文本占位符鈺表單標(biāo)簽組合是朝著正確方向邁出的一步。表單域外的標(biāo)簽可以隨時(shí)顯示必要信息，而保留表格域內(nèi)的占位符文本以供補(bǔ)充信息。但是，即便是用了標(biāo)簽，將一些重要的提示或指示說明放在表單域中仍然會引起上述提到的7個問題，雖然這些問題嚴(yán)重程度會降低。如果某些區(qū)域需要額外的描述，對正確完成表單至關(guān)重要，最高的方法就是將這些文字放置在表單域外邊，讓用戶能夠一直看到。
占位符與可訪問性的關(guān)系
最后一個要考慮的問題是，占位符文本通常不利于可訪問性。當(dāng)然，輔助軟件和更加現(xiàn)代的瀏覽器正在改進(jìn)，但他們?nèi)匀贿€有很長的路要走?？稍L問性最大的三個問題如下：
1、默認(rèn)的占位符文字的顏色是淺灰色，這種顏色不能與背景色產(chǎn)生足夠的對比。對于有視覺障礙的用戶，較弱的顏色對比使得閱讀文本變得困難。因?yàn)椴皇撬械臑g覽器都允許使用CSS來修改占位符文字的樣式，這是一個難以解決的問題。
2、具有認(rèn)知或移動障礙的用戶會有更多的負(fù)擔(dān)。正如我們所看到的，文本占位符對所有用戶來說都是有問題的：消失的占位符增加了記憶負(fù)荷；模糊不清晰的占位符會引起用戶的困擾——這些文字看起來是可以點(diǎn)擊的，那些不能消失的占位符需要使用鍵盤或鼠標(biāo)來進(jìn)行操作刪除。對于有認(rèn)知或運(yùn)動障礙的人，這些困難將被放大。
3、不是所有的屏幕閱讀器都會朗讀占位符文本。盲人或視力受損的用戶可能會完全錯過提示，如果他們的軟件不能朗讀文字占位符的內(nèi)容。
結(jié)論
相比較讓用戶在填寫表單的時(shí)候遇到困難或者浪費(fèi)他們的時(shí)間來弄清楚這些表單是如何工作的時(shí)候，最優(yōu)的解決辦法就是讓清晰的、可見的標(biāo)簽放在空白的表單域之外。
提示和指示說明也應(yīng)該一直放在表單域之外。表單是需要轉(zhuǎn)化目標(biāo)的重要組成部分，因此，請確保您的用戶能夠準(zhǔn)確地了解表單。
自適應(yīng)占位符
最近，我們對修改后的占位符提出了更多質(zhì)疑，以減輕傳統(tǒng)占位符的一些缺點(diǎn)。這種樣式幾年前就已經(jīng)出現(xiàn)，目前在一些主流網(wǎng)站上開始流行起來，比如walmart.com和warbyparker.com。
在此模式中，標(biāo)簽作為占位符放置在表單域中，當(dāng)用戶將輸入焦點(diǎn)移動到表單域中的時(shí)候，標(biāo)簽會移動到表單域的頂部。所以，自適應(yīng)占位符始終可見，無論是在表單域的中心還是在用戶輸入的文本之上。
這種方法有兩個主要優(yōu)點(diǎn)：
- 它可以節(jié)省移動設(shè)備上的空間，不需要額外的垂直空間將標(biāo)簽放在場上。
- 當(dāng)人們處于打字階段時(shí)，可見標(biāo)簽用作記憶輔助。因此，從上面的陷阱清單中可以看出1-4點(diǎn)。
然而，上述的問題5和問題6仍然無法解決：其中文本的字段不太明顯，用戶可能會認(rèn)為在該字段中輸入了一個默認(rèn)值。
最后，自適應(yīng)占位符確實(shí)比標(biāo)簽提供了更好的用戶體驗(yàn)。但如果您有足夠的屏幕空間，將標(biāo)簽和提示放在表單域之外仍然是最好的方法。
來源：by KATIE SHERWIN on May 11, 2014
翻譯：by 燦一個 on Sep, 13, 2017
