什么是觸屏鍵盤的設(shè)計(jì)準(zhǔn)則
什么是觸屏鍵盤的設(shè)計(jì)準(zhǔn)則
你們知道觸屏鍵盤有什么設(shè)計(jì)準(zhǔn)則嗎?不知道的話跟著學(xué)習(xí)啦小編一起來學(xué)習(xí)觸屏鍵盤的設(shè)計(jì)準(zhǔn)則吧。
觸屏鍵盤的設(shè)計(jì)準(zhǔn)則
通常來說，人們會(huì)理所當(dāng)然的認(rèn)為觸屏設(shè)備要比幾十年的電腦鼠標(biāo)和鍵盤直觀的多。用戶與觸屏直接交互，縮小了用戶行為與軟件響應(yīng)之間的距離。然而，在移動(dòng)設(shè)備上——尤其是在智能手機(jī)上——打字是一件相當(dāng)恐怖的事情。因?yàn)槟羌嚷?，又痛苦，而且容易出錯(cuò)。
最明顯的原因是鍵盤字符的尺寸和按鍵之間的臨近，但是還有很多其他重要因素需要考慮，包括：
適當(dāng)?shù)氖褂米詣?dòng)更正的字典
貼切的將字母自動(dòng)大寫
提示輸入類型
保持標(biāo)簽順序
保持自定義鍵盤的一致性
在最近一次大規(guī)模的針對(duì)18個(gè)最大的移動(dòng)電子商務(wù)網(wǎng)站的1：1可用性測(cè)試中，我們觀察了在填寫表格過程中，現(xiàn)在的觸屏鍵盤的某些功能與限制是如何與用戶的預(yù)期相沖突的。一旦沖突出現(xiàn)，用戶的受挫感會(huì)立刻上升，比如表單字段驗(yàn)證錯(cuò)誤的提示一個(gè)接一個(gè)的彈出來，或者更糟的是，用戶被卡住并最終放棄了網(wǎng)站。
當(dāng)面對(duì)一個(gè)不那么理想的觸屏鍵盤是，用戶會(huì)對(duì)網(wǎng)站失去信心，有的甚至懷疑自己用智能手機(jī)填完一個(gè)表單的能力。顯然，好的移動(dòng)終端的用戶體驗(yàn)需要一個(gè)具有良好可用性的表單，觸屏鍵盤也是其中的關(guān)鍵一環(huán)。
在本篇文章里，我們將圍繞觸屏鍵盤的可用性問題做深入一點(diǎn)的探討，包括5條設(shè)計(jì)準(zhǔn)則，可以緩解一些問題。這個(gè)設(shè)計(jì)準(zhǔn)則摘自移動(dòng)電子商務(wù)可用性報(bào)告中147條指南。前段時(shí)間我們?cè)赟mashing Magazine上看了移動(dòng)電子商務(wù)10條準(zhǔn)則，這5條觸屏鍵盤的準(zhǔn)則會(huì)更具有通用性，可以應(yīng)用于用戶與觸屏鍵盤有交互的任何手機(jī)網(wǎng)站。
此外，我們還以這5條準(zhǔn)則為基準(zhǔn)審視了排名前50的在線零售商的移動(dòng)端網(wǎng)站，發(fā)現(xiàn)98%的網(wǎng)站犯了一個(gè)或多個(gè)錯(cuò)誤，70%的熱門移動(dòng)端網(wǎng)站犯了至少兩個(gè)錯(cuò)誤(截至到2013年7月31日)。盡管有些指南可能剛開始看起來是顯而易見的，但當(dāng)如此多的電子商務(wù)站點(diǎn)都犯了這樣的錯(cuò)誤，我們顯然需要更仔細(xì)的審視這些指南。
1、當(dāng)詞典匱乏時(shí)，禁用自動(dòng)更正(92%的網(wǎng)站犯了此錯(cuò)誤)
問題：當(dāng)用戶真的注意到差勁的自動(dòng)更正時(shí)會(huì)感到很挫敗，如果他們沒有注意到更改，將會(huì)是一件更糟糕的事情。
自動(dòng)更正通常在以下情況表現(xiàn)非常糟糕：縮寫，街道名稱，email地址以及其他詞典里沒有的詞匯。這在整個(gè)測(cè)試過程中造成了很大的問題，隨著被試者完成購(gòu)買，大量錯(cuò)誤數(shù)據(jù)被提交。
當(dāng)被試者在網(wǎng)站上街道名稱一欄輸入”westheimer”時(shí)，手機(jī)將其錯(cuò)誤的更正為”weathermen”(如左圖)。然而，被試者并沒有注意到，提交表單后收到了一個(gè)錯(cuò)誤驗(yàn)證(如右圖)。
關(guān)于自動(dòng)更正的一個(gè)主要問題就是，用戶通常不會(huì)注意到更正(因?yàn)橛脩敉ǔｊP(guān)注的是他們正在輸入什么，而不是已經(jīng)輸入的內(nèi)容)。如果更正是正確的，那就沒問題，但如果更正是錯(cuò)誤的，那將會(huì)是很糟糕的事情。例如，在測(cè)試過程中多次碰到的例子，由于被試者并沒有注意到自動(dòng)更正，原本有效的地址信息被自動(dòng)更正為無(wú)效信息并被提交。
在沒有地址驗(yàn)證的網(wǎng)站上，這會(huì)導(dǎo)致訂單被送到錯(cuò)誤的地址，除非被試者特意仔細(xì)的查看訂單確認(rèn)頁(yè)(畢竟，自動(dòng)更正的信息通?？雌饋砼c輸入的信息非常相似，這也使得用戶很少會(huì)注意到信息是錯(cuò)誤的)。當(dāng)然，自動(dòng)更正在地址上的慘痛失敗并不僅僅是在邊界的例子(如”weatherman”)，而且在一些常見的(標(biāo)準(zhǔn)化)縮寫也是如此，比如”Rd”會(huì)被自動(dòng)更正為”Ed”。
話雖這么說，自動(dòng)更正在其他場(chǎng)景還是有用處的，會(huì)將無(wú)效數(shù)據(jù)更正為有效數(shù)據(jù)。因此，并不推薦在所有場(chǎng)景(如評(píng)論區(qū))禁用自動(dòng)更正。相反，要慎重使用自動(dòng)更正，只在詞典匱乏的場(chǎng)景禁用。這通常包括各式各樣的正確名稱(街道，城市，人物)以及其他標(biāo)識(shí)(email地址，優(yōu)惠券代碼，等等)。
盡管看似簡(jiǎn)單，實(shí)踐起來這卻是迄今為止觸屏鍵盤可用性當(dāng)中最容易被忽視的部分;幾乎所有的熱門移動(dòng)電子商務(wù)網(wǎng)站都會(huì)犯這個(gè)錯(cuò)誤。上文提到的調(diào)查顯示，其中有92%的網(wǎng)站在地址輸入框里沒有禁用自動(dòng)更正。鑒于在地址和email地址輸入框使用自動(dòng)更正帶來問題的嚴(yán)重性，卻幾乎沒有什么網(wǎng)站在這里禁用自動(dòng)更正，這真的很驚人。
你可以在標(biāo)簽上增加屬性并設(shè)置為關(guān)閉，來禁用自動(dòng)更正，就像這樣：
2、彈出不合適的鍵盤(60%的網(wǎng)站犯了此錯(cuò)誤)
問題：彈出不合適的鍵盤會(huì)降低輸入速度，用戶經(jīng)常會(huì)因?yàn)闃?biāo)準(zhǔn)鍵盤上數(shù)字的很小的點(diǎn)擊區(qū)域以及間距而打錯(cuò)很長(zhǎng)一串?dāng)?shù)字。
智能手機(jī)上觸屏鍵盤的一個(gè)很大局限就是它的尺寸。字符本身也都是非常小的。事實(shí)上，在iPhone4豎屏?xí)r一個(gè)字符的大小是4*5.9毫米。
再來對(duì)照一下蘋果自己的設(shè)計(jì)準(zhǔn)則，其中提到所有可點(diǎn)擊的界面元素至少要有6.85*6.85毫米，因?yàn)槿魏涡∮谶@個(gè)尺寸的元素點(diǎn)擊準(zhǔn)確度都會(huì)非常的差(微軟和諾基亞同樣制定了最小點(diǎn)擊區(qū)域?yàn)?*7毫米)。可以預(yù)見，這將會(huì)導(dǎo)致拼寫錯(cuò)誤。
但是通過更改輸入框代碼的一到兩個(gè)屬性，你就可以讓用戶的手機(jī)自動(dòng)顯示所需輸入的最合適的鍵盤。例如，你可以為信用卡號(hào)輸入框調(diào)用數(shù)字鍵盤，為電話號(hào)碼輸入框調(diào)用撥號(hào)鍵盤，為電子郵件地址輸入框調(diào)用電子郵件的鍵盤。這樣可以節(jié)省用戶必須切換傳統(tǒng)鍵盤的時(shí)間，并且在輸入數(shù)字的場(chǎng)景中，最大限度的減少輸入錯(cuò)誤，因?yàn)檫@樣的專用鍵盤按鍵尺寸更大，會(huì)減少意外輸錯(cuò)的機(jī)率。
Best Buy的信用卡號(hào)輸入框調(diào)用了標(biāo)準(zhǔn)鍵盤，所以用戶必須先切換至數(shù)字和字符鍵盤，然后準(zhǔn)確無(wú)誤的輸入16位數(shù)字。這對(duì)于被試者是件很困難的事情，他們要來回看著信用卡和手機(jī)，小心翼翼的點(diǎn)擊數(shù)字鍵，不碰到旁邊的鍵。
在整個(gè)測(cè)試中，很多被試者都注意到了專用鍵盤，并對(duì)它們贊許有加。事實(shí)上，在iOS中，數(shù)字鍵盤的點(diǎn)擊區(qū)域要比標(biāo)準(zhǔn)鍵盤大471%(數(shù)字鍵盤209*108像素vs標(biāo)準(zhǔn)鍵盤52*76像素)。更重要的是，我們發(fā)現(xiàn)在數(shù)字輸入框里采用數(shù)字鍵盤時(shí)錯(cuò)別字明顯減少。這會(huì)導(dǎo)致更少的驗(yàn)證錯(cuò)誤，反過來，也可以將網(wǎng)站引向一個(gè)更好更無(wú)縫的購(gòu)物體驗(yàn)。這對(duì)于長(zhǎng)數(shù)字隊(duì)列尤為明顯，比如電話號(hào)碼以及信用卡號(hào)。
左圖，一個(gè)被試者由于標(biāo)準(zhǔn)鍵盤按鍵尺寸小且鄰近，在輸入”1″的時(shí)候不小心按到了橫劃線。這個(gè)時(shí)候調(diào)用數(shù)字鍵盤會(huì)更加合適。右圖，用戶在GAP網(wǎng)站上輸入”日間聯(lián)系電話”時(shí)，調(diào)出的是專門優(yōu)化過的鍵盤，按鍵比標(biāo)準(zhǔn)鍵盤大471%。
調(diào)用專用鍵盤的另一個(gè)好處就是可以表明需要輸入的是什么內(nèi)容，如果輸入框標(biāo)題滑出視線范圍或是用戶不確定要輸入什么的時(shí)候，這會(huì)很有用。然而，數(shù)字鍵盤也有一定的局限性，因?yàn)樗辉试S用戶輸入拼音字符，只有少量特殊字符或分隔符，也可能連這個(gè)都沒有。所以，只有最合適的時(shí)候再調(diào)用這樣的鍵盤，這很重要，比如輸入電話號(hào)碼、郵政編碼、信用卡號(hào)以及信用卡安全碼。同樣的，在調(diào)用鍵盤時(shí)，確保你給出的格式樣例是可以復(fù)制的。
根據(jù)給出的樣例格式(比如”555-555-5555″)輸入電話號(hào)碼在iOS上是不可能的，因?yàn)檎{(diào)出的鍵盤是沒有橫劃線的。(有趣的是，在Android系統(tǒng)上輸入是可以的，這也說明了為什么在多個(gè)平臺(tái)測(cè)試有助于確保在格式樣例只在有些平臺(tái)上必須。)
說了這么多可用性上的優(yōu)點(diǎn)，你可能會(huì)想這種專用鍵盤是被廣泛應(yīng)用的。然而，60%的熱門移動(dòng)電子商務(wù)網(wǎng)站在對(duì)應(yīng)的場(chǎng)景并沒有調(diào)用它們，如電子郵件(電子郵件鍵盤)、電話號(hào)碼(撥號(hào)鍵盤)以及信用卡號(hào)(數(shù)字鍵盤)。
技術(shù)上來說，有很多種方式可以調(diào)出數(shù)字鍵盤，每種鍵盤之間略有差別(如撥號(hào)鍵盤和數(shù)字鍵盤)，不同平臺(tái)間行為也會(huì)有輕微的不同(iOS，Android等)。大體來說有兩種HTML屬性可以調(diào)用數(shù)字鍵盤，分別是type和pattern屬性。
Type屬性承載語(yǔ)義的含義，僅僅當(dāng)輸入時(shí)有合適的類型可調(diào)用時(shí)才會(huì)被用到，這主要是針對(duì)電話號(hào)碼和電子郵件地址的場(chǎng)景。不過對(duì)于數(shù)字輸入，更推薦使用pattern屬性來替代。(注意如果你僅僅是想要瀏覽器調(diào)用鍵盤，并不強(qiáng)制格式，可以加入novalidate屬性。)
針對(duì)任何電話號(hào)碼框，用如下代碼：
針對(duì)其他你想要調(diào)用數(shù)字鍵盤的輸入框，用如下代碼：
針對(duì)任何電子郵件地址框，用如下代碼：
正如上面提到的，各種數(shù)字鍵盤之間會(huì)有一些區(qū)別，在不同平臺(tái)之間也會(huì)有一些不同。例如，在iOS平臺(tái)上，上述代碼調(diào)出的電話鍵盤可以讓用戶輸入數(shù)字以及少量電話相關(guān)的特殊字符和分隔符，而調(diào)起的數(shù)字鍵盤只能輸入數(shù)字。與此同時(shí)，在Android平臺(tái)上，調(diào)起的電話鍵盤則有著更多的特殊字符，支持更多格式的電話號(hào)碼。
但是，由pattern屬性調(diào)起數(shù)字鍵盤在Android上根本不支持，相反，它只會(huì)調(diào)起常用的字母鍵盤。雖然在iOS和Android平臺(tái)上，你都可以使用type=”number”調(diào)起數(shù)字鍵盤，但將type設(shè)置為number帶有語(yǔ)義含義，在很多場(chǎng)景下并不合適(比如信用卡號(hào)是一個(gè)數(shù)字隊(duì)列，不單單是一個(gè)數(shù)字)。
所以，我們推薦更為保守的策略，使用pattern=”d*”，這樣在iOS平臺(tái)上可以有更好的體驗(yàn)，在其他不支持該屬性的平臺(tái)上也不會(huì)有什么影響。(當(dāng)然了，如果輸入框就是針對(duì)一個(gè)數(shù)字的，比如價(jià)格或是數(shù)量，那么顯然應(yīng)該使用type=”number”了。)
3、保持一致，調(diào)用合適的鍵盤(54%的網(wǎng)站犯了此錯(cuò)誤)
問題：如果一個(gè)輸入框調(diào)用了專用鍵盤而其他類似的輸入框卻沒有，那么在沒有調(diào)用專用鍵盤時(shí)用戶會(huì)感到困惑，并開始質(zhì)疑這個(gè)輸入框所需輸入的類型。
為特定輸入框調(diào)用合適的鍵盤是正確的做法(參見上面的推薦)，但是要確保在你的網(wǎng)站上保持一致，否則會(huì)讓用戶很困惑。換句話說，如果郵政編碼的輸入框調(diào)用了數(shù)字鍵盤，那么類似的輸入框也要有同樣的做法。
盡管這聽起來是顯而易見的，但很多網(wǎng)站都沒有在調(diào)用專用鍵盤上保持一致。例如，花店FTD(如上圖)在填寫信用卡號(hào)的時(shí)候調(diào)用了數(shù)字鍵盤，但在緊接著下面的安全碼輸入框卻沒有，雖然這兩個(gè)值都是數(shù)字。
在50個(gè)快速增長(zhǎng)的熱門在線零售商中，54%的網(wǎng)站在他們的移動(dòng)站點(diǎn)上犯了這個(gè)錯(cuò)誤，多多少少都會(huì)有一個(gè)或是多個(gè)電話輸入框，信用卡號(hào)碼或是信用卡核對(duì)(CVV)輸入框沒有調(diào)用數(shù)字鍵盤。這54%的數(shù)據(jù)細(xì)則如下(絕對(duì)值)：24%的網(wǎng)站沒有為這三類中任何一種調(diào)用數(shù)字鍵盤(盡管這也是一致的，但是錯(cuò)誤的示范)，剩下30%的網(wǎng)站(包括FTD)不一致，只有在一部分輸入框才會(huì)調(diào)用數(shù)字鍵盤。
更令人驚訝的是，在整個(gè)可用性測(cè)試中，由于這樣的問題讓一些被試者很困惑。他們開始質(zhì)疑對(duì)于個(gè)別輸入框最初的解讀，認(rèn)為可能需要填寫一些其他的內(nèi)容。例如，當(dāng)看到”信用卡安全碼”輸入框彈出了標(biāo)準(zhǔn)鍵盤時(shí)(如上圖FTD的網(wǎng)站)，被試者開始懷疑這是否就是填寫信用卡背面的那三個(gè)數(shù)字，或是印在卡上的其他字符串。
4、兌現(xiàn)”上一項(xiàng)”和”下一項(xiàng)”按鈕的行為(4%的網(wǎng)站犯了此錯(cuò)誤)
問題：如果”上一項(xiàng)”和”下一項(xiàng)”按鈕把用戶帶去了不合邏輯順序的輸入框，用戶會(huì)很煩惱和困惑。
在測(cè)試中，被試者在未能兌現(xiàn)”上一項(xiàng)”"下一項(xiàng)”按鈕行為的網(wǎng)站上感到煩惱。用戶預(yù)期的行為很簡(jiǎn)單：當(dāng)用戶點(diǎn)擊”下一項(xiàng)”按鈕，他們會(huì)預(yù)期跳到表單中下一個(gè)合乎邏輯的輸入框，沒有其他變化，甚至提交表單。”上一項(xiàng)”按鈕也一樣，當(dāng)然是換個(gè)相反的方向。
這不僅僅是需要有正確的標(biāo)簽序列(雖說這是一個(gè)好的開始)。當(dāng)需要依賴于用戶先前的選擇處理動(dòng)態(tài)輸入控件時(shí)，事情往往會(huì)出差錯(cuò)。在這些情況下，我們已經(jīng)看到用戶數(shù)據(jù)被刪除或是標(biāo)簽序列被違反。我們也必須要格外注意自定義表單的接口。例如，在迪士尼商務(wù)網(wǎng)站，定制化的狀態(tài)選擇器不屬于標(biāo)簽序列(因?yàn)閺募夹g(shù)上來說它并不是一個(gè)輸入元素)，所以用戶就會(huì)跳過這個(gè)狀態(tài)控件。
填寫了郵政編碼以后(如左圖)，被試者點(diǎn)擊”下一項(xiàng)”按鈕，正確的跳轉(zhuǎn)到菜單中的下一項(xiàng)”場(chǎng)所類型”(如右圖)。但如圖所示，網(wǎng)站清空了被試者前一個(gè)輸入的數(shù)據(jù)。很顯然，當(dāng)使用”下一項(xiàng)”和”上一項(xiàng)”按鈕時(shí)數(shù)據(jù)應(yīng)該是被保留的。
這些按鈕的功能基本上是充當(dāng)鍵盤上tab鍵的移動(dòng)版;所以，它們應(yīng)該采用和電腦鍵盤tab一樣的序列規(guī)則。它們應(yīng)該提供從一個(gè)輸入框到下一個(gè)輸入框的快捷方式，不需要任何點(diǎn)擊(不論是鼠標(biāo)還是手指)。這在手機(jī)上是尤為重要的，因?yàn)楫?dāng)鍵盤呼出的時(shí)候，屏幕空間是有限的，下一個(gè)輸入框可能被部分遮擋，這個(gè)時(shí)候”下一項(xiàng)”按鈕則用起來很方便。所以，盡管”上一項(xiàng)”和”下一項(xiàng)”按鈕有可能不會(huì)被所有用戶用到，但禁用這些按鈕的行為會(huì)導(dǎo)致很嚴(yán)重的后果。
幸運(yùn)的是，大部分網(wǎng)站這一點(diǎn)都做的很好。只要代碼是清晰的，手機(jī)瀏覽器會(huì)默認(rèn)將輸入框出現(xiàn)的順序作為標(biāo)簽序列。在熱門移動(dòng)端網(wǎng)站中，只有4%的網(wǎng)站犯了此錯(cuò)誤。
5、在適當(dāng)?shù)那闆r下，禁用自動(dòng)大寫(38%的網(wǎng)站犯了此錯(cuò)誤)
問題：幾乎所有的被試者都認(rèn)為他們的電子郵件地址必須要小寫，所以這項(xiàng)數(shù)據(jù)自動(dòng)大寫會(huì)給整個(gè)過程帶來不必要的麻煩。
智能手機(jī)默認(rèn)會(huì)把標(biāo)準(zhǔn)文本輸入框的首字母大寫，這在大部分情況下是合適的。然而，在有些情況下禁用自動(dòng)大寫是更合適的，特別是像電子郵件地址這種絕大多數(shù)用戶都以為要小寫的情況。
該名被試者注意到了首字母”J”，并移回光標(biāo)將其改為小寫”j”，因?yàn)樗淮_定大寫字母是不是可以通過驗(yàn)證。
測(cè)試中的大部分時(shí)候，被試者都注意到了大寫字母，并明確的將其改為小寫。最合理的解釋是他們不確定是否允許填寫大寫字母，或電子郵件地址是否區(qū)分大小寫。在那些電子郵件輸入框禁用了自動(dòng)大寫的網(wǎng)站上，沒有被試者會(huì)主動(dòng)將首字母大寫。推薦大家在電子郵件或是其他合適的場(chǎng)景(如網(wǎng)址URL)禁用自動(dòng)大寫。
在熱門移動(dòng)電子商務(wù)網(wǎng)站中，38%的網(wǎng)站在電子郵件地址輸入框沒有禁用自動(dòng)大寫，把它們?cè)O(shè)置為純文本輸入框，給用戶留下非技術(shù)性的困惑。
可以在標(biāo)簽上加入autocapitalize屬性并設(shè)置為off，來禁用自動(dòng)大寫，如下所示：
當(dāng)然，針對(duì)電子郵件輸入框，你也可以設(shè)置一個(gè)type屬性為email：
在iOS系統(tǒng)上，設(shè)置type屬性為email將會(huì)自動(dòng)禁用自動(dòng)大寫。然而，最好仍然設(shè)置autocapitalize屬性，因?yàn)檫@不僅在iOS系統(tǒng)上奏效，而且在其他還不支持email輸入框類型或是實(shí)現(xiàn)方式不同的平臺(tái)也可以使用。
測(cè)試以及絕密小抄
雖然這些基本原理看上去是顯而易見的，但是要記得全球最大的移動(dòng)電子商務(wù)網(wǎng)站中98%的網(wǎng)站違反了至少一條。70%的網(wǎng)站違反了兩條甚至更多的”基礎(chǔ)”觸摸鍵盤準(zhǔn)則。事實(shí)上，24%的網(wǎng)站根本沒有為觸屏鍵盤輸入做過什么優(yōu)化，就算是省掉標(biāo)準(zhǔn)鍵盤(在輸入電話、電子郵件、數(shù)字等情況)，偶爾調(diào)用專用鍵盤(一致性很差)，在合適的地方禁用自動(dòng)更正，抑或是在電子郵件地址輸入框禁用自動(dòng)大寫，這些都沒有。
不遵守設(shè)計(jì)準(zhǔn)則的一個(gè)原因可能是，針對(duì)一個(gè)大型網(wǎng)站所做的全局測(cè)試需要去發(fā)現(xiàn)所有的明顯缺陷——故而，理想情況下的第三項(xiàng)建議中提到調(diào)用鍵盤的一致性問題，是不必要被提及的。另外一個(gè)原因是，手機(jī)和觸屏界面是一個(gè)相對(duì)較新的平臺(tái)，它的全新的界面理論需要大家去關(guān)注無(wú)數(shù)的小的細(xì)節(jié)——這些細(xì)節(jié)對(duì)于我們網(wǎng)頁(yè)設(shè)計(jì)師和開發(fā)者來說還不習(xí)慣去主動(dòng)尋找和設(shè)計(jì)。
觸屏鍵盤的設(shè)計(jì)準(zhǔn)則相關(guān)文章：