2014 年 6 月 10 日

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

本篇目錄

我很常用中國信託,原因無他,只因為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設計方式表現會更好。

文章分類:

6 comments on “[UI/UX] 關於輸入框的設計方式”

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

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

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

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2013 年 2 月 19 日
用statcounter來看2013年桌機網頁設計趨勢

Statcounter Global Stats是一個知名、具權威等級特性的統計數據公布網站,所統計出來的數據 […]

Read More
2008 年 12 月 25 日
[短片]Google 祝個位聖誕快樂

我稍微解釋一下,這影片裡面使用的是Google Docs(Google文件),裡面的Excel試算表功能,並且 […]

Read More
2011 年 9 月 12 日
[免費]本週免費App 遊戲軟體下載看這裡

Piclings Piclings (遊戲推薦下載) 是一款你可以透過照片產生關卡的神奇遊戲,透過照 […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram