如何打造極致的用戶體驗的秘訣—尼爾森十大可用性原則?。ㄉ希?/h2>
不知道大家是否有過這樣的體驗:當你點擊按鈕時沒有任何反應,于是頻繁點了很多次,導致出現(xiàn)很多頁面。面對這樣的情景,產品設計者該如何應對?本文總結介紹了尼爾森的十大可用性原則中的前五大原則,希望對你有所啟發(fā)。
在日常使用移動端或PC端產品時,不知你有沒有這樣的體會?
1. 出現(xiàn)這些問題的,如何解決呢?
推薦一個比較實用的設計法則,這個法則已經有很多的文章說明了,可以說現(xiàn)在的任何互聯(lián)網產品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上,提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。
要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經驗法則,可以指導我們更具價值的思考界面設計。
各種設計原則都可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。
理論介紹:
雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術大學的人機交互博士,被譽為可用性測試的鼻祖,2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」,該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了,但是對于現(xiàn)今的產品體驗設計仍然具有很大的參考意義。
一、狀態(tài)可見原則
人機交互的基本原則是,讓系統(tǒng)和用戶之間保持良好的溝通和信息傳遞。系統(tǒng)要告知用戶發(fā)生了什么,預期是什么,如果系統(tǒng)不能及時向用戶反饋合適的信息,用戶必然會感到失控和焦慮,不知道下一步要做什么。
界面狀態(tài)分為兩種:靜態(tài)和動態(tài)。
靜態(tài)即用戶通過界面查閱,明確知道自己的位置、處于何種狀態(tài),或者知道界面數(shù)據(jù)的狀態(tài)。
動態(tài)即用戶在進行界面操作時,系統(tǒng)應當立刻提供反饋,告訴用戶該項操作被系統(tǒng)接受,讓用戶對操作感知及判斷。
該原則在設計中的體現(xiàn):
1. 狀態(tài)可見性-位置可見
告訴用戶處在系統(tǒng)的什么位置,特別是對于新用戶,需要提供必要的信息,否則容易迷惑。比如:導航菜單、面包屑、標簽頁、步驟條、分頁器等等。
相比于C端產品,B端產品在頁面層級往往更為復雜。因此,讓用戶明確當前所處的位置尤為重要,這也就突顯出了導航的重要性。設計師在設計的過程中,要注意提供上下文線索,避免用戶迷路。
2. 狀態(tài)可見性-進度條
告知用戶系統(tǒng)運行的狀態(tài)信息,比如進度、內容加載時,增加用戶掌控感。
最經典的案例莫過于Loading頁的進度條了,無論是加載頁面還是下載內容,一個清晰的進度條可以讓用戶隨時掌控進度,同時也可以用具體的數(shù)字更加明確的表示,比如:安裝程序時顯示進度條,并預估還需要多久結束,播放音樂時顯示進度條,并提示預估剩余時間。
3. 狀態(tài)可見性-操作反饋
系統(tǒng)適當反饋是用戶界面設計的最基本準則。當用戶在與系統(tǒng)進行交互時,應當在各個階段為用戶提供必要、積極且即時的反饋,同時也要避免過度反饋打擾用戶。
可以使用的形式包括但不局限于:
- 操作反饋:點擊頁面跳轉、按鈕點擊狀態(tài)、警告提示、輸入反饋等等;
- 結果反饋:非模態(tài)彈窗,輕量化感知系統(tǒng)內容反饋。(反饋內容應盡量不要打斷用戶操作,所以一般采用toast形式,反饋結果后及時消失。)
- 情感反饋:搜索沒有結果時,沒有數(shù)據(jù)等等空狀態(tài)。
還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動,甚至動效等多種形式給予用戶提示反饋。
注意,越是消極的反饋,比如網絡連接失敗、系統(tǒng)錯誤等,越是要及時告知用戶,同時提醒用戶采取適當措施。
比如:
- 提交表單時,如果校驗失敗,則在填寫有誤的內容旁邊提示錯誤原因;
- 程序未響應時,系統(tǒng)會讓用戶選擇是關閉程序還是等待程序響應;
4. 狀態(tài)可見性-合理的時間
系統(tǒng)應該在合理的時間內,給予用戶適當?shù)姆答?,讓用戶了解正在發(fā)生的事情。
當系統(tǒng)反饋時間小于1秒,通常正常反饋即可;相反長于1秒時,我們通常會通過加載動畫、占位符、分步加載等方式,減緩用戶等待的焦慮感。
如果超過10秒還沒有得到相應,那么通常會認為這次請求是失敗的,需要給用戶失敗提示。
例如:下載提示、刷新提示、支付提示、新頁面加載提示等。
二、 環(huán)境貼切原則
讓系統(tǒng)盡可能貼切用戶所在的真實環(huán)境。把復雜的系統(tǒng)語言換成用戶看得懂的語言;環(huán)境貼切原則的根本目標是讓用戶可以快速上手產品,降低學習成本。
《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。
該原則在設計中的體現(xiàn):
1. 環(huán)境貼切-易理解的語言
這里說的語言不僅僅包括文案層面的語言,還包括產品的設計語言(圖形、配色、風格、動效、手勢等)設計語言都應該是易于用戶理解和認知的。
產品使用的語言應該是目標用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產品完成目標。
從設計心理學角度來講,用戶在使用產品的過程中,其大腦會“優(yōu)待”較常用的記憶內容和操作形式,有意抑制那些相似但不常用的內容,以便減輕認知負擔,防止混淆,這種習慣從某種程度上來說屬于“熟知記憶”。
比如細分市場的產品,針對中老年、青年、兒童的產品或商務、娛樂的產品,都要分別使用符合自己的定位的語言。
反面案例就是windows系統(tǒng)出錯了頁面,一堆亂碼,看不懂又很慌張,就很不友好。
另外還有一點,很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。為了照顧不同國家的用戶的使用習慣對頁面結構布局,風格,語言,字體,包括交互方式都會做特殊處理。這就是場景貼合原則。
2. 環(huán)境貼切-模擬現(xiàn)實世界對象
模仿現(xiàn)實世界的產品或者使用映射,能夠利用人們現(xiàn)有的知識,可以顯著的降低用戶的認知和學習困難,并增加他們的使用興趣。
比較好的案例就是iOS原生的計算器、指南針,微信紅包都是模仿了現(xiàn)實世界的產品
3. 環(huán)境貼切-符合現(xiàn)實世界隱喻
從現(xiàn)實世界中借鑒的設計元素可明顯降低用戶的認知和學習難度,并且增加興趣。
最有代表性的就是網易云的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣,且非常容易理解和使用,讓人印象深刻。
4. 環(huán)境貼切-操作手勢符合聯(lián)想
使用的操作手勢,應該是用戶自然就能聯(lián)想到的,不要創(chuàng)造、更改操作手勢的意義。
5. 環(huán)境貼切-自然的動效
動效的加載樣式應符合自然規(guī)律,需要平緩過渡,而不是生硬的加載效果。
比如:網易云音樂播放時唱片轉動、停止播放時唱片自動移開,有趣且有效。
三、用戶可控原則
用戶在使用產品的過程中,誤操作是經常發(fā)生的事情,系統(tǒng)應提供撤銷和重做功能,讓用戶具有對產品的控制性與自由度。
用戶可控原則的根本目標是讓用戶可以在界面自由操作,而且無需為操作不當承擔責任。
該原則在設計中的體現(xiàn):
1. 可控原則-可自由導航
清晰便捷的導航方式,使用戶可自由控制返回和跳轉的頁面。
由于B端系統(tǒng)的復雜性,有些功能的層級會比較深。彈窗A中的某個操作可能會觸發(fā)彈窗B的彈出,如果彈窗A和B承載的功能具有父級和子級的關系,同樣需要考慮「返回」的功能以及清晰的層級關系。
2. 可控原則-可自由返回撤銷
用戶在使用系統(tǒng)的過程也是一個試錯的過程,系統(tǒng)要讓用戶覺得自己的行為是可控的,可以犯錯,并且在犯錯之后可以反悔。
用戶在使用產品時可以自由進退,遵循從哪里來就返回到哪里去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關功能。不可逆的操作要給用戶明顯的提示。
比如微信聊天是可以撤回的,并且撤回之后還支持重新編輯;對于我這種打字總是出錯的人簡直就是福利。
iphone相冊刪除照片后,支持在短期內找回;在word中編輯文檔時,支持撤銷和恢復,保存的同時,還能查看歷史保存記錄。
回收站功能:讓用戶更有自由度,增加用戶安全感,可控的找回誤刪除資源。
3. 可控原則-不可逆轉的操作需要警告
系統(tǒng)在重要的不可逆轉的操作需要給用戶提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。在產品設計上,防止用戶常見的誤操作。
比如很多產品在涉及到內容的刪除操作時,經常會有彈窗提醒,讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔,從而提升操作可控性。
比如iPhone iOS系統(tǒng):
- 常見的二次確認主要可以通過以下方式實現(xiàn):通過文字提示,用戶閱讀后點擊是與否來進行下一步;
- 通過動作,用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作;
- 通過身份校驗,用戶需要提交個人身份信息以完成校驗;
四、一致性原則
整個系統(tǒng)要保持產品結構架構、導航、用語、色彩、操作行為交互的一致性與標準性,遵循平臺慣例與行業(yè)標準。我們在設計中常見的制作平臺規(guī)范,其實就是為了保證平臺設計的一致性。
一致性原則的根本目的是保證產品的專業(yè)性,給用戶帶去統(tǒng)一的體驗感受。
該原則在設計中的體現(xiàn):
1. 一致性-產品內部一致
遵循產品內部的慣例,可幫助用戶快速學習使用產品功能。產品內部的一致性包含:產品功能框架、文字、設計風格、布局、反饋等等。
比如:小熊藝術app,一款針對孩子學習美術的app,不管是首頁、個人中心以及加載等頁面,風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現(xiàn),banner、加載,課程動畫中等。不僅風格一致性、布局、反饋等產品內部保持一致性,也形成了統(tǒng)一的品牌傳達。
但是,有時候為了達到產品目標,偶爾也會故意采用不一致的設計。
比如:常見的對話框都將“確定”按鈕放在右邊位置,所以用戶在操作時,很容易產生條件反射,順手點擊右邊按鈕,然后才突然發(fā)現(xiàn)自己點錯了。雖然看起來有些別扭甚至很多人不喜歡,但是很有效,這種設計在軟件卸載、App取消會員訂閱等操作中非常常見,主要是為了做一些心理暗示和引導,避免用戶卸載或退訂。
2. 一致性-交互行為一致
交互和用戶的習慣一致,意味著用戶不再需要重新學習,各種應用之間的切換沒有學習成本。
我們在前期已經培養(yǎng)好用戶的使用習慣,那么就不要輕易改變,減少用戶的認知成本與學習成本。
例如:常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
3. 一致性-迭代產品一致
當產品線進行更新迭代的時候,應該保留用戶既有的交互和操作習慣,用戶在上一個版本形成的交互認知在下一個版本是否能被沿用,這對于用戶來說在產品體驗上會造成很大的干擾。
比如微信的多年的迭代,底部tab功能一直都是這樣,主要功能入口一致沒有變化,就體現(xiàn)了迭代產品的一致性。
4. 一致性-同一團隊/公司產品線一致
Office軟件中包含的各個產品,其界面布局和設計風格都保持了高度一致,如下圖所示是PowerPoint和Word的界面,可以看出,二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形,都是高度類似的。
5. 一致性-設計語言一致
遵循統(tǒng)一的產品設計規(guī)范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。確保整個系統(tǒng)的結構一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規(guī)則。
比如,產品內相同顏色的反復出現(xiàn),為產品打造視覺錘符號,強化產品在用戶心中的記憶點。
符合平臺設計規(guī)范,比如:蘋果系統(tǒng)參照人機交互設計指南設計規(guī)范,安卓系統(tǒng)參照Material Design設計規(guī)范,或者直接參照自己團隊的的設計規(guī)范,應該遵循慣例,并且保持系統(tǒng)的一致感,不要盲目地標新立異。
6. 一致性-業(yè)內產品保持一致
不知道你發(fā)現(xiàn)了沒,現(xiàn)在的電商、音樂、社交等等app越來越一樣了,一樣的交互,一樣的排版設計,基本上都遵循著類似的交互邏輯和視覺元素。
為什么會這樣?同類軟件設計的趨同化,未必不是一件好事?
與業(yè)內產品保持一致,意味著用戶不再需要重新學習,就可以在各種應用中自由切換,用戶學習成本的降低,也意味著我們獲客成本從某種程度上被降低。
而這些約定俗成的規(guī)則和流程都被用戶不自覺地印刻在大腦中,成為一種自然的習慣,而獨特的設計,截然不同的規(guī)則,則常常會成為習慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。
如,在App底部的導航圖標中,“首頁”永遠排在第一個,個人中心(“我的”)永遠排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕,不同App的設計樣式都非常相似。如下圖三個不同音樂app的對比圖:
如果你特立獨行地把個人中心放在第一個位置,或者采用奇怪的圖標作為個人中心的icon,用戶使用時肯定會覺得別扭。
五、防錯原則
防錯原則的根本目標是阻止錯誤行為,避免進一步犯錯,指引用戶正確的完成操作行為。
「防止錯誤」主要分為三個階段:錯誤行動發(fā)生前,引導用戶向正確的方向前進;用戶觸碰到危險操作時給予提示;危險操作發(fā)生之后,提供撤回的入口。
該原則在設計中的體現(xiàn):
1. 在執(zhí)行危險操作前做設計
比一個優(yōu)秀的錯誤提醒彈窗更好的設計方式,是在這個錯誤發(fā)生之前就避免它。它可以幫助用戶排除一些容易出錯的情況,或在用戶提交之前給他一個確認的選項。
通常情況下,按鈕置灰表示對應功能或操作無法使用,這也是防止錯誤的一條有效途徑,因為用戶通過按鈕樣式就可獲知其狀態(tài),提前規(guī)避無效的提交操作。
當然,不是只要功能或操作無法使用時,就應該將對應的按鈕置灰。
其實更好的做法是填寫完標題后按鈕不置灰,點擊完成按鈕后定位或高亮必填項,讓用戶更容易識別錯誤點。
比如在登錄時,只有輸出信息后才可以點擊登錄按鈕,未輸入信息時,按鈕是不可以點擊的狀態(tài)。通過系統(tǒng)主動對用戶進行操作限制,幫助用戶避免發(fā)生錯誤。
限制用戶的選擇并不是一個好主意,但是如果有明確的規(guī)則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。
再比如輸入驗證碼頁面,為了防止用戶多輸入或者少輸入驗證碼,只給到四個輸入框,讓用戶只能輸入四位數(shù)字,減少輸入錯誤的幾率。
2. 在執(zhí)行危險操作中做設計
提供清晰的提示,防止用戶犯錯,提示包括標簽、文字、顏色、以及反饋狀態(tài)等。利用顏色,動效提供警示信息,比如常見的微信退出的按鈕是紅色的,狀態(tài)未完成的標簽是紅色的等等。
如:表單填寫過程中讓用戶及時知道輸入格式,出錯原因,避免填寫完成后再提醒,浪費用戶時間。
范圍限制:限制用戶的選擇并不是一個好主意,但是如果有明確的規(guī)則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。比如:電影購票時,已購買的位子不會再提供選擇,很好的避免了買重的問題
3. 危險操作發(fā)生之后做設計
特別要注意在用戶操作具有毀滅性結果的功能時要有提示,防止用戶犯不可挽回的錯誤,需打斷用戶,提示用戶是否要進行此操作,讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。
這條原則很重要也很常見。在刪除信息時,系統(tǒng)會讓用戶確認刪除,也就是我們常說的二次確認,電商平臺允許在一定的規(guī)則下取消訂單等等。
總結
尼爾森是大可用性原則可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解該設計原則,可以找到更好的解決方案,提高用戶的使用體驗。
要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經驗法則,而不是具體的規(guī)定。
- 狀態(tài)可見原則:位置可見、數(shù)量可見、狀態(tài)可見;
- 環(huán)境貼近原則:語言應該是用戶所能理解和習慣的;
- 用戶可控原則:可見導航、關閉與返回、撤銷與重做;
- 一致性原則:產品內部一致、交互一致、迭代產品一致、同一產品線一致、設計語言一致、業(yè)內產品一致;
- 防錯原則:操作前預警、操作中確認、操作后可撤回;
好了,明天我們繼續(xù)聊聊后面的幾個原則。文中如果有不嚴謹、錯誤的地方希望大家給予指正,希望大家可以多多點贊評論鼓勵下,最后感謝您的耐心閱讀。
本文由 @三原設計 原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash ,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
不知道大家是否有過這樣的體驗:當你點擊按鈕時沒有任何反應,于是頻繁點了很多次,導致出現(xiàn)很多頁面。面對這樣的情景,產品設計者該如何應對?本文總結介紹了尼爾森的十大可用性原則中的前五大原則,希望對你有所啟發(fā)。
在日常使用移動端或PC端產品時,不知你有沒有這樣的體會?
1. 出現(xiàn)這些問題的,如何解決呢?
推薦一個比較實用的設計法則,這個法則已經有很多的文章說明了,可以說現(xiàn)在的任何互聯(lián)網產品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上,提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。
要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經驗法則,可以指導我們更具價值的思考界面設計。
各種設計原則都可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。
理論介紹:
雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術大學的人機交互博士,被譽為可用性測試的鼻祖,2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」,該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了,但是對于現(xiàn)今的產品體驗設計仍然具有很大的參考意義。
一、狀態(tài)可見原則
人機交互的基本原則是,讓系統(tǒng)和用戶之間保持良好的溝通和信息傳遞。系統(tǒng)要告知用戶發(fā)生了什么,預期是什么,如果系統(tǒng)不能及時向用戶反饋合適的信息,用戶必然會感到失控和焦慮,不知道下一步要做什么。
界面狀態(tài)分為兩種:靜態(tài)和動態(tài)。
靜態(tài)即用戶通過界面查閱,明確知道自己的位置、處于何種狀態(tài),或者知道界面數(shù)據(jù)的狀態(tài)。
動態(tài)即用戶在進行界面操作時,系統(tǒng)應當立刻提供反饋,告訴用戶該項操作被系統(tǒng)接受,讓用戶對操作感知及判斷。
該原則在設計中的體現(xiàn):
1. 狀態(tài)可見性-位置可見
告訴用戶處在系統(tǒng)的什么位置,特別是對于新用戶,需要提供必要的信息,否則容易迷惑。比如:導航菜單、面包屑、標簽頁、步驟條、分頁器等等。
相比于C端產品,B端產品在頁面層級往往更為復雜。因此,讓用戶明確當前所處的位置尤為重要,這也就突顯出了導航的重要性。設計師在設計的過程中,要注意提供上下文線索,避免用戶迷路。
2. 狀態(tài)可見性-進度條
告知用戶系統(tǒng)運行的狀態(tài)信息,比如進度、內容加載時,增加用戶掌控感。
最經典的案例莫過于Loading頁的進度條了,無論是加載頁面還是下載內容,一個清晰的進度條可以讓用戶隨時掌控進度,同時也可以用具體的數(shù)字更加明確的表示,比如:安裝程序時顯示進度條,并預估還需要多久結束,播放音樂時顯示進度條,并提示預估剩余時間。
3. 狀態(tài)可見性-操作反饋
系統(tǒng)適當反饋是用戶界面設計的最基本準則。當用戶在與系統(tǒng)進行交互時,應當在各個階段為用戶提供必要、積極且即時的反饋,同時也要避免過度反饋打擾用戶。
可以使用的形式包括但不局限于:
- 操作反饋:點擊頁面跳轉、按鈕點擊狀態(tài)、警告提示、輸入反饋等等;
- 結果反饋:非模態(tài)彈窗,輕量化感知系統(tǒng)內容反饋。(反饋內容應盡量不要打斷用戶操作,所以一般采用toast形式,反饋結果后及時消失。)
- 情感反饋:搜索沒有結果時,沒有數(shù)據(jù)等等空狀態(tài)。
還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動,甚至動效等多種形式給予用戶提示反饋。
注意,越是消極的反饋,比如網絡連接失敗、系統(tǒng)錯誤等,越是要及時告知用戶,同時提醒用戶采取適當措施。
比如:
- 提交表單時,如果校驗失敗,則在填寫有誤的內容旁邊提示錯誤原因;
- 程序未響應時,系統(tǒng)會讓用戶選擇是關閉程序還是等待程序響應;
4. 狀態(tài)可見性-合理的時間
系統(tǒng)應該在合理的時間內,給予用戶適當?shù)姆答?,讓用戶了解正在發(fā)生的事情。
當系統(tǒng)反饋時間小于1秒,通常正常反饋即可;相反長于1秒時,我們通常會通過加載動畫、占位符、分步加載等方式,減緩用戶等待的焦慮感。
如果超過10秒還沒有得到相應,那么通常會認為這次請求是失敗的,需要給用戶失敗提示。
例如:下載提示、刷新提示、支付提示、新頁面加載提示等。
二、 環(huán)境貼切原則
讓系統(tǒng)盡可能貼切用戶所在的真實環(huán)境。把復雜的系統(tǒng)語言換成用戶看得懂的語言;環(huán)境貼切原則的根本目標是讓用戶可以快速上手產品,降低學習成本。
《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。
該原則在設計中的體現(xiàn):
1. 環(huán)境貼切-易理解的語言
這里說的語言不僅僅包括文案層面的語言,還包括產品的設計語言(圖形、配色、風格、動效、手勢等)設計語言都應該是易于用戶理解和認知的。
產品使用的語言應該是目標用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產品完成目標。
從設計心理學角度來講,用戶在使用產品的過程中,其大腦會“優(yōu)待”較常用的記憶內容和操作形式,有意抑制那些相似但不常用的內容,以便減輕認知負擔,防止混淆,這種習慣從某種程度上來說屬于“熟知記憶”。
比如細分市場的產品,針對中老年、青年、兒童的產品或商務、娛樂的產品,都要分別使用符合自己的定位的語言。
反面案例就是windows系統(tǒng)出錯了頁面,一堆亂碼,看不懂又很慌張,就很不友好。
另外還有一點,很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。為了照顧不同國家的用戶的使用習慣對頁面結構布局,風格,語言,字體,包括交互方式都會做特殊處理。這就是場景貼合原則。
2. 環(huán)境貼切-模擬現(xiàn)實世界對象
模仿現(xiàn)實世界的產品或者使用映射,能夠利用人們現(xiàn)有的知識,可以顯著的降低用戶的認知和學習困難,并增加他們的使用興趣。
比較好的案例就是iOS原生的計算器、指南針,微信紅包都是模仿了現(xiàn)實世界的產品
3. 環(huán)境貼切-符合現(xiàn)實世界隱喻
從現(xiàn)實世界中借鑒的設計元素可明顯降低用戶的認知和學習難度,并且增加興趣。
最有代表性的就是網易云的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣,且非常容易理解和使用,讓人印象深刻。
4. 環(huán)境貼切-操作手勢符合聯(lián)想
使用的操作手勢,應該是用戶自然就能聯(lián)想到的,不要創(chuàng)造、更改操作手勢的意義。
5. 環(huán)境貼切-自然的動效
動效的加載樣式應符合自然規(guī)律,需要平緩過渡,而不是生硬的加載效果。
比如:網易云音樂播放時唱片轉動、停止播放時唱片自動移開,有趣且有效。
三、用戶可控原則
用戶在使用產品的過程中,誤操作是經常發(fā)生的事情,系統(tǒng)應提供撤銷和重做功能,讓用戶具有對產品的控制性與自由度。
用戶可控原則的根本目標是讓用戶可以在界面自由操作,而且無需為操作不當承擔責任。
該原則在設計中的體現(xiàn):
1. 可控原則-可自由導航
清晰便捷的導航方式,使用戶可自由控制返回和跳轉的頁面。
由于B端系統(tǒng)的復雜性,有些功能的層級會比較深。彈窗A中的某個操作可能會觸發(fā)彈窗B的彈出,如果彈窗A和B承載的功能具有父級和子級的關系,同樣需要考慮「返回」的功能以及清晰的層級關系。
2. 可控原則-可自由返回撤銷
用戶在使用系統(tǒng)的過程也是一個試錯的過程,系統(tǒng)要讓用戶覺得自己的行為是可控的,可以犯錯,并且在犯錯之后可以反悔。
用戶在使用產品時可以自由進退,遵循從哪里來就返回到哪里去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關功能。不可逆的操作要給用戶明顯的提示。
比如微信聊天是可以撤回的,并且撤回之后還支持重新編輯;對于我這種打字總是出錯的人簡直就是福利。
iphone相冊刪除照片后,支持在短期內找回;在word中編輯文檔時,支持撤銷和恢復,保存的同時,還能查看歷史保存記錄。
回收站功能:讓用戶更有自由度,增加用戶安全感,可控的找回誤刪除資源。
3. 可控原則-不可逆轉的操作需要警告
系統(tǒng)在重要的不可逆轉的操作需要給用戶提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。在產品設計上,防止用戶常見的誤操作。
比如很多產品在涉及到內容的刪除操作時,經常會有彈窗提醒,讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔,從而提升操作可控性。
比如iPhone iOS系統(tǒng):
- 常見的二次確認主要可以通過以下方式實現(xiàn):通過文字提示,用戶閱讀后點擊是與否來進行下一步;
- 通過動作,用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作;
- 通過身份校驗,用戶需要提交個人身份信息以完成校驗;
四、一致性原則
整個系統(tǒng)要保持產品結構架構、導航、用語、色彩、操作行為交互的一致性與標準性,遵循平臺慣例與行業(yè)標準。我們在設計中常見的制作平臺規(guī)范,其實就是為了保證平臺設計的一致性。
一致性原則的根本目的是保證產品的專業(yè)性,給用戶帶去統(tǒng)一的體驗感受。
該原則在設計中的體現(xiàn):
1. 一致性-產品內部一致
遵循產品內部的慣例,可幫助用戶快速學習使用產品功能。產品內部的一致性包含:產品功能框架、文字、設計風格、布局、反饋等等。
比如:小熊藝術app,一款針對孩子學習美術的app,不管是首頁、個人中心以及加載等頁面,風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現(xiàn),banner、加載,課程動畫中等。不僅風格一致性、布局、反饋等產品內部保持一致性,也形成了統(tǒng)一的品牌傳達。
但是,有時候為了達到產品目標,偶爾也會故意采用不一致的設計。
比如:常見的對話框都將“確定”按鈕放在右邊位置,所以用戶在操作時,很容易產生條件反射,順手點擊右邊按鈕,然后才突然發(fā)現(xiàn)自己點錯了。雖然看起來有些別扭甚至很多人不喜歡,但是很有效,這種設計在軟件卸載、App取消會員訂閱等操作中非常常見,主要是為了做一些心理暗示和引導,避免用戶卸載或退訂。
2. 一致性-交互行為一致
交互和用戶的習慣一致,意味著用戶不再需要重新學習,各種應用之間的切換沒有學習成本。
我們在前期已經培養(yǎng)好用戶的使用習慣,那么就不要輕易改變,減少用戶的認知成本與學習成本。
例如:常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
3. 一致性-迭代產品一致
當產品線進行更新迭代的時候,應該保留用戶既有的交互和操作習慣,用戶在上一個版本形成的交互認知在下一個版本是否能被沿用,這對于用戶來說在產品體驗上會造成很大的干擾。
比如微信的多年的迭代,底部tab功能一直都是這樣,主要功能入口一致沒有變化,就體現(xiàn)了迭代產品的一致性。
4. 一致性-同一團隊/公司產品線一致
Office軟件中包含的各個產品,其界面布局和設計風格都保持了高度一致,如下圖所示是PowerPoint和Word的界面,可以看出,二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形,都是高度類似的。
5. 一致性-設計語言一致
遵循統(tǒng)一的產品設計規(guī)范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。確保整個系統(tǒng)的結構一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規(guī)則。
比如,產品內相同顏色的反復出現(xiàn),為產品打造視覺錘符號,強化產品在用戶心中的記憶點。
符合平臺設計規(guī)范,比如:蘋果系統(tǒng)參照人機交互設計指南設計規(guī)范,安卓系統(tǒng)參照Material Design設計規(guī)范,或者直接參照自己團隊的的設計規(guī)范,應該遵循慣例,并且保持系統(tǒng)的一致感,不要盲目地標新立異。
6. 一致性-業(yè)內產品保持一致
不知道你發(fā)現(xiàn)了沒,現(xiàn)在的電商、音樂、社交等等app越來越一樣了,一樣的交互,一樣的排版設計,基本上都遵循著類似的交互邏輯和視覺元素。
為什么會這樣?同類軟件設計的趨同化,未必不是一件好事?
與業(yè)內產品保持一致,意味著用戶不再需要重新學習,就可以在各種應用中自由切換,用戶學習成本的降低,也意味著我們獲客成本從某種程度上被降低。
而這些約定俗成的規(guī)則和流程都被用戶不自覺地印刻在大腦中,成為一種自然的習慣,而獨特的設計,截然不同的規(guī)則,則常常會成為習慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。
如,在App底部的導航圖標中,“首頁”永遠排在第一個,個人中心(“我的”)永遠排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕,不同App的設計樣式都非常相似。如下圖三個不同音樂app的對比圖:
如果你特立獨行地把個人中心放在第一個位置,或者采用奇怪的圖標作為個人中心的icon,用戶使用時肯定會覺得別扭。
五、防錯原則
防錯原則的根本目標是阻止錯誤行為,避免進一步犯錯,指引用戶正確的完成操作行為。
「防止錯誤」主要分為三個階段:錯誤行動發(fā)生前,引導用戶向正確的方向前進;用戶觸碰到危險操作時給予提示;危險操作發(fā)生之后,提供撤回的入口。
該原則在設計中的體現(xiàn):
1. 在執(zhí)行危險操作前做設計
比一個優(yōu)秀的錯誤提醒彈窗更好的設計方式,是在這個錯誤發(fā)生之前就避免它。它可以幫助用戶排除一些容易出錯的情況,或在用戶提交之前給他一個確認的選項。
通常情況下,按鈕置灰表示對應功能或操作無法使用,這也是防止錯誤的一條有效途徑,因為用戶通過按鈕樣式就可獲知其狀態(tài),提前規(guī)避無效的提交操作。
當然,不是只要功能或操作無法使用時,就應該將對應的按鈕置灰。
其實更好的做法是填寫完標題后按鈕不置灰,點擊完成按鈕后定位或高亮必填項,讓用戶更容易識別錯誤點。
比如在登錄時,只有輸出信息后才可以點擊登錄按鈕,未輸入信息時,按鈕是不可以點擊的狀態(tài)。通過系統(tǒng)主動對用戶進行操作限制,幫助用戶避免發(fā)生錯誤。
限制用戶的選擇并不是一個好主意,但是如果有明確的規(guī)則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。
再比如輸入驗證碼頁面,為了防止用戶多輸入或者少輸入驗證碼,只給到四個輸入框,讓用戶只能輸入四位數(shù)字,減少輸入錯誤的幾率。
2. 在執(zhí)行危險操作中做設計
提供清晰的提示,防止用戶犯錯,提示包括標簽、文字、顏色、以及反饋狀態(tài)等。利用顏色,動效提供警示信息,比如常見的微信退出的按鈕是紅色的,狀態(tài)未完成的標簽是紅色的等等。
如:表單填寫過程中讓用戶及時知道輸入格式,出錯原因,避免填寫完成后再提醒,浪費用戶時間。
范圍限制:限制用戶的選擇并不是一個好主意,但是如果有明確的規(guī)則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。比如:電影購票時,已購買的位子不會再提供選擇,很好的避免了買重的問題
3. 危險操作發(fā)生之后做設計
特別要注意在用戶操作具有毀滅性結果的功能時要有提示,防止用戶犯不可挽回的錯誤,需打斷用戶,提示用戶是否要進行此操作,讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。
這條原則很重要也很常見。在刪除信息時,系統(tǒng)會讓用戶確認刪除,也就是我們常說的二次確認,電商平臺允許在一定的規(guī)則下取消訂單等等。
總結
尼爾森是大可用性原則可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解該設計原則,可以找到更好的解決方案,提高用戶的使用體驗。
要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經驗法則,而不是具體的規(guī)定。
- 狀態(tài)可見原則:位置可見、數(shù)量可見、狀態(tài)可見;
- 環(huán)境貼近原則:語言應該是用戶所能理解和習慣的;
- 用戶可控原則:可見導航、關閉與返回、撤銷與重做;
- 一致性原則:產品內部一致、交互一致、迭代產品一致、同一產品線一致、設計語言一致、業(yè)內產品一致;
- 防錯原則:操作前預警、操作中確認、操作后可撤回;
好了,明天我們繼續(xù)聊聊后面的幾個原則。文中如果有不嚴謹、錯誤的地方希望大家給予指正,希望大家可以多多點贊評論鼓勵下,最后感謝您的耐心閱讀。
本文由 @三原設計 原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash ,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
學到很多,很有啟發(fā),謝謝作者。
不客氣,能幫到你就好