作者：KATIE SHERWIN ?寫于：2014年5月11號(hào)

關(guān)鍵詞：可讀性 ?應(yīng)用程序設(shè)計(jì) 網(wǎng)頁(yè)可用性

概要：表單中的占位符文字是的用戶難以記住輸入框中的信息應(yīng)該填什么，只能通過(guò)反復(fù)檢查操作來(lái)發(fā)現(xiàn)錯(cuò)誤。這就給用戶視覺(jué)和認(rèn)知上造成了額外的負(fù)擔(dān)。

通過(guò)文案描述或提示語(yǔ)可以幫助用戶明確每個(gè)表單輸入框應(yīng)當(dāng)填什么內(nèi)容，并且能夠促進(jìn)表單輸入完成和提高轉(zhuǎn)化率。其實(shí)有很多方法可以提供這樣的提示。一種常用的方法就是在表單輸入框內(nèi)填入默認(rèn)說(shuō)明文案。然而經(jīng)過(guò)多次用戶可用性測(cè)試發(fā)現(xiàn)，輸入框內(nèi)的占位符提示文案不但不能幫助用戶反而降低了可用性。

標(biāo)簽 與 占位符

標(biāo)簽?zāi)軌蚋嬖V用戶需要在表框中輸入什么樣的信息，通常是在輸入框外。而占位符文本，則是在表框內(nèi)，是一種附加的提示、描述、甚至是填寫在輸入框內(nèi)的示例語(yǔ)句，當(dāng)用戶在輸入?yún)^(qū)鍵入時(shí)，這些提示則會(huì)消失。

圖片來(lái)源：翻譯原文

占位符替代標(biāo)簽

有些表單設(shè)計(jì)將輸入框內(nèi)的占位符文字替代了標(biāo)簽，以求頁(yè)面空間更整潔，雖然這種方法的初衷是好的，但是我們的調(diào)研發(fā)現(xiàn)這種方法有很多負(fù)面影響。

最糟糕的是：在此例中，占位符直接替代了標(biāo)簽

以下列舉了不應(yīng)當(dāng)用占位符文本來(lái)替代輸入框標(biāo)簽的七大理由：

1、會(huì)消失的占位符文本會(huì)帶給用戶短時(shí)記憶負(fù)擔(dān)

當(dāng)用戶填寫比較長(zhǎng)的表格時(shí)，如果用戶忘記了提示，就不得不刪掉他原本輸入了部分的內(nèi)容，或者點(diǎn)擊它處來(lái)查看占位符提示。在理想狀態(tài)下，我們希望用戶能夠?qū)Ｗ⒂谔顚懨恳粋€(gè)表格。而事實(shí)上，用戶通常是多任務(wù)狀態(tài)。他們可能開(kāi)了不同的標(biāo)簽頁(yè)，或者他們可能突然收到一封郵件或事接到一個(gè)電話。對(duì)于復(fù)雜的任務(wù)，他們有可能會(huì)停下來(lái)去檢查個(gè)文件或者訂單號(hào)。通過(guò)對(duì)移動(dòng)端可用性的調(diào)研，我們發(fā)現(xiàn)手機(jī)用戶在設(shè)備使用過(guò)程中也很容易被打擾分心。因此，當(dāng)用戶回到剛才中斷掉的地方，我們需要幫助用戶盡快連接起來(lái)。

對(duì)于只有一兩個(gè)輸入框的簡(jiǎn)單、常見(jiàn)的，比如搜索框或者登錄表單，這種短時(shí)記憶負(fù)擔(dān)就比復(fù)雜類的表單少得多。這是因?yàn)楹?jiǎn)單熟悉的表格，用戶通常都能猜到應(yīng)當(dāng)輸入什么。盡管這樣，沒(méi)有標(biāo)簽的簡(jiǎn)單登錄框，用戶還是可能疑惑，因?yàn)樗麄兛赡懿恢涝撦斎豚]箱號(hào)還是用戶名。

2、沒(méi)有標(biāo)簽，用戶在提交表單時(shí)都不能檢查填寫內(nèi)容

缺少標(biāo)簽用戶就不能一眼瀏覽表單是否填寫錯(cuò)誤。同樣地，及時(shí)被輸入了錯(cuò)誤的信息瀏覽器也默認(rèn)完成表單輸入。如果沒(méi)有標(biāo)簽，或者特殊提示看不見(jiàn)了，用戶只能一個(gè)一個(gè)地刪除輸入框內(nèi)的內(nèi)容能查看占位符提示，以確認(rèn)自己的輸入是否符合提示描述。然而事實(shí)上，很多人都不會(huì)費(fèi)勁去仔細(xì)檢查，很多人都無(wú)法發(fā)現(xiàn)可能出錯(cuò)。

3、當(dāng)信息填寫報(bào)錯(cuò)時(shí)，用戶無(wú)法定位是哪個(gè)表格填寫有問(wèn)題

如果所有的表格都填寫完了，而沒(méi)有可見(jiàn)的標(biāo)簽標(biāo)示于表格之外，那么用戶不得不一個(gè)一個(gè)地檢查自己填寫內(nèi)容是否符合表格的描述性占位符。

4、由于當(dāng)光標(biāo)一旦插入到表格中占位符文字就會(huì)消失，這非常不利于用戶操作輸入鍵盤。

當(dāng)用戶使用“TAB”鍵時(shí)，會(huì)從上一個(gè)輸入框跳到下一個(gè)輸入框，這時(shí)用戶可能還沒(méi)來(lái)得及看下一個(gè)輸入?yún)^(qū)的占位符提示內(nèi)容。

5、輸入框內(nèi)的內(nèi)容通常較難注意到

根據(jù)眼球追蹤的調(diào)查研究表明用戶的視線通常會(huì)被空白區(qū)域所吸引。至少，用戶會(huì)花更多的時(shí)間去才能關(guān)注到非空白區(qū)（這就已經(jīng)夠煩人的了）。更慘的是，他們直接把這樣的輸入?yún)^(qū)域忽視掉（如果這樣那真是粗大事兒了～ps：譯者說(shuō)）

6、用戶可能會(huì)以為占位符文字是默認(rèn)填入的數(shù)據(jù)

當(dāng)輸入框內(nèi)已經(jīng)有內(nèi)容的時(shí)候，人們會(huì)通常會(huì)認(rèn)為這不太像需要輸入的區(qū)域。有的用戶甚至直接認(rèn)定占位符文字就是默認(rèn)值，無(wú)需輸入，直接略過(guò)。

7、有時(shí)候用戶需要手動(dòng)刪除占位符文字

有時(shí)，當(dāng)用戶已經(jīng)操作點(diǎn)入輸入?yún)^(qū)內(nèi)，占位符文字還是不消失。如果這個(gè)區(qū)域的占位符文字保留并且客輸入，用戶還不得不手動(dòng)選中或者刪除它。這就會(huì)給用戶帶來(lái)不必要的麻煩，增加輸入框的操作成本。

盡管有時(shí)，當(dāng)光標(biāo)移入輸入框，占位符文字會(huì)變暗。而這樣的交互形式比較少見(jiàn)，用戶也不是很熟悉，有人還是會(huì)認(rèn)為必須手動(dòng)刪除這些文字。這就帶來(lái)了一些錯(cuò)誤的常識(shí)以及多次的點(diǎn)擊，才能讓用戶明白其實(shí)可以直接在暗淡文字旁直接輸入即可。

除了標(biāo)簽之外再使用占位符文字

將占位符文字與標(biāo)簽結(jié)合起來(lái)使用是一個(gè)不錯(cuò)的策略。輸入框外的標(biāo)簽讓一些必要提示信息一直可見(jiàn)，而框內(nèi)的占位符文字則用來(lái)提示一些補(bǔ)充信息。然而，盡管使用了標(biāo)簽提示，將一些重要的提示和說(shuō)明置于輸入框內(nèi)還是會(huì)造成如上所說(shuō)的問(wèn)題7，即使這個(gè)問(wèn)題并不是特別嚴(yán)重。如果一些輸入框需要一些必要的額外補(bǔ)充說(shuō)明才能讓用戶填寫正確，那最好在表單外放上標(biāo)簽文字保持始終可見(jiàn)。

好一點(diǎn)的是：在此，占位符只是作為除標(biāo)簽之外的一種補(bǔ)充提示

占位符文字及其可用性

最后一個(gè)要說(shuō)的問(wèn)題就是占位符文字通常有損可達(dá)性（網(wǎng)頁(yè)親和力的一種）。當(dāng)然，可達(dá)性軟件與現(xiàn)在等瀏覽器性能已經(jīng)都提升了，但是它們都還有很長(zhǎng)的路要走。以下就是會(huì)影響可達(dá)性的三大問(wèn)題：

1、占位符文字的默認(rèn)淺灰色是一種與背景對(duì)比度較低的色值。對(duì)用戶來(lái)說(shuō)是一種視覺(jué)損害，對(duì)比度低使得用戶閱讀困難。由于不是所有瀏覽器都能通過(guò)css自定義占位符文字，這使得這個(gè)問(wèn)題更難找到緩解方法。

2、有認(rèn)知或運(yùn)動(dòng)能力損傷的用戶更難理解。眾所周知，占位符會(huì)給所有用戶都帶來(lái)這些問(wèn)題：會(huì)消失的占位符文字增加記憶負(fù)擔(dān)；保持較暗淡色值的占位文字讓人疑惑它到底能不能點(diǎn)擊，若點(diǎn)擊后它不消失會(huì)帶來(lái)更多的交互輸入操作去刪除。這些困難對(duì)于有認(rèn)知和運(yùn)動(dòng)能力損傷的用戶來(lái)說(shuō)更是難上加難。

3、不是所有屏幕朗讀工具都可以朗讀占位文字。如果有的屏幕朗讀工具不能朗讀占位文字，那盲人和視力損傷的用戶會(huì)無(wú)法了解這些提示。

總結(jié)：

相比之下，這樣的設(shè)計(jì)冒著給用戶設(shè)置障礙的風(fēng)險(xiǎn)，與其浪費(fèi)時(shí)間去想解決方案，最直接有效的解決方案就是，用清晰可見(jiàn)的標(biāo)簽在輸入?yún)^(qū)外的空白區(qū)域顯示提示文字。

最好：標(biāo)簽和提示文字都在輸入?yún)^(qū)域之外，并保持始終用戶可見(jiàn)

提示和說(shuō)明文字應(yīng)該是固定在輸入?yún)^(qū)之外。表單是很多轉(zhuǎn)化目標(biāo)的重要組成部分，因此，應(yīng)該花心思在如何確保你的用戶能夠盡快準(zhǔn)確地完成填寫。

自適應(yīng)占位符

自2015年的一些設(shè)計(jì)和技術(shù)更新：最近我們已經(jīng)越來(lái)越質(zhì)疑之前對(duì)占位符的修改方法,因?yàn)橛行碌姆椒梢詼p輕傳統(tǒng)占位符的一些缺點(diǎn)。這種模式已經(jīng)存在了幾年,但是最終讓自己進(jìn)入主流網(wǎng)站,如Walmart.com和WarbyParker.com。

在此模式中,標(biāo)簽放置在表單字段作為占位符,直到用戶輸入焦點(diǎn)移動(dòng)到字段激活了這個(gè)輸入?yún)^(qū)。在這時(shí)，占位符標(biāo)簽移動(dòng)到輸入框頂部的領(lǐng)域。這樣一來(lái),自適應(yīng)占位符(也稱為浮動(dòng)標(biāo)簽)總是可見(jiàn)的,并且也在輸入框中,或者在用戶輸入的文本之上。

優(yōu)秀：用戶選中開(kāi)始輸入時(shí)，自適應(yīng)占位符會(huì)移到輸入?yún)^(qū)域頂部

?? 光標(biāo)focus的時(shí)候，橫線上占位文字會(huì)變色值且縮小上移

這種方式有兩個(gè)主要優(yōu)點(diǎn)：

在移動(dòng)設(shè)備上，這樣非常節(jié)省空間，不需要額外占用表單的垂直上方空間；

當(dāng)用戶在輸入時(shí)依然可作為一個(gè)可見(jiàn)的標(biāo)簽提供記憶援助，這就解決了上文提到的1～4的缺陷之處；

然而，上文提到問(wèn)題＃5與＃6：表單內(nèi)的文字容易被忽視，以及用戶可能會(huì)誤以為那是表格內(nèi)默認(rèn)填入的內(nèi)容。

最終，適應(yīng)性占位符作為一種占位符是比標(biāo)簽提供了更好的用戶體驗(yàn)。但是如果你有足夠的屏幕空間,將標(biāo)簽和提示置于表格以外的領(lǐng)域仍然是最好方法。

原文鏈接：https://www.nngroup.com/articles/form-design-placeholders/?from=singlemessage&isappinstalled=1