表單中的文本占位符讓用戶難以記住這個地方的標題是什么茉继，當用戶檢查表單或者補全錯誤的時候，也不知道這個輸入框的標題是什么蚀乔，之前輸入的內(nèi)容是什么烁竭。這種設計還為視力和認知障礙的用戶帶來額外的負擔。
上下文描述或提示可以讓用戶更加清楚的認識到每個表單區(qū)域的內(nèi)容吉挣，從而提高完成率和轉化率派撕。提供這種提示可以有很多種方法。一個常見的實現(xiàn)方法就是在表單里插入指示說明睬魂。但不幸的是终吼，用戶測試不斷顯示，表單中的占位符往往帶來用戶體驗的損害氯哮，比它帶來的幫助要多际跪。
標簽和占位符
標簽告訴用戶這個表單域代表什么意義，并且標簽通常位于表單域之外。文本占位符姆打，位于一個表單域里面良姆，是一個附加的提示、描述或填寫事例穴肘。這些提示信息在用戶點擊表單域的時候通常會消失歇盼。
占位符代替標簽
有些表單使用表單域占位符來代替標簽舔痕，這樣做可以減少頁面中雜亂的信息评抚，或者縮短表單的長度。雖然這種方法是基于一定優(yōu)化設計的目的伯复，但我們的研究展示它有很多消極的影響慨代。
以下是占位符不能取代表單域標簽的7個主要原因。
1啸如、消失的文字占位符讓用戶的短期記憶有壓力侍匙。
用戶在填寫長表單的時候，不免會刪除一些寫過的內(nèi)容叮雳，如果用戶忘記了提示想暗，他必須把內(nèi)容全部刪完才能再次看到文字占位符，回想起自己之前填寫的內(nèi)容是關于哪個方面的帘不。
在一個理想的世界说莫，用戶在填寫表單的時候會完全專注。但是寞焙，現(xiàn)實中储狭，他們是多任務同時進行的。他們可能會打開多個瀏覽器標簽捣郊，也有可能他們突然接到一個電話或查看郵件辽狈。對于一個復雜的任務，他們可能必須停下來去查找相應的文件或者訂單號呛牲。從我們的移動可用性研究中發(fā)現(xiàn)刮萌，我們知道移動用戶在使用設備時也經(jīng)常分心和中斷。所以娘扩，讓用戶回想起他們離開時候正在填寫的內(nèi)容就顯得很重要着茸。
對于一個或兩個字段的簡單常用表單，例如搜素框或登錄表單畜侦，相比較復雜的或罕見的表單元扔，用戶的記憶壓力會少一些。這是因為用戶在填寫簡單旋膳、熟悉的表單的時候澎语，能夠猜測到他們應該輸入什么。盡管如此，在一個簡單的擅羞，但沒有標簽的登錄表單尸变，用戶也可能不記得他們可以輸入什么類型字符，用戶名减俏、電子郵箱召烂，或只是用戶名。
2娃承、沒有標簽奏夫，用戶不能在提交表單之前進行有效的檢查
缺少了標簽，用戶很難去快速瀏覽整個表單去保證他們填寫的內(nèi)容是正確的历筝。類似地酗昼，自動填寫表單字段的瀏覽器也可能不能正確地填寫信息。如果沒有標簽梳猪，或者特殊說明不再可見麻削，用戶必須逐個刪除每個字段中的文本以顯示占位符文本，以確認其符合說明春弥。實際上呛哟，許多人甚至不會意識到這個錯誤的潛在可能，他們也將不會去做二次確認匿沛。
3扫责、當錯誤的消息發(fā)生，用戶不知道如何去解決這個問題
如果表單已填寫俺祠，但在表單域之外沒有標簽或指令可見公给，則用戶必須返回到每個字段以顯示描述，從而修正錯誤蜘渣。
4淌铐、讓使用鍵盤進行導航的用戶憤怒
那些使用鍵盤進行導航的用戶，用Tab 鍵來快速從一個區(qū)域到另一個區(qū)域快速移動蔫缸，他們需要在進行Tab切換的之前腿准，要記住下一個表單域需要填寫的內(nèi)容。拾碌。
5吐葱、已經(jīng)充斥內(nèi)容的表單域相較不容易發(fā)現(xiàn)
眼動實驗顯示，用戶的眼睛容易被吸引到空白的地方校翔。至少弟跑，用戶將花更多的時間找到一個非空的區(qū)域，這是一個麻煩防症。在最糟糕的惡情況下孟辑，他們可能會忽視這個表單域哎甲，認為它已經(jīng)被填寫了，而這就是一個潛在的商業(yè)災難饲嗽。
6炭玫、用戶可能將占位符誤認為自動填寫的數(shù)據(jù)
當表單域中已經(jīng)有文字了，用戶不太可能意識到他們可以在那里輸入文字貌虾。某些用戶假設占位符文本是默認值吞加，并完全跳過該字段。
7尽狠、偶爾用戶必須手動刪除占位符文本
有些時候衔憨，文本占文符不會消失，當用戶將光標移入這個區(qū)域的時候晚唇。如果文本占位符作為可編輯文本保留在字段中巫财，則用戶將需要強制手動選擇并刪除它盗似。這對用戶造成不必要的負擔哩陕，并增加填寫表單的交互成本。
標簽和文本占位符一同存在
使用文本占位符鈺表單標簽組合是朝著正確方向邁出的一步赫舒。表單域外的標簽可以隨時顯示必要信息悍及，而保留表格域內(nèi)的占位符文本以供補充信息。但是接癌，即便是用了標簽心赶，將一些重要的提示或指示說明放在表單域中仍然會引起上述提到的7個問題，雖然這些問題嚴重程度會降低缺猛。如果某些區(qū)域需要額外的描述缨叫，對正確完成表單至關重要，最高的方法就是將這些文字放置在表單域外邊荔燎，讓用戶能夠一直看到耻姥。
占位符與可訪問性的關系
最后一個要考慮的問題是，占位符文本通常不利于可訪問性有咨。當然琐簇，輔助軟件和更加現(xiàn)代的瀏覽器正在改進，但他們?nèi)匀贿€有很長的路要走座享⊥裆蹋可訪問性最大的三個問題如下：
1、默認的占位符文字的顏色是淺灰色渣叛，這種顏色不能與背景色產(chǎn)生足夠的對比丈秩。對于有視覺障礙的用戶，較弱的顏色對比使得閱讀文本變得困難淳衙。因為不是所有的瀏覽器都允許使用CSS來修改占位符文字的樣式蘑秽，這是一個難以解決的問題挽唉。
2、具有認知或移動障礙的用戶會有更多的負擔筷狼。正如我們所看到的瓶籽，文本占位符對所有用戶來說都是有問題的：消失的占位符增加了記憶負荷；模糊不清晰的占位符會引起用戶的困擾——這些文字看起來是可以點擊的埂材，那些不能消失的占位符需要使用鍵盤或鼠標來進行操作刪除塑顺。對于有認知或運動障礙的人，這些困難將被放大俏险。
3严拒、不是所有的屏幕閱讀器都會朗讀占位符文本。盲人或視力受損的用戶可能會完全錯過提示竖独，如果他們的軟件不能朗讀文字占位符的內(nèi)容裤唠。
結論
相比較讓用戶在填寫表單的時候遇到困難或者浪費他們的時間來弄清楚這些表單是如何工作的時候，最優(yōu)的解決辦法就是讓清晰的莹痢、可見的標簽放在空白的表單域之外种蘸。
提示和指示說明也應該一直放在表單域之外。表單是需要轉化目標的重要組成部分竞膳，因此航瞭，請確保您的用戶能夠準確地了解表單。
自適應占位符
最近坦辟，我們對修改后的占位符提出了更多質(zhì)疑刊侯，以減輕傳統(tǒng)占位符的一些缺點。這種樣式幾年前就已經(jīng)出現(xiàn)锉走，目前在一些主流網(wǎng)站上開始流行起來仙粱，比如walmart.com和warbyparker.com翰铡。
在此模式中嚣艇，標簽作為占位符放置在表單域中赠涮，當用戶將輸入焦點移動到表單域中的時候，標簽會移動到表單域的頂部嚣潜。所以冬骚，自適應占位符始終可見，無論是在表單域的中心還是在用戶輸入的文本之上懂算。
這種方法有兩個主要優(yōu)點：
- 它可以節(jié)省移動設備上的空間只冻，不需要額外的垂直空間將標簽放在場上。
- 當人們處于打字階段時计技，可見標簽用作記憶輔助喜德。因此，從上面的陷阱清單中可以看出1-4點垮媒。
然而舍悯，上述的問題5和問題6仍然無法解決：其中文本的字段不太明顯航棱，用戶可能會認為在該字段中輸入了一個默認值。
最后萌衬，自適應占位符確實比標簽提供了更好的用戶體驗饮醇。但如果您有足夠的屏幕空間，將標簽和提示放在表單域之外仍然是最好的方法秕豫。
來源：by KATIE SHERWIN on May 11, 2014
翻譯：by 燦一個 on Sep, 13, 2017
