產(chǎn)品經(jīng)理必備的尼爾森十大可用性原則(案例)
編輯導(dǎo)讀:尼爾森十大可用性原則,也叫用戶體驗(yàn)十大原則,它是產(chǎn)品設(shè)計(jì)與用戶體驗(yàn)設(shè)計(jì)的重要參考標(biāo)準(zhǔn)。本文作者對(duì)此進(jìn)行了分析,希望對(duì)你有幫助。
關(guān)于 雅各布·尼爾森,著名網(wǎng)頁(yè)易用性專(zhuān)家,被譽(yù)為可用性測(cè)試鼻祖。被《美國(guó)新聞與世界報(bào)道》雜志譽(yù)為“Web可用性方面的世界頂尖專(zhuān)家”。
尼爾森原則幾年前我就看過(guò)了,但當(dāng)時(shí)沒(méi)有太多的工作經(jīng)驗(yàn),僅了解大概,也沒(méi)有太多想法;只知道我該這么做,但如何貼切得運(yùn)用到實(shí)際,還是個(gè)疑問(wèn)。如今重新回顧,也給我?guī)?lái)大量收獲。
尼爾森十大可用性原則旨在設(shè)計(jì)好的軟件產(chǎn)品,讓用戶有更好的用戶體驗(yàn),面對(duì)虛擬的數(shù)字化產(chǎn)品也有耐心舒服的感覺(jué)。以下便是具體原則的詳細(xì)介紹:
一、反饋原則(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.
系統(tǒng)應(yīng)該在合理的時(shí)間,用正確的方式,向用戶提示或反饋目前系統(tǒng)在做什么,發(fā)生了什么。只有知道當(dāng)前系統(tǒng)的狀態(tài),你才能去改變它。沒(méi)有及時(shí)合適的反饋,用戶會(huì)茫然失措,不知道下一步做什么。
比如上傳文件時(shí)顯示進(jìn)度條,并預(yù)估剩余時(shí)間。
提交表單時(shí),如果校驗(yàn)失敗,則在填寫(xiě)有誤的內(nèi)容旁邊提示錯(cuò)誤原因。
當(dāng)流程更長(zhǎng)時(shí),會(huì)有對(duì)應(yīng)的進(jìn)度展示,以至讓我們不會(huì)變得焦慮。
「空心紅色圓圈」是系統(tǒng)沒(méi)有反饋時(shí),用戶注視屏幕的位置??梢钥闯?,系統(tǒng)沒(méi)有反饋時(shí),我們的眼睛會(huì)隨處亂看,根本不知道目前系統(tǒng)是處于什么狀態(tài)。
視頻來(lái)自:nngroup.com
系統(tǒng)及時(shí)合理的反饋是良好用戶體驗(yàn)的基本原則,就仿佛用戶和系統(tǒng)在進(jìn)行開(kāi)放式的持續(xù)溝通,那如果溝通出了問(wèn)題,用戶就會(huì)對(duì)系統(tǒng)不信任,于是再也不會(huì)使用。
二、隱喻原則(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.
系統(tǒng)要采用用戶熟悉的語(yǔ)句,短語(yǔ),符號(hào)來(lái)表達(dá)意思;遵循真實(shí)世界的認(rèn)知,習(xí)慣,讓信息的呈現(xiàn)更加自然和合乎邏輯。在現(xiàn)實(shí)生活中的元素引渡到數(shù)字世界的時(shí)候,我們也會(huì)不由自主的去發(fā)生隱射。用戶期望反映實(shí)物的UI元素與現(xiàn)實(shí)世界中的那些對(duì)象相似。
比如一些APP的圖標(biāo)設(shè)計(jì),用戶通過(guò)圖標(biāo)也能知道大概是什么內(nèi)容。訂機(jī)票就使用飛機(jī)為模型進(jìn)行設(shè)計(jì)展示。
涉及圖標(biāo),推薦一個(gè)網(wǎng)站:iconfont.cn。在設(shè)計(jì)產(chǎn)品原型時(shí),可以直接復(fù)制圖標(biāo)作為展示。
除了隱射實(shí)體的物件,我們還會(huì)隱射現(xiàn)實(shí)生活的行為習(xí)慣。就比如一些讀書(shū)類(lèi)的APP,它們展現(xiàn)的方式就是以書(shū)架模式進(jìn)行展示;
回想一下我們?cè)诂F(xiàn)實(shí)生活是怎么去讀書(shū)的呢?
現(xiàn)實(shí)生活中的書(shū)店往往都是按照架來(lái)陳列,我們通過(guò)架位的尋找,來(lái)獲取我們想要讀的書(shū)籍。這樣一來(lái),現(xiàn)實(shí)的生活習(xí)慣就和數(shù)字體驗(yàn)一致,會(huì)讓我們覺(jué)得親切舒服。
隱喻原則能夠體現(xiàn)出設(shè)計(jì)軟件產(chǎn)品對(duì)用戶的關(guān)心,把現(xiàn)實(shí)世界通過(guò)一定的設(shè)計(jì)模式搬到虛擬世界,讓用戶方便使用。
三、回退原則(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.
用戶經(jīng)常會(huì)不小心操作錯(cuò)誤,需要有一個(gè)簡(jiǎn)單的回退功能,讓程序迅速恢復(fù)到錯(cuò)誤發(fā)生之前的狀態(tài)。用戶誤操作的概率極高,對(duì)于誤操作,軟件系統(tǒng)盡量提供“撤銷(xiāo)”“重做”或“反悔”的功能,這樣能讓用戶快速糾正錯(cuò)誤或回溯所做的選擇。
比如訪問(wèn)網(wǎng)頁(yè)的后退操作,能回到先前狀態(tài)。
使用蘋(píng)果手機(jī)輸入一段文字不小心刪除后,可以采用搖一搖來(lái)恢復(fù)。
除了有撤銷(xiāo)的操作外,還要確保撤銷(xiāo)的操作需要容易發(fā)現(xiàn)。就像在物理空間,緊急出口用綠顏色文字標(biāo)識(shí),以便在需要的時(shí)候快速找到。
當(dāng)然,為了防止用戶犯錯(cuò),還有一些應(yīng)對(duì)策略可以采用。刪除時(shí)會(huì)有二次確認(rèn)的彈窗,來(lái)確保操作就是沒(méi)問(wèn)題的;或者在頁(yè)面有對(duì)應(yīng)的文字說(shuō)明,告訴你操作后的結(jié)果會(huì)如何。
但并不是所有的操作都可以撤銷(xiāo),比如你不能撤銷(xiāo)一筆成功的轉(zhuǎn)賬交易。但總體而言,在設(shè)計(jì)產(chǎn)品時(shí)需要給用戶留有自由感和控制感,讓他們能夠輕松放棄一項(xiàng)任務(wù),而不是讓他們發(fā)生錯(cuò)誤之后就驚慌失措。
四、一致原則(Consistency and standards)
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
產(chǎn)品在遵循系統(tǒng)平臺(tái)慣例的基礎(chǔ)上也要保證產(chǎn)品功能操作、控件樣式、界面布局、提示信息的一致性。
大部分網(wǎng)站都默認(rèn)遵循著一致的約定。比如藍(lán)色下劃線文本默認(rèn)是可點(diǎn)擊的,網(wǎng)站主頁(yè)默認(rèn)可點(diǎn)擊左上角,放大鏡圖標(biāo)代表搜索。這樣的標(biāo)準(zhǔn)可以讓用戶減少學(xué)習(xí)成本,減少混淆發(fā)生。
比如office軟件里的各個(gè)產(chǎn)品很多功能的排列順序,布局方式甚至圖表圖形,都是高度類(lèi)似的。
除了功能一致,還可以包括視覺(jué)一致。比如微信的主色調(diào)是青綠色,它對(duì)應(yīng)的功能開(kāi)關(guān)設(shè)置也采用對(duì)應(yīng)的顏色;還有馬蜂窩旅行APP主色調(diào)是黃色,它對(duì)應(yīng)的功能圖標(biāo)也是主色調(diào)。
其實(shí)網(wǎng)上已經(jīng)有非常多的設(shè)計(jì)規(guī)范,我們都可以去學(xué)習(xí)和借鑒,就不需要重復(fù)造輪子。介紹一個(gè)網(wǎng)站:https://ant.design/index-cn,我們可以下載原型設(shè)計(jì)組件,以后每次畫(huà)原型復(fù)用即可。
網(wǎng)站:https://ant.design/index-cn
一致原則可以讓用戶在網(wǎng)站使用的方式不斷復(fù)刻到別的網(wǎng)站,降低用戶在使用新網(wǎng)站交互的學(xué)習(xí)成本。如果你想標(biāo)新立異也可以,但是需要去仔細(xì)權(quán)衡利弊得失。
五、防錯(cuò)原則(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.
好的錯(cuò)誤提示信息非常重要,但最好的設(shè)計(jì)在一開(kāi)始就可以去防止問(wèn)題發(fā)生。要么消除容易出錯(cuò)的條件,要么在提交之前就仔細(xì)檢查并向用戶確認(rèn)信息,系統(tǒng)要避免錯(cuò)誤發(fā)生,這好過(guò)出錯(cuò)后再給提示。用戶經(jīng)常會(huì)從手頭上的任務(wù)分心,所以軟件產(chǎn)品可以提供建議,利用約束靈活防止無(wú)意識(shí)的錯(cuò)誤。
比如當(dāng)我們訂車(chē)票選擇日期,為避免誤操作,于是約束用戶就不能選擇過(guò)去的時(shí)間。
我們要查某個(gè)英文單詞的意思,下拉列表會(huì)給我們推薦和建議,防止我們輸入錯(cuò)誤。
為防止用戶重復(fù)提交或者重復(fù)點(diǎn)擊,第一次點(diǎn)擊按鈕后就可以將按鈕置灰;或者通過(guò)調(diào)換按鈕的順序,避免誤操作,我們一般習(xí)慣點(diǎn)擊右側(cè)的按鈕完成操作,那我們把實(shí)際有效的操作按鈕放在左側(cè)位置,也會(huì)有一定程度的避免。
用戶發(fā)生錯(cuò)誤是很常見(jiàn)的事情,針對(duì)這一現(xiàn)象,軟件設(shè)計(jì)就需要防止這類(lèi)型錯(cuò)誤,盡量減少用戶的負(fù)擔(dān)并及時(shí)的指導(dǎo)他們。
六、記憶原則(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.
為了極大限度的減少用戶的記憶負(fù)擔(dān),可以使用明確的操作提示和符號(hào)文字。讓用戶在界面識(shí)別信息,而不是必須記住它。
比如界面中最典型的示例就是登錄。當(dāng)你輸入用戶名之后,網(wǎng)站會(huì)按照你的要求幫助你記住密碼。因此,每次登錄,你可以不需要重復(fù)輸入。
在很多APP的搜索欄下,會(huì)有歷史搜索,可以幫助我們記憶。
我們?cè)谔顚?xiě)健康碼表單的時(shí)候,提交之后還會(huì)彈個(gè)彈窗進(jìn)行二次確認(rèn),確保之前的信息沒(méi)有錯(cuò)。
我們每個(gè)人并不是都是記憶大師,從記憶中檢索信息的難易程度取決我們面對(duì)信息的頻率,最近使用時(shí)間以及它與當(dāng)前上下文的相關(guān)程度。為了讓用戶快速記憶,在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí),有必要提供一些額外的幫助來(lái)達(dá)到用戶的目標(biāo)。
七、靈活易用原則(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.
使用人群分為沒(méi)有經(jīng)驗(yàn)和有經(jīng)驗(yàn),因此系統(tǒng)可以針對(duì)不同人群提供個(gè)性化的操作方式,達(dá)到更加靈活易用的效果。
對(duì)于新用戶而言,他們?cè)谑褂孟到y(tǒng)時(shí)常需要指導(dǎo),并且需要清晰明了的功能選項(xiàng),因?yàn)閷?duì)當(dāng)前的系統(tǒng)還沒(méi)有一個(gè)初步成型的使用概念。所以新用戶可能就會(huì)嚴(yán)重依賴(lài)分布向?qū)?,清晰?biāo)記菜單。但是對(duì)于有經(jīng)驗(yàn)的用戶就可以學(xué)習(xí)使用鍵盤(pán)快捷鍵,觸摸屏手勢(shì)等方式來(lái)完成同樣的任務(wù),讓用戶使用最少的步驟,最敏捷的完成操作任務(wù)。
使用系統(tǒng)的用戶大概分為3種,分別為初級(jí),中級(jí),高級(jí)。這呈正態(tài)分布,中級(jí)最多,初高級(jí)較少。因此系統(tǒng)在設(shè)計(jì)時(shí)需要讓中級(jí)用戶得心應(yīng)手,初級(jí)用戶能順利上手,高級(jí)用戶用進(jìn)階方式使用系統(tǒng)。
比如我們?cè)谑褂肁xure,針對(duì)不同用戶群體,有不同的使用方式。
「初級(jí)用戶」學(xué)會(huì)的最基本操作就是拖動(dòng)組件開(kāi)始進(jìn)行畫(huà)原型,借助工具上欄的功能操作完成原型圖;「中級(jí)用戶」了解一定程度后,可以開(kāi)始讓畫(huà)板位置根據(jù)自己的喜愛(ài)去調(diào)整,通過(guò)簡(jiǎn)單的快捷操作可以快速將不同組件進(jìn)行合并和取消,提高操作效率;「高級(jí)使用用戶」就會(huì)直接對(duì)畫(huà)好的原型高保真的展示,有順滑的交互,通過(guò)中繼器等功能實(shí)現(xiàn)新增或刪除表單等操作。
Axure的快捷鍵
設(shè)計(jì)系統(tǒng)時(shí),可以為完成一個(gè)任務(wù)設(shè)置不同難度的操作路徑。對(duì)于無(wú)經(jīng)驗(yàn)用戶,可以給予幫助和指導(dǎo);對(duì)于有經(jīng)驗(yàn)用戶可以提供更加快速的捷徑完成任務(wù)。
八、簡(jiǎn)約設(shè)計(jì)原則(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.
為確保界面的視覺(jué)元素支持用戶的主要目標(biāo),對(duì)話中不應(yīng)該包含無(wú)關(guān)或沒(méi)必要信息,適當(dāng)增加或強(qiáng)化一些信息讓主要內(nèi)容更突出。
推薦大家一本書(shū):美國(guó)作家Robin Williams寫(xiě)的《寫(xiě)給大家看的設(shè)計(jì)書(shū)》,書(shū)中有大量的實(shí)例,讀起來(lái)通俗易懂,值得學(xué)習(xí)和借鑒。
舉幾個(gè)書(shū)中的例子。系統(tǒng)可以通過(guò)對(duì)比來(lái)強(qiáng)調(diào)內(nèi)容的重要性。相較于前兩張圖,第三張圖的設(shè)計(jì)是不是更加順眼舒服。
同樣是一封自薦信,左側(cè)圖重點(diǎn)內(nèi)容太多,相當(dāng)于沒(méi)有重點(diǎn)。而右側(cè)圖的展示,內(nèi)容主次分明,容易抓住重點(diǎn)。
系統(tǒng)在給用戶提供內(nèi)容的基礎(chǔ)上,還需要結(jié)合用戶的操作目標(biāo),未完成這個(gè)目標(biāo),系統(tǒng)還可以做哪些輔助提示來(lái)讓用戶更加快速明了的去完成。
九、、容錯(cuò)原則(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.
錯(cuò)誤信息應(yīng)該用通俗易懂的語(yǔ)言說(shuō)明,而不是只向用戶提示錯(cuò)誤代碼;應(yīng)該要明確指出問(wèn)題,并建設(shè)性提供解決方案。
對(duì)于很多運(yùn)行時(shí)錯(cuò)誤或異常,計(jì)算機(jī)程序都會(huì)返回某個(gè)錯(cuò)誤代碼,但是對(duì)于用戶來(lái)講,看到這些錯(cuò)誤代碼并不明白發(fā)生了什么,所以一定要將錯(cuò)誤代碼轉(zhuǎn)換成用戶能看懂的語(yǔ)句,并告訴用戶解決的建議。
比如一些網(wǎng)站出現(xiàn)錯(cuò)誤時(shí),會(huì)顯示403、404、500…那對(duì)于一個(gè)普通人會(huì)了解這是什么意思嗎?
但如果在下面加部分解釋?zhuān)彦e(cuò)誤提示轉(zhuǎn)換成用戶理解的語(yǔ)言,是不是就能清晰知道該怎么做了?沒(méi)有權(quán)限,我們只需要聯(lián)系管理員賦予權(quán)限即可。
設(shè)計(jì)產(chǎn)品時(shí),用戶應(yīng)該始終能夠理解定義,無(wú)需在搜索引擎中尋找答案。
十、幫助原則(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.
有些軟件系統(tǒng)雖然不需要經(jīng)過(guò)培訓(xùn)也能上手,但提供文檔去幫助用戶了解如何完成它們的任務(wù)依然是很有必要的。
網(wǎng)站和應(yīng)用程序可以提供兩種類(lèi)型的幫助:主動(dòng)和被動(dòng)。
一種是在用戶遇到問(wèn)題之前提供主動(dòng)幫助,以防止出現(xiàn)問(wèn)題。比如對(duì)于一些新手用戶剛注冊(cè)APP,在不了解使用的情況下,會(huì)有相應(yīng)操作指導(dǎo)提示。
在注冊(cè)賬號(hào)輸入密碼時(shí),會(huì)有對(duì)應(yīng)的要求提示。
第二種是反應(yīng)性幫助,主要包括文檔,視頻甚至教程等材料,用于用戶遇到問(wèn)題并尋求解決方案。
比如飛書(shū)的幫助文檔,這還提供了搜索的功能,因?yàn)橛脩舻哪康牟⒉皇情喿x你的文檔,他只是想要找到自己感興趣的內(nèi)容。
幫助文檔也是用戶體驗(yàn)的重要元素,但只有遇到問(wèn)題后才能凸顯其重要性,通常也必不可少。
十一寫(xiě)在最后
尼爾森十大可用性原則提出已經(jīng)快10年,但仍值得反復(fù)查閱。
很多書(shū)我們只是在當(dāng)時(shí)讀的時(shí)候起作用,會(huì)驚訝為什么寫(xiě)的這么好;但如果不用于實(shí)際,那永遠(yuǎn)也無(wú)法掌握這個(gè)知識(shí)點(diǎn)。因?yàn)闀?shū)中的內(nèi)容是別人經(jīng)歷或思考過(guò)的,寫(xiě)書(shū)人印象當(dāng)然深刻。沒(méi)有經(jīng)歷過(guò)的我,只是在簡(jiǎn)略了解別人的經(jīng)歷而已。
這是我最近感觸最深的一點(diǎn)。因?yàn)槲以谥販匾槐娟P(guān)于產(chǎn)品經(jīng)理的書(shū)籍時(shí),發(fā)現(xiàn)里面有那么多好的思路,但我真正遇到困難時(shí),卻沒(méi)有想起它。
經(jīng)典需要重新研讀,這也就是我為什么要寫(xiě)尼爾森可用性原則文章的原因。不同時(shí)期閱讀同一本書(shū),總會(huì)讓你有些新的感悟。
感謝閱讀。
借鑒參考網(wǎng)站:nngroup.com
作者:炸草少女,一個(gè)想跑著看世界的女子,也是一個(gè)3年多經(jīng)驗(yàn)的產(chǎn)品經(jīng)理。在這里,想和你分享我的跑步經(jīng)歷和思考復(fù)盤(pán),讓身體和靈魂都在路上~
本文由 @炸草少女 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于 CC0 協(xié)議
剛在語(yǔ)雀看到你的文,來(lái)產(chǎn)經(jīng)又看到你的文,大佬
第六點(diǎn)的提交健康碼信息二次確認(rèn)應(yīng)該是防錯(cuò)原則。
眼睛:我學(xué)會(huì)了!
腦子:不,你不會(huì)。
碼住了,以后慢慢學(xué)習(xí)。
哈哈慢慢學(xué)起來(lái)