隨著互聯網的飛速發展,越來越多產品尤其是2C類產品更加注重用戶體驗,其中錯誤對用戶體驗的影響是災難性的,在此我總結出一些容錯性設計原則供大家參考和探討。
一、容錯性概念及重要性
對於容錯性,大家可能不太清楚是什麼概念,但當提到可用性時,那麼大部分設計師都會比較熟悉這個詞的含義。可用性是產品/系統重要的質量指標,是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度。容錯性其實就是可用性之中細分的一個模塊,是專門針對出錯的研究。具體內容大家可以去看:唐納德諾曼《設計心理學》中關於錯誤的分類及錯誤設計原則;李樂山《人機界面設計》中Reason認為存在8種基本出錯類型 ;尼爾森《可用性工程》中錯誤信息四原則以及《十大可用性原則》中第七條和第九條(分別是防錯原則和容錯原則)。容錯性的定義為:
容錯性是產品對錯誤操作的承載性能,即一個產品操作時出現錯誤的概率和錯誤出現後得到解決的概率和效率。容錯性最初應用於計算機領域,它的存在能保證系統在故障存在的情況下不失效,仍然正常工作。產品容錯性設計能使產品與人的交流或人與人借助產品的交流更加流暢。
由此可見,容錯性設計原則是非常重要的,尤其是對於2C類或即時服務類(如鐵路購票網站)產品/系統。
二、容錯性設計原則
通過文獻整理,總結出5一級原則和18大二級原則,並提供對應的案例用以加深理解。
1. 引導和提示
引導和提示主要是針對新手用戶,因為普通用戶和專家用戶可能已經熟練使過產品很多次,對流程有一定的認識。而對於新手用戶來說,使用過程就是個學習的過程,這時候正確地引導和提示就比較重要。
(1)提供詳盡的說明文字和指導方向
比如新浪微博中當用戶搜索沒有結果的時候,給予用戶適當的指引和建議。
還有淘寶網中當用戶搜索無結果時,智能猜測用戶的出錯原因或者給予其他引導。
(2)引導和提示突出表現,且簡單容易理解
首先,引導和提示要突出表現,從而引起用戶關注,確保用戶在操作前能注意到引導或提示信息。比如在新浪網的注冊頁面中,右側的提示:紅色錯誤提示和藍色引導說明在頁面中很醒目,注冊用戶自然能注意到此處的提示。其次,引導要簡單且容易理解,保證用戶在注意到引導或提示後能快速獲取信息,從而得到幫助,以降低發生錯誤的概率。新浪網的注冊表單中設置密碼選取的提示文案非常精簡,每句話表達了一個要點,並將最重要的信息即“字符數”放在了最前面,因此用戶能在第一眼獲得並理解這個重要的信息。
現在移動端app在新手用戶第一次打開進入界面時一般都會有清晰、准確的功能指引和提示。比如zaker的新功能引導頁面,在操作區用淺灰色蒙板覆蓋,減少頁面其它內容的干擾,再使用與蒙板對比較大的白色文字結合手勢圖形提示新功能用法,突出手勢及重點。
(3)當重要或操作結果不可逆的時候,詢問用戶讓其知道操作的後果
在用戶操作前即給出正確且有效地引導和提示,有助於減少錯誤發生的可能性。如 QQ郵箱網站為了防止用戶錯誤,在用戶點擊發送後提示沒有輸入主題信息,從而避免用戶直接發送無主題郵件。
2. 限制操作
如何從設計上避免用戶出錯,限制是一種非常必要的方式。從古至今,人們為了避免錯誤的發生都會設置一些障礙或提出一些限制性要求。從上帝給亞當夏娃的警告,到我國歷史上用來抵御北方游牧民族入侵的萬裡長城,再到今日道路交通中限速的減速帶的設計,無不說明了有障礙設計的意義。
(1)增加那些不能逆轉操作的難度
在產品設計中這種方法主要是通過對一些可能造成錯誤的操作入口設置障礙或直接禁止操作,以避免錯誤的發生。比如windows系統提供隱藏文件的功能,用戶可以把重要的系統文件隱藏起來以免誤刪。
(2)適當限制用戶的某些交互操作
置灰是界面上限制某些操作的好方式。有的網站直接把不能操作的部分灰置,比如攜程網的時間選擇控件的設計,將已經過去的日期灰置,以免用戶誤選。
再看淘寶網的注冊頁,根據操作的步驟,將未開始的操作如下一步按鈕置灰,一方面告訴用戶當前可以進行當前操作,讓用戶只關注於當下的任務步驟,防止用戶出錯;另一方面預示後面還有哪樣的操作。
3. 反饋和幫助
(1)當用戶有些錯誤發生時,及時反饋錯誤並提供糾錯幫助
反饋錯誤及時就能保證用戶每個階段的操作都能得到回饋,避免因為一個小的錯誤就要修改相關聯的一系列內容的情況,提高成功完成任務的效率;反饋不僅要指出有錯,還要指出錯在哪裡。
優酷網的登錄表單,在輸入錯誤的用戶名後,系統就會馬上給出反饋“用戶名不存在”,避免用戶在輸完密碼點擊登錄後才能發現錯誤,這樣用戶就能馬上停止後續操作來解決當下的問題。
如果錯誤不可避免的發生了,合理恰當的提示可以減少用戶的挫敗感。谷歌浏覽器打不開頁面時提供的提示說明信息,簡潔直觀說明問題的情況及原因,並且還在更多信息裡提供了一些相應的解決方法,這樣也就提高了提示信息的有效性。同時,不知道大家是否知道這個頁面其實還是一個小游戲,只要敲擊空格鍵就可控制上面的恐龍來避免前方出現的障礙物,可以算是谷歌設計師對浏覽器發生錯誤時做的彌補,對用戶小小的歉意。
(2)出錯信息應當用清晰的語言來表達,而不要使用難懂的術語
錯誤反饋文案要清晰、准確,這樣便於用戶了解錯誤的原因,方便下一步的修改。新浪網注冊頁設置密碼中,當用戶輸入的密碼不符合要求時,會用紅色文字反饋錯誤及其原因是字符數不符合要求,用戶就知道怎麼修改了。
(3)出錯信息使用的語言應當精煉准確,而不是空泛而模糊的
最好能夠告訴用戶,具體錯誤的原因在哪裡,是哪句話和哪個字出現的問題。舉一個反例:QQ空間的說說編輯輸入框,當輸入的語言包含敏感詞匯時,反饋提示中沒有具體指出是那個詞有問題。
還有remember the milk的注冊表單,同樣是用戶名稱,當輸入名稱後,反饋提示是“無效”,這個提示並沒准確指出用戶怎麼做是正確的,是“字符數不夠還是超過”還是“所選用戶名被占用”還是其它原因?用戶只能一個一個地試,這時排查錯誤的效率自然下降,產品的容錯性能也就存在問題了。
(4)出錯信息應當對用戶解決問題提供建設性幫助
在用戶操作的過程中,出現錯誤要及時反饋,使用戶能盡早發現錯誤。同時要及時提供糾錯幫助,系統先自動糾錯,不能自動糾錯時,就提供糾錯幫助。這樣即使用戶操作錯誤了,但成功完成操作的效率也能大大提高。
當用戶知道錯誤後要及時提供糾錯幫助,如關聯推薦等,以幫助用戶快速找到糾錯的辦法。Google搜索中,當有單詞或詞語輸入錯誤時,Google搜索就會根據匹配度給用戶可能正確的單詞或詞語供用戶選擇,避免二次輸入,很人性化的做好了糾錯。
(5)出錯信息應當友好,不要威脅或者責備用戶
按照可用性的理論,用戶沒有出錯,出錯的是你的產品,因為它不能正確的解讀用戶的操作行為。不要在錯誤信息中責備用戶,我們應該因為問題向用戶道歉,為用戶提供“情感支持”,主動識別並處理用戶的情感狀況,能緩解挫敗帶來的強烈的負面情緒和刺激。
4. 錯誤恢復
(1)允許用戶犯錯,並使操作者能夠撤銷以前的指令
最常見的如Microsoft office軟件,用戶編輯文檔後如果發現錯誤,需要修改時可以按ctrl+z來撤銷上一次的編輯,恢復錯誤。
(2)能幫助用戶在發生錯誤後迅速回到正確狀態
iPhone手機的還原功能,可以在用戶出錯時將多種功能設置快速還原到原始狀態。
(3)盡可能注意保留操作信息,提供安全恢復到離錯誤點最近一步的方式
用戶每次執行操作後,尤其是完成操作步驟比較多的任務,要盡可能注意保留操作信息,以便能夠及時恢復;如果是一個任務結束後的操作錯誤,最好是能提供安全恢復到離錯誤點最近的一步的方式,使用戶可以快速地從糾正錯誤的步驟中轉移到正確的流程上,從而挽回損失或錯誤。
Photoshop中的歷史動作就是一個很好的例子,可以默認保存最新的20個操作,也可以自己設置保存數量;用戶在設置數量范圍內的每一步操作都可以恢復。
Gmail郵箱幾乎給所有的操作都提供了撤銷功能,用戶如果誤刪了郵件都可以撤銷操作,甚至點擊發送郵件按鈕後都可以在一定的時間內撤銷操作。
5.減少負擔
(1)盡可能減少用戶的記憶負擔
記憶是人類一個非常重要的心理活動,它是人類很多其他思維活動和行為的基礎。在所有的認知心理活動中,記憶是和用戶界面設計關系最為密切的一個,很多軟件可用性方面的問題都歸結為記憶問題。12306鐵路購票網站,購票信息頁面的溫馨提示內容非常冗長,用戶很難關注到重點信息。
(2)減少用戶認知混淆
根據已訂閱和未訂閱的不同,訂閱button和退訂進行視覺上明顯的區分,避免錯誤操作。
(3)讓用戶單次只需執行唯一操作
普通用戶在一些流程復雜的交互操作前總會或多或少的迷茫。解決方法就是讓用戶單次只需執行唯一操作,不要把復雜的選擇題拋給用戶,讓用戶出錯。例如在電腦殺毒這個相對復雜的任務中,一次只提供給用戶唯一明顯按鈕,避免用戶在選擇時左右為難,只給用戶唯一的推薦,別讓用戶思考。
(4)減少不必要的操作步驟
攜程網的注冊頁面,輸入郵箱時下方會相應出現各種郵箱後綴供用戶快速選擇,減少用戶的輸入操作次數。
三、總結
修修補補外加引用寫了這麼多文字和圖片,希望對大家有用,如有哪些分類不合理或解釋案例不夠有代表性的地方請大家能夠指出,若能提供相應的建議就更加好啦。最後,將所有提到的一二級原則統一整理成架構圖方便大家查看。
參考文獻:
1.Jakob Nielsen.Useability Engineering[M].NewYork:Academic Press,1993.
2.李樂山.人機界面設計[M].北京:科學出版社,2004.
3.唐納德·A·諾曼.設計心理學[M].中信出版社,2010-03.
4.張雅秋.容錯性設計[EB/OL].(2011-11-21)[2012-02-13].
5.黃群.交互設計中產品的容錯性設計應用研究[J].設計藝術研究,2012,1:47-51.
6.闫霞.產品設計中的容錯性思考[J].東華大學學報,2012,38(5):636-642.