用超多案例,幫你掌握尼爾森十大設計原則

2022-7-3    純純

關于尼爾森原則

「尼爾森十大原則」又稱為「用戶界面設計的10種可用性啟發(fā)式」,是由雅各布·尼爾森(Jakob Nielsen)提出的10條交互設計一般原則。之所以將其定義為“啟發(fā)式”,是因為它們是廣泛的經驗法則,而不是特定的可用性準則。

在官方2019年的描述視頻中將原則定義為「十大UX設計試探法」,運用這些原則有助于我們試探設計的邊界,探索設計的可能性,千萬不要讓原則成為束縛我們設計的枷鎖。

原則六:識別而不是回憶

“保證元素對象,操作選項的可見性,以此降低用戶的記憶負荷?!?

這個原則直譯文過來的話有點拗口,其實就是指盡量減少需要用戶記憶的東西,特殊情況下提供可選項讓用戶在此確認信息。特別是在一些較為長流程的頁面流轉中,一定要注意上下文的關聯(lián)性,以此協(xié)助用戶進行回憶,而不是從頭開始記憶。

1. 選項可視性

最常見的運用,將選項以用戶最能理解的方式呈現(xiàn)出來,不讓用戶疑惑。

undefined

在平常練習的飛機稿或者一些風格獨特的產品中我們經常會看到只使用了icon的tab欄,雖然美觀,但是當用戶量達到一定程度,且用戶屬性較多的情況下很容易造成識別上的問題。目前市面上較多的產品還是選擇了文字+icon的展示形式,通過文字與圖形加深用戶的識別,高德則選擇了使用表意最為明確的文字。

2. 頁面可視性

頁面標題也是最為常見的運用形式,產品需要清晰的告知用戶目前所處的位置。特別是在一些需要長時間停留,存在操作被打斷的界面中標題尤為重要。

undefined

目前市面上常見的產品都會在用標題來告知用戶當前所處頁面,有段時間特別流行類似APP Store這種刻意放大來突出頁面標題。值得一提的是,在IOS中如果從一個APP跳轉至另一個APP左上角則會出現(xiàn)上一個APP的名稱,切點擊可以快速返回。如上圖中的淘寶頁面,我是通過微博點擊廣告鏈接后跳轉進入的。

3. 交互通用性

只要是用戶熟悉的交互形式,用戶就不用浪費時間去記憶,即使不用文字說明,也能有效的保證用戶的識別。

undefined

在文字閱讀或者編輯的時候,長按可以拷貝/粘貼,即使不用說明,絕大部分用戶也能get到,還有就是預覽圖片時候,使用手指交換進行縮放。

4. 歷史記錄

提供最近訪問項可以幫助用戶恢復他們未完成的任務以及難以回憶的任務。

undefined

最常見的莫過于瀏覽器的歷史記錄,可以幫助用戶回憶尋找某個時間節(jié)點的內容,微信的聊天記錄劃分了更多的維度來幫助用戶搜索相應的記錄。淘寶瀏覽商品不穩(wěn)定性較大,有時用戶會因為某個宣傳而點進某個商品,通過足跡可以查看瀏覽記錄,這樣就不用特地去記店鋪名稱或者加入收藏夾了。

原則七:靈活高效的使用

“用戶看不見的加速器(快捷方式)通??梢约涌鞂<矣脩舻慕换ニ俣?,從而使系統(tǒng)可以同時滿足經驗不足和經驗豐富的用戶。允許用戶定制頻繁的操作?!?

系統(tǒng)需要同時適用于新手用戶與專家用戶,對于新手用戶來說,需要盡量降低他們的學習成本,幫助他們快速上手,而對于專家用戶來說,他們需要的是快捷以及高效。

1. 千人千面

在注重用戶數(shù)據分析的今天,很多時候已經不用用戶自己手動去設置自己的偏好,產品便能像你所想。

undefined

左圖的滴答清單是最為常見的為新手用戶準備的引導方式,右圖支付寶的財富界面,如果是新手用戶,那么金剛區(qū)下方則展示現(xiàn)金紅包,基金推薦等吸新人,如果是基金老用戶了,則會展示更加專業(yè)的數(shù)據字段來幫助用戶決策。

2. 重復操作

對于熟悉的產品,一般來說用戶更希望一切趨于穩(wěn)定。

undefined

在外賣這種使用頻次較高選擇項較多的產品中,很大一部分用戶不愿意冒著風險嘗試新的菜品,或者點餐決策時間較短(比如開會),他們很多時候會選擇“再來一單”。

3. 快捷方式

在操作同一款軟件時,專家用戶的屏幕只有一個預覽窗口,而我…恨不得屏幕再大點,塞下所有工具欄。

undefined

在各種軟件中都會設置快捷鍵便于專家用戶的高效操作,比如專家用戶的Photoshop和我的PS。

原則八:美學和簡約設計

“對話中不應包含無關緊要或很少需要的信息。對話中每增加一個信息單元都會與相關信息單元競爭,從而降低其相對可見度。”

我們在設計一個頁面的時候,如果其中的元素都想突出,最終只會導致沒有任何突出的元素。這里可以參考“信噪比”的概念,即相關信息與無關信息的比例,用戶的注意力是有限的,降低不必要的視覺噪音,才不會過于分散用戶的注意力,提高用戶效率。

1. 文字內容

資訊類產品中最為常見,如果一大段文字又臭又長,那么就很容易影響到想要傳達給用戶的核心思想。

undefined

36氪在快訊頁面中會將重點資訊標紅來突出,此外默認情況下只展示資訊標題,方便用戶快速瀏覽,如果遇到感興趣的資訊可以再選擇展開瀏覽詳細信息。

2. 視覺元素

利用這個原理,現(xiàn)在的產品會在一些視覺元素處理上做出區(qū)分,不僅能引導用戶快速完成預設的操作路徑,且對產品本身業(yè)務也是相當有利。

undefined

淘寶的結算頁面中,為了促使用戶剁手不受干擾,會將付款btn與其他做高反差處理,同理Airbnb在首頁中將搜索房源作同樣的的處理,只要促使用戶搜索了,那就提高了剁手的轉化率。

原則九:幫助用戶識別,診斷錯誤并從錯誤中恢復

“錯誤信息應該使用簡單的語言表示,準確指示問題并建設性地提出解決方案。”

原文中特地強調不要用代碼去表示錯誤信息,即用用戶能夠理解的,通俗的,接地氣的詞匯,千萬不要用一些專業(yè)性術語。用語盡量禮貌,不要責怪用戶,讓他們覺得自己是個傻逼,這樣很容易讓他們產生挫敗感。

undefined

得道在使用手機號登錄的時候手機號少輸入了一位,以至于登錄btn一直無法點擊,雖然診斷了錯誤,但是沒有明確的告知用戶錯在哪。Behance在這方面就顯得更為完善,會實時判斷狀態(tài),并且實時告知原因,協(xié)助用戶進行改正。

原則十:幫助文檔

“即使可以在沒有文檔的情況下使用系統(tǒng)會更好,但可能仍需要提供幫助和文檔。任何此類信息都應該易于搜索,著眼于用戶的任務,列出要執(zhí)行的具體步驟,并且信息量不要太大?!?

每個用戶的背景都有所不同,所以很難確保所有用戶都能暢通無阻的使用自己的產品。無論什么類型的產品,都盡量給用戶提供一個幫助的途徑,對于那些只需要一句話就能概括的,可以考慮在附近進行簡短的說明,而對于需要復雜說明的,最好統(tǒng)一一個幫助入口,且放置于用戶易于找到的位置。

undefined

在IOS的設置中,會在一些設置項下添加簡要的說明,以此來幫助用戶更好的理解。印象筆記與普遍的產品一樣,在菜單欄上有幫助的入口,而且提供精準的搜索功能,幫助用戶更快的解決有可能遇到的問題。


作者:CE青年   來源:站酷
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。
藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔