萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

觸屏鍵盤設計 5 大準則:基於百大電商實測的可用性鐵律

觸屏直觀?打字卻慢、痛、錯。字符尺寸小、鍵位鄰近是主因,但更多關鍵因素常被忽視:自動更正詞典、自動大寫、輸入類型提示、標簽順序、自定義鍵盤一致性。

針對 18 大移動電商網站 1:1 可用性測試發現:鍵盤功能與用戶預期衝突時,挫折感瞬間飆升,導致放棄。優秀移動體驗離不開好鍵盤。本文摘自《移動電商可用性報告》147 條指南中的 5 條鍵盤準則,通用性極強。審視前 50 零售商移動站,98% 犯 1+ 錯誤,70% 犯 2+ 錯誤(2013.07.31)。顯而易見的指南,卻被廣泛違背,必須嚴肅對待。

準則 1:詞典匱乏時禁用自動更正(92% 網站犯錯)

自動更正在縮寫、街道名、Email、專有名詞上極差。用戶通常不注意更正(關注輸入中而非已輸入),錯誤更正被提交導致地址錯誤、驗證失敗。如「westheimer」被改為「weathermen」、「Rd」改為「Ed」。自動更正其他場景(評論區)有用,僅在詞典匱乏場景(地址、Email、優惠碼等)禁用。

代碼實現:``

準則 2:彈出匹配鍵盤(60% 網站犯錯)

iPhone 4 豎屏字符 4×5.9mm,遠小於蘋果/微軟/諾基亞建議的最小點擊區 6.85×6.85mm/7×7mm,導致拼寫錯誤。修改 1-2 個屬性即可喚起專用鍵盤:信用卡/電話號→數字鍵盤,電話→撥號鍵盤,Email→郵件鍵盤。專用鍵盤按鍵面積大 471%,顯著減少錯誤與驗證失敗,長數字串尤顯著。

技術實現:`type="tel"/"email"` 語義喚起撥號/郵件鍵盤;數字輸入推薦 `pattern="[0-9]*"` 喚起數字鍵盤(配合 `novalidate` 不強制格式)。注意格式樣例必須可在喚起鍵盤上輸入(如 iOS 數字鍵盤無連字符,樣例「555-555-5555」不可輸入,需多平台測試)。

copyright © 萬盛學電腦網 all rights reserved