從尼爾森十大可用性原則角度解析B端設計(PM必備)

編輯導語:近幾年B端業務不斷上升,而讓使用者愉悅、快速地在系統內達成目的,是產品能否成功的關鍵因素之一。本文將從真實案例分享一些設計的小技巧,希望對你有所幫助。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

什麼是尼爾森十大可用性原則?

尼爾森十大原則由畢業於哥本哈根的博士發表,Jakob Nielsen對人機互動有很多研究,他提出十大可用性原則,用來評價使用者體驗的好壞,每個產品設計者都可以根據這十大原則進行自查。

為什麼要以B端視角解析尼爾森十大可用性原則?

因近幾年B端業務的火速上升,其主要是在特定的工作場景下使用的,其更多的目標是提升效率。那麼讓使用者愉悅、快速地在系統內達成目的,是產品能否成功的關鍵因素之一。作為B端產品經理對互動設計有一定的瞭解,將會使你的產品更容易獲得成功。本文將從真實案例分享一些設計的小技巧,希望對你有幫助。

一、系統狀態可見

系統應該總是能及時透過適當的反饋,讓使用者獲悉系統目前的狀態。

缺乏資訊通常等同於缺乏控制,透過為互動事件提供即時反饋,使用者可以快速識別錯誤來源並在錯誤發生後立即修復。

溝通創造信任,當用戶理解系統的狀態時,會覺得自己可以掌控,會依賴系統在所有情況下按預期行事。互動的可預測性不僅會在網站或應用程式的機制中產生信任,還會本身中產生信任。

1。 即時反饋,讓使用者操作時保持控制感、信任感

系統的狀態即時告知使用者,可以提升使用者對系統的信任感,如果不告知使用者,使用者將不知道當前的系統狀態,並無從下手,他們不知道他們的行為是否有效,或者他們是否犯了錯誤,最終會導致放棄使用系統。

而任何人天生就喜歡控制事情,只有這樣才能感到安全。透過每次互動後提供有關係統狀態和反饋的資訊,可以喚起控制感,同時提升使用者對系統的信任感。

在使用者介面中,主要是視覺反饋,比如點選按鈕時,透過顏色反饋,在適當地提供進度條顯示進展。邊界為:使用者在系統不告知的情況下,無法進行下一步操作。

比如,檔案上傳。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

2。 明確知道當前的位置

系統需要為使用者提供準確的導航資訊,讓使用者知道在哪裡,能去哪以及達成某種目標的路徑。在介面中可以透過導航選單、麵包屑、步驟條、分頁器等元件讓使用者明確自己在系統只能夠所處的位置。

在設計過程中,要注意提供上下文線索,避免使用者迷路。

比如:審批狀態。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

3。 溝通創造信任

當用戶理解系統的狀態後,會覺得自己可以掌控,會依賴系統在所有情況下按預期行事。

比如:在簽章業務中,針對檔案的簽章是有格式限制,在使用者選擇不支援的格式後,應該列出不支援檔案列表,告知使用者具體原因。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

比如:在收藏夾業務中,當用戶訪問之前建立的收藏夾時,是不是要包含已經被刪除的檔案?最糟糕的使用者體驗是,如果這些檔案從列表中消失,沒有解釋原因。

某種情況下收藏夾功能是用於給使用者收藏一些比較重要的檔案資料的,如果平白無故的消失,意味著使用者無法明確找到合適的替代品,造成的後果就是使用者可能會停止依賴收藏夾的功能。所以好的解決方案是明確告知使用者xxxxx檔案被刪除。

二、系統介面應符合現實世界的慣例

系統應該使用使用者的語言,使用者熟悉的句子,段落和概念,而不是使用基於系統的術語。遵循日常的慣例,使得呈現的資訊自然且具有邏輯。

作為產品人員,我們永遠不應該假設自己對單詞或物件的解釋和理解與我們的使用者相符。

1。 熟悉的語言,易理解的文案

如果使用者不理解網站使用的術語,他們不僅會感到不確定和被忽視,而且許多人將被迫到其他地方尋找解釋甚至完成他們的任務。使用者應始終能夠理解意義,而無需在搜尋引擎中查詢單詞的定義。

比如:欄位根據行業習慣,命名。

使用熟悉的語言,幷包含易於理解的參考。

2。 利用對現實世界物件和活動的熟悉程度

建立一個模仿物理世界的互動——利用人們現有的知識,幫助他們輕鬆學習介面,而無需培訓。

這是因為人們根據他們過去對現實世界物件的經驗,建立了一個系統如何運作的心理模型或理論。因此,當用戶從物理世界過渡到數字世界時,他們會隨身攜帶這些解釋。使用者希望反映材質物件的UI元素與現實世界中的那些物件相似。

比如:預設頁的情感化設計。

三、讓使用者有控制的自由

使用者往往會誤執行了系統的某個功能,這時需要一個顯著的“緊急退出”操作,使得使用者在還沒有得到不希望發生的結果前,能阻止系統繼續執行使用者的誤操作。另外,系統應支援“撤消操作”和“重做”。

1。 提供讓使用者可以反悔的功能

使用者在使用產品過程中應遵循可退可進的原則。

流程撤回功能:在發起審批流程之後,突然發現內容存在問題,應該支援撤回功能,然後重新編輯傳送,來避免一時沒想好而錯發審批流可能給對方或者自己造成困擾,這就是使用者可控原則。

檔案系統恢復功能:在使用檔案系統的時候,我們會對檔案做一些操作,比如檔案的刪除,當我刪除一個檔案幾天之後後悔的時候,我可以在回收站中找到最近刪除的檔案,系統會將刪除的檔案儲存30天,30天之內的檔案都可以得到恢復。來避免一時沒想好而錯刪檔案給自己造成困擾,這也是使用者可控原則。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

2。 不可逆的操作要給使用者提示並提高操作難度

不可逆的操作需要給使用者明顯的提示並提高操作難度,以免對使用者產生嚴重的影響。比如刪除專案功能需要二次輸入文字內容才能完成操作。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

四、遵循統一性和標準化

系統的同一件事物不應該使用不同的語句,狀態和操作而使得使用者產生疑惑。一般應遵循系統平臺的慣例。

對於使用者來說,同樣的文字、狀態、按鈕,都應該觸發相同的事情,遵從通用的平臺慣例;也就是,同一用語、功能、操作保持一致。軟體產品統一和標準化主要從內部一致性和外部一致性方面做以解釋。

1。 內部一致性

維持產品或產品系列中的一致性,主要包括從以下方面:

(1)結構一致性:保持一種類似的結構,新的結構變化會讓使用者思考,規則的排列順序能減輕使用者的思考負擔

比如:B端設計的左側導航欄設計每個模組的條目都有統一的“圖示+文字資訊”的結構樣式,能讓使用者快速瞭解每個選單都是做什麼的,這就是結構一致性的體現。

定義左側選單有主選單+子選單組成,右邊為導航欄(主要表述當前我在哪裡),下邊為內容區域。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

從尼爾森十大可用性原則角度解析B端設計(PM必備)

(2)顏色一致性:產品所使用的主要色調應該是統一的,而不是換一個頁面顏色就不同

logo顏色與介面的主色都需要統一,還有強調色、輔助色的使用,整個介面應除了圖片的有效資訊外,都透過灰、白、主色調來呈現,介面保持了很好的一致性,這就是色彩一致性原則。

(3)操作一致性:能讓產品更新換代時仍然讓使用者保持對原產品的認知,減小使用者的學習成本

返回入口位置統一,二次確認彈窗取消按鈕在左,確認按鈕在右等。

(4)反饋一致性:使用者在操作按鈕或者條目的時候,點選的反饋效果應該是一致的

使用者產生操作之後,成功、警告或錯誤的反饋使用message提示明確告知使用者需要了解的資訊;此類提示頂部居中顯示並在2~3S自動消失。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

當某個頁面需要向用戶顯示警告的資訊時,反饋使用alert提示,此類提示不會主動消失。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

使用者在進行一般重要操作時,提示使用者操作或是完成某個任務時需要的一些其他額外資訊,反饋使用Dialog對話方塊,需使用者執行取消/確定按鈕的簡單應答模式。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

當需要使用複雜的通知內容或需要引導性顯示內容時,由系統主動推送的全域性提醒式通知,反饋使用Notification通知提醒框,一般懸浮在網頁右上角,一般需要使用者點選關閉按鈕。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

某種按鈕或功能需要加以文字提示時,反饋使用tooltip文字提示,滑鼠懸浮顯示具體文字內容。

2。 外部一致性

是指保持產品外部的一致性。

雅各布定律可以幫助我們理解為什麼外部標準如此重要。雅各布法則指出:“使用者將大部分時間都花在您以外的網站上”,如果其它網站都遵循一致的定律,但是您的系統違反了該定律,將迫使使用者學習,增加使用者的認知負擔。當然有時候改變也是一種創新,最好是建立在大量的使用者調研基礎之上。

結論:最好保持內部一致性和外部一致性,以提高產品的易學性。

五、防止使用者出錯

應該在一開始就防止錯誤的發生,事後再好的錯誤資訊也不如這種防患於未燃的設計。考慮設定某些條件限制來防止使用者產生錯誤,或者在使用者選擇提交操作前幫助使用者檢查確認。

1。 重要表單點選關閉/取消時二次彈窗

在B端業務中,新增審批或表單資料是非常常見的業務,而增加關閉時的彈出框,會增加不可逆操作的難度。

當用戶建立一條資料到一半的時候,因為誤操作或者其它退出當前狀態的時候,使用彈窗是是個不錯的選擇,因為使用者這個操作會讓之前辛苦編輯的內容刪除找不回,想要再建立只能從頭開始,對使用者造成損失比較大。這就是防錯原則的一種體現。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

2。 限制範圍

某種意義上來說限制使用者的選擇並不是一件值得做的事情,但是如果在系統邊界十分清晰的情況下來定義範圍,那麼限制使用者可以選擇/輸入的時是一個很好的策略。

那麼其實在其B端場景中,例如會議室預訂,時間的範圍限制會避免使用者出現同一時間段衝突的情況。

3。 清晰的提示

能防止使用者犯錯,輸入框的校驗在游標離開之後去觸發,不透過時會在輸入框用紅色字型演示不透過的原因。點選操作時,無論準確與否,都會給出相應toast的提示。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

六、識別好過回憶

透過對物件,操作和選擇的視覺化,使得使用者的記憶負擔降到最低。在連續的操作中,不應強制使用者記住某些資訊。系統的使用說明應該很顯著或者在適當的時候很容易獲取。

向用戶顯示他們可以識別的內容可以提高可用性而不需要從頭開始呼叫專案,因此當系統為使用者提供上下文線索時,提取記憶會更加輕鬆。

1。 搜尋關鍵詞聯想/輸入提供可選項

對於B端業務來說,輸入資料、搜尋查詢資料是非常常見的,在使用者本身處於工作情景下的操作,系統應儘可能低減少使用者回憶成本,因此建議在輸入、搜尋操作時,提供關鍵詞聯想、輸入資料可選項等功能。

2。 資料自動讀取

在合適位置顯示一些系統自動獲取到的資料,顯示給使用者,避免使用者記憶。

3。 儘量減少操作路徑

根據B端業務的使用場景,使用者基本上都是使用系統提效的,所以軟體設計上應可能減少操作路徑。

以下例子:同時滿足關鍵詞聯想(搜尋時顯示專案聯想詞)、滿足資料自動讀取(在當前頁顯示是在哪個專案內)、減少操作路徑(提供專案快捷切換功能)。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

七、使用的效率和靈活性

好的產品應同時兼顧初級使用者和專家使用者的使用需求,對初級使用者來說,需要功能明確、清晰,即使用系統預設功能就可以滿足需求,而對專家使用者來說,希望能透過配置化操作,提高使用效率。

1。 提供快捷入口

比如:B端環境中一般會存在多個業務,應該支援使用者自定義快捷入口,這樣使用者可以根據自己的個人需求定製自己適合的應用分佈方式,這就叫做使用者定製常用功能,也就是靈活高效原則的一種體現。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

2。 提供自由化配置

比如:B端一般是根據組織劃分角色許可權,對於大部分企業來說,使用系統提供的內建角色就可以滿足,應該支援企業自定義角色,這樣企業可以根據自身的需求定製適合的許可權策略,這就就叫做企業定義角色功能,也就是靈活高效原則的一種體現。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

3。 提供常見業務鍵盤快捷鍵

系統內支援常用快捷鍵操作,有助於使用者快速完成目標,同時提升使用者體驗。比如按enter可用於確認操作,具體業務新建資料夾時,按enter鍵完成建立資料夾操作。

4。 excel匯出匯入模板支援自定義

在B端工作場景中,大部分管理的檔案會使用excel進行操作,而對於使用者提效excel的匯入/匯出功能,可以快速達成目的,以及模板的可配置化,將有助於專家使用者根據自身需求達成個性化目的。

八、簡約設計

操作中不應該包含不相關的資訊和很少用到的需求。每一個額外的資訊都會與操作中的相關資訊形成競爭,從而弱化了主要資訊的可見度。

1。 建立清晰的視覺層級

能夠方便使用者無障礙的瀏覽資訊,越重要的內容越突出。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

2。 降低頁面的干擾

儘可能把關鍵資訊在明顯的位置顯示出來,而把一些少數人關注的元素,在不明顯入口顯示。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

九、幫助使用者識別,診斷並修復錯誤

錯誤資訊應該使用簡明的語言表達(非程式碼),正確的說明問題,並有建設性的提出解決案。

1。 進行重大操作時,告知使用者將產生的後果

比如刪除時:會告知你當前的行為,將會造成的影響。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

2。 出現錯誤時應準確表述問題,並告知使用者解決方案

儘可能提供詳盡的說明文字和指導方向,遇到了什麼問題,以及如何解決。方便使用者自主性解決問題,降低服務成本。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

從尼爾森十大可用性原則角度解析B端設計(PM必備)

十、提示和幫助文件

即使系統能夠在不需要幫助文件的情況下很好的被使用者使用,也有必要提供幫助提示和文件。這些資訊都應該很容易的被搜尋到,並整合整合到使用者的任務中,並列出具體的操作步驟,而不是龐大籠統的文件。

1。 對一些有歧義或有疑問的按鈕新增文字說明

使用tooltip文字提示,顯示描述文字。

互動方式:滑鼠移入則立即顯示提示,移出則立即消失,不承載複雜文字和操作。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

2。 對所有系統內可能給使用者可能造成困擾的地方,增加解決方案連結

B端產品會存在一些認知成本,所以第一時間在相應位置告知使用者解決方案,幫助使用者可以順利達成此次目標,一定程度上增加使用者對產品的好感度。

從尼爾森十大可用性原則角度解析B端設計(PM必備)

參考資料:

https://www。nngroup。com/articles/ten-usability-heuristics/

本文由@高姿態 原創釋出於人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基於CC0協議

TAG: 使用者操作系統一致性使用