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

2 評論 6585 瀏覽 62 收藏 23 分鐘

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

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

尼爾森十大原則由畢業(yè)于哥本哈根的博士發(fā)表,Jakob Nielsen對人機交互有很多研究,他提出十大可用性原則,用來評價用戶體驗的好壞,每個產(chǎn)品設計者都可以根據(jù)這十大原則進行自查。

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

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

一、系統(tǒng)狀態(tài)可見

系統(tǒng)應該總是能及時通過適當?shù)姆答仯層脩臬@悉系統(tǒng)目前的狀態(tài)。

缺乏信息通常等同于缺乏控制,通過為交互事件提供即時反饋,用戶可以快速識別錯誤來源并在錯誤發(fā)生后立即修復。

溝通創(chuàng)造信任,當用戶理解系統(tǒng)的狀態(tài)時,會覺得自己可以掌控,會依賴系統(tǒng)在所有情況下按預期行事。交互的可預測性不僅會在網(wǎng)站或應用程序的機制中產(chǎn)生信任,還會本身中產(chǎn)生信任。

1. 即時反饋,讓用戶操作時保持控制感、信任感

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

而任何人天生就喜歡控制事情,只有這樣才能感到安全。通過每次交互后提供有關系統(tǒng)狀態(tài)和反饋的信息,可以喚起控制感,同時提升用戶對系統(tǒng)的信任感。

在用戶界面中,主要是視覺反饋,比如點擊按鈕時,通過顏色反饋,在適當?shù)靥峁┻M度條顯示進展。邊界為:用戶在系統(tǒng)不告知的情況下,無法進行下一步操作。

比如,文件上傳。

2. 明確知道當前的位置

系統(tǒng)需要為用戶提供準確的導航信息,讓用戶知道在哪里,能去哪以及達成某種目標的路徑。在界面中可以通過導航菜單、面包屑、步驟條、分頁器等組件讓用戶明確自己在系統(tǒng)只能夠所處的位置。

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

比如:審批狀態(tài)。

3. 溝通創(chuàng)造信任

當用戶理解系統(tǒng)的狀態(tài)后,會覺得自己可以掌控,會依賴系統(tǒng)在所有情況下按預期行事。

比如:在簽章業(yè)務中,針對文件的簽章是有格式限制,在用戶選擇不支持的格式后,應該列出不支持文件列表,告知用戶具體原因。

比如:在收藏夾業(yè)務中,當用戶訪問之前創(chuàng)建的收藏夾時,是不是要包含已經(jīng)被刪除的文件?最糟糕的用戶體驗是,如果這些文件從列表中消失,沒有解釋原因。

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

二、系統(tǒng)界面應符合現(xiàn)實世界的慣例

系統(tǒng)應該使用用戶的語言,用戶熟悉的句子,段落和概念,而不是使用基于系統(tǒng)的術語。遵循日常的慣例,使得呈現(xiàn)的信息自然且具有邏輯。

作為產(chǎn)品人員,我們永遠不應該假設自己對單詞或對象的解釋和理解與我們的用戶相符。

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

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

比如:字段根據(jù)行業(yè)習慣,命名。

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

2. 利用對現(xiàn)實世界對象和活動的熟悉程度

創(chuàng)建一個模仿物理世界的互動——利用人們現(xiàn)有的知識,幫助他們輕松學習界面,而無需培訓。

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

比如:缺省頁的情感化設計。

三、讓用戶有控制的自由

用戶往往會誤執(zhí)行了系統(tǒng)的某個功能,這時需要一個顯著的“緊急退出”操作,使得用戶在還沒有得到不希望發(fā)生的結果前,能阻止系統(tǒng)繼續(xù)執(zhí)行用戶的誤操作。另外,系統(tǒng)應支持“撤消操作”和“重做”。

1. 提供讓用戶可以反悔的功能

用戶在使用產(chǎn)品過程中應遵循可退可進的原則。

流程撤回功能:在發(fā)起審批流程之后,突然發(fā)現(xiàn)內(nèi)容存在問題,應該支持撤回功能,然后重新編輯發(fā)送,來避免一時沒想好而錯發(fā)審批流可能給對方或者自己造成困擾,這就是用戶可控原則。

文件系統(tǒng)恢復功能:在使用文件系統(tǒng)的時候,我們會對文件做一些操作,比如文件的刪除,當我刪除一個文件幾天之后后悔的時候,我可以在回收站中找到最近刪除的文件,系統(tǒng)會將刪除的文件保存30天,30天之內(nèi)的文件都可以得到恢復。來避免一時沒想好而錯刪文件給自己造成困擾,這也是用戶可控原則。

2. 不可逆的操作要給用戶提示并提高操作難度

不可逆的操作需要給用戶明顯的提示并提高操作難度,以免對用戶產(chǎn)生嚴重的影響。比如刪除項目功能需要二次輸入文字內(nèi)容才能完成操作。

四、遵循統(tǒng)一性和標準化

系統(tǒng)的同一件事物不應該使用不同的語句,狀態(tài)和操作而使得用戶產(chǎn)生疑惑。一般應遵循系統(tǒng)平臺的慣例。

對于用戶來說,同樣的文字、狀態(tài)、按鈕,都應該觸發(fā)相同的事情,遵從通用的平臺慣例;也就是,同一用語、功能、操作保持一致。軟件產(chǎn)品統(tǒng)一和標準化主要從內(nèi)部一致性和外部一致性方面做以解釋。

1. 內(nèi)部一致性

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

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

比如:B端設計的左側導航欄設計每個模塊的條目都有統(tǒng)一的“圖標+文字信息”的結構樣式,能讓用戶快速了解每個菜單都是做什么的,這就是結構一致性的體現(xiàn)。

定義左側菜單有主菜單+子菜單組成,右邊為導航欄(主要表述當前我在哪里),下邊為內(nèi)容區(qū)域。

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

logo顏色與界面的主色都需要統(tǒng)一,還有強調色、輔助色的使用,整個界面應除了圖片的有效信息外,都通過灰、白、主色調來呈現(xiàn),界面保持了很好的一致性,這就是色彩一致性原則。

(3)操作一致性:能讓產(chǎn)品更新?lián)Q代時仍然讓用戶保持對原產(chǎn)品的認知,減小用戶的學習成本

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

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

① 用戶產(chǎn)生操作之后,成功、警告或錯誤的反饋使用message提示明確告知用戶需要了解的信息;此類提示頂部居中顯示并在2~3S自動消失。

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

③ 用戶在進行一般重要操作時,提示用戶操作或是完成某個任務時需要的一些其他額外信息,反饋使用Dialog對話框,需用戶執(zhí)行取消/確定按鈕的簡單應答模式。

④ 當需要使用復雜的通知內(nèi)容或需要引導性顯示內(nèi)容時,由系統(tǒng)主動推送的全局提醒式通知,反饋使用Notification通知提醒框,一般懸浮在網(wǎng)頁右上角,一般需要用戶點擊關閉按鈕。

⑤ 某種按鈕或功能需要加以文字提示時,反饋使用tooltip文字提示,鼠標懸浮顯示具體文本內(nèi)容。

2. 外部一致性

是指保持產(chǎn)品外部的一致性。

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

結論:最好保持內(nèi)部一致性和外部一致性,以提高產(chǎn)品的易學性。

五、防止用戶出錯

應該在一開始就防止錯誤的發(fā)生,事后再好的錯誤信息也不如這種防患于未燃的設計??紤]設置某些條件限制來防止用戶產(chǎn)生錯誤,或者在用戶選擇提交操作前幫助用戶檢查確認。

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

在B端業(yè)務中,新增審批或表單數(shù)據(jù)是非常常見的業(yè)務,而增加關閉時的彈出框,會增加不可逆操作的難度。

當用戶創(chuàng)建一條數(shù)據(jù)到一半的時候,因為誤操作或者其它退出當前狀態(tài)的時候,使用彈窗是是個不錯的選擇,因為用戶這個操作會讓之前辛苦編輯的內(nèi)容刪除找不回,想要再創(chuàng)建只能從頭開始,對用戶造成損失比較大。這就是防錯原則的一種體現(xiàn)。

2. 限制范圍

某種意義上來說限制用戶的選擇并不是一件值得做的事情,但是如果在系統(tǒng)邊界十分清晰的情況下來定義范圍,那么限制用戶可以選擇/輸入的時是一個很好的策略。

那么其實在其B端場景中,例如會議室預訂,時間的范圍限制會避免用戶出現(xiàn)同一時間段沖突的情況。

3. 清晰的提示

能防止用戶犯錯,輸入框的校驗在光標離開之后去觸發(fā),不通過時會在輸入框用紅色字體演示不通過的原因。點擊操作時,無論準確與否,都會給出相應toast的提示。

六、識別好過回憶

通過對對象,操作和選擇的可視化,使得用戶的記憶負擔降到最低。在連續(xù)的操作中,不應強制用戶記住某些信息。系統(tǒng)的使用說明應該很顯著或者在適當?shù)臅r候很容易獲取。

向用戶顯示他們可以識別的內(nèi)容可以提高可用性而不需要從頭開始調用項目,因此當系統(tǒng)為用戶提供上下文線索時,提取記憶會更加輕松。

1. 搜索關鍵詞聯(lián)想/輸入提供可選項

對于B端業(yè)務來說,輸入數(shù)據(jù)、搜索查詢數(shù)據(jù)是非常常見的,在用戶本身處于工作情景下的操作,系統(tǒng)應盡可能低減少用戶回憶成本,因此建議在輸入、搜索操作時,提供關鍵詞聯(lián)想、輸入數(shù)據(jù)可選項等功能。

2. 數(shù)據(jù)自動讀取

在合適位置顯示一些系統(tǒng)自動獲取到的數(shù)據(jù),顯示給用戶,避免用戶記憶。

3. 盡量減少操作路徑

根據(jù)B端業(yè)務的使用場景,用戶基本上都是使用系統(tǒng)提效的,所以軟件設計上應可能減少操作路徑。

以下例子:同時滿足關鍵詞聯(lián)想(搜索時顯示項目聯(lián)想詞)、滿足數(shù)據(jù)自動讀?。ㄔ诋斍绊擄@示是在哪個項目內(nèi))、減少操作路徑(提供項目快捷切換功能)。

七、使用的效率和靈活性

好的產(chǎn)品應同時兼顧初級用戶和專家用戶的使用需求,對初級用戶來說,需要功能明確、清晰,即使用系統(tǒng)默認功能就可以滿足需求,而對專家用戶來說,希望能通過配置化操作,提高使用效率。

1. 提供快捷入口

比如:B端環(huán)境中一般會存在多個業(yè)務,應該支持用戶自定義快捷入口,這樣用戶可以根據(jù)自己的個人需求定制自己適合的應用分布方式,這就叫做用戶定制常用功能,也就是靈活高效原則的一種體現(xiàn)。

2. 提供自由化配置

比如:B端一般是根據(jù)組織劃分角色權限,對于大部分企業(yè)來說,使用系統(tǒng)提供的內(nèi)置角色就可以滿足,應該支持企業(yè)自定義角色,這樣企業(yè)可以根據(jù)自身的需求定制適合的權限策略,這就就叫做企業(yè)定義角色功能,也就是靈活高效原則的一種體現(xiàn)。

3. 提供常見業(yè)務鍵盤快捷鍵

系統(tǒng)內(nèi)支持常用快捷鍵操作,有助于用戶快速完成目標,同時提升用戶體驗。比如按enter可用于確認操作,具體業(yè)務新建文件夾時,按enter鍵完成創(chuàng)建文件夾操作。

4. excel導出導入模板支持自定義

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

八、簡約設計

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

1. 建立清晰的視覺層級

能夠方便用戶無障礙的瀏覽信息,越重要的內(nèi)容越突出。

2. 降低頁面的干擾

盡可能把關鍵信息在明顯的位置顯示出來,而把一些少數(shù)人關注的元素,在不明顯入口顯示。

九、幫助用戶識別,診斷并修復錯誤

錯誤信息應該使用簡明的語言表達(非代碼),正確的說明問題,并有建設性的提出解決案。

1. 進行重大操作時,告知用戶將產(chǎn)生的后果

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

2. 出現(xiàn)錯誤時應準確表述問題,并告知用戶解決方案

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

十、提示和幫助文檔

即使系統(tǒng)能夠在不需要幫助文檔的情況下很好的被用戶使用,也有必要提供幫助提示和文檔。這些信息都應該很容易的被搜索到,并整合集成到用戶的任務中,并列出具體的操作步驟,而不是龐大籠統(tǒng)的文檔。

1. 對一些有歧義或有疑問的按鈕添加文字說明

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

交互方式:鼠標移入則立即顯示提示,移出則立即消失,不承載復雜文本和操作。

2. 對所有系統(tǒng)內(nèi)可能給用戶可能造成困擾的地方,增加解決方案鏈接

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

參考資料:

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

 

本文由@高姿態(tài) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載。

題圖來自 Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 贊,學習了

    回復
  2. 有理論有案例,棒!

    來自廣東 回復