Text Field Labels & Placeholders設計實務淺談
前陣子在設計URL Bar的text field文字框，因為說明文字的擺放位置和工程師有進一步的討論。
URL是在網頁內，如下圖所示，我們討論label/description(Enter URL)的文字，究竟要放在文字框內和文字框外。
從美感和使用性方面來說，簡單的說明文字放在文字框內，較為簡潔，畫面比較乾淨，會讓人比較有愉悅感，我支持放在文字框內。
工程師則偏向文字框上方外面。工程師如是說，並附上兩個關於文字框的文章：
就我所知大部分UX討論會建議不要這樣做，placeholder是用來放input example的不是放label/description的
通常會這麼做是在mobile device上的form沒有空間放label.
兩篇文章皆提到，標題和說明不適合放在文字框內的原因：
- 當文字框輸入文字時，placeholder會消失，考驗著使用者的短期記憶，使用者可能會忘記那格原本該填什麼，要把內容刪除之後，才看到得標題。
- 在按下提交按鈕前，使用者無法再次檢查一下他們所寫的內容。
- 當有地方寫錯時，因為文字框外沒有標題和指引，使用者會不知道如何修正錯誤。
- 使用者習慣使用tab鍵切換下格文字框，往往使用者還沒看到說明，就按下tab，focus在文字框時，placeholder的字會不見，造成填寫困擾。
- 比起空白的文字框，使用者較容易忽略已有內容的文字框。
- 使用者可能會誤會placeholder是過去使用者填過，自動帶入的資料
- 有些placeholder需要手動刪除。
- Accessibility 問題，對視障使用者不友善：有些螢幕閱讀器，並無法讀出placeholder的內容；placeholder灰色，不易閱讀。
上述原因，我多半是贊同的，但其實第一二點，可以在text field內放入icon以提示使用者，減少記憶負擔。第三點，如果輸入錯的話，應該會將text field用紅框highlight出來，並在該text field附近顯示錯誤的原因。第四點，現在text field的place holder文字多半在使用者輸入文字時，才會消失，並不會focus狀態時，就消失。
此外，今天工程師少考慮今天的情境：只有一個文字框。我回覆道：
關於text field需要考量情境：如果是表單填寫，會有很多text field，我會建議不用place holder，但如果因為空間考量，要用place holder，通常前面會放icon去提示使用者。
我認為在只有一個文字框的時候，並不會造成使用者短期記憶過大負擔，再者，我URL內也放了顆icon提示使用者。此外，這是一個功能，並非僅會填寫一次的註冊和問卷表單，多次使用之後，更會加深印象。其實多數功能型text field如：Search bar, URL bar，例如Google search不知道各位讀者在使用上，遭受困擾嗎？
雖然第一篇文章仍認為只有一兩個text field的時候，仍應該將label放在外面，他舉的例子為：使用者不會記得登入頁面，要填入的是Username或是Email。但我覺得這個情況很少發生，我自己應該會先看到text field內的placeholder文字之後，才開始鍵入。但或許有些人一看到登入頁面，就會急急輸入不看說明也不一定。不過Google的做法，仍是把將email說明放在text field內。
Google在註冊頁面時，因為欄位變多，在此情境下，是把label放在text field外，但少數為了讓使用者更精確要輸入什麼內容，仍彈性保留placeholder，例如姓氏、名字。
Adaptive Placeholders
其實關於label以holder的形式呈現，文字輸入後而label消失，造成使用性問題，現在已經有許多解法。以Google Material Design Guideline內Text Field為例，Text field在輸入文字後，原先的placeholder label會縮小，往上移動，並不會消失不見。
結論
多數狀況不建議label放入text field內，以placeholder的方式呈現，主要就是因為placeholder會因為輸入文字後而消失，造成使用性問題。若僅有一個text field時，或是因為空間有限的關係，則可加入其他輔助，增加使用性，例如：1)可以加上icon，增加判別性，2)或使用Adaptive Placeholder，當輸入文字時，label會以別的方式保留下來。
