作者：KATIE SHERWIN ?寫于：2014年5月11號
關鍵詞：可讀性 ?應用程序設計 網頁可用性
概要：表單中的占位符文字是的用戶難以記住輸入框中的信息應該填什么，只能通過反復檢查操作來發現錯誤。這就給用戶視覺和認知上造成了額外的負擔。
通過文案描述或提示語可以幫助用戶明確每個表單輸入框應當填什么內容，并且能夠促進表單輸入完成和提高轉化率。其實有很多方法可以提供這樣的提示。一種常用的方法就是在表單輸入框內填入默認說明文案。然而經過多次用戶可用性測試發現，輸入框內的占位符提示文案不但不能幫助用戶反而降低了可用性。
標簽 與 占位符
標簽能夠告訴用戶需要在表框中輸入什么樣的信息，通常是在輸入框外。而占位符文本，則是在表框內，是一種附加的提示、描述、甚至是填寫在輸入框內的示例語句，當用戶在輸入區鍵入時，這些提示則會消失。
占位符替代標簽
有些表單設計將輸入框內的占位符文字替代了標簽，以求頁面空間更整潔，雖然這種方法的初衷是好的，但是我們的調研發現這種方法有很多負面影響。
以下列舉了不應當用占位符文本來替代輸入框標簽的七大理由：
1、會消失的占位符文本會帶給用戶短時記憶負擔
當用戶填寫比較長的表格時，如果用戶忘記了提示，就不得不刪掉他原本輸入了部分的內容，或者點擊它處來查看占位符提示。在理想狀態下，我們希望用戶能夠專注于填寫每一個表格。而事實上，用戶通常是多任務狀態。他們可能開了不同的標簽頁，或者他們可能突然收到一封郵件或事接到一個電話。對于復雜的任務，他們有可能會停下來去檢查個文件或者訂單號。通過對移動端可用性的調研，我們發現手機用戶在設備使用過程中也很容易被打擾分心。因此，當用戶回到剛才中斷掉的地方，我們需要幫助用戶盡快連接起來。
對于只有一兩個輸入框的簡單、常見的，比如搜索框或者登錄表單，這種短時記憶負擔就比復雜類的表單少得多。這是因為簡單熟悉的表格，用戶通常都能猜到應當輸入什么。盡管這樣，沒有標簽的簡單登錄框，用戶還是可能疑惑，因為他們可能不知道該輸入郵箱號還是用戶名。
2、沒有標簽，用戶在提交表單時都不能檢查填寫內容
缺少標簽用戶就不能一眼瀏覽表單是否填寫錯誤。同樣地，及時被輸入了錯誤的信息瀏覽器也默認完成表單輸入。如果沒有標簽，或者特殊提示看不見了，用戶只能一個一個地刪除輸入框內的內容能查看占位符提示，以確認自己的輸入是否符合提示描述。然而事實上，很多人都不會費勁去仔細檢查，很多人都無法發現可能出錯。
3、當信息填寫報錯時，用戶無法定位是哪個表格填寫有問題
如果所有的表格都填寫完了，而沒有可見的標簽標示于表格之外，那么用戶不得不一個一個地檢查自己填寫內容是否符合表格的描述性占位符。
4、由于當光標一旦插入到表格中占位符文字就會消失，這非常不利于用戶操作輸入鍵盤。
當用戶使用“TAB”鍵時，會從上一個輸入框跳到下一個輸入框，這時用戶可能還沒來得及看下一個輸入區的占位符提示內容。
5、輸入框內的內容通常較難注意到
根據眼球追蹤的調查研究表明用戶的視線通常會被空白區域所吸引。至少，用戶會花更多的時間去才能關注到非空白區（這就已經夠煩人的了）。更慘的是，他們直接把這樣的輸入區域忽視掉（如果這樣那真是粗大事兒了～ps：譯者說）
6、用戶可能會以為占位符文字是默認填入的數據
當輸入框內已經有內容的時候，人們會通常會認為這不太像需要輸入的區域。有的用戶甚至直接認定占位符文字就是默認值，無需輸入，直接略過。
7、有時候用戶需要手動刪除占位符文字
有時，當用戶已經操作點入輸入區內，占位符文字還是不消失。如果這個區域的占位符文字保留并且客輸入，用戶還不得不手動選中或者刪除它。這就會給用戶帶來不必要的麻煩，增加輸入框的操作成本。
盡管有時，當光標移入輸入框，占位符文字會變暗。而這樣的交互形式比較少見，用戶也不是很熟悉，有人還是會認為必須手動刪除這些文字。這就帶來了一些錯誤的常識以及多次的點擊，才能讓用戶明白其實可以直接在暗淡文字旁直接輸入即可。
除了標簽之外再使用占位符文字
將占位符文字與標簽結合起來使用是一個不錯的策略。輸入框外的標簽讓一些必要提示信息一直可見，而框內的占位符文字則用來提示一些補充信息。然而，盡管使用了標簽提示，將一些重要的提示和說明置于輸入框內還是會造成如上所說的問題7，即使這個問題并不是特別嚴重。如果一些輸入框需要一些必要的額外補充說明才能讓用戶填寫正確，那最好在表單外放上標簽文字保持始終可見。
占位符文字及其可用性
最后一個要說的問題就是占位符文字通常有損可達性（網頁親和力的一種）。當然，可達性軟件與現在等瀏覽器性能已經都提升了，但是它們都還有很長的路要走。以下就是會影響可達性的三大問題：
1、占位符文字的默認淺灰色是一種與背景對比度較低的色值。對用戶來說是一種視覺損害，對比度低使得用戶閱讀困難。由于不是所有瀏覽器都能通過css自定義占位符文字，這使得這個問題更難找到緩解方法。
2、有認知或運動能力損傷的用戶更難理解。眾所周知，占位符會給所有用戶都帶來這些問題：會消失的占位符文字增加記憶負擔；保持較暗淡色值的占位文字讓人疑惑它到底能不能點擊，若點擊后它不消失會帶來更多的交互輸入操作去刪除。這些困難對于有認知和運動能力損傷的用戶來說更是難上加難。
3、不是所有屏幕朗讀工具都可以朗讀占位文字。如果有的屏幕朗讀工具不能朗讀占位文字，那盲人和視力損傷的用戶會無法了解這些提示。
總結：
相比之下，這樣的設計冒著給用戶設置障礙的風險，與其浪費時間去想解決方案，最直接有效的解決方案就是，用清晰可見的標簽在輸入區外的空白區域顯示提示文字。
提示和說明文字應該是固定在輸入區之外。表單是很多轉化目標的重要組成部分，因此，應該花心思在如何確保你的用戶能夠盡快準確地完成填寫。
自適應占位符
自2015年的一些設計和技術更新：最近我們已經越來越質疑之前對占位符的修改方法,因為有新的方法可以減輕傳統占位符的一些缺點。這種模式已經存在了幾年,但是最終讓自己進入主流網站,如Walmart.com和WarbyParker.com。
在此模式中,標簽放置在表單字段作為占位符,直到用戶輸入焦點移動到字段激活了這個輸入區。在這時，占位符標簽移動到輸入框頂部的領域。這樣一來,自適應占位符(也稱為浮動標簽)總是可見的,并且也在輸入框中,或者在用戶輸入的文本之上。
這種方式有兩個主要優點：
在移動設備上，這樣非常節省空間，不需要額外占用表單的垂直上方空間；
當用戶在輸入時依然可作為一個可見的標簽提供記憶援助，這就解決了上文提到的1～4的缺陷之處；
然而，上文提到問題＃5與＃6：表單內的文字容易被忽視，以及用戶可能會誤以為那是表格內默認填入的內容。
最終，適應性占位符作為一種占位符是比標簽提供了更好的用戶體驗。但是如果你有足夠的屏幕空間,將標簽和提示置于表格以外的領域仍然是最好方法。
原文鏈接：https://www.nngroup.com/articles/form-design-placeholders/?from=singlemessage&isappinstalled=1
