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)選擇器不屬于標簽序列(因為從技術上來說它并不是一個輸入元素),所以用戶就會跳過這個狀態(tài)控件。
填寫了郵政編碼以后(如左圖),被試者點擊“下一項”按鈕,正確的跳轉到菜單中的下一項“場所類型”(如右圖)。但如圖所示,網(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)站在電子郵件地址輸入框沒有禁用自動大寫,把它們設置為純文本輸入框,給用戶留下非技術性的困惑。
可以在<input>標簽上加入autocapitalize屬性并設置為off,來禁用自動大寫,如下所示:
當然,針對電子郵件輸入框,你也可以設置一個type屬性為email:
在iOS系統(tǒng)上,設置type屬性為email將會自動禁用自動大寫。然而,最好仍然設置autocapitalize屬性,因為這不僅在iOS系統(tǒng)上奏效,而且在其他還不支持email輸入框類型或是實現(xiàn)方式不同的平臺也可以使用。
平面設計
工業(yè)設計
CG插畫
UI交互
室內(nèi)設計
建筑環(huán)境