用戶輸錯頻率太高? 這篇防錯干貨不容錯過!
不知道你有沒有遇到過這樣的場景:在某些軟件中提交一些內容會有紅色警告信息彈出,提示你填寫錯誤,但大家通常不知道哪里錯誤了,又不敢點擊,怕所填內容清空。作為產品設計者,該如何提高防錯率。本文將結合一些實例,講解在表單錄入場景中,如何將防錯糾錯。
不知道你有沒有過這樣的體驗?
你需要在某個軟件中,提交一些內容,然而紅色的警告信息頻頻彈出,卻讓你摸不著頭腦,根本不明白自己到底是哪里出錯了,輸入了大半的內容不敢退出界面,因為退出之后就是一片空白,重頭再來??墒窃趺磭L試也輸不對,無語的你是不是特別想砸了手機?
再完美的系統也會出錯,這個錯誤可能來自用戶,抑或來自系統本身,而頻頻出錯的界面無疑,導致了極其糟糕的用戶體驗。
表單錄入場景是錯誤頻頻發生的場景,如何在不干擾用戶正常使用流程的前提下,降低用戶出錯概率,快速幫助用戶糾正錯誤,一直是設計師們關心的話題。
防錯性原則,作為尼爾森可用性十條原則之一,尼爾森是這樣闡述防錯原則的:“相比貼心的錯誤提示信息,更好的設計是防止錯誤發生。消除易出錯的環境、為用戶檢查、讓用戶確認他們的動作”。
本文將結合一些實例,講解在表單錄入場景中,如何將防錯糾錯進行到底!
一、從輸入抓起
用戶的輸入操作是數據的源頭, 從這一步入手, 可以從根本上省掉很多麻煩事.
1.1 更易輸入
當用戶輸入的內容又長又復雜,那么不僅大大加大了用戶的負荷。同時,也極易出錯,如果系統能夠幫助用戶降低輸入難度,那么變相的,也是提高了內容的正確率。
1)長數字串提供間隔
降低用戶記憶的難度根據米勒法則,一個人在短期記憶中可以記得五到九樣東西,所以在輸入很長的數字時,比如銀行卡號,可以提供一些間隔,一來不容易看花眼,二來降低記憶難度。
2)拍照免輸入
同樣是銀行卡號,讓用戶直接拍銀行卡,系統自動識別,免用戶輸入,同樣很簡單,不過這需要銀行卡剛好在用戶身邊,或者手機中有銀行卡的照片。如果從支付寶或者微信中得到關聯的銀行卡號信息,一鍵導入,會不會更方便?
3)系統記憶或者粘貼
比如你曾經輸入什么很長的信息,然后下一次需要再次輸入的時候,系統可以自動顯示你上一次的輸入記錄。再比如小紅書,你懶得輸入一大串地址,那么你可以直接從淘寶中復制,小紅書可以自動識別填充。
4)提示輸入內容的格式或要求
- 當需要用戶鍵入郵箱地址時,會自動顯示@某某郵箱地址;
- 要上傳圖片,需要告知圖片的大小尺寸要求;
- 需要輸入日期時,給出日期的填寫例子等等,而不是等到用戶出錯了才提示正確的填寫要求,這樣會浪費用戶的時間,降低效率。
更進一步,在一些比較容易讓用戶產生困惑(比較冷門、專業)的輸入框附近,還可以加上專門答疑解惑的鏈接。
5)自動保存
當不小心退出輸入大半的表單,返回后發現頁面空空如也,需要從頭來過怎么辦?
這真是五雷轟頂的用戶體驗,倘若頁面能夠定時自動幫用戶保存剛才輸入的內容,即使網絡不順暢或者貓貓突然拔了網線,用戶也可以放寬心。
1.2 不允許輸入錯誤格式數據
比如,不允許在數字輸入框中輸入文字內容,不允許在文字輸入框輸入數字內容,日期提供正確的填寫例子。
1.3 允許用戶犯簡單錯誤
錯誤不可避免,一方面從用戶抓手,另一方面可以提高系統的容錯率,比方說空格,難免輸入時會不小心鍵入空格,一個空格的距離并不明顯,用戶可能不容易發現這個錯誤。
如果僅僅因為一個空格就阻止用戶進行下一步操作,未免太苛刻了,系統可以嘗試自動識別清除空格,糾正為正確的數據。
1.4 輸入未完成無法進行下一步操作
人類的好奇心一點不比貓貓來的低,只要能點擊的按鈕都躍躍欲試,所以我們需要給未完成輸入內容時,下一步按鈕需要置灰,防止用戶誤操作。
1.5 錯誤提示
1)輸入時檢查
你看了一部精彩絕倫的大片激動不已,可是過了一周,你的老師讓你寫觀后感,你是不是忘記了一大半的細節了?由此可見,即刻的反饋時最有效的,用戶能立馬意識到問題出在哪里,能夠快速修正。
2)提交時檢查
提交時檢查,能夠將問題匯總呈現,比起需要用戶一個一個找到標注問題的地方,更推薦的方式是用一個問題清單,用戶點擊問題后,可以自動跳轉到具體的地方,也能夠從當前一個問題位置,跳到下一個問題地方,每解決一個問題,問題清單中就會少一項,這樣既能夠幫助用戶快速找到問題,解決問題也能夠避免問題的遺漏。
3)錯誤提示原則
告知用戶哪里出錯:如果是在輸入時提示錯誤,錯誤的出處需要引起用戶足夠注意,如常見的輸入框標紅(考慮到色盲用戶,不能夠僅僅只是標紅,要有其他信息的展示),至于錯誤提示文字的展現方式一般有三種:
1)當聚焦在當前輸入框時,錯誤提示文字以提示起泡顯示,這種做法的弊端是檢查時需要先聚焦才能查看,如果是出現了很多錯誤的話,那么用戶需要一個一個查看,大大降低了用戶的效率,但是這樣不會改變原來的界面布局,能夠節省空間。
2)錯誤提示就標注在輸入框上下左右,只要錯誤不消失,提示文字要始終可見,這種做法是最為推薦的,所有錯誤一覽無余,但是錯誤文字會占據較多的空間,空間有限的話可以選擇第一種。
3)錯誤發生后,會彈出一個彈窗,有的是顯示幾秒后自動消失,這種是非常不建議的,因為用戶很可能沒有注意到,或者沒有閱讀完整;還有的直接彈出模式彈窗,阻斷用戶進程,這種常見于登錄場景,由于用戶的輸入任務較少,所以不會有太大干擾。
- 告知用戶為什么出錯
- 告知用戶如何糾正錯誤
除了上面三點,還要注意,比方說言簡意賅,不要廢話連篇,不要指責用戶,保持禮貌態度,這些是基本原則了。
下面是一個錯誤提示的典型案例,在我試圖登陸Bitly時,提示我出錯,但是沒有告知究竟是賬戶名不對還是密碼出錯,而且一個Nope的措辭,讓用戶感覺被否定了,這是糟糕的用戶體驗。
同樣是登陸出錯,Facebook就給了一個很完美的防錯示范, 我不小心輸入了舊密碼,它會給一個提醒彈窗,告訴我2個月前改過密碼,我可以選擇重置密碼,或者申訴賬號安全,或者重新嘗試,可以說是相當完善的建議了。
二、提供反悔操作
2.1 撤銷操作
上一步驟輸入錯誤,按下ctrl+Z可以返回上一步。
2.2 提交后可返回修改
當一個表單提交成功后,可以返回重新編輯,然后更新。
2.3 刪除后回收站找回
在Figma中,當你首次刪除文件時,不會有彈窗彈出;當你誤刪了某個文件,可以快速在回收站中找回,只有決定永久刪除時,會彈出彈窗提醒,這樣的設計既可以保證操作的順暢,又不影響流暢的用戶體驗。
三、二次確認
對于破壞性操作,比如刪除掉一個班級的信息,或者格式化硬盤,一定要給予一個二次確認彈窗,讓用戶意識到這個行為可能帶來的后果, 二次確認的彈窗要注意以下幾點:
1)要清楚的告知用戶此次操作帶來的后果,避免模糊的描述
2)底部按鈕要無歧義,執行破壞性操作的按鈕用特殊的樣式突出,比方說紅色加粗
3)二次確認
可以通知增加用戶的認知或者操作難度, 避免用戶誤操作,比方Figma中,如果要刪除某個team, 在正確輸入團隊的名字后,刪除按鈕才會被激活。
有一個寓言故事:男孩在海邊想要尋找一塊點石成金的石頭,這個石頭據說會發燙,于是他每摸到一塊普通的石頭,就扔到海里,他遍尋了999塊石頭,但是仍然沒找到發燙的石頭,就在第1000塊石頭時,他終于找到了!但是由于太習慣丟到海里的動作,等他意識到,那塊發燙的石頭已經丟到了汪洋大海中。
所以要注意, 二次確認彈窗一定是破壞性的操作才會使用到,而不是處處使用,當用戶對此習以為常,二次確認也就沒有作用了。
適當地運用防錯原則,可以大大降低用戶輸錯頻率,營造良好的用戶體驗,當然實際問題中要靈活運用,不要撿了芝麻,丟了西瓜,希望我的總結對你有用! 歡迎評論區進行補充和完善~
本文由 @自來卷夏憶 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
真棒,收藏