基于移動(dòng)設(shè)備的UX設(shè)計(jì)有很多難點(diǎn),其中最大的設(shè)計(jì)挑戰(zhàn)之一是在有限的屏幕空間上解決點(diǎn)擊輸入的問(wèn)題。對(duì)于UX設(shè)計(jì)師、開(kāi)發(fā)人員和產(chǎn)品經(jīng)理來(lái)說(shuō),讓這個(gè)過(guò)程變得易于用戶(hù)使用就顯得至關(guān)重要。本篇文章闡述了提高數(shù)據(jù)輸入體驗(yàn)中的三個(gè)關(guān)鍵因素——速度(提高輸入速度)、引導(dǎo)(為用戶(hù)輸入提供引導(dǎo)幫助),反饋(直接有效地指出用戶(hù)輸入過(guò)程中的問(wèn)題)。
根據(jù)不同的輸入信息匹配合適的鍵盤(pán)
用戶(hù)都偏愛(ài)那些根據(jù)輸入內(nèi)容提供了合適鍵盤(pán)的應(yīng)用。我們可以根據(jù)輸入框的類(lèi)型優(yōu)化虛擬鍵盤(pán),這是實(shí)體鍵盤(pán)不能做到的。常見(jiàn)輸入內(nèi)容的類(lèi)型包括:
? 數(shù)字:電話號(hào)碼、信用卡號(hào)碼,PIN碼
? 文字:正確的名字、用戶(hù)名
? 混合輸入:電子郵件地址、街道地址、搜索關(guān)鍵詞
請(qǐng)確保這種匹配鍵盤(pán)的設(shè)計(jì)在整個(gè)應(yīng)用中是統(tǒng)一的,而不是僅僅用在了某些地方。
圖1左,用戶(hù)需要點(diǎn)擊123鍵來(lái)切換鍵盤(pán)類(lèi)型以便使用數(shù)字鍵盤(pán)
圖1右,我們應(yīng)該為需要輸入數(shù)字的文本區(qū)域自動(dòng)匹配合適的數(shù)字鍵盤(pán)
合理使用自動(dòng)大寫(xiě)功能
合理使用自動(dòng)大寫(xiě)對(duì)于提高移動(dòng)端表單的可用性來(lái)說(shuō)至關(guān)重要。每個(gè)文本輸入框的首字母和及每句話的首字母應(yīng)該自動(dòng)大寫(xiě)。這尤其適用于以下兩類(lèi)輸入?yún)^(qū)域:
? 給某信息命名,比如用戶(hù)的姓和名。
? 包含句子式的信息,比如短信息文本。
不過(guò),當(dāng)我們輸入電子郵件地址時(shí),應(yīng)該禁用自動(dòng)大寫(xiě)功能,當(dāng)用戶(hù)發(fā)現(xiàn)郵箱首字母大寫(xiě)時(shí),常常會(huì)退回去將大寫(xiě)字母刪掉,因?yàn)樗麄儞?dān)心這樣會(huì)讓郵件發(fā)送產(chǎn)生問(wèn)題。
當(dāng)詞典不好用時(shí)關(guān)閉自動(dòng)糾錯(cuò)功能
自動(dòng)修正這個(gè)功能往往使大多數(shù)用戶(hù)失望,甚至當(dāng)用戶(hù)沒(méi)有注意到的時(shí)候,它會(huì)明顯傷害用戶(hù)。自動(dòng)糾錯(cuò)功能對(duì)于以下這幾種信息更是收效甚微:例如縮寫(xiě)、街道名稱(chēng)、電子郵件、人名、以及詞典里沒(méi)有出現(xiàn)過(guò)的詞匯。
舊版本的亞馬遜手機(jī)app在文本輸入框中應(yīng)用了自動(dòng)修改模式,原本正確的輸入反而被自動(dòng)糾錯(cuò)的內(nèi)容代替了。
這種情況經(jīng)常會(huì)發(fā)生,因?yàn)橛脩?hù)往往更關(guān)注他們正在輸入的內(nèi)容而不是已經(jīng)輸入的內(nèi)容。如果輸入的內(nèi)容是地址類(lèi)的信息,自動(dòng)修改功能會(huì)悄悄篡改原本正確的輸入內(nèi)容,用戶(hù)很難注意這點(diǎn)。
固定的輸入模式
不要使用固定的輸入模式。使用固定樣式的最常見(jiàn)的理由是腳本校驗(yàn)限制。(后端可能不能判斷用戶(hù)輸入的格式)。然而大部分情況下,這是開(kāi)發(fā)者的問(wèn)題,不應(yīng)該讓用戶(hù)買(mǎi)單。你應(yīng)該想辦法將用戶(hù)的輸入轉(zhuǎn)化成可以存儲(chǔ)或顯示的格式,而不是強(qiáng)迫用戶(hù)輸入固定的格式。
圖4左,數(shù)據(jù)輸入框的樣式符合慣例(把電話號(hào)碼分割成三個(gè)輸入框),其余表單被鍵盤(pán)遮擋
圖4右,輸入框支持輸入靈活的內(nèi)容,并且輸入完成后自動(dòng)提高以便不會(huì)被鍵盤(pán)遮擋
默認(rèn)值和自動(dòng)完成
設(shè)計(jì)師們往往希望根據(jù)用戶(hù)的歷史記錄為他們提供預(yù)設(shè)的默認(rèn)值和提示語(yǔ),從而使用戶(hù)更便捷地輸入信息。比如,可以根據(jù)用戶(hù)所處的地理位置信息預(yù)設(shè)國(guó)家地區(qū)。
這種設(shè)計(jì)方法如果與自動(dòng)完成功能配合使用,可以顯著提高用戶(hù)輸入的效率。得益于自動(dòng)填充提供了實(shí)時(shí)性的輸入建議或是可以選擇一項(xiàng)內(nèi)容來(lái)完成輸入的下拉菜單,用戶(hù)可以更精確高效地輸入信息。對(duì)于那些讀寫(xiě)能力不佳、拼寫(xiě)困難、特別是使用非本國(guó)語(yǔ)言的用戶(hù)來(lái)說(shuō),這具有很高的價(jià)值。
圖5,提供了搜索建議的文本域
當(dāng)用戶(hù)在輸入框輸入信息時(shí),他們想知道所輸入信息的類(lèi)型,提供清晰的標(biāo)簽文本是一個(gè)使UI更具有可用性的好辦法。標(biāo)簽告知用戶(hù)文本框的目的,當(dāng)輸入框獲得焦點(diǎn)時(shí)發(fā)揮作用使用戶(hù)即使輸入完信息后,仍然保證對(duì)輸入框的關(guān)注度。
你也可以根據(jù)輸入框的上下文提供有用的信息。相關(guān)的上下文信息能幫助用戶(hù)更簡(jiǎn)便地完成任務(wù)。
標(biāo)簽長(zhǎng)度限制
標(biāo)簽并不是幫助信息。我們?cè)谠O(shè)計(jì)中應(yīng)當(dāng)使用簡(jiǎn)潔的、短的具有描述性的標(biāo)簽(1-2個(gè)),好讓用戶(hù)可以快速瀏覽所有的輸入框的需求。
圖6,輸入框的標(biāo)簽是 ‘電話’、’入住’、‘退房’
如果你需要更多關(guān)于輸入框的信息,提示文本可以幫助用戶(hù)解除困惑、并避免犯錯(cuò)。
圖7,‘phone’文本框下方的信息是幫助文本
簡(jiǎn)單的文案
設(shè)計(jì)用戶(hù)易于理解的語(yǔ)言。表意不明的術(shù)語(yǔ)和句子會(huì)給用戶(hù)增加認(rèn)知負(fù)擔(dān), 清晰的溝通和功能應(yīng)該始終優(yōu)先于專(zhuān)業(yè)的術(shù)語(yǔ)。
圖8左:生僻的文案會(huì)迷惑用戶(hù)
圖8右: 清晰易懂的術(shù)語(yǔ)易于用戶(hù)理解
輸入框內(nèi)的提示信息
頁(yè)內(nèi)標(biāo)簽(也叫占位符文本)適用于簡(jiǎn)單的輸入框,比如用戶(hù)名和密碼。
當(dāng)屏幕中存在多于兩個(gè)輸入框時(shí),對(duì)于那些分隔開(kāi)的文本標(biāo)簽,行內(nèi)標(biāo)簽就不適用了。雖然他們看起來(lái)整潔有序,但存在兩個(gè)嚴(yán)重的問(wèn)題:
? 當(dāng)用戶(hù)點(diǎn)擊了輸入框,行內(nèi)標(biāo)簽就會(huì)消失,所以他們不能再檢查所輸入的內(nèi)容是否正確
? 當(dāng)用戶(hù)在輸入框中看到提示文本,他們有可能認(rèn)為這個(gè)文本框已被預(yù)填成功從而忽略它。
一個(gè)處理占位符文本的好辦法是--浮動(dòng)標(biāo)簽。 當(dāng)用戶(hù)填寫(xiě)當(dāng)前某文本框時(shí),行內(nèi)標(biāo)簽即浮動(dòng)到文本框頂部。
注意: 不要過(guò)于依賴(lài)占位文本和標(biāo)簽。因?yàn)橐坏┰谳斎肟蚶镙斎雰?nèi)容,占位文本就無(wú)法被看到了??梢允褂酶?dòng)標(biāo)簽,這樣可以使用戶(hù)隨時(shí)確認(rèn)他們填寫(xiě)的內(nèi)容是否正確。
標(biāo)簽顏色
標(biāo)簽的顏色應(yīng)該與整個(gè)應(yīng)用的顏色匹配,并保持合適的對(duì)比度(不應(yīng)該太亮或太暗)。
校驗(yàn)
輸入框校驗(yàn)意味著給用戶(hù)反饋并引導(dǎo)他們改正錯(cuò)誤,消除用戶(hù)的疑惑。這個(gè)校驗(yàn)的結(jié)果應(yīng)該是人性化的而非像機(jī)器般冷冰。數(shù)據(jù)處理過(guò)程中最重要也是最容易讓人累覺(jué)不愛(ài)的地方是錯(cuò)誤處理。犯錯(cuò)是人類(lèi)天性,我們?cè)谔顚?xiě)輸入框時(shí)也不可避免。如果設(shè)計(jì)得當(dāng),校驗(yàn)可以使原本表意不清的交互行為變得清晰易懂。
實(shí)時(shí)校驗(yàn)
當(dāng)用戶(hù)在輸入數(shù)據(jù)的過(guò)程中,他們不喜歡在最后提交時(shí)才發(fā)現(xiàn)自己犯了錯(cuò)誤。正確的做法是,我們應(yīng)該在用戶(hù)剛剛剛填寫(xiě)完某條信息后就立刻告知他是否正確。
實(shí)時(shí)的頁(yè)內(nèi)校驗(yàn)可以立刻告知用戶(hù)他們輸入的信息是否正確。用戶(hù)可以更快地修改錯(cuò)誤,而不必等到按下提交按鈕后才知道哪里錯(cuò)了。設(shè)計(jì)師可以給錯(cuò)誤文案定義鮮明的顏色,比如紅色或者橙色這種暖色調(diào)。
圖12左,表單輸入內(nèi)容直到點(diǎn)擊提交后才報(bào)錯(cuò),并且錯(cuò)誤信息在輸入框之外
圖12右,輸入框下方實(shí)時(shí)顯示了錯(cuò)誤信息
校驗(yàn)不僅應(yīng)該告知用戶(hù)錯(cuò)誤,還應(yīng)告訴他們?cè)趺醋霾攀钦_的,用戶(hù)才會(huì)更有信心完成輸入過(guò)程。
清晰的信息
用戶(hù)時(shí)常有這樣的困惑“剛才發(fā)生了什么?為什么會(huì)這樣?”。此時(shí)應(yīng)該提供一個(gè)直接了當(dāng)?shù)拇鸢?。因此校?yàn)信息應(yīng)該清晰地說(shuō)明:
? 錯(cuò)誤是什么以及可能產(chǎn)生錯(cuò)誤的原因
? 用戶(hù)下一步應(yīng)該做什么來(lái)改正錯(cuò)誤
再次重申,避免使用機(jī)械性的術(shù)語(yǔ)。這條規(guī)則看起來(lái)很簡(jiǎn)單,但是有時(shí)卻很容易被忽略。
適當(dāng)?shù)念伾?/strong>
當(dāng)設(shè)計(jì)校驗(yàn)信息時(shí),顏色是一個(gè)可利用的好工具。根據(jù)慣例,紅色表示錯(cuò)誤信息,黃色表示警告信息,綠色表示成功,這些辦法很奏效。下圖是一個(gè)校驗(yàn)密碼輸入框的好案例:
另一個(gè)運(yùn)用顏色的優(yōu)秀案例是對(duì)文本輸入框做出字?jǐn)?shù)限制。紅色的字符計(jì)數(shù)器及紅色下劃線說(shuō)明該輸入框字?jǐn)?shù)已超限。
界面中顏色的應(yīng)用應(yīng)該符合用戶(hù)認(rèn)知,這是衡量?jī)?yōu)秀視覺(jué)設(shè)計(jì)的重要標(biāo)準(zhǔn)之一。
我們的設(shè)計(jì)應(yīng)當(dāng)盡可能讓用戶(hù)更快地完成信息錄入。即使像是首字母自動(dòng)大寫(xiě)或給每個(gè)輸入框提供合理的指示這種簡(jiǎn)單的辦法都會(huì)大大提高輸入框的可用性。設(shè)計(jì)師應(yīng)該多考慮用戶(hù)輸入時(shí)的真實(shí)使用行為從而在設(shè)計(jì)時(shí)確保沒(méi)有忽視某些重要的信息。
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版
豫 ICP 備16038122號(hào)-2
豫公網(wǎng)安備 41019702002261號(hào)