設(shè)計(jì)師必讀!尼爾森原則在B端設(shè)計(jì)中的應(yīng)用
隨著互聯(lián)網(wǎng)的發(fā)展,交互體驗(yàn)成為了B端產(chǎn)品設(shè)計(jì)師重要的考量因素。本篇文章介紹尼爾森原則在B端設(shè)計(jì)中的應(yīng)用,從十個(gè)原則入手,通過(guò)尼爾森原則來(lái)優(yōu)化用戶體驗(yàn)設(shè)計(jì)。
寫這篇文章的初衷,是隨著互聯(lián)網(wǎng)的發(fā)展,B端產(chǎn)品對(duì)設(shè)計(jì)師的要求越來(lái)越高,除了視覺(jué)上的呈現(xiàn),交互體驗(yàn)也成為了重要的考量因素。
但是在實(shí)際工作中,B端設(shè)計(jì)師的話語(yǔ)權(quán)卻不高,作為設(shè)計(jì)師的我們除了“修煉”好視覺(jué)上的呈現(xiàn),更需要用理論“武裝”自己,讓自己的設(shè)計(jì)“有理有據(jù)”。
尼爾森原則是尼爾森博士在分析了兩百多個(gè)可用性問(wèn)題的基礎(chǔ)上,提煉出的十項(xiàng)交互設(shè)計(jì)原則,作為體驗(yàn)設(shè)計(jì)領(lǐng)域的重要理論框架。
該原則無(wú)論是在設(shè)計(jì)前期規(guī)劃還是后期驗(yàn)證,都能很好的幫助設(shè)計(jì)師對(duì)產(chǎn)品進(jìn)行評(píng)估反饋和優(yōu)化,更好地解決用戶需求,設(shè)計(jì)出更符合用戶體驗(yàn)的產(chǎn)品。
本文將結(jié)合B端設(shè)計(jì)的實(shí)例,介紹尼爾森原則在B端設(shè)計(jì)中的應(yīng)用,探討如何通過(guò)尼爾森原則來(lái)優(yōu)化用戶體驗(yàn)設(shè)計(jì),提高產(chǎn)品滿意度。
一、狀態(tài)可見(jiàn)性原則
“設(shè)計(jì)應(yīng)該通過(guò)在合理的時(shí)間內(nèi)提供適當(dāng)?shù)姆答?,始終讓用戶了解正在發(fā)生的事情”。——雅各布·尼爾森(Jakob Nielsen)
用戶使用系統(tǒng),需要時(shí)刻了解自己的操作是否已經(jīng)被系統(tǒng)識(shí)別,并開始執(zhí)行自己的操作,所以合理時(shí)間的適當(dāng)反饋,能讓用戶及時(shí)了解當(dāng)前操作的執(zhí)行情況。
1. 合理的時(shí)間
0.1秒是用戶瞬間感受的界限。這期間不需要任何提示,可直接顯示結(jié)果。比如,當(dāng)用戶單擊菜單,在0.1s之內(nèi)彈出,用戶感覺(jué)是立即發(fā)生的,超過(guò)0.1s,就會(huì)有非即時(shí)的感覺(jué)。
0.1s-1s:用戶感覺(jué)到了延遲,但仍然感覺(jué)流暢并保持連續(xù)的操作,一般來(lái)講,延遲在0.1秒~1秒之間,是不需要特殊提示的。
1)輕提示
1s-2s:一般可以有一個(gè)輕提示,給用戶操作及時(shí)反饋。
2)加載
對(duì)于2s~10s的操作,沒(méi)有必要使用進(jìn)度條。因?yàn)檫M(jìn)度過(guò)快顯示會(huì)有閃爍,體驗(yàn)并不友好,這時(shí)可以使用占位塊或加載動(dòng)畫,減少用戶等待的焦慮感。
3)進(jìn)度條
10s是用戶專注于單一任務(wù)的極限。對(duì)于超過(guò)10s延遲,在計(jì)算機(jī)執(zhí)行的過(guò)程中應(yīng)當(dāng)給用戶加載提示,告知當(dāng)前進(jìn)度。
4)超時(shí)、失敗反饋
如果沒(méi)有成功,應(yīng)該給出失敗的反饋,最好能給予解決措施,減少用戶的記憶負(fù)擔(dān)(后文會(huì)講到)。B端的設(shè)計(jì)也可以加入運(yùn)營(yíng)的元素,讓頁(yè)面更加風(fēng)格化、品牌化。
2. 適當(dāng)?shù)姆答?/h3>
不同功能和場(chǎng)景下,應(yīng)該給予不同的反饋機(jī)制,同時(shí)需要保證反饋的及時(shí)性,否則容易造成用戶的困擾。
1)位置反饋
B端設(shè)計(jì)的導(dǎo)航占有很大權(quán)重,這些導(dǎo)航都是為了讓用戶時(shí)刻清楚自己所在的系統(tǒng)位置,方便進(jìn)行后續(xù)操作。
2)狀態(tài)反饋
用戶操作后,應(yīng)第一時(shí)間給予反饋,明確當(dāng)前的操作狀態(tài)。一般會(huì)分為:“默認(rèn)狀態(tài)”、“hover狀態(tài)”、“按下?tīng)顟B(tài)”、“不可用狀態(tài)”。
并不是每種狀態(tài)在每一個(gè)部分都需要體現(xiàn),需要設(shè)計(jì)師根據(jù)系統(tǒng)的設(shè)計(jì)進(jìn)行理性判斷。
3)進(jìn)度反饋
B端設(shè)計(jì)中的進(jìn)度反饋,一般反應(yīng)步驟和當(dāng)前位置。需要讓用戶了解發(fā)生了什么和即將發(fā)生什么,最好也能體現(xiàn)出狀態(tài)及原因。
4)其他反饋
反饋的形式不只局限于以上列舉的幾種,還可以有文字、顏色、動(dòng)效等多種反饋形式。
二、系統(tǒng)與現(xiàn)實(shí)世界貼近原則
“使用用戶熟悉的語(yǔ)言,遵循現(xiàn)實(shí)世界的慣例,使信息以合乎邏輯的順序出現(xiàn)”。——雅各布·尼爾森(Jakob Nielsen)
在系統(tǒng)中,我們應(yīng)該使用用戶熟悉的語(yǔ)言、文字、概念,使用生活中已有的物品作為比喻,方便用戶的理解,減少信息的理解難度。
1. 使用目標(biāo)用戶的語(yǔ)言
要讓用戶更好的使用產(chǎn)品,更精準(zhǔn)的匹配用戶的友好體驗(yàn),就需要使用目標(biāo)用戶所熟悉的語(yǔ)言來(lái)進(jìn)行設(shè)計(jì)表達(dá),讓用戶感受到我們的專業(yè)度和定制化。
在B端設(shè)計(jì)中,可以按照行業(yè)、業(yè)務(wù)和模式進(jìn)行簡(jiǎn)單的分類,每一種分類中都有特定的用戶語(yǔ)言習(xí)慣。
作為設(shè)計(jì)人員,我們應(yīng)根據(jù)行業(yè)來(lái)進(jìn)行流程、命名、配色等方面的設(shè)計(jì),確保使用人員能夠準(zhǔn)確的操作系統(tǒng)。
2. 使用現(xiàn)實(shí)世界的隱喻
在可視化大屏設(shè)計(jì)中,常常會(huì)涉及到運(yùn)行流程,業(yè)務(wù)流程,數(shù)據(jù)匯聚過(guò)程等抽象和專業(yè)性極強(qiáng)的展示。將現(xiàn)實(shí)世界中的元素提取出來(lái),帶入到視覺(jué)設(shè)計(jì)中去,極大的降低了用戶的認(rèn)知難度。
三、操作可控性原則
“當(dāng)用戶錯(cuò)誤地選擇了的某個(gè)功能后,系統(tǒng)需要提供一個(gè)明確的「緊急出口」,來(lái)讓用戶離開這個(gè)不想要的狀態(tài),無(wú)需額外的對(duì)話。支持撤銷和重做”。——雅各布·尼爾森(Jakob Nielsen)
這個(gè)原則也比較好理解,放在現(xiàn)實(shí)中就是,你總要給人一個(gè)“改過(guò)自新”的機(jī)會(huì)。犯錯(cuò)不可怕,不要讓用戶有過(guò)重的心理負(fù)擔(dān),不敢亂點(diǎn),怕出現(xiàn)什么不可挽回的錯(cuò)誤。
我們當(dāng)然不鼓勵(lì)亂點(diǎn),但是需要幫助用戶對(duì)失誤操作進(jìn)行改正。
1. 可撤回可反饋
用戶在使用系統(tǒng)的時(shí)候,必須能夠清晰的了解自己是從哪個(gè)頁(yè)面來(lái),返回到哪個(gè)頁(yè)面去。
在設(shè)計(jì)界面的時(shí)候,頭腦中一定要明確,子任務(wù)和二三級(jí)界面是否有返回按鈕,返回到哪個(gè)層級(jí),信息是否連貫。這是一個(gè)基礎(chǔ)的驗(yàn)證反饋。
2. 不可逆操作給予警示
對(duì)于一些不可逆的操作(比如刪除數(shù)據(jù)庫(kù),刪除有關(guān)聯(lián)信息的操作等),在操作前應(yīng)給予警示,操作時(shí)給予二次提醒,以免操作后產(chǎn)生重大影響,造成不可挽回的損失。
四、一致性和標(biāo)準(zhǔn)化原則
“不應(yīng)該讓用戶懷疑不同的話語(yǔ)、場(chǎng)景或行為是否在表達(dá)同樣的一件事情。系統(tǒng)設(shè)計(jì)需遵循平臺(tái)慣例,保持一致性”。——雅各布·尼爾森(Jakob Nielsen)
一致性原則也非常容易理解,這也應(yīng)該是設(shè)計(jì)師們最熟知的原則,我簡(jiǎn)單的將這個(gè)原則劃分為內(nèi)部的一致性與外部的一致性。
從產(chǎn)品設(shè)計(jì)來(lái)看無(wú)論是在設(shè)計(jì)風(fēng)格還是交互體驗(yàn),都應(yīng)保證內(nèi)在的一致性,符合用戶的預(yù)期。
從行業(yè)來(lái)看,產(chǎn)品也應(yīng)符合行業(yè)屬性,遵循行業(yè)方面固有的慣例(如果涉及到出海設(shè)計(jì),也需要遵循當(dāng)?shù)赜脩袅?xí)慣和文化特點(diǎn))。
1. 內(nèi)部一致性
內(nèi)部一致性,就是產(chǎn)品本身的界面設(shè)計(jì)風(fēng)格、字體、主題色、輔助色、交互體驗(yàn)等各個(gè)方面保持一致,設(shè)計(jì)的產(chǎn)品符合規(guī)范。大廠們會(huì)出的組件庫(kù),就是為了保證出的產(chǎn)品內(nèi)部一致性。
我們可以直接使用,也可以根據(jù)自己公司產(chǎn)品使用規(guī)范整理歸納一套自己的組件設(shè)計(jì)規(guī)范。使用組件庫(kù)的好處就是,方便多方協(xié)作,保證統(tǒng)一性,復(fù)用資源,降低設(shè)計(jì)成本,提高開發(fā)效率。
內(nèi)部一致性可以從以下幾個(gè)方面進(jìn)行檢驗(yàn),驗(yàn)證設(shè)計(jì)的產(chǎn)品是否符合內(nèi)部一致性原則:
- 整體布局。布局作為頁(yè)面的基本構(gòu)成是中后臺(tái)統(tǒng)一的基礎(chǔ),奠定了整個(gè)中后臺(tái)交互和視覺(jué)風(fēng)格,在B端產(chǎn)品中,使用柵格系統(tǒng),提高界面內(nèi)布局的一致性,方便適配。
- 字體、顏色、圖標(biāo)。系統(tǒng)中需要對(duì)字體、行高、字重、字色、幾個(gè)維度去規(guī)范統(tǒng)一文字系統(tǒng);顏色方面也需要充分考慮色彩的應(yīng)用需求,符合無(wú)障礙的標(biāo)準(zhǔn);整體圖標(biāo)也應(yīng)規(guī)范統(tǒng)一,明確圖標(biāo)樣式(線性、面形等),遵從「從簡(jiǎn)」「精確」「適度」的原則。
- 動(dòng)效。動(dòng)效在符合緩動(dòng)曲線規(guī)律的前提下,同類型同級(jí)別的頁(yè)面,動(dòng)態(tài)效果要盡可能保持一致,符合用戶預(yù)期,此處不需要出其不意的效果,需低調(diào)實(shí)用的動(dòng)效~!
2. 外部一致性
外部一致性,主要是指遵循行業(yè)慣例。
金融類產(chǎn)品中,在國(guó)內(nèi),紅色代表上漲,綠色代表下跌;而在國(guó)外的金融類產(chǎn)品中,綠色代表上漲,紅色反而代表了下跌。
比如B端設(shè)計(jì)系統(tǒng),一般使用1440*900的尺寸進(jìn)行設(shè)計(jì),向上向下兼容都比較方便。
比如醫(yī)療產(chǎn)品一般使用藍(lán)色或綠色作為產(chǎn)品主色調(diào),更多的體現(xiàn)出產(chǎn)品的調(diào)性。這些規(guī)律作為設(shè)計(jì)師的我們是需要遵循和借鑒的。
五、防錯(cuò)原則
“好的錯(cuò)誤提示很重要,但最好的設(shè)計(jì)會(huì)從一開始就謹(jǐn)慎地防止問(wèn)題的發(fā)生。要么消除容易出錯(cuò)的條件,要么檢查它們并在用戶提交操作之前向用戶提供確認(rèn)選項(xiàng)”。——雅各布·尼爾森(Jakob Nielsen)
防錯(cuò)原則顧名思義就是防止錯(cuò)誤的發(fā)生,操作前的提示或限制,可以有效避免部分用戶的操作失誤,操作后提交前應(yīng)二次確認(rèn),防止錯(cuò)誤發(fā)生。
1. 操作前的提示或限制
在用戶操作動(dòng)作發(fā)生前,可以通過(guò)限制用戶點(diǎn)擊來(lái)進(jìn)行限制,防止用戶選擇或者提交錯(cuò)誤信息。
2. 提交前的二次確認(rèn)
在用戶操作后提交前,應(yīng)給予用戶二次確認(rèn),或合理建議,也可以有效避免用戶的操作錯(cuò)誤。
無(wú)論是在提交信息的錯(cuò)誤提示,還是輸入驗(yàn)證碼后的提示,還是彈窗的二次確認(rèn),都是為了打斷用戶當(dāng)前動(dòng)作,讓用戶注意檢查上一步的操作,確保下一步的正確性。
六、協(xié)助記憶原則
“通過(guò)使元素、操作和選項(xiàng)可見(jiàn),最大限度地減少用戶的記憶負(fù)荷。用戶不必記住從界面的一部分到另一部分的信息。使用設(shè)計(jì)所需的信息(例如字段標(biāo)簽或菜單項(xiàng))應(yīng)該是可見(jiàn)的或在需要時(shí)易于檢索”。——雅各布·尼爾森(Jakob Nielsen)
讓用戶減少識(shí)別記憶的時(shí)間,更多的提供給用戶選擇而不是輸入信息,就是盡可能讓產(chǎn)品來(lái)幫助用戶記住信息,方便用戶操作。
1. 記住用戶的操作
需要考慮某些信息是不是可以自動(dòng)化的記憶,比如用戶登錄時(shí)的「記住密碼」功能。
比如在B端工作臺(tái)中根據(jù)用戶的使用頻率,將常用功能入口放在首頁(yè)。在導(dǎo)航中加入「近期項(xiàng)目」的快速入口,幫助用戶快速操作。
2. 選擇而不是輸入
選擇和輸入,對(duì)于用戶來(lái)說(shuō),這兩項(xiàng)操作的成本相差巨大,大多數(shù)用戶并不愿意在輸入上花費(fèi)太多的時(shí)間。
所以我們?cè)谠O(shè)計(jì)產(chǎn)品界面的時(shí)候,也應(yīng)該考慮到這方面的需求,盡可能多的去幫助用戶提供選擇,而不是一個(gè)簡(jiǎn)單的輸入框。
七、靈活高效原則
“一些快捷操作的功能,雖然會(huì)被新手用戶忽略,但可能為專家用戶所使用并幫助提升其使用效率。因此,系統(tǒng)需要同時(shí)滿足新手用戶和專家用戶的需求。允許用戶頻繁地操作”。——雅各布·尼爾森(Jakob Nielsen)
在設(shè)計(jì)系統(tǒng)的過(guò)程中有一個(gè)永恒的難題就是如何設(shè)計(jì)出一種簡(jiǎn)單、一致的界面,同時(shí)滿足初學(xué)者和滿足專家用戶的需求。
在現(xiàn)實(shí)開發(fā)過(guò)程中,我們習(xí)慣于創(chuàng)造出適合專家用戶需求的產(chǎn)品,傾向于界面中的每個(gè)功能都同等看待。
但在實(shí)際中卻不這么理想,我們的設(shè)計(jì)應(yīng)該照顧到絕大多數(shù)的用戶群里,更傾向于中間用戶。
1. 針對(duì)新手用戶
新進(jìn)入一個(gè)系統(tǒng)中,往往都會(huì)先有個(gè)新手引導(dǎo),就像玩游戲里面的「新手村」,教你簡(jiǎn)單的認(rèn)識(shí)系統(tǒng),最常用的操作位置等。
需要注意的是,好的設(shè)計(jì)允許你跳過(guò)引導(dǎo)操作,并且除非你從“關(guān)于”或者“設(shè)置”里再次打開,否則絕不再次主動(dòng)打擾你。
2. 針對(duì)專家用戶
針對(duì)專家用戶,產(chǎn)品需要具備靈活的配置方式。不僅工作臺(tái)首頁(yè),針對(duì)任務(wù)字段也可以進(jìn)行靈活的配置,不同的項(xiàng)目可具備不同的字段配置,更加方便專家用戶的使用習(xí)慣。
3. 普遍的中級(jí)用戶
其實(shí)大多數(shù)用戶既非新手又非專家,而是屬于中級(jí)用戶。中級(jí)用戶既非新手,對(duì)系統(tǒng)完全不熟悉,也非專家,可以完全自定義系統(tǒng)。
針對(duì)大部分的中級(jí)用戶,應(yīng)該將最常用的功能放在最方便的位置,方便用戶快速找到最常用的功能,按照業(yè)務(wù)流程來(lái)進(jìn)行設(shè)計(jì),快速降低系統(tǒng)學(xué)習(xí)難度。
八、簡(jiǎn)約設(shè)計(jì)原則
“不應(yīng)包含不相關(guān)或很少需要的信息。界面中每一個(gè)額外的信息單元都會(huì)與相關(guān)的信息單元競(jìng)爭(zhēng),并降低它們的相對(duì)可見(jiàn)性”。——雅各布·尼爾森(Jakob Nielsen)
B端設(shè)計(jì)不像C端設(shè)計(jì)一樣,要求在視覺(jué)上第一眼抓住用戶的眼球,但是B端設(shè)計(jì)對(duì)信息分類的要求比較高,頁(yè)面要清晰的呈現(xiàn)表達(dá)的信息,減少不必要的干預(yù)。
1. 建立清晰的視覺(jué)層級(jí)
無(wú)論做何種設(shè)計(jì),都應(yīng)將頁(yè)面進(jìn)行層級(jí)的劃分,分清主次內(nèi)容,幫助用戶劃分出信息層級(jí),并做好歸類,方便用戶無(wú)障礙的進(jìn)行瀏覽。
尤其是B端設(shè)計(jì)師,用戶群體,都是對(duì)產(chǎn)品比較依賴的,使用頻率也比較高。作為B端設(shè)計(jì)師的我們更應(yīng)該從用戶的角度思考,幫助用戶處理信息,方便用戶提高效率。
2. 設(shè)計(jì)四大基本原則
建立清晰簡(jiǎn)約的設(shè)計(jì)落在界面上無(wú)非就是大家都知道的四大原則「對(duì)齊」「對(duì)比」「重復(fù)」「親密性」。很多反饋說(shuō)界面不精致,可以從這四個(gè)方面入手進(jìn)行修改。
前面所講到的一致性和標(biāo)準(zhǔn)化原則,也需要在這四大原則的基礎(chǔ)上進(jìn)行設(shè)計(jì)。
九、容錯(cuò)原則
“錯(cuò)誤信息應(yīng)該用通俗的語(yǔ)言表達(dá),較準(zhǔn)確地反應(yīng)問(wèn)題所在,并且提出解決方案,避免通過(guò)代碼等用戶難以理解的形式”。——雅各布·尼爾森(Jakob Nielsen)
如果用戶在操作過(guò)程中出現(xiàn)了問(wèn)題,系統(tǒng)應(yīng)該清晰明確的告知用戶出現(xiàn)問(wèn)題的原因,并提出解決方案,幫助用戶順利完成操作。
1. 清楚告知錯(cuò)誤
當(dāng)用戶發(fā)生錯(cuò)誤時(shí),應(yīng)清楚的告知錯(cuò)誤原因,提示信息要明確、直觀,避免用戶產(chǎn)生疑惑。
比如在輸入密碼的報(bào)錯(cuò),應(yīng)明確告知用戶是輸入格式錯(cuò)誤,還是輸入密碼錯(cuò)誤;無(wú)法顯示正確頁(yè)面的報(bào)錯(cuò)時(shí),應(yīng)明確告知是網(wǎng)絡(luò)問(wèn)題,還是操作問(wèn)題。
2. 提供解決方案
當(dāng)用戶發(fā)生錯(cuò)誤時(shí),除了清楚的告知原因,還需要幫助用戶提供正確的解決方案,不要只是報(bào)錯(cuò)。
比如返回到前一個(gè)頁(yè)面、提供撤銷操作,或者提供詳盡的文字說(shuō)明和指導(dǎo),幫助用戶解決當(dāng)前問(wèn)題。
十、人性化幫助原則
“能讓用戶無(wú)需閱讀文檔就會(huì)使用是最好的方式,但大多情況下,可能還得提供幫助文檔。幫助文檔的信息應(yīng)該易于被搜索,聚焦于用戶的任務(wù),并列出具體的步驟,而且,不能太龐大”。——雅各布·尼爾森(Jakob Nielsen)
人性化幫助原則就好像我們現(xiàn)實(shí)生活中的說(shuō)明書功能,介紹清楚產(chǎn)品的屬性和特點(diǎn),幫助用戶快速上手熟悉產(chǎn)品,熟練使用。
1. 主動(dòng)幫助
主動(dòng)幫助的目的是讓用戶快速熟悉產(chǎn)品,通常會(huì)發(fā)生在以下幾種情況下:
- 首次啟動(dòng)界面的新用戶。
- 現(xiàn)有產(chǎn)品發(fā)布新功能或重新設(shè)計(jì)了新的界面。
- 常駐提示、懸停提示等。
2. 反應(yīng)式幫助
反應(yīng)式幫助是為響應(yīng)用戶遇到的問(wèn)題而提供的。
反應(yīng)式幫助的目的是回答用戶提問(wèn)、解決用戶問(wèn)題,或者為想要成為專家用戶的人提供詳細(xì)的文檔和資料。
反應(yīng)式幫助以常見(jiàn)問(wèn)題解答、技術(shù)文檔或培訓(xùn)視頻等形式。
本文由 @Wincy_Fu?? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!