[UI/UE] 關於輸入框的設計方式

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉

我很常用中國信託，原因無他，只因為7-ELEVEN可以方便領錢，對於皮包裡面常常空空如也的我來說，真的還蠻方便的，至於中國信託呢？一個月至少會打幾通電話來說我是重要客戶，但是不外乎都是推銷保險或金融商品，在我跟幾個說客吵架過後，我也再三要求他們把我列入不主動聯絡的黑名單中，雖然不知道是不是真的有這份名單，但至少我有好一陣子沒接到推銷電話了。

既然開了戶，當然也要開一下網路銀行，先不論要不要轉賬，至少查詢金錢流向還蠻方便的，以前的中國信託網路銀行雖然界面不漂亮，但是也還算不錯用，但自從改版之後，我真的覺得這是一場噩夢的開始，而這個噩夢完全出在一個小小的輸入框細節裡。

我們先來說說一個輸入框會有哪些東西好了：

根據上圖的範例，我們可以知道一個輸入框的組成基本上會有label、value跟placeholder這三個部分，是使用者會注意的三大文字區域，有時候在頁面製作上為了美觀或其他原因會省略placeholder，但沒有placeholder的排版上就會另外用小字來說明，所以也算提供了與placeholder相似功能的部分，但今天我要提的卻是把label省略的UI設計規劃，目前中國信託商業銀行的官方網站就是採用這樣的方式做UI設計：

在一般情況下中國信託的登入表單是用placeholder替代label功能，但placeholder的特性就是當我點擊inuput輸入框後，這些提示文字就會消失，使用者對於UI操作上是屬於短期的記憶，很容易中途被打斷之後就忘記當前這個輸入框是要輸入什麼資訊，就像下圖，如果沒有label提示，其實一般使用者很容易忘記他是要輸入什麼資訊：

除了會遺忘當前的輸入框是要輸入什麼資訊的問題以外，當使用者把所需的資訊都填寫完畢後，使用者是沒有辦法再參照label對照輸入框中的資訊是否有誤，尤其是網路銀行登入會有安全機制，在輸入完資訊後無法再次對照內容是否正確的這個動作，很容易讓使用者誤填資訊導致帳號被鎖住，反而害得使用者必須在找實體ATM解鎖帳號。

在表單UI中常見的錯誤設計方式還有把placeholder的提示文字寫在value裡，使用者只好自行刪除這些提示文字，另一種常見錯誤則是把密碼的input type設定成text，導致密碼為明文（如下圖），這樣的UI設計方式很容易讓使用者密碼外流。

比較妥善的輸入框UI設計方式還是將label、value、placeholder回歸原有的功能，label就是輸入框的說明，vlaue則是可填寫的值，placeholder則是再輸入值之前所提供的額外詳細說明，但建議可以讓placeholder排列在頁面上，不要隨著點擊輸入框而消失，這樣的UI設計方式表現會更好。