設計法則|打造極致的用戶體驗的秘訣-尼爾森十大可用性原則!

2022-11-2    博博

推薦一個比較實用的設計法則,可以說現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰(zhàn)分析。


在日常使用移動端或PC端產(chǎn)品時,不知你有沒有這樣的體會?



出現(xiàn)這些問題的,如何解決呢?

推薦一個比較實用的設計法則,這個法則已經(jīng)有很多的文章說明了,可以說現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰(zhàn)分析。



尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎(chǔ)上,提煉出的十項交互設計原則。被廣泛運用于網(wǎng)頁、APP以及各種人機交互領(lǐng)域。

要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經(jīng)驗法則,可以指導我們更具價值的思考界面設計。

設計原則都可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。

理論介紹

雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術(shù)大學的人機交互博士,被譽為可用性測試的鼻祖,2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。 

尼爾森于1995年1月1日發(fā)表了「十大可用性原則」,該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了,但是對于現(xiàn)今的產(chǎn)品體驗設計仍然具有很大的參考意義。







人機交互的基本原則是,讓系統(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端產(chǎn)品,B端產(chǎn)品在頁面層級往往更為復雜。因此,讓用戶明確當前所處的位置尤為重要,這也就突顯出了導航的重要性。設計師在設計的過程中,要注意提供上下文線索,避免用戶迷路。



2、狀態(tài)可見性-進度條

告知用戶系統(tǒng)運行的狀態(tài)信息,比如進度、內(nèi)容加載時,增加用戶掌控感。

最經(jīng)典的案例莫過于Loading頁的進度條了,無論是加載頁面還是下載內(nèi)容,一個清晰的進度條可以讓用戶隨時掌控進度,同時也可以用具體的數(shù)字更加明確的表示,比如:安裝程序時顯示進度條,并預估還需要多久結(jié)束,播放音樂時顯示進度條,并提示預估剩余時間。



3、狀態(tài)可見性-操作反饋

系統(tǒng)適當反饋是用戶界面設計的最基本準則。當用戶在與系統(tǒng)進行交互時,應當在各個階段為用戶提供必要、積極且即時的反饋,同時也要避免過度反饋打擾用戶??梢允褂玫男问桨ǖ痪窒抻冢?/span>

操作反饋:點擊頁面跳轉(zhuǎn)、按鈕點擊狀態(tài)、警告提示、輸入反饋等等;

結(jié)果反饋:非模態(tài)彈窗,輕量化感知系統(tǒng)內(nèi)容反饋。(反饋內(nèi)容應盡量不要打斷用戶操作,所以一般采用toast形式,反饋結(jié)果后及時消失。)

情感反饋:搜索沒有結(jié)果時,沒有數(shù)據(jù)等等空狀態(tài)。

還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動,甚至動效等多種形式給予用戶提示反饋。

注意,越是消極的反饋,比如網(wǎng)絡連接失敗、系統(tǒng)錯誤等,越是要及時告知用戶,同時提醒用戶采取適當措施。比如:1、提交表單時,如果校驗失敗,則在填寫有誤的內(nèi)容旁邊提示錯誤原因;2、程序未響應時,系統(tǒng)會讓用戶選擇是關(guān)閉程序還是等待程序響應;



4、狀態(tài)可見性-合理的時間

系統(tǒng)應該在合理的時間內(nèi),給予用戶適當?shù)姆答?,讓用戶了解正在發(fā)生的事情。

當系統(tǒng)反饋時間小于1秒,通常正常反饋即可;相反長于1秒時,我們通常會通過加載動畫、占位符、分步加載等方式,減緩用戶等待的焦慮感。如果超過10秒還沒有得到相應,那么通常會認為這次請求是失敗的,需要給用戶失敗提示。

例如:下載提示、刷新提示、支付提示、新頁面加載提示等。







系統(tǒng)盡可能貼切用戶所在的真實環(huán)境。把復雜的系統(tǒng)語言換成用戶看得懂的語言;環(huán)境貼切原則的根本目標是讓用戶可以快速上手產(chǎn)品,降低學習成本。

《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。

該原則在設計中的體現(xiàn):

1、環(huán)境貼切-易理解的語言

這里說的語言不僅僅包括文案層面的語言,還包括產(chǎn)品的設計語言(圖形、配色、風格、動效、手勢等)設計語言都應該是易于用戶理解和認知的。產(chǎn)品使用的語言應該是目標用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產(chǎn)品完成目標。

從設計心理學角度來講,用戶在使用產(chǎn)品的過程中,其大腦會“優(yōu)待”較常用的記憶內(nèi)容和操作形式,有意抑制那些相似但不常用的內(nèi)容,以便減輕認知負擔,防止混淆,這種習慣從某種程度上來說屬于“熟知記憶”。

比如細分市場的產(chǎn)品,針對中老年、青年、兒童的產(chǎn)品或商務、娛樂的產(chǎn)品,都要分別使用符合自己的定位的語言。



反面案例就是windows系統(tǒng)出錯了頁面,一堆亂碼,看不懂又很慌張,就很不友好。另外還有一點,很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。

為了照顧不同國家的用戶的使用習慣對頁面結(jié)構(gòu)布局,風格,語言,字體,包括交互方式都會做特殊處理。這就是場景貼合原則。

2、環(huán)境貼切-模擬現(xiàn)實世界對象

模仿現(xiàn)實世界的產(chǎn)品或者使用映射,能夠利用人們現(xiàn)有的知識,可以顯著的降低用戶的認知和學習困難,并增加他們的使用興趣。

比較好的案例就是iOS原生的計算器、指南針,微信紅包都是模仿了現(xiàn)實世界的產(chǎn)品。



3、環(huán)境貼切-符合現(xiàn)實世界隱喻

從現(xiàn)實世界中借鑒的設計元素可明顯降低用戶的認知和學習難度,并且增加興趣。最有代表性的就是網(wǎng)易云的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣,且非常容易理解和使用,讓人印象深刻。



4、環(huán)境貼切-操作手勢符合聯(lián)想

使用的操作手勢,應該是用戶自然就能聯(lián)想到的,不要創(chuàng)造、更改操作手勢的意義。


5、環(huán)境貼切-自然的動效

動效的加載樣式應符合自然規(guī)律,需要平緩過渡,而不是生硬的加載效果。比如:網(wǎng)易云音樂播放時唱片轉(zhuǎn)動、停止播放時唱片自動移開,有趣且有效。




用戶在使用產(chǎn)品的過程中,誤操作是經(jīng)常發(fā)生的事情,系統(tǒng)應提供撤銷和重做功能,讓用戶具有對產(chǎn)品的控制性與自由度。

用戶可控原則的根本目標是讓用戶可以在界面自由操作,而且無需為操作不當承擔責任。

該原則在設計中的體現(xiàn):

1、可控原則-可自由導航

清晰便捷的導航方式,使用戶可自由控制返回和跳轉(zhuǎn)的頁面。

由于B端系統(tǒng)的復雜性,有些功能的層級會比較深。彈窗A中的某個操作可能會觸發(fā)彈窗B的彈出,如果彈窗A和B承載的功能具有父級和子級的關(guān)系,同樣需要考慮「返回」的功能以及清晰的層級關(guān)系。

2、可控原則-可自由返回撤銷

用戶在使用系統(tǒng)的過程也是一個試錯的過程,系統(tǒng)要讓用戶覺得自己的行為是可控的,可以犯錯,并且在犯錯之后可以反悔。用戶在使用產(chǎn)品時可以自由進退,遵循從哪里來就返回到哪里去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關(guān)功能。不可逆的操作要給用戶明顯的提示。

比如微信聊天是可以撤回的,并且撤回之后還支持重新編輯;對于我這種打字總是出錯的人簡直就是福利。iphone相冊刪除照片后,支持在短期內(nèi)找回;在word中編輯文檔時,支持撤銷和恢復,保存的同時,還能查看歷史保存記錄。



回收站功能:讓用戶更有自由度,增加用戶安全感,可控的找回誤刪除資源。



3、可控原則-不可逆轉(zhuǎn)的操作需要警告

系統(tǒng)在重要的不可逆轉(zhuǎn)的操作需要給用戶提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。在產(chǎn)品設計上,防止用戶常見的誤操作。比如很多產(chǎn)品在涉及到內(nèi)容的刪除操作時,經(jīng)常會有彈窗提醒,讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔,從而提升操作可控性。

比如iPhone ios系統(tǒng):

1、常見的二次確認主要可以通過以下方式實現(xiàn):通過文字提示,用戶閱讀后點擊是與否來進行下一步;

2、通過動作,用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作;

3、通過身份校驗,用戶需要提交個人身份信息以完成校驗;







整個系統(tǒng)要保持產(chǎn)品結(jié)構(gòu)架構(gòu)、導航、用語、色彩、操作行為交互的一致性與標準性,遵循平臺慣例與行業(yè)標準。我們在設計中常見的制作平臺規(guī)范,其實就是為了保證平臺設計的一致性。

一致性原則的根本目的是保證產(chǎn)品的專業(yè)性,給用戶帶去統(tǒng)一的體驗感受。

該原則在設計中的體現(xiàn):

1、一致性-產(chǎn)品內(nèi)部一致

遵循產(chǎn)品內(nèi)部的慣例,可幫助用戶快速學習使用產(chǎn)品功能。產(chǎn)品內(nèi)部的一致性包含:產(chǎn)品功能框架、文字、設計風格、布局、反饋等等。

比如:小熊藝術(shù)app,一款針對孩子學習美術(shù)的app,不管是首頁、個人中心以及加載等頁面,風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現(xiàn),banner、加載,課程動畫中等。不僅風格一致性、布局、反饋等產(chǎn)品內(nèi)部保持一致性,也形成了統(tǒng)一的品牌傳達。




但是,有時候為了達到產(chǎn)品目標,偶爾也會故意采用不一致的設計。

比如:常見的對話框都將“確定”按鈕放在右邊位置,所以用戶在操作時,很容易產(chǎn)生條件反射,順手點擊右邊按鈕,然后才突然發(fā)現(xiàn)自己點錯了。雖然看起來有些別扭甚至很多人不喜歡,但是很有效,這種設計在軟件卸載、App取消會員訂閱等操作中非常常見,主要是為了做一些心理暗示和引導,避免用戶卸載或退訂。



2、一致性-交互行為一致

交互和用戶的習慣一致,意味著用戶不再需要重新學習,各種應用之間的切換沒有學習成本。我們在前期已經(jīng)培養(yǎng)好用戶的使用習慣,那么就不要輕易改變,減少用戶的認知成本與學習成本。

例如:常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。



3、一致性-迭代產(chǎn)品一致

當產(chǎn)品線進行更新迭代的時候,應該保留用戶既有的交互和操作習慣,用戶在上一個版本形成的交互認知在下一個版本是否能被沿用,這對于用戶來說在產(chǎn)品體驗上會造成很大的干擾。

比如微信的多年的迭代,底部tab功能一直都是這樣,主要功能入口一致沒有變化,就體現(xiàn)了迭代產(chǎn)品的一致性。


4、一致性-同一團隊/公司產(chǎn)品線一致

Office軟件中包含的各個產(chǎn)品,其界面布局和設計風格都保持了高度一致,如下圖所示是PowerPoint和Word的界面,可以看出,二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形,都是高度類似的。



5、一致性-設計語言一致

遵循統(tǒng)一的產(chǎn)品設計規(guī)范/邏輯。這里的一致性包含產(chǎn)品和跨平臺產(chǎn)品之間的一致性。確保整個系統(tǒng)的結(jié)構(gòu)一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規(guī)則。

比如,產(chǎn)品內(nèi)相同顏色的反復出現(xiàn),為產(chǎn)品打造視覺錘符號,強化產(chǎn)品在用戶心中的記憶點。符合平臺設計規(guī)范,

蘋果系統(tǒng)參照人機交互設計指南設計規(guī)范,安卓系統(tǒng)參照Material Design設計規(guī)范,或者直接參照自己團隊的的設計規(guī)范,應該遵循慣例,并且保持系統(tǒng)的一致感,不要盲目地標新立異。



6、一致性-業(yè)內(nèi)產(chǎn)品保持一致 

不知道你發(fā)現(xiàn)了沒,現(xiàn)在的電商、音樂、社交等等app越來越一樣了,一樣的交互,一樣的排版設計,基本上都遵循著類似的交互邏輯和視覺元素。


為什么會這樣?同類軟件設計的趨同化,未必不是一件好事?

與業(yè)內(nèi)產(chǎn)品保持一致,意味著用戶不再需要重新學習,就可以在各種應用中自由切換,用戶學習成本的降低,也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規(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ā)生之后做設計

特別要注意在用戶操作具有毀滅性結(jié)果的功能時要有提示,防止用戶犯不可挽回的錯誤,需打斷用戶,提示用戶是否要進行此操作,讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。

這條原則很重要也很常見。在刪除信息時,系統(tǒng)會讓用戶確認刪除,也就是我們常說的二次確認,電商平臺允許在一定的規(guī)則下取消訂單等等。






易取原則的根本目標是提升用戶在界面上的操作效率,系統(tǒng)應直觀地協(xié)助用戶完成任務。

系統(tǒng)應協(xié)助用戶進行記憶,通過使元素、操作和選項可見,減少用戶的記憶負荷,在適合的時機給用戶需要獲取的信息。

識別比回憶要好,對于路徑較長的操作,我們更應該協(xié)助用戶記憶。比如在淘寶下單的操作路徑,每一個頁面頂部導航欄會盡可能的提醒用戶操作到哪里,用戶所有的操作信息都是可見、易獲取的,減少用戶對操作目標的記憶負擔。

該原則在設計中的體現(xiàn):

1、易取原則-易掃描

用戶心理學研究發(fā)現(xiàn),互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀,不是看,而是“掃”。這是互聯(lián)網(wǎng)用戶瀏覽的主要方式。所以我們在設計的時候,需要清晰的視覺層次結(jié)構(gòu),突出重點,弱化和剔除無關(guān)信息,降低頁面干擾,來減輕用戶閱讀成本。



2、易取原則-讓用戶選擇而不是填寫

比起讓用戶輸入,讓用戶選擇更能降低用戶的記憶成本,更好地輔助用戶做決策。如果,有很多的信息或者選項是用戶高頻率會選擇的,設計師不妨給用戶提前做好選擇,提供默認選項,如下圖:



3、易取原則-智能獲取

通過智能讀取用戶之前填寫過的信息,或者智能識別等形式,減少用戶記憶負擔與操作負擔。

常見的是寄快遞-新增地址,將用戶復制的文本字符類型進行識別并匹配,將有用的信息內(nèi)容提取出來,對體驗而言顯得高效又智能。

或者淘寶購物確認訂單時,系統(tǒng)會自動為你帶入之前的商品信息,包括選擇的商品規(guī)則、數(shù)量、價格、默認記錄顯示常用的地址等。這些信息雖然之前都選擇過,但是需要用戶在購買前二次確認,由于信息比較多,用戶很難記憶,所以確認訂單再展示出來更加合理。



比如:用手機登錄時,收到的驗證碼直接展示在軟鍵盤上,用戶無需記憶也無需輸入,直接點選即可登錄;

美團APP中,當用戶選擇商品時,系統(tǒng)會自動計算商品價格和滿減后的價格,還會幫用戶記錄選擇了哪些商品以及份數(shù),不需要用戶自己花時間去計算還差多少才能滿減等,減少用戶記憶負擔,同時節(jié)省用戶點外賣的時間,這也用到了易取原則。

訂單頁面若某信息需要用戶從一個頁面復制到另一個頁面完成查詢或編輯輸入,那就有必要為該信息提供快捷復制功能,如訂單號緊跟著一個復制按鈕。

我們在搜索一個歌名的時候,記不住完整的歌曲名,我們只要輸入關(guān)鍵的幾個詞,系統(tǒng)就是幫助我們記憶,出現(xiàn)相關(guān)的搜索。



4、易取原則-草稿箱或歷史記錄

作為用戶,你不記得的操作,系統(tǒng)可以幫你記錄。為用戶提供歷史記錄,文本創(chuàng)作的過程中自動保存草稿,讓用戶方便查詢自己的進程,這就是信息易取原則的設計。

保留歷史,最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細記錄用戶的觀看記錄,當用戶沒有看完某部電影時,下次進入直接從斷點續(xù)播上次播放的位置,無需用戶記憶上次看到哪里了;

不只是觀看記錄,視頻軟件還會幫你記錄同一賬號在不同設備上的登錄記錄,觀看記錄也會在不同設備之間進行同步。



5、易取原則-可視化

將選擇的對象,動作,選項可視化,讓用戶一看就懂。注意圖標符號化能讓人理解,避免引起誤解。

抽象圖形+文字,提供了更多的信息,更加豐富了記憶效果,避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導航欄都是以這種icon和文字相結(jié)合的形式,這就是很符合易取原則的例子。



6、易取原則-內(nèi)容可預期

在用戶使用產(chǎn)品的過程中,會有一些需要用戶記憶的內(nèi)容、或者操作路徑,在設計的時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里。同時每個頁面?zhèn)鬟f的信息量盡量少,減少用戶的閱讀壓力。

常見的例子是各類優(yōu)惠券,設計的時候會有明確的位置說明限制時間,類別等等,同時還會有清晰的入口引導去使用或者規(guī)則的入口。



7、易取原則-行為輸入代替字符輸入

這一點其實也非常好理解,一個簡單的動作,比打字要輕松得多,常見的就是在設備解鎖的時候,用手勢解鎖替代密碼解鎖。

隨著技術(shù)發(fā)展,有了更多的行為代替輸入的方式,比如指紋識別和面部識別,用簡單的操作,就可以達到進入系統(tǒng)的目的,這就避免了用戶需要較多的操作和密碼的記憶。







靈活易用原則不僅是一個交互設計原則,也代表了一種軟件產(chǎn)品設計理念:系統(tǒng)既要做得簡單、易用,讓所有用戶用起來得心應手;

靈活易用原則的根本目標是保持系統(tǒng)的靈活性,以滿足不同用戶的不同需求。既要提供必要的幫助,讓剛?cè)腴T的初級用戶順利上手,還需要支持靈活的個性化定制,讓高級用戶能夠快捷高效使用高頻功能,充分發(fā)揮其價值。

該原則在設計中的體現(xiàn):

1、靈活高效-提供定制化服務

讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能,基本上所有軟件都會提供定制化功能,從快捷鍵設置,到頁面布局,再到自定義參數(shù),軟件系統(tǒng)會盡量提供全面的個性化設置功能,來滿足不同用戶的使用訴求和習慣,提升用戶的使用效率和體驗。

例如支付寶首頁,用戶可以自定義首頁的應用。對于使用頻率比較高的老用戶來說,這是一個非常方便的功能。



還有一種是系統(tǒng)更具用戶常用自動整理歸納,以提升使用效率,減少用戶多余操作。

比如:微信的聊天表情,由于可以選擇的表情很多,正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習慣往往是循環(huán)使用其中的某幾個,所以把最近使用的表情展現(xiàn)出來,會極大的提升用戶的尋找效率。

除了從新老用戶的角度對用戶做區(qū)分,還可以從其他維度區(qū)分用戶,針對不同用戶做不同的功能。比如:微信為了讓中老年用戶使用方便,推出了關(guān)懷模式。在關(guān)懷模式下(下圖)文字更大、色彩更強、按鈕更大,還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點,讓產(chǎn)品更加靈活易用。



2、靈活高效-提高用戶使用效率

靈活高效原則在交互設計中使用會提高用戶使用效率,例如微信聊天頁面中,當用戶輸入某個字詞之后,系統(tǒng)會自動幫你匹配相應的表情包;

當你輸入某個詞之后,輸入法會幫你自動聯(lián)想接下來你可能會輸入的詞;截圖后進入微信聊天頁面后,系統(tǒng)會將你剛截的圖前置,它會自動判斷你可能想發(fā)送該截圖。如下圖:



3、靈活高效-“跳過”按鈕

通過用戶快捷跳過的入口,比如常見的:引導頁、操作手冊、還是開屏廣告,有“跳過”或者”立即進入“按鈕真的很貼心。



4、靈活高效-允許用戶重復操作

對于用戶頻繁使用的部分,提供快捷的重復使用操作,比如:外賣app,用戶可以快捷地再來一單,同時保存上一次操作記錄。



5、靈活高效-各取所需

在設計功能時,最好能考慮到不同層次用戶的需求,以此來讓用戶「各取所需」(需要平臺有多類型用戶);比如常見的Word、Photoshop等,有一個“二八定律”,就是說80%的功能是給20%的用戶使用的。

設計這類產(chǎn)品時,最常用的20%的功能一定擺在最顯著的位置上,方便所有用戶使用,而80%的高端功能,要適度隱藏,使得整個產(chǎn)品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準備的。



大數(shù)據(jù)智能判斷:

淘寶的首頁每個人推薦的商品都不相同,淘寶后臺根據(jù)用戶的瀏覽習慣,購買/收藏記錄等大數(shù)據(jù)智能判斷用戶的喜好,對商品進行千人千面的分發(fā)。

但是切記不要太過依賴大數(shù)據(jù)算法的判斷,因為一旦形成這種模式,會給用戶造成回音壁效應,你越喜歡的東西系統(tǒng)就越給你推薦,其他的商品就像回音壁一樣被吸收過濾,用戶永遠沒有辦法發(fā)現(xiàn)新的東西,讓用戶的選擇永遠都在一個死循環(huán),所以做千人千面設計時一定要適度。





優(yōu)美而簡約原則的根本目標是讓用戶快速找到界面的重要信息,引導用戶的視線及操作行為。

UI設計應該是符合大眾審美的,不需要多么酷炫,而是需要我們注重信息獲取效率,更加聚焦內(nèi)容,刪除多余的視覺表達元素,讓界面保持美觀簡約。

“快掃”是互聯(lián)網(wǎng)用戶瀏覽的主要方式。我們熟知的產(chǎn)品設計的四大基本原則:親密性、對齊、重復、對比,就是使頁面優(yōu)美而簡約的方法。

該原則在設計中的體現(xiàn):

1、優(yōu)美簡約-視覺層級關(guān)系明顯

建立清晰的視覺層級,越重要的內(nèi)容越突出,能夠方便用戶無障礙地瀏覽信息,提高用戶操作與信息獲取效率,各模塊間采用卡片或者間距區(qū)分開,加強頁面層級區(qū)分。

我們通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現(xiàn)。



2、優(yōu)美簡約-避免界面元素過于雜亂

避免界面呈現(xiàn)過多元素,包括動效、配圖、icon、按鈕等等,降低用戶的視覺干擾。保留產(chǎn)品最主要的信息,如果不是優(yōu)先級最高,要盡一切可能避免去影響產(chǎn)品的簡潔和美觀,可采用大留白增加頁面呼吸感,聚焦內(nèi)容。



3、優(yōu)美簡約-對重要信息突出顯示

用戶注意力資源有限,應該保持信息精煉,突出重要信息,弱化次要信息。



上面兩個案例通過加粗放大、標記顏色,從而讓頁面簡潔,且突出重要信息。





容錯原則的根本目標是讓那個用戶在操作出錯后還能挽回錯誤的余地,從而給用戶一致產(chǎn)品很安全貼心的感覺。

系統(tǒng)需幫助用戶識別、診斷、并為用戶從錯誤中恢復提出建設性的解決方案。通過提示性文字或者插圖讓用戶意識到出錯了,比如404頁面的情感化插圖、彈窗提示用戶出錯等。

該原則在設計中的體現(xiàn)

1、容錯原則-引起用戶注意

當發(fā)生錯誤時,提示信息一定要直觀,視覺上能夠引起用戶注意,可視化處理,文案要簡單概要,并給出解決方案。例如刪除訂單時,會提示二次確認,避免用戶誤操作。



2、容錯原則-提供解決方案

在出錯界面給出解決方案,可以是文字提醒或者按鈕跳轉(zhuǎn)等形式,幫助用戶解決問題。比如缺省頁的設計除了配置插圖還會有提示文案與操作按鈕,引導用戶去操作,去進一步解決問題。



3、容錯原則-幫助挽回損失

系統(tǒng)能幫助用戶自動甄別錯誤,并及時進行糾正時,將會給用戶帶來極大的便利,撤銷或者找回功能,都是幫用戶把損失降到最低的有效方法。

比如微信信息的消息撤回重新編輯,相冊的最近刪除、回收站等等功能。







人性化幫助原則的根本目標是用戶在使用產(chǎn)品的過程中有所依循,因為產(chǎn)品已經(jīng)貼心地為他們準備好了幫助方式,或者即時提示和反饋,或者客服。

人性化幫助用戶最好的方式分別為:1、無需提示;2、一次性提示;3、常駐提示;4、幫助文檔。

最好的就是沒有提示,用戶就能看懂與應用產(chǎn)品;其次是一次性提示,提示一次用戶就懂如何使用,比如第一次進入app或新功能上線的引導設計、通常為氣泡形式。常駐提示需要一直固定在某個位置實時幫助用戶。

最后就是幫助文檔了,一般用于解釋規(guī)則或者熱點問題,通常以超鏈接的形式存在于頁面中,或者以集合形式位于設置頁中,此時需要注意要易于檢索。

該原則在設計中的體現(xiàn):

1、人性化幫助-方便用戶查找

幫助文檔的入口容易找到,幫助信息方便用戶查找。常見的方式有:鼠標劃過懸浮文字說明,幫助用戶更好地理解。



2、人性化幫助-便于用戶理解

用戶通過查看幫助文檔來學習新功能,相對比較麻煩。如果能將教程和功能放在一起,用戶可以“邊學邊練”,就更容易讓用戶理解。

提示語避免使用專業(yè)術(shù)語,盡量使用圖片或者圖形,同時處理文字外還可以使用示意圖,操作步驟等,方便用戶應用。



3、人性化幫助-便于用戶應用

在操作時的幫助信息,比如幫助懸浮按鈕:一直出現(xiàn)在頁面固定位置,方便用戶遇到問題尋求幫助。


4、人性化幫助-信息引導

搜索時,預搜索詞直觀地顯示出來,可以讓用戶更快地做出搜索判斷。微信轉(zhuǎn)賬頁面,當用戶輸入金額較大時,會在第一位數(shù)字下方提示轉(zhuǎn)賬金額的人民幣單位,目的是為了避免用戶輸入錯誤金額導致資金損失;



5、人性化幫助-步驟引導

復雜的流程可以通過分步驟來引導用戶逐步完成,而不是一次完成所有任務。個性化的提示一次就夠了,用戶用過一次就知道其用法。




現(xiàn)在很多C端產(chǎn)品普遍做了良好的交互設計,可以幫助用戶快速學習使用,而不用閱讀、理解復雜的說明文檔。

然而,B端產(chǎn)品的復雜性比C端產(chǎn)品高很多,因為B端產(chǎn)品蘊含很多業(yè)務流程的規(guī)則,系統(tǒng)中的一個按鈕可能代表了一個復雜的業(yè)務處理規(guī)則,如果不了解整個業(yè)務場景和處理規(guī)則,是很難理解按鈕的操作含義的。

因此,對于B端產(chǎn)品,用戶進行自助服務、自助操作的難度高很多,B端產(chǎn)品的幫助文檔依然有存在的必要。產(chǎn)品設計人員要盡量在前端交互上做好引導提示,對于復雜的規(guī)則和邏輯,可以考慮通過幫助文檔來指導用戶。

總結(jié)

尼爾森十大可用性原則可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解該設計原則,可以找到更好的解決方案,提高用戶的使用體驗。要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經(jīng)驗法則,而不是具體的規(guī)定。

1、狀態(tài)可見原則:位置可見、數(shù)量可見、狀態(tài)可見;

2、環(huán)境貼近原則:語言應該是用戶所能理解和習慣的;

3、用戶可控原則:可見導航、關(guān)閉與返回、撤銷與重做;

4、一致性原則:產(chǎn)品內(nèi)部一致、交互一致、迭代產(chǎn)品一致、同一產(chǎn)品線一致、設計語言一致、業(yè)內(nèi)產(chǎn)品一致;

5、防錯原則:操作前預警、操作中確認、操作后可撤回;

6、易取原則:易掃描、智能獲取、草稿箱和歷史記錄、對象可視化、選擇代替輸入;

7、靈活高效原則:靈活配置、允許頻繁操作、各取所需;

8、優(yōu)美而簡約原則:視覺層次明顯、簡約且突出重點信息;

9、容錯原則:幫助用戶識別、診斷,并從錯誤中恢復提供方法;

10、人性化幫助原則:無需提示、一次性提示、常駐提示、幫助文檔。

最后

我準備了一些常用的設計素材送給大家,需要的話免費拿走。獲取方式:老規(guī)矩公眾號后臺,發(fā)送文字“素材”,就可以獲取了~



文中如有不嚴謹?shù)牡胤较M蠹医o予指正,希望大家可以多多點贊評論鼓勵一下,最后感謝你的耐心閱讀。






作者:789研習社      來源:站酷

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司 

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔