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

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

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

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

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

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

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

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

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

1. 即時(shí)反饋，讓用戶操作時(shí)保持控制感、信任感

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

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

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

比如，文件上傳。

2. 明確知道當(dāng)前的位置

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

在設(shè)計(jì)過程中，要注意提供上下文線索，避免用戶迷路。

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

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

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

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

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

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

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

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

作為產(chǎn)品人員，我們永遠(yuǎn)不應(yīng)該假設(shè)自己對(duì)單詞或?qū)ο蟮慕忉尯屠斫馀c我們的用戶相符。

1. 熟悉的語(yǔ)言，易理解的文案

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

比如：字段根據(jù)行業(yè)習(xí)慣，命名。

使用熟悉的語(yǔ)言，并包含易于理解的參考。

2. 利用對(duì)現(xiàn)實(shí)世界對(duì)象和活動(dòng)的熟悉程度

創(chuàng)建一個(gè)模仿物理世界的互動(dòng)——利用人們現(xiàn)有的知識(shí)，幫助他們輕松學(xué)習(xí)界面，而無(wú)需培訓(xùn)。

這是因?yàn)槿藗兏鶕?jù)他們過去對(duì)現(xiàn)實(shí)世界對(duì)象的經(jīng)驗(yàn)，建立了一個(gè)系統(tǒng)如何運(yùn)作的心理模型或理論。因此，當(dāng)用戶從物理世界過渡到數(shù)字世界時(shí)，他們會(huì)隨身攜帶這些解釋。用戶希望反映材質(zhì)對(duì)象的UI元素與現(xiàn)實(shí)世界中的那些對(duì)象相似。

比如：缺省頁(yè)的情感化設(shè)計(jì)。

三、讓用戶有控制的自由

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

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

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

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

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

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

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

四、遵循統(tǒng)一性和標(biāo)準(zhǔn)化

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

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

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

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

（1）結(jié)構(gòu)一致性：保持一種類似的結(jié)構(gòu)，新的結(jié)構(gòu)變化會(huì)讓用戶思考，規(guī)則的排列順序能減輕用戶的思考負(fù)擔(dān)

比如：B端設(shè)計(jì)的左側(cè)導(dǎo)航欄設(shè)計(jì)每個(gè)模塊的條目都有統(tǒng)一的“圖標(biāo)+文字信息”的結(jié)構(gòu)樣式，能讓用戶快速了解每個(gè)菜單都是做什么的，這就是結(jié)構(gòu)一致性的體現(xiàn)。

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

（2）顏色一致性：產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的，而不是換一個(gè)頁(yè)面顏色就不同

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

（3）操作一致性：能讓產(chǎn)品更新?lián)Q代時(shí)仍然讓用戶保持對(duì)原產(chǎn)品的認(rèn)知，減小用戶的學(xué)習(xí)成本

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

（4）反饋一致性：用戶在操作按鈕或者條目的時(shí)候，點(diǎn)擊的反饋效果應(yīng)該是一致的

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

② 當(dāng)某個(gè)頁(yè)面需要向用戶顯示警告的信息時(shí)，反饋使用alert提示，此類提示不會(huì)主動(dòng)消失。

③ 用戶在進(jìn)行一般重要操作時(shí)，提示用戶操作或是完成某個(gè)任務(wù)時(shí)需要的一些其他額外信息，反饋使用Dialog對(duì)話框，需用戶執(zhí)行取消/確定按鈕的簡(jiǎn)單應(yīng)答模式。

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

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

2. 外部一致性

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

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

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

五、防止用戶出錯(cuò)

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

1. 重要表單點(diǎn)擊關(guān)閉/取消時(shí)二次彈窗

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

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

2. 限制范圍

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

那么其實(shí)在其B端場(chǎng)景中，例如會(huì)議室預(yù)訂，時(shí)間的范圍限制會(huì)避免用戶出現(xiàn)同一時(shí)間段沖突的情況。

3. 清晰的提示

能防止用戶犯錯(cuò)，輸入框的校驗(yàn)在光標(biāo)離開之后去觸發(fā)，不通過時(shí)會(huì)在輸入框用紅色字體演示不通過的原因。點(diǎn)擊操作時(shí)，無(wú)論準(zhǔn)確與否，都會(huì)給出相應(yīng)toast的提示。

六、識(shí)別好過回憶

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

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

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

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

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

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

3. 盡量減少操作路徑

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

以下例子：同時(shí)滿足關(guān)鍵詞聯(lián)想（搜索時(shí)顯示項(xiàng)目聯(lián)想詞）、滿足數(shù)據(jù)自動(dòng)讀?。ㄔ诋?dāng)前頁(yè)顯示是在哪個(gè)項(xiàng)目?jī)?nèi)）、減少操作路徑（提供項(xiàng)目快捷切換功能）。

七、使用的效率和靈活性

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

1. 提供快捷入口

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

2. 提供自由化配置

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

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

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

4. excel導(dǎo)出導(dǎo)入模板支持自定義

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

八、簡(jiǎn)約設(shè)計(jì)

操作中不應(yīng)該包含不相關(guān)的信息和很少用到的需求。每一個(gè)額外的信息都會(huì)與操作中的相關(guān)信息形成競(jìng)爭(zhēng)，從而弱化了主要信息的可見度。

1. 建立清晰的視覺層級(jí)

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

2. 降低頁(yè)面的干擾

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

九、幫助用戶識(shí)別，診斷并修復(fù)錯(cuò)誤

錯(cuò)誤信息應(yīng)該使用簡(jiǎn)明的語(yǔ)言表達(dá)(非代碼)，正確的說明問題，并有建設(shè)性的提出解決案。

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

比如刪除時(shí)：會(huì)告知你當(dāng)前的行為，將會(huì)造成的影響。

2. 出現(xiàn)錯(cuò)誤時(shí)應(yīng)準(zhǔn)確表述問題，并告知用戶解決方案

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

十、提示和幫助文檔

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

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

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

交互方式：鼠標(biāo)移入則立即顯示提示，移出則立即消失，不承載復(fù)雜文本和操作。

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

B端產(chǎn)品會(huì)存在一些認(rèn)知成本，所以第一時(shí)間在相應(yīng)位置告知用戶解決方案，幫助用戶可以順利達(dá)成此次目標(biāo)，一定程度上增加用戶對(duì)產(chǎn)品的好感度。

參考資料：

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

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

題圖來(lái)自 Unsplash，基于CC0協(xié)議