尼爾森的十大可用性原則與場景案例

雅各布·尼爾森(Jakob Nielsen)的十大可用性原則,它們被稱為“啟發(fā)式”,因為它們是廣泛的經(jīng)驗法則,而不是特定的可用性指導原則。因此,我們不能把它上升為一種標準,而是應該當做一種經(jīng)驗來學習,然后跟現(xiàn)實中的設計結合來使用。

接下來,通過一些具體的實例來跟大家深度解析“尼爾森十大可用性原則”在設計中的用法。


雅各布·尼爾森(Jakob Nielsen)簡介

雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術大學的人機交互博士,他擁有79項美國專利,專利主要涉及讓互聯(lián)網(wǎng)更容易使用的方法。尼爾森在2000年6月,入選了斯堪的納維亞互動媒體名人堂,2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。他還被紐約時報稱為“Web 易用性大師”,被 Internet Magazine 稱為 “易用之王”。


原則一:「狀態(tài)可見原則」在設計中的應用

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

系統(tǒng)應該讓用戶時刻清楚當前發(fā)生了什么事情,也就是快速的讓用戶了解自己處于何種狀態(tài)、對過去發(fā)生、當前目標、以及對未來去向有所了解,一般的方法是在合適的時間給用戶適當?shù)姆答仯乐褂脩羰褂贸霈F(xiàn)錯誤。

場景案例一:頁面下拉刷新,頁面加載

場景案例二:按鈕點擊后的反饋


原則二:「環(huán)境貼切原則」在設計中的應用

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.

軟件系統(tǒng)應該使用用戶熟悉的語言、文字、語句,或者其他用戶熟悉的概念,而非系統(tǒng)語言。軟件中的信息應該盡量貼近真實世界,讓信息更自然,邏輯上也更容易被用戶理解。

場景案例一:軟件使用界面與現(xiàn)實產(chǎn)品使用界面貼切

比如計算器的軟件界面設計和現(xiàn)實中的計算器界面一致,這樣設計能讓用戶很快上手,易于操作,因為現(xiàn)實生活中用戶已經(jīng)很熟悉計算器的使用方法了,這就是環(huán)境貼切原則。

場景案例二:語言文化習慣貼切

比如新浪微博安卓的中文版和國際版:微博的中文版和國際版的logo和內(nèi)部頁面風格、語言、結構布局包括交互方式也不一樣;考慮到國外用戶的使用,軟件的語言默認為英文,當然還支持各種語言版本,可以根據(jù)所需在設置中調(diào)整,另外國際版界面的布局使用的設計風格完全遵守谷歌的設計規(guī)范,這就是環(huán)境貼切原則,具體看下圖:


微信圖片_20180925163942.jpg

原則三:「用戶可控原則」在設計中的應用

用戶常常會誤觸到某些功能,我們應該讓用戶可以方便的退出。這種情況下,我們應該把“緊急出口”按鈕做的明顯一點,而且不要在退出時彈出額外的對話框。很多用戶發(fā)送一條消息、總會有他忽然意識到自己不對的地方,這個叫做臨界效應;所以最好支持撤銷/重做功能。

場景案例一:比如微信聊天中的撤回功能

兩個人在微信中聊天的時候,我發(fā)了一條消息或者表情,突然覺得不合適,我可以在長按這條消息或者表情,在出現(xiàn)的選擇框中選擇撤回,然后重新編輯發(fā)送,來避免一時沒想好而錯發(fā)消息可能給對方或者自己造成困擾,這就是用戶可控原則。

場景案例二:比如谷歌相冊刪除照片之后的撤銷功能:

在使用谷歌相冊的時候,我們會對照片做一些操作,比如照片的刪除,當我在谷歌相冊中刪除一張照片的時候,它會在底部出現(xiàn)一條提示框,框內(nèi)后邊就會出現(xiàn)撤銷的提示,這也是用戶可控原則的體現(xiàn)。


原則四:一致性原則在設計中的應用

對于用戶來說,同樣的文字、狀態(tài)、按鈕,都應該觸發(fā)相同的事情,遵從通用的平臺慣例;也就是,同一用語、功能、操作保持一致。

軟件產(chǎn)品的一致性包括以下五個方面:

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

場景案例:例如:微信每個模塊的條目布局:微信中每個模塊的條目都有統(tǒng)一的“圖標加文字信息”的結構樣式,能讓用戶快速了解朋友圈、掃一掃、搖一搖、看一看、搜一搜、附近的人、漂流瓶、購物、游戲及小程序等功能都是作什么的,這就是結構一致性的體現(xiàn),如下圖:


微信圖片_20180925164634.png

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

場景案例:例如:網(wǎng)易云音樂的顏色:網(wǎng)易云音樂的圖標顏色與界面的主色均為紅色,也包括其中一些標簽和強調(diào)的文字顏色都是紅色,整個界面除了圖片的有效信息外,都通過灰、白、紅色來呈現(xiàn),界面保持了很好的一致性,這就是色彩一致性原則。

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

場景案例:比如:安卓版微信、支付寶和釘釘APP中左上角的返回操作:它們?nèi)齻€安卓版的應用內(nèi)返回上一級操作,都是通過頂部左側(cè)的返回按鈕進行的,當然也可以通過安卓的物理返回鍵,這就是操作一致性的體現(xiàn)。

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

場景案例:比如:安卓版手機QQ信息列表的打開方式:它的信息都是列表式結構,不管你點擊那一行條目,下一級界面都是由右往左滑出,點擊頂部左上角的返回按鈕會從左往右滑回,體驗相當一致;這就是反饋一致性的體現(xiàn)。

5.文字一致性:產(chǎn)品中呈現(xiàn)給用戶閱讀的文字大小、樣式、顏色、布局等都應該是一致的。

場景案例:例如微信幾個關鍵界面的字體:下圖我用紅色框框起來的條目部分的文字,三個主界面不盡相同,但是,字體大小、顏色、布局的樣式都一樣,這樣讓整個APP視覺上看起來很舒服,這就是字體一致性,因此,我們在做視覺設計的時候盡量使用統(tǒng)一風格的文字。


原則五:防錯 原則在設計中的應用

比一個優(yōu)秀錯誤提醒彈窗更好的設計方式,是在這個錯誤發(fā)生之前就避免它。可以幫助用戶排除一些容易出錯的情況,或在用戶提交之前給他一個確認的選項。在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。

場景案例一:比如網(wǎng)易新聞安卓版本的登錄操作

當用戶在網(wǎng)易新聞中登錄時,在沒有填寫完手機號碼和驗證碼前,底部的登錄按鈕是置灰不可點擊的,只有兩項都填寫完整底部的登錄按鈕才會變?yōu)榭牲c擊狀態(tài),也就會紅色的,這就是為了防止用戶犯更多錯誤,也是防錯原則的一種體現(xiàn)。


網(wǎng)易新聞登錄頁面

案例二:比如安卓版微信發(fā)朋圈動態(tài)時,點擊返回按鈕出現(xiàn)的提示彈窗

彈出框方式會增加不可逆操作的難度,當用戶發(fā)一條動態(tài)一半的時候,因為誤操作或者其它退出當前狀態(tài)的時候,使用彈窗是個不錯的選擇,因為用戶這個操作會讓之前辛苦編輯的內(nèi)容刪除找不回,想要再發(fā)只能從頭開始,對用戶造成損失比較大;這就是防錯原則的另外一種體現(xiàn).


原則六:易取原則在設計中的應用

通過把組件、按鈕及選項可見化,來降低用戶的記憶負荷。用戶不需要記住各個對話框中的信息。軟件的使用指南應該是可見的,且在合適的時候可以再次查看。

案例一:比如谷歌相冊中的刪除照片操作

用一個類似垃圾桶的“圖標”標識刪除功能,對于用戶來講是有一定的認知負荷的,且點擊“刪除”之后用戶對于造成的后果及影響也不清楚,因此,刪除之后出現(xiàn)彈窗提示很有必要,此彈窗清楚的寫明了刪除之后的影響、后續(xù)的幫助說明以及操作的選項,彈出框的出現(xiàn)很好的減少了用戶前后的記憶負荷,這就是易取原則的體現(xiàn)

案例二:比如安卓版愛奇藝更新后的新功能引導

更新完APP之后,當用戶觸發(fā)到這些功能時,會出現(xiàn)下圖類型的遮罩類的提示,這些提示告訴用戶功能所在的地方以及功能的作用;這種做法在很多APP中都會出現(xiàn),這也是易取原則的一種體現(xiàn)


微信圖片_20180925165737.jpg

原則七:靈活高效原則在設計中的應用

汽車油門—新手用戶常常看不見,而且對于高手來說可以通過它快速與汽車互動。這樣的系統(tǒng)可以同時滿足有經(jīng)驗和無經(jīng)驗的用戶。允許用戶定制常用功能。

案例一:比如安卓版本支付寶中的編輯應用功能

支付寶首頁的應用是可以根據(jù)自身喜好自定義的,包括定義常用應用、排序、刪除、新增等等;這樣用戶可以根據(jù)自己的個人興趣定制自己適合的應用分布方式,這就叫做用戶定制常用功能,也就是靈活高效原則的一種體現(xiàn),

案例二:比如安卓版QQ聊天常用表情模塊

安卓版本的QQ聊天界面表情彈窗中會有一個“常用表情”的模塊,它把個人平時使用頻率或者次數(shù)最多的表情進行歸類,當用戶使用的時候能很快的找到自己喜歡或者常用的表情,提高了聊天效率,體驗很好,這也是靈活高效原則的體現(xiàn)


原則八:優(yōu)美且簡約原則在設計中的應用

對話中的內(nèi)容應該去除不相關的信息或幾乎不需要的信息。任何不相關的信息都會讓原本重要的信息更難被用戶察覺。

案例一:蘋果手機中自帶的軟件(IOS11設計規(guī)范)

在新版本的蘋果手機中自帶的軟件中標題都屬于字體放大,界面簡潔的設計風格;還有蘋果自帶的音樂軟件中,段落中的標題和正文區(qū)別是很明顯的,標題明顯很大,而正文部分相對較小,這就是優(yōu)美簡約原則的體現(xiàn)。

案例二:例如安卓版網(wǎng)易云音樂及QQ音樂播放頁面

網(wǎng)易云音樂和QQ音樂APP音樂播放界面,從視覺及功能布局上面做的相當不錯,美觀簡約、功能主次分明、用戶體驗不錯;也是優(yōu)美且簡約原則的一種體現(xiàn)。


原則九:幫助用戶識別、診斷和從錯誤中恢復原則在設計中的應用

錯誤信息應該用簡單的語言(不要用代碼)來表達,準確地指出問題所在,并建設性地提出解決方案。

場景案例一:常見的錯誤提示框

場景案例二:支付密碼錯誤時的操作,“重試”可以讓用戶在不小心輸入錯誤中立即恢復。


原則十:幫助和文檔原則在設計中的應用

即使不需要文檔就可以使用系統(tǒng)也更好,但可能有必要提供幫助和文檔。任何這樣的信息都應該易于搜索,集中在用戶的任務上,列出要執(zhí)行的具體步驟,并且不要太大。

場景案例一:頁面上的的幫助提示

微信圖片_20180925165737.jpg

更多參考:

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,662評論 25 708
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 12,789評論 2 59
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 16,000評論 3 119
  • 寫在前面: 金庸到底做錯了什么 若說金庸做錯了什么,老爺子肯定會覺得委屈:寶寶誰都沒惹啊,只不過文章寫得好,怪我咯...
    愛佛僧閱讀 2,140評論 22 11
  • 卷滾地上的黑塵 黑色的夜流 已把光芒耗盡 天上一顆微光 伴隨著無聲吶喊 無情肆虐的狂風 吹走了所有寂靜 抵達肅靜的...
    魚小歌閱讀 149評論 0 2