(

通常來說，人們會(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è)試過程中造成了很大的問題，隨著被試者完成購買，大量錯(cuò)誤數(shù)據(jù)被提交。

關(guān)于自動(dòng)更正的一個(gè)主要問題就是，用戶通常不會(huì)注意到更正（因?yàn)橛脩敉ǔｊP(guān)注的是他們正在輸入什么，而不是已經(jīng)輸入的內(nèi)容）。如果更正是正確的，那就沒問題，但如果更正是錯(cuò)誤的，那將會(huì)是很糟糕的事情。例如，在測(cè)試過程中多次碰到的例子，由于被試者并沒有注意到自動(dòng)更正，原本有效的地址信息被自動(dòng)更正為無效信息并被提交。

在沒有地址驗(yàn)證的網(wǎng)站上，這會(huì)導(dǎo)致訂單被送到錯(cuò)誤的地址，除非被試者特意仔細(xì)的查看訂單確認(rèn)頁（畢竟，自動(dòng)更正的信息通?？雌饋砼c輸入的信息非常相似，這也使得用戶很少會(huì)注意到信息是錯(cuò)誤的）。當(dāng)然，自動(dòng)更正在地址上的慘痛失敗并不僅僅是在邊界的例子（如“weatherman”），而且在一些常見的（標(biāo)準(zhǔn)化）縮寫也是如此，比如“Rd”會(huì)被自動(dòng)更正為“Ed”。

話雖這么說，自動(dòng)更正在其他場(chǎng)景還是有用處的，會(huì)將無效數(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)更正，這真的很驚人。

你可以在<input>標(biāo)簽上增加<autocorrect>屬性并設(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毫米）?？梢灶A(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ī)率。

在整個(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è)更好更無縫的購物體驗(yàn)。這對(duì)于長(zhǎng)數(shù)字隊(duì)列尤為明顯，比如電話號(hào)碼以及信用卡號(hào)。

調(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ù)制的。

說了這么多可用性上的優(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屬性承載語義的含義，僅僅當(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帶有語義含義，在很多場(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)控件。

這些按鈕的功能基本上是充當(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ù)用戶都以為要小寫的情況。

測(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ù)性的困惑。

可以在<input>標(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)站違反了至少一條（參看任務(wù)完成列表）。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)注無數(shù)的小的細(xì)節(jié)——這些細(xì)節(jié)對(duì)于我們網(wǎng)頁設(shè)計(jì)師和開發(fā)者來說還不習(xí)慣去主動(dòng)尋找和設(shè)計(jì)。

綜合以上原因，我們將用一個(gè)絕密小抄來作為文章的結(jié)尾，此小抄是設(shè)計(jì)觸屏界面輸入框最常見的細(xì)節(jié)點(diǎn)，包括可復(fù)制粘貼代碼以及正確調(diào)用了鍵盤的手機(jī)觸屏優(yōu)化demo，你可以把它當(dāng)作是一個(gè)設(shè)計(jì)開發(fā)手機(jī)端以及桌面端網(wǎng)站的清單。

•  可交互的觸屏鍵盤小抄，以及手機(jī)端優(yōu)化demo

這些輸入框通常都會(huì)出現(xiàn)在以下類型的表單中：帳號(hào)注冊(cè)，帳號(hào)登錄，搜索，調(diào)查，完整的結(jié)賬過程，注釋表單以及聯(lián)系表單。我們建議你搜索整個(gè)代碼庫，來捕獲到每一個(gè)實(shí)例。

網(wǎng)頁標(biāo)題：觸屏鍵盤設(shè)計(jì)準(zhǔn)則
URL鏈接：http://www.rwnh.cn/news10/168110.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、商城網(wǎng)站、網(wǎng)站維護(hù)、企業(yè)建站、微信小程序、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)