產品容錯性設計原則

發表於2016-04-21

隨著網際網路的飛速發展,越來越多產品尤其是2C類產品更加註重使用者體驗,其中錯誤對使用者體驗的影響是災難性的,在此我總結出一些容錯性設計原則供大家參考和探討。

Image title

一、容錯性概念及重要性

對於容錯性,大家可能不太清楚是什麼概念,但當提到可用性時,那麼大部分設計師都會比較熟悉這個詞的含義。可用性是產品/系統重要的質量指標,是產品對使用者來說有效、易學、高效、好記、少錯和令人滿意的程度。容錯性其實就是可用性之中細分的一個模組,是專門針對出錯的研究。具體內容大家可以去看:唐納德諾曼《設計心理學》中關於錯誤的分類及錯誤設計原則;李樂山《人機介面設計》中Reason認為存在8種基本出錯型別 ;尼爾森《可用性工程》中錯誤資訊四原則以及《十大可用性原則》中第七條和第九條(分別是防錯原則和容錯原則)。容錯性的定義為:

容錯性是產品對錯誤操作的承載效能,即一個產品操作時出現錯誤的概率和錯誤出現後得到解決的概率和效率。容錯性最初應用於計算機領域,它的存在能保證系統在故障存在的情況下不失效,仍然正常工作。產品容錯性設計能使產品與人的交流或人與人藉助產品的交流更加流暢。

由此可見,容錯性設計原則是非常重要的,尤其是對於2C類或即時服務類(如鐵路購票網站)產品/系統。


二、容錯性設計原則

通過文獻整理,總結出5一級原則和18大二級原則,並提供對應的案例用以加深理解。

1.引導和提示

引導和提示主要是針對新手使用者,因為普通使用者和專家使用者可能已經熟練使過產品很多次,對流程有一定的認識。而對於新手使用者來說,使用過程就是個學習的過程,這時候正確地引導和提示就比較重要。

(1)提供詳盡的說明文字和指導方向

比如新浪微博中當使用者搜尋沒有結果的時候,給予使用者適當的指引和建議。

新浪微博搜尋

還有淘寶網中當使用者搜尋無結果時,智慧猜測使用者的出錯原因或者給予其他引導。

淘寶網搜尋

(2)引導和提示突出表現,且簡單容易理解

首先,引導和提示要突出表現,從而引起使用者關注,確保使用者在操作前能注意到引導或提示資訊。比如在新浪網的註冊頁面中,右側的提示:紅色錯誤提示和藍色引導說明在頁面中很醒目,註冊使用者自然能注意到此處的提示。其次,引導要簡單且容易理解,保證使用者在注意到引導或提示後能快速獲取資訊,從而得到幫助,以降低發生錯誤的概率。新浪網的登錄檔單中設定密碼選取的提示文案非常精簡,每句話表達了一個要點,並將最重要的資訊即“字元數”放在了最前面,因此使用者能在第一眼獲得並理解這個重要的資訊。

新浪微博註冊

現在移動端app在新手使用者第一次開啟進入介面時一般都會有清晰、準確的功能指引和提示。比如zaker的新功能引導頁面,在操作區用淺灰色蒙板覆蓋,減少頁面其它內容的干擾,再使用與蒙板對比較大的白色文字結合手勢圖形提示新功能用法,突出手勢及重點。

zaker新功能引導頁面

(3)當重要或操作結果不可逆的時候,詢問使用者讓其知道操作的後果

在使用者操作前即給出正確且有效地引導和提示,有助於減少錯誤發生的可能性。如 QQ郵箱網站為了防止使用者錯誤,在使用者點選傳送後提示沒有輸入主題資訊,從而避免使用者直接傳送無主題郵件。

QQ郵箱傳送郵件提醒

2.限制操作

如何從設計上避免使用者出錯,限制是一種非常必要的方式。從古至今,人們為了避免錯誤的發生都會設定一些障礙或提出一些限制性要求。從上帝給亞當夏娃的警告,到我國曆史上用來抵禦北方遊牧民族入侵的萬里長城,再到今日道路交通中限速的減速帶的設計,無不說明了有障礙設計的意義。

(1)增加那些不能逆轉操作的難度

在產品設計中這種方法主要是通過對一些可能造成錯誤的操作入口設定障礙或直接禁止操作,以避免錯誤的發生。比如windows系統提供隱藏檔案的功能,使用者可以把重要的系統檔案隱藏起來以免誤刪。

windows系統隱藏檔案

(2)適當限制使用者的某些互動操作

置灰是介面上限制某些操作的好方式。有的網站直接把不能操作的部分灰置,比如攜程網的時間選擇控制元件的設計,將已經過去的日期灰置,以免使用者誤選。

攜程網日期選擇控制元件

再看淘寶網的註冊頁,根據操作的步驟,將未開始的操作如下一步按鈕置灰,一方面告訴使用者當前可以進行當前操作,讓使用者只關注於當下的任務步驟,防止使用者出錯;另一方面預示後面還有哪樣的操作。

淘寶網註冊頁

3.反饋和幫助

(1)當使用者有些錯誤發生時,及時反饋錯誤並提供糾錯幫助

反饋錯誤及時就能保證使用者每個階段的操作都能得到回饋,避免因為一個小的錯誤就要修改相關聯的一系列內容的情況,提高成功完成任務的效率;反饋不僅要指出有錯,還要指出錯在哪裡。

優酷網的登入表單,在輸入錯誤的使用者名稱後,系統就會馬上給出反饋“使用者名稱不存在”,避免使用者在輸完密碼點選登入後才能發現錯誤,這樣使用者就能馬上停止後續操作來解決當下的問題。

優酷註冊

如果錯誤不可避免的發生了,合理恰當的提示可以減少使用者的挫敗感。谷歌瀏覽器打不開頁面時提供的提示說明資訊,簡潔直觀說明問題的情況及原因,並且還在更多資訊裡提供了一些相應的解決方法,這樣也就提高了提示資訊的有效性。同時,不知道大家是否知道這個頁面其實還是一個小遊戲,只要敲擊空格鍵就可控制上面的恐龍來避免前方出現的障礙物,可以算是谷歌設計師對瀏覽器發生錯誤時做的彌補,對使用者小小的歉意。

谷歌瀏覽器出錯提示

(2)出錯資訊應當用清晰的語言來表達,而不要使用難懂的術語

錯誤反饋文案要清晰、準確,這樣便於使用者瞭解錯誤的原因,方便下一步的修改。新浪網註冊頁設定密碼中,當使用者輸入的密碼不符合要求時,會用紅色文字反饋錯誤及其原因是字元數不符合要求,使用者就知道怎麼修改了。

新浪網的登錄檔單錯誤反饋

(3)出錯資訊使用的語言應當精煉準確,而不是空泛而模糊的

最好能夠告訴使用者,具體錯誤的原因在哪裡,是哪句話和哪個字出現的問題。舉一個反例:QQ空間的說說編輯輸入框,當輸入的語言包含敏感詞彙時,反饋提示中沒有具體指出是那個詞有問題。

QQ空間敏感詞彙提示

還有remember the milk的登錄檔單,同樣是使用者名稱稱,當輸入名稱後,反饋提示是“無效”,這個提示並沒準確指出使用者怎麼做是正確的,是“字元數不夠還是超過”還是“所選使用者名稱被佔用”還是其它原因?使用者只能一個一個地試,這時排查錯誤的效率自然下降,產品的容錯效能也就存在問題了。

remember the milk的登錄檔單

(4)出錯資訊應當對使用者解決問題提供建設性幫助

在使用者操作的過程中,出現錯誤要及時反饋,使使用者能儘早發現錯誤。同時要及時提供糾錯幫助,系統先自動糾錯,不能自動糾錯時,就提供糾錯幫助。這樣即使使用者操作錯誤了,但成功完成操作的效率也能大大提高。

當使用者知道錯誤後要及時提供糾錯幫助,如關聯推薦等,以幫助使用者快速找到糾錯的辦法。Google搜尋中,當有單詞或詞語輸入錯誤時,Google搜尋就會根據匹配度給使用者可能正確的單詞或詞語供使用者選擇,避免二次輸入,很人性化的做好了糾錯。

google 搜尋糾錯幫助

(5)出錯資訊應當友好,不要威脅或者責備使用者

按照可用性的理論,使用者沒有出錯,出錯的是你的產品,因為它不能正確的解讀使用者的操作行為。不要在錯誤資訊中責備使用者,我們應該因為問題向使用者道歉,為使用者提供“情感支援”,主動識別並處理使用者的情感狀況,能緩解挫敗帶來的強烈的負面情緒和刺激。

4.錯誤恢復

(1)允許使用者犯錯,並使操作者能夠撤銷以前的指令

最常見的如Microsoft office軟體,使用者編輯文件後如果發現錯誤,需要修改時可以按ctrl+z來撤銷上一次的編輯,恢復錯誤。

Microsoft office 撤銷

(2)能幫助使用者在發生錯誤後迅速回到正確狀態

iPhone手機的還原功能,可以在使用者出錯時將多種功能設定快速還原到原始狀態。

iPhone手機的還原功能

(3)儘可能注意保留操作資訊,提供安全恢復到離錯誤點最近一步的方式

使用者每次執行操作後,尤其是完成操作步驟比較多的任務,要儘可能注意保留操作資訊,以便能夠及時恢復;如果是一個任務結束後的操作錯誤,最好是能提供安全恢復到離錯誤點最近的一步的方式,使使用者可以快速地從糾正錯誤的步驟中轉移到正確的流程上,從而挽回損失或錯誤。

Photoshop中的歷史動作就是一個很好的例子,可以預設儲存最新的20個操作,也可以自己設定儲存數量;使用者在設定數量範圍內的每一步操作都可以恢復。

Photoshop歷史
記錄皮膚

Gmail郵箱幾乎給所有的操作都提供了撤銷功能,使用者如果誤刪了郵件都可以撤銷操作,甚至點選傳送郵件按鈕後都可以在一定的時間內撤銷操作。

Gmail 郵箱撤銷介面

5.減少負擔

(1)儘可能減少使用者的記憶負擔

記憶是人類一個非常重要的心理活動,它是人類很多其他思維活動和行為的基礎。在所有的認知心理活動中,記憶是和使用者介面設計關係最為密切的一個,很多軟體可用性方面的問題都歸結為記憶問題。12306鐵路購票網站,購票資訊頁面的溫馨提示內容非常冗長,使用者很難關注到重點資訊。

12306網購票資訊頁

(2)減少使用者認知混淆

根據已訂閱和未訂閱的不同,訂閱button和退訂進行視覺上明顯的區分,避免錯誤操作。

訂閱button

(3)讓使用者單次只需執行唯一操作

普通使用者在一些流程複雜的互動操作前總會或多或少的迷茫。解決方法就是讓使用者單次只需執行唯一操作,不要把複雜的選擇題拋給使用者,讓使用者出錯。例如在電腦防毒這個相對複雜的任務中,一次只提供給使用者唯一明顯按鈕,避免使用者在選擇時左右為難,只給使用者唯一的推薦,別讓使用者思考。

電腦防毒軟體

(4)減少不必要的操作步驟

攜程網的註冊頁面,輸入郵箱時下方會相應出現各種郵箱字尾供使用者快速選擇,減少使用者的輸入操作次數。

攜程網註冊頁


三、總結

修修補補外加引用寫了這麼多文字和圖片,希望對大家有用,如有哪些分類不合理或解釋案例不夠有代表性的地方請大家能夠指出,若能提供相應的建議就更加好啦。最後,將所有提到的一二級原則統一整理成架構圖方便大家檢視。

Image title

相關文章