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