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