「譯文」輸入框的設(shè)計自查清單
文本輸入框是最基本的界面控件之一。它看似簡單,但使用場景多,交互頻次高,值得我們花些時間好好設(shè)計。全球著名的用戶體驗(yàn)咨詢公司 Nielsen Norman Group 整理了一份設(shè)計自查清單,共 14 條。供大家參考。
當(dāng)你在移動設(shè)備上設(shè)計輸入框時,應(yīng)該查查它是否滿足下表中的14條可用性要求。
無論是設(shè)計網(wǎng)頁,還是 web app,或是原生的移動 app,文本輸入框都是設(shè)計中的基礎(chǔ)組成控件。
這是一個輸入框應(yīng)該有的樣子:
一只安靜的輸入框
下面是移動端輸入框應(yīng)該遵守的 14 條用戶體驗(yàn)準(zhǔn)則:
到底需不需要輸入框
這個輸入框真的是必須有的嗎?
輸入框的描述
輸入框的文字描述在它的上方嗎?(不在里面,也不在下面)
這個輸入框是必填的(*)還是選填的?
有沒有把輸入框里的占位符都去掉?(為什么要去掉占位符:http://www.nngroup.com/articles/form-design-placeholders/)
可見性
輸入框是否足夠大,以便完整顯示那些最有可能出現(xiàn)的輸入內(nèi)容?
當(dāng)鍵盤出現(xiàn)的時候,輸入框是否在橫屏和豎屏兩個模式下都能被看到?
幫助用戶填寫信息
輸入框是否有合適的默認(rèn)值?
- 任何可用的歷史記錄值?
- 用戶經(jīng)常使用的值?
能不能用手機(jī)的特有功能(攝像頭,GPS,語音,聯(lián)系人)來填充呢?
能不能根據(jù)其他信息幫助用戶得出要填的值(例如,根據(jù)郵政編碼,或者優(yōu)惠券輸入碼來推測用戶所在的地區(qū))?
輸入過程
是否支持直接復(fù)制并粘貼到輸入框內(nèi)?
適合這個輸入框的鍵盤是哪個類型的?(譯注:如英文鍵盤還是數(shù)字鍵盤)
能不能根據(jù)前面輸入的字符進(jìn)行自動聯(lián)想或自動匹配?
- 對姓名、地址和電子郵件地址,不啟用自動更正。
允許單詞拼寫錯誤或是縮寫嗎?
允許用戶以任何格式輸入信息嗎?(譯注:如信用卡號、電話號碼里的「-」符號)
- 可以把用戶輸入的各式信息自動轉(zhuǎn)換為統(tǒng)一格式
根據(jù)這個清單檢查你設(shè)計中的每一個輸入框。這的確是有點(diǎn)耗時費(fèi)神,但是你受累總比用戶受累要好得多。
理想情況下,你的網(wǎng)站或是應(yīng)用中所有的輸入框都應(yīng)該百分百地符合這個清單。少了任何一項(xiàng),都會影響用戶體驗(yàn)。
實(shí)踐中,你可能做不到讓所有輸入框都百分百滿足這些用戶體驗(yàn)要求。在這種情況下,優(yōu)先讓那些最常被用到的或者是對完成任務(wù)最為關(guān)鍵的輸入框盡可能符合這個清單。
譯者:Aven
來源:設(shè)計譯言(微信公眾號:shejiyiyan)
原作者 Raluca Budiu
原文 A Checklist for Designing Mobile Input Fields
- 目前還沒評論,等你發(fā)揮!