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