最新 New

[公告]草監網路更改網址至gratch.tw

[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設計方式表現會更好。

留言

  1. https://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

    我想這是在美觀和方便性之間的最佳解!

    回覆刪除
  2. http://mozmonkey.com/wp-content/files/PlaceholderLabels/

    這種做法也不錯

    回覆刪除
  3. 您好,閱讀完全文所聯想到的:http://www.css3-html5.com/uploadfile/2011/0724/20110724054501478.jpg
    可是又想起防呆提示(請輸入10~16英數字元不含!@#$@#&^%符號)有時候也長這樣會混淆?!

    想分享一個寫法:focus 改變顏色,對於眼睛不好的人判別顏色作改變。但是因為看少人寫這個或說這件事,不知道他人的想法@@

    回覆刪除
    回覆
    1. 瀏覽器本身會有focus功能(會有藍色外框),所以在一般預設情況下就會有focus改變顏色這件事.....不過我只有測試chrome、FF、Safari....IE我就不清楚了XD (狀態顯示:不理IE一兩年了)

      刪除
  4. Facebook 的 mobile 登入設計會在第一次輸入錯誤密碼時改用明文顯示密碼。

    回覆刪除
    回覆
    1. 根據我最近做的使用者研究調查結果,對mobile來說,大家普遍都會覺得mobile上的東西比較私密,所以有些人也會設定開機密碼鎖,所以在手機密碼顯示名聞這件事的思考模式就會跟桌機不一樣,因為桌機比較容易被其他人使用,尤其是有些人的電腦也會放在公共區域中,所以對密碼明文這件事的考量就會變得比mobile重要

      刪除

張貼留言