來源:白鷺漫談 發(fā)布時間:2019-01-10 11:22:36 閱讀量:1041
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎(chǔ)上,提煉出的十項交互設(shè)計原則。被廣泛運用于網(wǎng)頁、APP以及各種人機(jī)交互領(lǐng)域。
要注意的是,這10項原則是啟發(fā)式(heuristics)的、通用的經(jīng)驗法則,而不是具體的規(guī)定。
系統(tǒng)應(yīng)該通過在合理時間內(nèi)的適當(dāng)反饋,向用戶通知正在發(fā)生的事情或者當(dāng)前的狀態(tài)。
不要蒙蔽用戶,溝通是所有關(guān)系的基礎(chǔ),無論人還是設(shè)備。
當(dāng)系統(tǒng)響應(yīng)時間小于1秒時,通常正常反饋即可;
當(dāng)響應(yīng)時間長于1秒時,我們通常會通過加載動畫、分步加載、占位符加載等方式,減緩用戶等待的焦慮感;
如果超過10秒還沒有得到響應(yīng),那么通常會認(rèn)為這次請求是失敗的,需要給予用戶失敗提示。例如:刷新提示、新頁面加載提示、支付提示、下載提示。
當(dāng)然加載時間并沒有固定的規(guī)定,有個例子是這樣的:
某個APP的用戶反饋說他們的頁面加載太慢了,希望提高服務(wù)器反應(yīng)速度……于是他們對此進(jìn)行了優(yōu)化,優(yōu)化后用戶的反應(yīng):新版很給力,很快!
那這個團(tuán)隊的優(yōu)化方案是什么呢?
。
。
。
——他們把小菊花轉(zhuǎn)圈的速度提快了
對用戶操作的適當(dāng)反饋是用戶界面設(shè)計的最基本準(zhǔn)則。讓用戶了解當(dāng)前狀態(tài)、位置、是否成功、進(jìn)度如何,減少不確定性;并引導(dǎo)他們在正確的方向上交互,而不是浪費精力在重復(fù)操作上。反饋有:
·狀態(tài)反饋
用戶需要知道自己的操作是否被系統(tǒng)感知,所以用戶操作后,應(yīng)該第一時間給出反饋。最常見的就是各種按鈕的不同狀態(tài),比如未點擊、點擊、不可用狀態(tài),以及選中、未選中狀態(tài)。
就拿小說類批量訂閱列表來說,起點通過明顯的線面和顏色區(qū)分選中和未選中的章節(jié);而長佩我買的時候是需要反應(yīng)一下:免費不可選中是淺灰色、未選中是深灰色,選中是綠色……但是初始狀態(tài)時深灰色看起來像是選中??
·進(jìn)度反饋
進(jìn)度通常有頁面加載進(jìn)度、下載進(jìn)度、視頻播放進(jìn)度等
比如下圖的invision網(wǎng)站,在閱讀文章時通過頂部進(jìn)度條的反饋,讓用戶知道自己的閱讀進(jìn)度。
·位置反饋
因為網(wǎng)絡(luò)空間中用戶無法像物理空間那樣感知到自己的位置,所以我們需要在視覺上進(jìn)行提醒,以免用戶迷失。
比如標(biāo)簽欄、導(dǎo)航欄通過選中狀態(tài)來定位當(dāng)前所在頁面,閱讀、看視頻、聽音樂時系統(tǒng)會記錄當(dāng)前的位置,下次打開后繼續(xù)。
·反饋方式多樣化
反饋可以通過元素的顏色位置、文字、聲音和震動,甚至動效去表達(dá)變化。
比如京東,通過產(chǎn)品圖縮小-加入購物車的動效來反饋“商品已加入購物車”,直觀形象。
使用用戶熟悉的語言,單詞、短語、圖形,而不是系統(tǒng)導(dǎo)向的術(shù)語;遵循現(xiàn)實世界的慣例來呈現(xiàn)信息。
這里的語言不僅僅包括文案層面的語言,還包括產(chǎn)品的設(shè)計語言(圖形、配色和風(fēng)格)。
產(chǎn)品使用的語言應(yīng)該使目標(biāo)用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產(chǎn)品完成目標(biāo)。
特別是現(xiàn)在很多公司選擇耕耘細(xì)分市場的產(chǎn)品來分一杯羹,比如針對中老年、青年、兒童的產(chǎn)品,抑或商務(wù)、娛樂的產(chǎn)品,都要分別使用符合自己的定位的語言。
比如bilibili的設(shè)計語言和每日優(yōu)鮮的文案語言——
模仿現(xiàn)實世界的產(chǎn)品或者使用映射,能夠利用人們現(xiàn)有的知識,降低學(xué)習(xí)成本,使他們輕松快速的理解界面。
像早期擬物化的設(shè)計,以及MD的魔法卡片模擬了物理世界中的紙張。IOS的指南針也類似現(xiàn)實世界中的指南針,以便用戶輕松的使用。
熟悉是這些體驗讓用戶愉快的原因。
比如微信閱讀打開書的動效就像現(xiàn)實世界的打開一本書一樣、給medium文章進(jìn)行標(biāo)記就像我們現(xiàn)實中使用馬克筆一樣。
用戶經(jīng)常會在使用時發(fā)生誤操作,所以產(chǎn)品需要一個非常明確的“緊急出口”幫助他們——即提供取消和重做的功能。
用戶在使用產(chǎn)品時可以自由進(jìn)退,遵循從哪里來就可以返回哪里去的原則;比如常用的各種二三級頁面左上角必備的返回按鈕。
當(dāng)用戶誤操作時要給用戶提供提供撤銷、取消、重做等相關(guān)功能,比如聊天類產(chǎn)品的信息都可以短時間內(nèi)撤銷。
(突然發(fā)現(xiàn)這張圖暴露了我每天點外賣的事實 ヽ(。>д<)p
不可逆的操作需要給用戶明顯的提示,以免對用戶產(chǎn)生嚴(yán)重的影響。比如刪除功能通常需要二次操作,重要操作會有彈框類提示。
設(shè)計者應(yīng)遵循一致性原則,統(tǒng)一標(biāo)準(zhǔn)能確保用戶理解各個元素在設(shè)計中,并且知道去哪里尋找哪些功能。
移動市場成熟的今天,已經(jīng)有很多約定俗成的慣例。和用戶的習(xí)慣一致,意味著用戶不再需要重新學(xué)習(xí),各種應(yīng)用的切換之間沒有學(xué)習(xí)成本。這也是我認(rèn)為設(shè)計的趨同化未必不是一件好事情的原因。
比如常用的幾種操作手勢、下拉刷新功能、我的/地圖/購物車圖標(biāo)等
在同一個產(chǎn)品中,同一層級的信息應(yīng)該使用一致的設(shè)計語言。
比如導(dǎo)航、彈窗、按鈕、列表,這是我們推行設(shè)計組件和規(guī)范的一個原因。
除此以外,顏色、文字、圓角、陰影等也是需要注意一致性的。
△谷歌google visual guidelines-google ads
用戶經(jīng)常分心于手頭的事情,因此需要通過提供建議、利用約束來防止無意識錯誤。
其實限制用戶的選擇并不是一個好主意,但是如果有明確的規(guī)則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。
比如訂房時,對可訂房日期進(jìn)行限制,防止用戶選錯時間。
提供清晰的提示,也能防止用戶犯錯,提示包括標(biāo)簽、文字、顏色、以及反饋狀態(tài)等。
比如IOS的鍵盤,選中的字母會放大,提示用戶;輸入文字光標(biāo)會放大,防止用戶操作失誤。
比如負(fù)向操作通常為紅色,紅色是一種警示色,給用戶預(yù)警防止誤操作。
盡可能減少用戶的記憶負(fù)擔(dān),向用戶顯示他們可以識別的內(nèi)容,而不是自己記憶和填寫。
選擇和輸入的操作成本相差巨大。產(chǎn)品應(yīng)該給用戶提供選項,讓用戶可以直接選擇,而不是自己輸入。比如淘寶填寫收貨地址
在用戶使用產(chǎn)品的過程中,會有產(chǎn)生一些需要記憶的內(nèi)容、或者操作路徑,這個時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里。
比如自動讀取短信驗證碼,比如bilibili會提醒上次播放的位置
內(nèi)容可預(yù)期,減少用戶操作路徑,防止來回跳轉(zhuǎn)。
比如起點章節(jié)付費時可以直接看到當(dāng)前的余額、
比如京東金融首頁直接顯示了余額和代還金額(本來應(yīng)該打個碼的,但是想想我三位數(shù)的資產(chǎn)打碼還不夠費勁呢(?_?)
好的產(chǎn)品需要同時兼顧新用戶和資深用戶的需求。
對新用戶來說,需要功能明確、清晰,對于老用戶需要快捷高效使用高頻功能。不可迎合某一種用戶,把不必要的信息占據(jù)重要部分。
在首頁放置常用功能,比如淘寶、支付寶、bilibili等等;或者提供自定義入口,比如猿題庫可以自定義科目
對用戶頻繁使用的功能,提供重復(fù)操作入口或者模板。比如美團(tuán)外賣,可以直接選擇再來一單
通過提供系統(tǒng)默認(rèn)選項,而減少用戶多余的操作。比如美團(tuán)、攜程、每日優(yōu)鮮等當(dāng)?shù)胤?wù)類產(chǎn)品,會默認(rèn)選擇當(dāng)前定位的城市;購物會選擇默認(rèn)收貨地址等
不要包含不相關(guān)或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內(nèi)容的相對可見性。
能夠方便用戶無障礙的瀏覽信息,越重要的內(nèi)容越突出。
通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現(xiàn)。
頁面中背景、裝飾元素視覺過重的話,就會干擾到用戶對于信息的閱讀。
比如以圖片為背景,我們要考慮圖片上文字的識別性;列表頁過重的分割線、頁面內(nèi)過多的裝飾元素都會給干擾信息閱讀……
比如下廚房菜單推薦的卡片,字體識別度特別差;移動掌廳的這個模塊,字體色和背景色對比不清晰、以及字體太小,都會干擾用戶識別信息——我們需要做的是降低這些干擾
錯誤消息應(yīng)以簡單的語言表示,準(zhǔn)確指出問題,并提出解決方案。
當(dāng)發(fā)生錯誤時,提示信息一定要直觀,視覺上能夠引起用戶注意,可視化處理,文案要簡單概要。比如賬號密碼錯誤、以及各種異常狀態(tài)
當(dāng)用戶遇到錯誤時,不要只是報錯,盡可能提供詳盡的說明文字和指導(dǎo)方向,遇到了什么問題,以及如何解決等等。
幫助性內(nèi)容有一次性提示、常駐提示和幫助文檔。
多用在用戶第一次使用,或者產(chǎn)品更新后,通常為氣泡形式,或者snakebar的形式呈現(xiàn)。
用于操作時必須注意到的內(nèi)容,在頁面中以文本或者標(biāo)簽形式呈現(xiàn)。
一般用于解釋規(guī)則或者熱點問題,通常以超鏈接的形式存在于頁面中;或者以集合形式位于設(shè)置頁中,此時需要注意要易于檢索。
本篇文章主要介紹了尼爾森的10大可用性原則,以及介紹了適用范圍和案例說明。最后我們再來復(fù)習(xí)一遍加深記憶吧~