交互設(shè)計(jì)基礎(chǔ)系列：詳解尼爾森10大可用性原則

1、交互設(shè)計(jì)基礎(chǔ)系列：詳解尼爾森10大可用性原則前言尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個(gè)可用 性問題的基礎(chǔ)上，提煉出的十項(xiàng)交互設(shè)計(jì)原則。被廣泛運(yùn)用于網(wǎng)頁、 APP以及各種人機(jī)交互領(lǐng)域。要注意的是，這10項(xiàng)原則是啟發(fā)式(heuristics)的、通用的 經(jīng)驗(yàn)法則，而不是具體的規(guī)定。一、系統(tǒng)狀態(tài)的可見性系統(tǒng)應(yīng)該通過在合理時(shí)間內(nèi)的適當(dāng)反饋，向用戶通知正在發(fā)生的 事情或者當(dāng)前的狀態(tài)。不要蒙蔽用戶，溝通是所有關(guān)系的基礎(chǔ)，無論人還是設(shè)備。1.合理時(shí)間當(dāng)系統(tǒng)響應(yīng)時(shí)間小于1秒時(shí)，通常正常反饋即可；當(dāng)響應(yīng)時(shí)間長于1秒時(shí)，我們通常會通過加載動(dòng)畫、分步加載、 占位符加載等方式，減緩用戶等待的焦慮感；如果超

2、過10秒還沒有得到響應(yīng)，那么通常會認(rèn)為這次請求是失 敗的，需要給予用戶失敗提示。例如：刷新提示、新頁面加載提示、 支付提示、下載提示。當(dāng)然加載時(shí)間并沒有固定的規(guī)定，有個(gè)例子是這樣的：某個(gè)APP的用戶反饋說他們的頁面加載太慢了，希望提高服務(wù)器 反應(yīng)速度于是他們對此進(jìn)行了優(yōu)化，優(yōu)化后用戶的反應(yīng)：新版很 給力，很快！那這個(gè)團(tuán)隊(duì)的優(yōu)化方案是什么呢？他們把小菊花轉(zhuǎn)圈的速度提快了2.適當(dāng)反饋對用戶操作的適當(dāng)反饋是用戶界面設(shè)計(jì)的最基本準(zhǔn)則。讓用戶了 解當(dāng)前狀態(tài)、位置、是否成功、進(jìn)度如何，減少不確定性；并引導(dǎo)他 們在正確的方向上交互，而不是浪費(fèi)精力在重復(fù)操作上。反饋有：狀態(tài)反饋用戶需要知道自己的操作是否被系統(tǒng)

3、感知，所以用戶操作后，應(yīng) 該第一時(shí)間給出反饋。最常見的就是各種按鈕的不同狀態(tài)，比如未點(diǎn) 擊、點(diǎn)擊、不可用狀態(tài)，以及選中、未選中狀態(tài)。就拿小說類批量訂閱列表來說，起點(diǎn)通過明顯的線面和顏色區(qū)分 選中和未選中的章節(jié)；而長佩我買的時(shí)候是需要反應(yīng)一下：免費(fèi)不可 選中是淺灰色、未選中是深灰色，選中是綠色但是初始狀態(tài)時(shí)深 灰色看起來像是選中？進(jìn)度反饋進(jìn)度通常有頁面加載進(jìn)度、下載進(jìn)度、視頻播放進(jìn)度等比如下圖的 invision 網(wǎng)站，在閱讀文章時(shí)通過頂部進(jìn)度條的反 饋，讓用戶知道自己的閱讀進(jìn)度。位置反饋因?yàn)榫W(wǎng)絡(luò)空間中用戶無法像物理空間那樣感知到自己的位置，所 以我們需要在視覺上進(jìn)行提醒，以免用戶迷失。比如標(biāo)簽

4、欄、導(dǎo)航欄通過選中狀態(tài)來定位當(dāng)前所在頁面，閱讀、 看視頻、聽音樂時(shí)系統(tǒng)會記錄當(dāng)前的位置，下次打開后繼續(xù)。反饋方式多樣化反饋可以通過元素的顏色位置、文字、聲音和震動(dòng)，甚至動(dòng)效去 表達(dá)變化。比如京東，通過產(chǎn)品圖縮小-加入購物車的動(dòng)效來反饋“商品已 加入購物車”，直觀形象。二、系統(tǒng)與現(xiàn)實(shí)世界的匹配使用用戶熟悉的語言，單詞、短語、圖形，而不是系統(tǒng)導(dǎo)向的術(shù) 語；遵循現(xiàn)實(shí)世界的慣例來呈現(xiàn)信息。使用目標(biāo)用戶的語言這里的語言不僅僅包括文案層面的語言，還包括產(chǎn)品的設(shè)計(jì)語言（圖形、配色和風(fēng)格）。產(chǎn)品使用的語言應(yīng)該使目標(biāo)用戶能夠清晰理解的。如果用戶不能 理解，他們會感到被忽視和受挫敗，許多人將選擇其他產(chǎn)品完成目標(biāo)。

5、特別是現(xiàn)在很多公司選擇耕耘細(xì)分市場的產(chǎn)品來分一杯羹，比如 針對中老年、青年、兒童的產(chǎn)品，抑或商務(wù)、娛樂的產(chǎn)品，都要分別 使用符合自己的定位的語言。比如bilibili的設(shè)計(jì)語言和每日優(yōu)鮮的文案語言一一模擬現(xiàn)實(shí)世界的對象模仿現(xiàn)實(shí)世界的產(chǎn)品或者使用映射，能夠利用人們現(xiàn)有的知識， 降低學(xué)習(xí)成本，使他們輕松快速的理解界面。像早期擬物化的設(shè)計(jì)，以及MD的魔法卡片模擬了物理世界中的 紙張。IOS的指南針也類似現(xiàn)實(shí)世界中的指南針，以便用戶輕松的使 用。熟悉是這些體驗(yàn)讓用戶愉快的原因。比如微信閱讀打開書的動(dòng)效就像現(xiàn)實(shí)世界的打開一本書一樣、給 medium文章進(jìn)行標(biāo)記就像我們現(xiàn)實(shí)中使用馬克筆一樣。三、操作可控、

6、可逆用戶經(jīng)常會在使用時(shí)發(fā)生誤操作，所以產(chǎn)品需要一個(gè)非常明確的 “緊急出口”幫助他們一一即提供取消和重做的功能。可撤銷/返回用戶在使用產(chǎn)品時(shí)可以自由進(jìn)退，遵循從哪里來就可以返回哪里 去的原則；比如常用的各種二三級頁面左上角必備的返回按鈕。當(dāng)用戶誤操作時(shí)要給用戶提供提供撤銷、取消、重做等相關(guān)功能，比如聊天類產(chǎn)品的信息都可以短時(shí)間內(nèi)撤銷。（突然發(fā)現(xiàn)這張圖暴露了我每天點(diǎn)外賣的事實(shí)、（?？?.不可逆的操作要給用戶提示不可逆的操作需要給用戶明顯的提示，以免對用戶產(chǎn)生嚴(yán)重的影 響。比如刪除功能通常需要二次操作，重要操作會有彈框類提示。四、一致性和標(biāo)準(zhǔn)化設(shè)計(jì)者應(yīng)遵循一致性原則，統(tǒng)一標(biāo)準(zhǔn)能確保用戶理解各個(gè)元素在

7、 設(shè)計(jì)中，并且知道去哪里尋找哪些功能。1和用戶的使用習(xí)慣保持一致移動(dòng)市場成熟的今天，已經(jīng)有很多約定俗成的慣例。和用戶的習(xí) 慣一致，意味著用戶不再需要重新學(xué)習(xí)，各種應(yīng)用的切換之間沒有學(xué) 習(xí)成本。這也是我認(rèn)為設(shè)計(jì)的趨同化未必不是一件好事情的原因。比如常用的幾種操作手勢、下拉刷新功能、我的/地圖/購物車圖 標(biāo)等2產(chǎn)品規(guī)范化在同一個(gè)產(chǎn)品中，同一層級的信息應(yīng)該使用一致的設(shè)計(jì)語言。比如導(dǎo)航、彈窗、按鈕、列表，這是我們推行設(shè)計(jì)組件和規(guī)范的 一個(gè)原因。除此以外，顏色、文字、圓角、陰影等也是需要注意一致性的。谷歌 google visual guidelines-google ads五、防錯(cuò)原則用戶經(jīng)常分心于手

8、頭的事情，因此需要通過提供建議、利用約束 來防止無意識錯(cuò)誤。1范圍限制其實(shí)限制用戶的選擇并不是一個(gè)好主意，但是如果有明確的規(guī)則 來定義可接受的選項(xiàng)，那么限制用戶可以輸入的類型是一個(gè)很好的策 略。比如訂房時(shí)，對可訂房日期進(jìn)行限制，防止用戶選錯(cuò)時(shí)間。2提供提示提供清晰的提示，也能防止用戶犯錯(cuò)，提示包括標(biāo)簽、文字、顏 色、以及反饋狀態(tài)等。比如IOS的鍵盤，選中的字母會放大，提示用戶；輸入文字光標(biāo) 會放大，防止用戶操作失誤。比如負(fù)向操作通常為紅色，紅色是一種警示色，給用戶預(yù)警防止 誤操作。六、確認(rèn)而不是記憶盡可能減少用戶的記憶負(fù)擔(dān)，向用戶顯示他們可以識別的內(nèi)容， 而不是自己記憶和填寫。讓用戶選擇而不是

9、輸入選擇和輸入的操作成本相差巨大。產(chǎn)品應(yīng)該給用戶提供選項(xiàng)，讓用戶可以直接選擇，而不是自己輸入。比如淘寶填寫收貨地址自動(dòng)讀取、記錄信息，減少操作路徑在用戶使用產(chǎn)品的過程中，會有產(chǎn)生一些需要記憶的內(nèi)容、或者 操作路徑，這個(gè)時(shí)候我們要避免用戶記憶，把信息直接提取出來，送 到用戶手里。比如自動(dòng)讀取短信驗(yàn)證碼，比如bilibili會提醒上次播放的位 置內(nèi)容可預(yù)期內(nèi)容可預(yù)期，減少用戶操作路徑，防止來回跳轉(zhuǎn)。比如起點(diǎn)章節(jié)付費(fèi)時(shí)可以直接看到當(dāng)前的余額、比如京東金融首頁直接顯示了余額和代還金額（本來應(yīng)該打個(gè)碼 的，但是想想我三位數(shù)的資產(chǎn)打碼還不夠費(fèi)勁呢愆矽）七、靈活性和使用效率好的產(chǎn)品需要同時(shí)兼顧新用戶和資深用

10、戶的需求。對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷高效 使用高頻功能。不可迎合某一種用戶，把不必要的信息占據(jù)重要部分。提供快捷入口在首頁放置常用功能，比如淘寶、支付寶、bilibili等等；或 者提供自定義入口，比如猿題庫可以自定義科目允許用戶重復(fù)操作對用戶頻繁使用的功能，提供重復(fù)操作入口或者模板。比如美團(tuán) 外賣，可以直接選擇再來一單提供默認(rèn)選項(xiàng)通過提供系統(tǒng)默認(rèn)選項(xiàng)，而減少用戶多余的操作。比如美團(tuán)、攜 程、每日優(yōu)鮮等當(dāng)?shù)胤?wù)類產(chǎn)品，會默認(rèn)選擇當(dāng)前定位的城市；購物 會選擇默認(rèn)收貨地址等八、簡約設(shè)計(jì)不要包含不相關(guān)或低頻次的信息/操作。頁面中的每個(gè)額外信息 都會降低主要內(nèi)容的相對可見性。

11、1建立清晰的視覺層級能夠方便用戶無障礙的瀏覽信息，越重要的內(nèi)容越突出。通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、 動(dòng)效等來表現(xiàn)。2降低頁面的干擾頁面中背景、裝飾元素視覺過重的話，就會干擾到用戶對于信息 的閱讀。比如以圖片為背景，我們要考慮圖片上文字的識別性；列表頁過 重的分割線、頁面內(nèi)過多的裝飾元素都會給干擾信息閱讀比如下廚房菜單推薦的卡片，字體識別度特別差；移動(dòng)掌廳的這 個(gè)模塊，字體色和背景色對比不清晰、以及字體太小，都會干擾用戶 識別信息一一我們需要做的是降低這些干擾九、幫助用戶識別、診斷和修復(fù)錯(cuò)誤錯(cuò)誤消息應(yīng)以簡單的語言表示，準(zhǔn)確指出問題，并提出解決方案。錯(cuò)誤提示要直觀當(dāng)發(fā)生錯(cuò)誤時(shí)，提示信息一定要直觀，視覺上能夠引起用戶注意， 可視化處理，文案要簡單概要。比如賬號密碼錯(cuò)誤、以及各種異常狀 態(tài)提供解決方案當(dāng)用戶遇到錯(cuò)誤時(shí)，不要只是報(bào)錯(cuò)，盡可能提供詳盡的說明文字 和指導(dǎo)方向，遇到了什么問題，以及如何解決等等。十、提供幫助文檔幫助性內(nèi)容有一次性提示、常駐提示和幫助文檔。1一次性提示多用在用戶第一次使用，或者產(chǎn)品更