淺析尼爾森十大可用性原則的應用

雅各布·尼爾森(Jakob Nielsen)

尼爾森博士于1995年1月1日發(fā)表了十大可用性原則驾凶,該原則被廣大設計師奉為教科書般的存在尘奏。

Jakob Nielsen博士是Nielsen Norman Group的用戶倡導者和負責人滩褥,他是與Donald A. Norman博士(蘋果公司前研究副總裁)共同創(chuàng)立的。Nielsen博士建立了“折扣可用性工程”運動炫加,以快速瑰煎,廉價地改進用戶界面铺然,并發(fā)明了幾種可用性方法,包括啟發(fā)式評估酒甸。他擁有79項美國專利魄健,主要成就是使互聯(lián)網(wǎng)更易于使用的方法。

雅各布 · 尼爾森被稱為:

“可用性之王”(互聯(lián)網(wǎng)雜志)

“網(wǎng)頁可用性專家”(《紐約時報》)

“僅次于時間機器的人”(《今日美國》)? ?

“網(wǎng)絡上最聰明的人”(ZDNet AnchorDesk)

“全球網(wǎng)絡可用性領(lǐng)先專家”(美國新聞與世界報道)

小企業(yè)(財富小企業(yè))十大思想之一

“世界領(lǐng)先的用戶友好設計專家”(德國斯圖加特Zeitung)

“比地球上的其他任何人都更了解使網(wǎng)站運轉(zhuǎn)的因素”(芝加哥論壇報)

“世界上最重要的Web可用性專家之一”(商業(yè)周刊)

“ Web的可用性沙皇”(WebReference.com)

“ Web可用性的權(quán)威”(財富)

“杰出的Web可用性專家”(CNN)

“也許是互聯(lián)網(wǎng)上最著名的設計和可用性專家”(《金融時報》)

“可用性教皇”(德國Wirtschaftswoche雜志)

“新媒體先鋒”(新聞周刊)

“世界上最有影響力的設計師”之一(商業(yè)周刊)

...

在日常使用移動端或PC端產(chǎn)品時插勤,不知你有沒有這樣的體會:

點擊按鈕沒有任何反應沽瘦,狂點幾下之后又突然跳出多個頁面

稍微不注意就把重要的信息刪掉了

從一個頁面進入另一個頁面返回后卻回不到原來的頁面

多次輸錯密碼導致賬戶被鎖

填寫表格時,等你把全部內(nèi)容填寫完成后提交农尖,跳出一個彈窗提示你郵箱格式錯誤析恋,然后填寫的所有信息都被清空了,不得不小心翼翼的重新輸入

看老羅抖音直播帶貨忘開wifi,第二天房子被聯(lián)通公司收走了(手動狗頭)

給老媽充話費盛卡,居然充給了陌生人绿满?WTF?

本來要發(fā)消息給女神窟扑,居然發(fā)到了公司群!B┙ 嚎货!然而我卻一無所知

...

如果了解尼爾森十大可用性原則,這些問題或許是可以避免的蔫浆,話不多說殖属,下面我們就一起來淺析這個可用性原理。

01 易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀瓦盛,不是看洗显,而是掃。易掃原环,意味著突出重點挠唆,弱化和剔除無關(guān)信息。

有一個數(shù)據(jù)嘱吗,0.38s玄组,這是目前互聯(lián)網(wǎng)用戶在瀏覽一個頁面所用的平均時長,在這么短的時間內(nèi)怎么樣讓用戶找到重點和重要的信息呢谒麦?所以我們就需要抓住重點俄讹,利用易掃原則讓用戶能夠迅速找到他想要的信息。

下圖中绕德,左圖是美團APP患膛,在同樣搜索關(guān)鍵詞“龍蝦”時,美團在搜索結(jié)果中將“龍蝦”用顏色突出耻蛇,讓用戶更容易一眼就找到踪蹬,右圖餓了么就沒有進行區(qū)分胞此。

02 環(huán)境貼切原則

系統(tǒng)應該說用戶的語言以及用戶熟悉的單詞、短語和概念延曙,而不是系統(tǒng)導向的術(shù)語豌鹤。遵循現(xiàn)實世界的約定,使信息以自然和合乎邏輯的順序出現(xiàn)枝缔。簡單一點來說就是要說人話布疙,不要用一些晦澀難懂的專業(yè)術(shù)語,不要炫耀自己的智商愿卸,也不要讓用戶覺得自己是傻瓜灵临。

如下圖,左圖中夸克瀏覽器中Handoll意為“互傳”趴荸,是蘋果設備之間方便相互進行文件傳輸?shù)娜甯龋强淇薃PP不翻譯也不說明,很少有用戶會明白這個什么意思发钝;

同樣道理顿涣,右圖中UC瀏覽器在清除緩存里面有一項是清除Cookies,cookies到底是個啥呢酝豪?刪了會不會造成什么損失涛碑?用戶一臉懵逼,用戶覺得自己就是傻瓜孵淘。

其實對于這種情況蒲障,Mac早期系統(tǒng)也會出現(xiàn),macOS High Sierra之前瘫证,“訪達”叫“Finder”揉阎,“隔空投送”叫“AirDrop”,“程序塢”叫“Dock”背捌,“接力”叫“Handoff”等毙籽,為什么要改成中文呢?因為蘋果自從庫克上任以來毡庆,非常重視中國市場惧财,從iPhone推出中文九宮格鍵盤,到中文鍵盤的Macbook Pro,無不體現(xiàn)著環(huán)境貼切原則扭仁,進入中國垮衷,就要貼合中國的環(huán)境。

03 易取原則

盡量減少用戶對操作目標的記憶負荷乖坠,動作和選項都應該是可見的搀突,即把需要記憶的內(nèi)容擺上臺面。

也就是說熊泵,盡量不要讓用戶回想剛才選了哪些選項仰迁,把需要記憶的內(nèi)容及時展示出來甸昏,讓用戶隨時都能知道自己選了什么。

例如下圖左圖趣頭條APP徐许,用手機登錄時施蜜,收到的驗證碼直接展示在軟鍵盤上,用戶無需記憶也無需輸入雌隅,直接點選即可登錄翻默;

中圖優(yōu)酷APP會詳細記錄用戶的觀看記錄,當用戶沒有看完某部電影時恰起,下次進入直接從斷點續(xù)播上次播放的位置修械,無需用戶記憶上次看到哪里了;

右圖美團APP中检盼,當用戶選擇商品時肯污,系統(tǒng)會自動計算商品價格和滿減后的價格,還會幫用戶記錄選擇了哪些商品以及份數(shù)吨枉,不需要用戶自己花時間去計算還差多少才能滿減等蹦渣,減少用戶記憶負擔,同時節(jié)省用戶點外賣的時間貌亭,這也用到了易取原則剂桥。

04 防錯原則

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

如下圖所示恕酸,左圖是青桔APP登錄頁,在用戶登錄時胯陋,手機號碼未輸入完整前蕊温,下方的“下一步”按鈕是不可點狀態(tài),當用戶輸入完整的手機號并勾選了法律隱私政策之后遏乔,“下一步”按鈕才會高亮义矛,不給用戶犯錯誤的機會;

中圖是虎牙APP盟萨,當用戶的網(wǎng)絡是非WIFI情況下凉翻,會提示用戶繼續(xù)播放會消耗流量,減少用戶的金錢損失捻激;

右圖是Keep的輸入驗證碼頁面制轰,為了防止用戶多輸入或者少輸入驗證碼前计,keep只給到四個輸入框,讓用戶只能輸入四位數(shù)字垃杖,減少輸入錯誤的幾率男杈。

05 容錯原則

錯誤信息應該使用簡潔的文字(不要用代碼),指出錯誤是什么调俘,并給出解決建議伶棒。也就是在用戶出錯時如何為出錯的用戶提供及時正確的幫助,即要幫助用戶識別出錯誤脉漏,分析出錯誤的原因再幫助用戶回到正確的道路上苞冯。如果真的不能幫助用戶從錯誤中恢復,也要盡量為用戶提供幫助讓用戶損失降到最低侧巨。

如下圖左圖是摩拜單車APP舅锄,當用戶未打開手機藍牙時,在頁面上方醒目位置會提示用戶"藍牙開鎖快司忱,成功率更高"皇忿,并給一個“去設置”的按鈕;

中圖是哈羅出行APP坦仍,當用戶未打開手機定位時鳍烁,出彈出“定位服務已關(guān)閉”的彈框,同時引導用戶如何去設置里打開定位繁扎;

右圖是高高手APP幔荒,當用戶未登錄時,用戶想看自己的學習概況梳玫,這時會提示用戶尚未登錄爹梁,無法查看,同時在下方給一個醒目的按鈕“我要登錄”引導用戶去登錄提澎。

這些案例都是容錯原則在實際中的應用姚垃,當用戶由于某些原因?qū)е聼o法使用產(chǎn)品時,這時會及時提示用戶是什么原因?qū)е聼o法使用盼忌,同時給出解決方案积糯。

06 操作可控(撤銷重做)原則

為了避免用戶的誤用和誤擊,系統(tǒng)應提供撤銷和重做功能谦纱。撤銷也要保存用戶曾經(jīng)的信息看成。

如下圖左圖是釘釘APP打卡頁面,如果用戶還沒下班就誤點了打卡跨嘉,釘釘會讓用戶二次確認是否打早退卡绍昂,并給到“不打卡”的按鈕梳虽,從而避免因誤打卡導致的工資損失全闷;

中圖和右圖是微信消息界面,當用戶由于手誤或其他原因發(fā)錯消息,微信的規(guī)則是兩分鐘內(nèi)可以撤回發(fā)送的內(nèi)容帆赢,同時撤回后點擊“重新編輯”套硼,文字回到輸入框還可以重新編輯卡儒,減少發(fā)送錯誤導致用戶不必要的困擾和尷尬耐版。

07 系統(tǒng)可見原則

系統(tǒng)應該讓用戶知道當前發(fā)生了什么,在適當?shù)臅r間內(nèi)做出適當?shù)姆答仭?/p>

用戶的每次操作艾蓝,你都得給他個反饋力崇,成功了就告訴他成功了,失敗了就告訴他失敗了赢织。絕不能讓用戶操作后毫無反應亮靴,讓用戶一臉懵的猜到底是怎么了,是成功了還是失敗了于置?是出現(xiàn)Bug了還是網(wǎng)絡不好茧吊?不能讓用戶連蒙帶猜。同時八毯,如果確需一定的等待時間搓侄,也要用進度條/等待/加載等動效或其他形式的提示告訴用戶當下的情況。

反饋一般分為直接反饋和間接反饋话速,直接反饋即用戶操作系統(tǒng)后立即給出反饋讶踪,最好在100毫秒以內(nèi),不然用戶會認為系統(tǒng)卡頓不流暢泊交;

例如一個按鈕乳讥,鼠標移入/移出/點擊/長按/等待,都需要立即給反饋廓俭,否則用戶會認為系統(tǒng)卡頓或者死機了云石。

間接反饋根據(jù)時間長短可做不同的反饋形式。

例如下圖中西瓜視頻APP白指,在無網(wǎng)的情況下出現(xiàn)沒有網(wǎng)絡的toast提示;當前播放進度追上緩存進度后系統(tǒng)就會出現(xiàn)正在加載的小圓圈在轉(zhuǎn)動酵紫;轉(zhuǎn)動30秒后仍然連接不上網(wǎng)絡時告嘲,顯示加載失敗,并提供重新嘗試連接的入口奖地;在此期間橄唬,若網(wǎng)絡已連接,底部出現(xiàn)已連接WIFI/移動數(shù)據(jù)網(wǎng)絡的toast提示参歹。

每一步的網(wǎng)絡情況都會給用戶不同的反饋仰楚,讓用戶知道當前網(wǎng)絡的狀態(tài)以及該如何解決。

08 靈活高效原則

靈活高效原則在交互設計中使用會提高用戶使用效率,例如微信聊天頁面中僧界,當用戶輸入某個字詞之后侨嘀,系統(tǒng)會自動幫你匹配相應的表情包;

如果你使用的是搜狗輸入法捂襟,當你輸入某個詞之后會幫你自動聯(lián)想接下來你可能會輸入的詞咬腕;

截圖后進入微信聊天頁面后,系統(tǒng)會將你剛截的圖前置葬荷,它會自動判斷你可能想發(fā)送該截圖涨共。如下圖:


再比如淘寶的首頁每個人的首頁推薦的商品都不相同,淘寶后臺根據(jù)用戶的瀏覽習慣宠漩,購買/收藏記錄等大數(shù)據(jù)智能判斷用戶的喜好举反,對商品進行千人千面的分發(fā)。但是切記不要太過依賴大數(shù)據(jù)算法的判斷扒吁,因為一旦形成這種模式火鼻,會給用戶造成回音壁效應,你越喜歡的東西系統(tǒng)就越給你推薦瘦陈,其他的商品就像回音壁一樣被吸收過濾凝危,用戶永遠沒有辦法發(fā)現(xiàn)新的東西,讓用戶的選擇永遠都在一個死循環(huán)晨逝,所以做千人千面設計時一定要適度蛾默。

09 一致性原則

同一用語、功能捉貌、操作保持一致支鸡。同樣的語言,同樣的情景趁窃、操作應該出現(xiàn)同樣的結(jié)果牧挣。

擁有一致性的產(chǎn)品能把用戶的學習成本降到最低,用戶能很容易使用你的產(chǎn)品醒陆。

為了實現(xiàn)產(chǎn)品一致性瀑构,我們可以從以下四個角度切入:

?產(chǎn)品內(nèi)部的一致性

交互行為的一致性

迭代產(chǎn)品的一致性

同一團隊/公司產(chǎn)品線的一致性

(1) 產(chǎn)品內(nèi)部的一致性

例如做界面設計的時候,產(chǎn)品內(nèi)部的風格保持統(tǒng)一刨摩。

下圖嗶哩嗶哩APP寺晌,主打二次元風格,從注冊登錄頁澡刹,個人中心以及加載頁等呻征,無一不充滿著二次元風格。加載頁采用了二次元風格“囧”字電視機動效罢浇,登錄頁的頂部使用了二次元的22娘和33娘的二次元動漫人物陆赋,就連退出的彈框都使用了二次元風格的文案沐祷。

(2)?交互行為的一致性

騰訊新聞app的新頁面進入時,都是由右向左劃入攒岛,返回就是由左往右滑出赖临,如下圖:

(3) 迭代產(chǎn)品的一致性

當產(chǎn)品線進行更新迭代的時候,應該保留用戶既有的交互和操作習慣阵子,用戶在上一個版本形成的交互認知在下一個版本是否能被沿用思杯,這對于用戶來說在產(chǎn)品體驗上會造成很大的干擾,比如Sketch軟件挠进,如果更新迭代后快捷鍵更換了色乾,那對于使用者來說無疑是個災難。

下圖的QQ好友列表领突,不管年代多么久遠暖璧,不管是移動端還是PC端,好友列表都是采用手風琴的折疊樣式君旦,體現(xiàn)了迭代產(chǎn)品的一致性

(4) 同一個公司/團隊的產(chǎn)品線的一致性

下圖是網(wǎng)易的產(chǎn)品線澎办,看logo就知道是同一家公司的產(chǎn)品

10 人性化幫助原則

在用戶需要的時候提供必要的幫助說明。

幫助性提示最好的方式是:

無需提示

一次性提示

常駐提示

幫助文檔


例如下圖左圖飛豬APP發(fā)現(xiàn)頁的旅行直播界面金砍,第一次進入時會教用戶如何切換視頻局蚀,因為第一次使用該產(chǎn)品可能是小白用戶,提供簡單的幫助提醒恕稠,讓用戶能夠迅速掌握軟件基本操作琅绅;

中圖是微信轉(zhuǎn)賬頁面,當用戶輸入金額較大時鹅巍,會在第一位數(shù)字下方提示轉(zhuǎn)賬金額的人民幣單位千扶,目的是為了避免用戶輸入錯誤金額導致資金損失;

?右圖是墨刀Mac桌面端骆捧,當鼠標移入到工具欄某一按鈕時澎羞,在下方會出現(xiàn)浮層提示用戶該按鈕的功能,通過人性化的幫助敛苇,讓用戶不至于逐個去點擊試錯妆绞。

雖然距尼爾森十大可用性原則提出已經(jīng)25年了,但是依然在交互設計領(lǐng)域有著非常重要的指導作用枫攀,列舉一些實際產(chǎn)品的案例也算是拋磚引玉括饶,希望大家在工作中能夠盡量多的思考,找到最佳的解決方案脓豪。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末巷帝,一起剝皮案震驚了整個濱河市忌卤,隨后出現(xiàn)的幾起案子扫夜,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件笤闯,死亡現(xiàn)場離奇詭異堕阔,居然都是意外死亡,警方通過查閱死者的電腦和手機颗味,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門超陆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人浦马,你說我怎么就攤上這事时呀。” “怎么了晶默?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵谨娜,是天一觀的道長。 經(jīng)常有香客問我磺陡,道長趴梢,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任币他,我火速辦了婚禮坞靶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蝴悉。我一直安慰自己彰阴,他們只是感情好,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布辫封。 她就那樣靜靜地躺著硝枉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪倦微。 梳的紋絲不亂的頭發(fā)上妻味,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機與錄音欣福,去河邊找鬼责球。 笑死,一個胖子當著我的面吹牛拓劝,可吹牛的內(nèi)容都是我干的雏逾。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼郑临,長吁一口氣:“原來是場噩夢啊……” “哼栖博!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起厢洞,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤仇让,失蹤者是張志新(化名)和其女友劉穎典奉,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丧叽,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡卫玖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了踊淳。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片假瞬。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖迂尝,靈堂內(nèi)的尸體忽然破棺而出脱茉,到底是詐尸還是另有隱情,我是刑警寧澤垄开,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布芦劣,位于F島的核電站,受9級特大地震影響说榆,放射性物質(zhì)發(fā)生泄漏虚吟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一签财、第九天 我趴在偏房一處隱蔽的房頂上張望串慰。 院中可真熱鬧,春花似錦唱蒸、人聲如沸邦鲫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庆捺。三九已至,卻和暖如春屁魏,著一層夾襖步出監(jiān)牢的瞬間滔以,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工氓拼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留你画,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓桃漾,卻偏偏與公主長得像坏匪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子撬统,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355