The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. ——Nielson
系統(tǒng)應(yīng)該在適當(dāng)?shù)臅r(shí)間給與合適的反饋，以此讓用戶了解正在發(fā)生的事情！釥柹
1. 位置可見
相比于C端產(chǎn)品，B端產(chǎn)品在頁面層級(jí)往往更為復(fù)雜。因此，讓用戶明確當(dāng)前所處的位置尤為重要，這也就突顯出了導(dǎo)航的重要性。Teambition中常見的有橫向?qū)Ш健⒖v向?qū)Ш胶徒M合導(dǎo)航這3種。
2. 數(shù)量可見
Teambition支持對(duì)任務(wù)字段進(jìn)行自定義配置，在「添加字段」的彈窗中，當(dāng)用戶勾選了字段后，下方的「確定」按鈕上會(huì)顯示已選數(shù)量，方便檢查核對(duì)。
3. 狀態(tài)可見
在企業(yè)管理后臺(tái)將某個(gè)任務(wù)字段鎖定后，再次進(jìn)入「添加字段」彈窗，被鎖定的字段后面帶有表示已鎖定的icon，告訴用戶該字段不可編輯。
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. ——Nielson
系統(tǒng)應(yīng)該說用戶習(xí)慣的語言，比如：用戶熟悉的單詞、短語和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語。遵循現(xiàn)實(shí)世界的約定，使信息以自然且合乎邏輯的順序出現(xiàn)！釥柹
Teambition中集成了眾多應(yīng)用，比如：知識(shí)管理工具「Thoughts」、代碼管理平臺(tái)「Codeup」等。在Teambiton和Thoughts的首頁中，用到的語言通俗易懂，無需特定的專業(yè)背景即可理解。而在Codeup的首頁中，用到的語言則是較為專業(yè)的開發(fā)術(shù)語，比如「代碼庫」、「代碼組」、「合并請(qǐng)求」等，因?yàn)镃odeup的主要用戶群體是開發(fā)人員，以上這些詞語是開發(fā)人員習(xí)慣和熟悉的。
Users often choose system functions by mistake and will need a clearly marked”emergency exit”to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. ——Nielson
當(dāng)用戶錯(cuò)誤地選擇了的某個(gè)功能后，系統(tǒng)需要提供一個(gè)明確的「緊急出口」，來讓用戶離開其不想要的狀態(tài)，而且無需額外的對(duì)話框。支持撤銷和重做！釥柹
1. 關(guān)閉與返回
在Teambition中，一個(gè)任務(wù)下可建立多個(gè)子任務(wù)，子任務(wù)從屬于父任務(wù)。因此，在子任務(wù)彈窗中，同時(shí)具有「返回上級(jí)」和「關(guān)閉」按鈕，對(duì)應(yīng)的操作分別是返回父任務(wù)彈窗，或者直接關(guān)閉彈窗。
由于B端系統(tǒng)的復(fù)雜性，有些功能的層級(jí)會(huì)比較深。彈窗A中的某個(gè)操作可能會(huì)觸發(fā)彈窗B的彈出，如果彈窗A和B承載的功能具有父級(jí)和子級(jí)的關(guān)系，同樣需要考慮「返回」的功能。
2. 撤銷與重做
在「任務(wù)字段類型配置」的頁面中，當(dāng)用戶更改了默認(rèn)的初始配置后，右上角會(huì)出現(xiàn)「恢復(fù)為默認(rèn)配置」的按鈕。這是一種支持高效重做的設(shè)計(jì)思路。
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. ——Nielson
我們不應(yīng)當(dāng)讓用戶去懷疑不同的語句、狀態(tài)或操作是否在表達(dá)同一件事。設(shè)計(jì)需遵循平臺(tái)的慣例！釥柹
1. 樣式一致
以Teambition中的彈出提示為例，在位置上，提示統(tǒng)一出現(xiàn)在頁面的左下角，經(jīng)過一樣長的時(shí)間后自動(dòng)漸出消失；在形式上，都是icon加上文字的形式，且右上角具有關(guān)閉按鈕；在顏色上，操作成功用綠色，操作失敗和報(bào)錯(cuò)用紅色，功能推送用藍(lán)色；如果提示中存在文字按鈕，則文字按鈕的顏色統(tǒng)一用藍(lán)色。
2. 結(jié)構(gòu)一致，交互一致
當(dāng)用戶從Teambition進(jìn)入到不同的應(yīng)用時(shí)，左上角的導(dǎo)航欄也會(huì)相應(yīng)地變化，但是在結(jié)構(gòu)上都保持了一致：按照「應(yīng)用logo>當(dāng)前項(xiàng)目」的方式聚合。這樣的結(jié)構(gòu)一致能讓用戶快速知曉當(dāng)前所處的位置。
當(dāng)鼠標(biāo)懸停在應(yīng)用logo上時(shí)，logo會(huì)變成首頁icon，并以tooltip提示「回到首頁」，在這個(gè)交互上，不同應(yīng)用間也是一致的。然而，當(dāng)鼠標(biāo)懸停在「星標(biāo)」按鈕上時(shí)，不同應(yīng)用在樣式和交互上都出現(xiàn)了差異，或許在這點(diǎn)的一致性上，還存在著可優(yōu)化的空間。
3. 功能一致
當(dāng)具備排序功能時(shí)，Teambition以相同的icon表示，并且在功能操作上也保持了一致：通過拖拽來調(diào)整排序。美中不足的是，在進(jìn)行拖拽時(shí)，鼠標(biāo)指針的狀態(tài)不夠一致，這點(diǎn)小細(xì)節(jié)可能還有待改進(jìn)。
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. ——Nielson
比報(bào)錯(cuò)提示更好的方法是，通過嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)來防止錯(cuò)誤的發(fā)生：要么消除容易出錯(cuò)的情況，要么把這些容易出錯(cuò)的情況找出來，并在用戶采取行動(dòng)之前提供確認(rèn)選項(xiàng)！釥柹
1. 預(yù)警和確認(rèn)
在任務(wù)菜單中，當(dāng)鼠標(biāo)懸停在非危險(xiǎn)操作上時(shí)，底色會(huì)變成淺灰色；但是，當(dāng)鼠標(biāo)懸停在「移到回收站」上時(shí)，底色會(huì)變成紅色，通過醒目的顏色來提示用戶，這是一個(gè)危險(xiǎn)操作，從而降低用戶誤操作的可能。而當(dāng)用戶點(diǎn)擊「移到回收站」時(shí)，二次確認(rèn)的彈窗會(huì)彈出，進(jìn)一步防止用戶錯(cuò)誤操作。
2. 置灰
通常情況下，按鈕置灰表示對(duì)應(yīng)功能或操作無法使用，這也是防止錯(cuò)誤的一條有效途徑，因?yàn)橛脩敉ㄟ^按鈕樣式就可獲知其狀態(tài)，省去了點(diǎn)擊的試錯(cuò)成本。那么，是不是只要功能或操作無法使用時(shí)，就應(yīng)該將對(duì)應(yīng)的按鈕置灰呢？不一定。下面的案例即可說明。
如上圖所示，若任務(wù)字段的默認(rèn)配置未被更改，在創(chuàng)建任務(wù)時(shí)，只需填寫標(biāo)題就可完成創(chuàng)建。這種情況下，彈窗在初始狀態(tài)時(shí)將按鈕置灰是合理的。然而，當(dāng)有任務(wù)字段被設(shè)置為必填后，在創(chuàng)建任務(wù)時(shí)，即便填寫了標(biāo)題，按鈕仍然置灰，滑動(dòng)彈窗仔細(xì)查看后才發(fā)現(xiàn)是有一個(gè)必填項(xiàng)未填寫。這種情況下的置灰，就可能讓用戶感到困惑，甚至無法找到原因所在。筆者認(rèn)為，這里更合適的做法是：按鈕不置灰，點(diǎn)擊按鈕后定位到未填寫的必填項(xiàng)，并告知報(bào)錯(cuò)原因。
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. ——Nielson
通過將對(duì)象、操作和選項(xiàng)進(jìn)行可視化，最大限度地減輕用戶的記憶負(fù)擔(dān)。用戶不需要記住對(duì)話框中某一部分到另一部分的信息。系統(tǒng)操作的指示信息需要易于被用戶發(fā)現(xiàn)和獲取！釥柹
1. 保留歷史
提及保留歷史，最為常見的就是為用戶保留歷史搜索和歷史瀏覽。Teambition首頁中，縱向?qū)Ш降摹附陧?xiàng)目」模塊按項(xiàng)目打開時(shí)間由近至遠(yuǎn)排序，方便用戶快速進(jìn)到自己需要處理的項(xiàng)目中。
2. 可視化呈現(xiàn)
在「看板卡片字段顯示配置」的彈窗中，當(dāng)勾選了右側(cè)的字段后，左側(cè)的預(yù)覽區(qū)會(huì)實(shí)時(shí)展示字段顯示在卡片中的位置和樣式。筆者認(rèn)為這一點(diǎn)設(shè)計(jì)得很好？窗宓膯螐埧ㄆ瑓^(qū)域比較有限，但有時(shí)又需要在卡片中囊括較多的任務(wù)信息，這時(shí)通過勾選字段后實(shí)時(shí)地預(yù)覽，可以讓用戶反復(fù)對(duì)卡片呈現(xiàn)效果進(jìn)行配置和調(diào)試，很大程度上減輕了記憶負(fù)擔(dān)。
3. 指示信息易取
Teambition支持的任務(wù)打開方式有3種，分別是：彈窗、側(cè)邊滑出、全屏。但如果僅僅是3個(gè)名詞，還是有些抽象，不夠直觀。因此，Teambition將3種打開方式做成了對(duì)應(yīng)的3個(gè)GIF圖，當(dāng)鼠標(biāo)懸停在上面時(shí)，GIF圖就開始播放。當(dāng)用戶需要進(jìn)行選擇時(shí)，必定會(huì)將鼠標(biāo)移動(dòng)到對(duì)應(yīng)的打開方式上，也就必然會(huì)發(fā)現(xiàn)GIF圖中涵蓋的指示。這樣子設(shè)計(jì)，不僅讓打開方式直觀，而且易于被用戶發(fā)現(xiàn)和獲取。
Accelerators? —? unseen by the novice user? — ?may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. ——Nielson
一些快捷操作的功能，雖然會(huì)被新手用戶忽略，但可能為專家用戶所使用并幫助提升其使用效率，因此，系統(tǒng)需要同時(shí)滿足新手用戶和專家用戶的需求。允許用戶頻繁地操作。 ——尼爾森
1. 靈活配置
以任務(wù)字段為例，Teambition支持對(duì)任務(wù)字段類型進(jìn)行配置，包括添加字段、刪除字段、將字段設(shè)為必填等。另外支持對(duì)自定義字段進(jìn)行編輯，包括字段的名稱、類型、默認(rèn)值和提示文案。任務(wù)字段的配置僅對(duì)當(dāng)前所在項(xiàng)目生效，因此，不同的項(xiàng)目可具備不同的字段配置，使得項(xiàng)目管理更加靈活。
2. 各取所需
以知識(shí)管理工具「Thoughts」中的文檔為例，如需對(duì)文本格式進(jìn)行編輯，可以有多種方式。如下圖所示，當(dāng)用戶需要對(duì)文本進(jìn)行加粗時(shí)，在選中文本后，可以點(diǎn)選上方工具欄中的加粗按鈕，也可以按快捷鍵command/ctrl+B，或者使用Markdown語法。以上這3種方式都可以達(dá)到加粗的效果，但面對(duì)的用戶群體卻不太一樣。新手用戶可能會(huì)選第1種，熟練用戶或?qū)＜矣脩艨赡軙?huì)用第2種，習(xí)慣于用Markdown寫作的用戶則更傾向于第3種。因此，在設(shè)計(jì)功能時(shí)，最好能考慮到不同層次用戶的需求，以此來讓用戶「各取所需」。
3. 允許頻繁操作
在某些場景下，用戶可能會(huì)進(jìn)行一些頻繁或重復(fù)的操作，因此需考慮：如何設(shè)計(jì)才能讓這些頻繁的操作更加方便。比如，在Teambition中創(chuàng)建任務(wù)時(shí)，會(huì)有「保存」和「完成并創(chuàng)建下一個(gè)」這2個(gè)按鈕，「完成并創(chuàng)建下一個(gè)」其實(shí)就為那些需要一次創(chuàng)建多個(gè)任務(wù)的用戶提供了便利。另外，在創(chuàng)建子任務(wù)時(shí)，點(diǎn)擊「保存」后，下方會(huì)自動(dòng)彈出下一個(gè)子任務(wù)的文本框，用戶可選擇繼續(xù)創(chuàng)建或點(diǎn)擊「取消」按鈕結(jié)束創(chuàng)建，這樣設(shè)計(jì)同樣是為了提升頻繁操作的效率。
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. ——Nielson
對(duì)話框中不應(yīng)包含無關(guān)或很少用到的信息。在對(duì)話框中每增加一個(gè)信息，就意味著降低了主要信息的相對(duì)可見性。 ——尼爾森
原文中用到的是「對(duì)話框」，但這個(gè)原則的適用范圍不僅限于對(duì)話框，可以將范圍擴(kuò)大到整個(gè)頁面。在Teambition的任務(wù)看板中，當(dāng)任務(wù)狀態(tài)為「已完成」時(shí)，對(duì)應(yīng)的卡片以置灰的方式呈現(xiàn)，從而突出了「待處理」和「進(jìn)行中」的任務(wù)卡片。當(dāng)任務(wù)的優(yōu)先級(jí)為「緊急」時(shí)，卡片左側(cè)會(huì)以橙色進(jìn)行標(biāo)記，而優(yōu)先級(jí)為「普通」或「較低」的任務(wù)，卡片左側(cè)就不會(huì)用顏色標(biāo)記。這個(gè)案例通過弱化(置灰)和去除(去掉標(biāo)記顏色)，從而讓頁面簡潔，且使得重要信息得以突顯。
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. ——Nielson
報(bào)錯(cuò)信息應(yīng)該用通俗易懂的語言表達(dá)（而不是用代碼），準(zhǔn)確地反應(yīng)問題，并且提出可行的解決方案。 ——尼爾森
當(dāng)某個(gè)自定義任務(wù)字段在企業(yè)管理后臺(tái)被鎖定后，在「編輯自定義字段」的彈窗中，不僅通過置灰讓用戶明確不可編輯，還提示了原因所在（字段被鎖定），而且也告知了解決方案（被誰鎖定，可以找誰）。
如果報(bào)錯(cuò)信息用到的是難以理解的語言或代碼，那起到的效果將會(huì)大打折扣。下圖中這個(gè)報(bào)錯(cuò)提示出現(xiàn)的場景是：在任務(wù)彈窗中添加附件并發(fā)布時(shí)出錯(cuò)。從「參數(shù)有誤: attachments」這句文案中，用戶獲知的僅僅是：附件問題導(dǎo)致發(fā)布不成功。但，「參數(shù)有誤」是什么意思？附件格式不對(duì)？還是附件超出大小限制？還是不知道出錯(cuò)的原因，就更別提解決方案了。
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. ——Nielson
盡管，能讓用戶無需閱讀文檔就會(huì)使用是最好的方式，但大多情況下，可能還得提供幫助文檔。幫助文檔的信息應(yīng)該易于被搜索，聚焦于用戶的任務(wù)，并列出具體的步驟，而且，不能太龐大。 ——尼爾森
在Teambition中，如果是簡短且和簡單操作直接相關(guān)的幫助提示，則大多是tooltip的形式：當(dāng)鼠標(biāo)懸停時(shí)出現(xiàn)；如果是關(guān)于系統(tǒng)通知公告、功能提示、權(quán)限范圍的幫助信息，則以文字提示的方式呈現(xiàn)，且根據(jù)信息的重要程度，又分為可關(guān)閉和不可關(guān)閉這兩種；而對(duì)于很難用幾句話解釋清楚的幫助信息，則配置鏈接，點(diǎn)擊后可跳轉(zhuǎn)到幫助中心的對(duì)應(yīng)位置。
在設(shè)計(jì)B端產(chǎn)品時(shí)，對(duì)尼爾森10大可用性原則的運(yùn)用可從以下方面進(jìn)行考慮，但不僅限于以下這些。
- 系統(tǒng)狀態(tài)的可見性：位置可見、數(shù)量可見、狀態(tài)可見。
- 貼近用戶的真實(shí)環(huán)境：用到的語言應(yīng)該是用戶所習(xí)慣的。
- 用戶有控制和來去自由的權(quán)利：關(guān)閉與返回、撤銷與重做。
- 系統(tǒng)的一致性：樣式一致、結(jié)構(gòu)與交互一致、功能一致。
- 防止錯(cuò)誤：預(yù)警和確認(rèn)、置灰。但置灰在有些情景下并不適合，需結(jié)合具體情況考量。
- 系統(tǒng)識(shí)別勝過用戶記憶：保留歷史、可視化呈現(xiàn)、指示信息易取。
- 靈活易用的使用體驗(yàn)：靈活配置、各取所需、允許頻繁操作。
- 美觀且簡約的設(shè)計(jì)：通過弱化和去除不重要的信息，讓重要信息突顯。
- 幫助用戶識(shí)別、診斷，并從錯(cuò)誤中恢復(fù)：問題需準(zhǔn)確，方案要可行，勿用代碼。
- 幫助文檔：根據(jù)幫助信息的長短與類型，綜合使用tooltip、文字提示、跳轉(zhuǎn)幫助中心等形式。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。