產品經理必備的尼爾森十大可用性原則(案例)
編輯導讀:尼爾森十大可用性原則,也叫用戶體驗十大原則,它是產品設計與用戶體驗設計的重要參考標準。本文作者對此進行了分析,希望對你有幫助。
關于 雅各布·尼爾森,著名網頁易用性專家,被譽為可用性測試鼻祖。被《美國新聞與世界報道》雜志譽為“Web可用性方面的世界頂尖專家”。
尼爾森原則幾年前我就看過了,但當時沒有太多的工作經驗,僅了解大概,也沒有太多想法;只知道我該這么做,但如何貼切得運用到實際,還是個疑問。如今重新回顧,也給我帶來大量收獲。
尼爾森十大可用性原則旨在設計好的軟件產品,讓用戶有更好的用戶體驗,面對虛擬的數字化產品也有耐心舒服的感覺。以下便是具體原則的詳細介紹:
一、反饋原則(Visibility of system status)
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
系統應該在合理的時間,用正確的方式,向用戶提示或反饋目前系統在做什么,發生了什么。只有知道當前系統的狀態,你才能去改變它。沒有及時合適的反饋,用戶會茫然失措,不知道下一步做什么。
比如上傳文件時顯示進度條,并預估剩余時間。
提交表單時,如果校驗失敗,則在填寫有誤的內容旁邊提示錯誤原因。
當流程更長時,會有對應的進度展示,以至讓我們不會變得焦慮。
「空心紅色圓圈」是系統沒有反饋時,用戶注視屏幕的位置。可以看出,系統沒有反饋時,我們的眼睛會隨處亂看,根本不知道目前系統是處于什么狀態。
視頻來自:nngroup.com
系統及時合理的反饋是良好用戶體驗的基本原則,就仿佛用戶和系統在進行開放式的持續溝通,那如果溝通出了問題,用戶就會對系統不信任,于是再也不會使用。
二、隱喻原則(Match between system and the real world)
The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.
系統要采用用戶熟悉的語句,短語,符號來表達意思;遵循真實世界的認知,習慣,讓信息的呈現更加自然和合乎邏輯。在現實生活中的元素引渡到數字世界的時候,我們也會不由自主的去發生隱射。用戶期望反映實物的UI元素與現實世界中的那些對象相似。
比如一些APP的圖標設計,用戶通過圖標也能知道大概是什么內容。訂機票就使用飛機為模型進行設計展示。
涉及圖標,推薦一個網站:iconfont.cn。在設計產品原型時,可以直接復制圖標作為展示。
除了隱射實體的物件,我們還會隱射現實生活的行為習慣。就比如一些讀書類的APP,它們展現的方式就是以書架模式進行展示;
回想一下我們在現實生活是怎么去讀書的呢?
現實生活中的書店往往都是按照架來陳列,我們通過架位的尋找,來獲取我們想要讀的書籍。這樣一來,現實的生活習慣就和數字體驗一致,會讓我們覺得親切舒服。
隱喻原則能夠體現出設計軟件產品對用戶的關心,把現實世界通過一定的設計模式搬到虛擬世界,讓用戶方便使用。
三、回退原則(User control and freedom)
Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
用戶經常會不小心操作錯誤,需要有一個簡單的回退功能,讓程序迅速恢復到錯誤發生之前的狀態。用戶誤操作的概率極高,對于誤操作,軟件系統盡量提供“撤銷”“重做”或“反悔”的功能,這樣能讓用戶快速糾正錯誤或回溯所做的選擇。
比如訪問網頁的后退操作,能回到先前狀態。
使用蘋果手機輸入一段文字不小心刪除后,可以采用搖一搖來恢復。
除了有撤銷的操作外,還要確保撤銷的操作需要容易發現。就像在物理空間,緊急出口用綠顏色文字標識,以便在需要的時候快速找到。
當然,為了防止用戶犯錯,還有一些應對策略可以采用。刪除時會有二次確認的彈窗,來確保操作就是沒問題的;或者在頁面有對應的文字說明,告訴你操作后的結果會如何。
但并不是所有的操作都可以撤銷,比如你不能撤銷一筆成功的轉賬交易。但總體而言,在設計產品時需要給用戶留有自由感和控制感,讓他們能夠輕松放棄一項任務,而不是讓他們發生錯誤之后就驚慌失措。
四、一致原則(Consistency and standards)
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
產品在遵循系統平臺慣例的基礎上也要保證產品功能操作、控件樣式、界面布局、提示信息的一致性。
大部分網站都默認遵循著一致的約定。比如藍色下劃線文本默認是可點擊的,網站主頁默認可點擊左上角,放大鏡圖標代表搜索。這樣的標準可以讓用戶減少學習成本,減少混淆發生。
比如office軟件里的各個產品很多功能的排列順序,布局方式甚至圖表圖形,都是高度類似的。
除了功能一致,還可以包括視覺一致。比如微信的主色調是青綠色,它對應的功能開關設置也采用對應的顏色;還有馬蜂窩旅行APP主色調是黃色,它對應的功能圖標也是主色調。
其實網上已經有非常多的設計規范,我們都可以去學習和借鑒,就不需要重復造輪子。介紹一個網站:https://ant.design/index-cn,我們可以下載原型設計組件,以后每次畫原型復用即可。
網站:https://ant.design/index-cn
一致原則可以讓用戶在網站使用的方式不斷復刻到別的網站,降低用戶在使用新網站交互的學習成本。如果你想標新立異也可以,但是需要去仔細權衡利弊得失。
五、防錯原則(Error prevention)
Good error messages are important, but the best designs carefully prevent problems 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.
好的錯誤提示信息非常重要,但最好的設計在一開始就可以去防止問題發生。要么消除容易出錯的條件,要么在提交之前就仔細檢查并向用戶確認信息,系統要避免錯誤發生,這好過出錯后再給提示。用戶經常會從手頭上的任務分心,所以軟件產品可以提供建議,利用約束靈活防止無意識的錯誤。
比如當我們訂車票選擇日期,為避免誤操作,于是約束用戶就不能選擇過去的時間。
我們要查某個英文單詞的意思,下拉列表會給我們推薦和建議,防止我們輸入錯誤。
為防止用戶重復提交或者重復點擊,第一次點擊按鈕后就可以將按鈕置灰;或者通過調換按鈕的順序,避免誤操作,我們一般習慣點擊右側的按鈕完成操作,那我們把實際有效的操作按鈕放在左側位置,也會有一定程度的避免。
用戶發生錯誤是很常見的事情,針對這一現象,軟件設計就需要防止這類型錯誤,盡量減少用戶的負擔并及時的指導他們。
六、記憶原則(Recognition rather than recall)
Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.
為了極大限度的減少用戶的記憶負擔,可以使用明確的操作提示和符號文字。讓用戶在界面識別信息,而不是必須記住它。
比如界面中最典型的示例就是登錄。當你輸入用戶名之后,網站會按照你的要求幫助你記住密碼。因此,每次登錄,你可以不需要重復輸入。
在很多APP的搜索欄下,會有歷史搜索,可以幫助我們記憶。
我們在填寫健康碼表單的時候,提交之后還會彈個彈窗進行二次確認,確保之前的信息沒有錯。
我們每個人并不是都是記憶大師,從記憶中檢索信息的難易程度取決我們面對信息的頻率,最近使用時間以及它與當前上下文的相關程度。為了讓用戶快速記憶,在進行產品設計時,有必要提供一些額外的幫助來達到用戶的目標。
七、靈活易用原則(Flexibility and efficiency of use)
Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
使用人群分為沒有經驗和有經驗,因此系統可以針對不同人群提供個性化的操作方式,達到更加靈活易用的效果。
對于新用戶而言,他們在使用系統時常需要指導,并且需要清晰明了的功能選項,因為對當前的系統還沒有一個初步成型的使用概念。所以新用戶可能就會嚴重依賴分布向導,清晰標記菜單。但是對于有經驗的用戶就可以學習使用鍵盤快捷鍵,觸摸屏手勢等方式來完成同樣的任務,讓用戶使用最少的步驟,最敏捷的完成操作任務。
使用系統的用戶大概分為3種,分別為初級,中級,高級。這呈正態分布,中級最多,初高級較少。因此系統在設計時需要讓中級用戶得心應手,初級用戶能順利上手,高級用戶用進階方式使用系統。
比如我們在使用Axure,針對不同用戶群體,有不同的使用方式。
「初級用戶」學會的最基本操作就是拖動組件開始進行畫原型,借助工具上欄的功能操作完成原型圖;「中級用戶」了解一定程度后,可以開始讓畫板位置根據自己的喜愛去調整,通過簡單的快捷操作可以快速將不同組件進行合并和取消,提高操作效率;「高級使用用戶」就會直接對畫好的原型高保真的展示,有順滑的交互,通過中繼器等功能實現新增或刪除表單等操作。
Axure的快捷鍵
設計系統時,可以為完成一個任務設置不同難度的操作路徑。對于無經驗用戶,可以給予幫助和指導;對于有經驗用戶可以提供更加快速的捷徑完成任務。
八、簡約設計原則(Aesthetic and minimalist design)
Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
為確保界面的視覺元素支持用戶的主要目標,對話中不應該包含無關或沒必要信息,適當增加或強化一些信息讓主要內容更突出。
推薦大家一本書:美國作家Robin Williams寫的《寫給大家看的設計書》,書中有大量的實例,讀起來通俗易懂,值得學習和借鑒。
舉幾個書中的例子。系統可以通過對比來強調內容的重要性。相較于前兩張圖,第三張圖的設計是不是更加順眼舒服。
同樣是一封自薦信,左側圖重點內容太多,相當于沒有重點。而右側圖的展示,內容主次分明,容易抓住重點。
系統在給用戶提供內容的基礎上,還需要結合用戶的操作目標,未完成這個目標,系統還可以做哪些輔助提示來讓用戶更加快速明了的去完成。
九、、容錯原則(Help users recognize, diagnose, and recover from errors)
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
錯誤信息應該用通俗易懂的語言說明,而不是只向用戶提示錯誤代碼;應該要明確指出問題,并建設性提供解決方案。
對于很多運行時錯誤或異常,計算機程序都會返回某個錯誤代碼,但是對于用戶來講,看到這些錯誤代碼并不明白發生了什么,所以一定要將錯誤代碼轉換成用戶能看懂的語句,并告訴用戶解決的建議。
比如一些網站出現錯誤時,會顯示403、404、500…那對于一個普通人會了解這是什么意思嗎?
但如果在下面加部分解釋,把錯誤提示轉換成用戶理解的語言,是不是就能清晰知道該怎么做了?沒有權限,我們只需要聯系管理員賦予權限即可。
設計產品時,用戶應該始終能夠理解定義,無需在搜索引擎中尋找答案。
十、幫助原則(Help and documentation)
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
有些軟件系統雖然不需要經過培訓也能上手,但提供文檔去幫助用戶了解如何完成它們的任務依然是很有必要的。
網站和應用程序可以提供兩種類型的幫助:主動和被動。
一種是在用戶遇到問題之前提供主動幫助,以防止出現問題。比如對于一些新手用戶剛注冊APP,在不了解使用的情況下,會有相應操作指導提示。
在注冊賬號輸入密碼時,會有對應的要求提示。
第二種是反應性幫助,主要包括文檔,視頻甚至教程等材料,用于用戶遇到問題并尋求解決方案。
比如飛書的幫助文檔,這還提供了搜索的功能,因為用戶的目的并不是閱讀你的文檔,他只是想要找到自己感興趣的內容。
幫助文檔也是用戶體驗的重要元素,但只有遇到問題后才能凸顯其重要性,通常也必不可少。
十一寫在最后
尼爾森十大可用性原則提出已經快10年,但仍值得反復查閱。
很多書我們只是在當時讀的時候起作用,會驚訝為什么寫的這么好;但如果不用于實際,那永遠也無法掌握這個知識點。因為書中的內容是別人經歷或思考過的,寫書人印象當然深刻。沒有經歷過的我,只是在簡略了解別人的經歷而已。
這是我最近感觸最深的一點。因為我在重溫一本關于產品經理的書籍時,發現里面有那么多好的思路,但我真正遇到困難時,卻沒有想起它。
經典需要重新研讀,這也就是我為什么要寫尼爾森可用性原則文章的原因。不同時期閱讀同一本書,總會讓你有些新的感悟。
感謝閱讀。
借鑒參考網站:nngroup.com
作者:炸草少女,一個想跑著看世界的女子,也是一個3年多經驗的產品經理。在這里,想和你分享我的跑步經歷和思考復盤,讓身體和靈魂都在路上~
本文由 @炸草少女 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議
剛在語雀看到你的文,來產經又看到你的文,大佬
第六點的提交健康碼信息二次確認應該是防錯原則。
眼睛:我學會了!
腦子:不,你不會。
碼住了,以后慢慢學習。
哈哈慢慢學起來