交互設(shè)計應(yīng)該要注意的雅各布·尼爾十大法則.
Jakob Nielsen(雅各布·尼爾森)畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機(jī)交互博士 , 他擁有79項(xiàng)美國專利,專利主要涉及讓互聯(lián)網(wǎng)更容易使用的方法。尼爾森在2000年6月,入選了斯堪的納維亞互動媒體名人堂,2006年4月,并被納入美國計算機(jī)學(xué)會人機(jī)交互學(xué)院,被賦予人機(jī)交互實(shí)踐的終身成就獎?。他還被紐約時報稱為“Web 易用性大師”,被 Internet Magazine 稱為 “易用之王”。
Jakob Nielsen(雅各布·尼爾森)的十大交互設(shè)計原則被稱為“啟發(fā)式”設(shè)計原則,因?yàn)樗鼈兪菑V泛的經(jīng)驗(yàn)法則,而不是特定的可用性指導(dǎo)原則。因此,我們不能把它做為一種標(biāo)準(zhǔn),而是當(dāng)做一種經(jīng)驗(yàn)來學(xué)習(xí)與運(yùn)用。
淺析尼爾森十大交互設(shè)計原則:
原則1:狀態(tài)可見原則
Visibility of system status
系統(tǒng)應(yīng)該時刻讓用戶清楚當(dāng)前發(fā)生了什么事情,也就是讓用戶快速的了解自己處于何種狀態(tài),?讓用清楚已發(fā)生什么、當(dāng)前目標(biāo)是什么、以及未來要怎樣,一般的方法是在合適的時間給用戶適當(dāng)?shù)姆答?,防止用戶使用出現(xiàn)錯誤。
這樣的反饋小到用戶單擊按鈕時, 通過改變按鈕顏色、狀態(tài)變化給予不同反饋,也可以應(yīng)用在更為復(fù)雜的任務(wù)操作過程中, 比如需要長時間完成加載時的時間進(jìn)度指示器; 這些指示器表明系統(tǒng)正在運(yùn)行,并減少了不確定性-防止用戶多次單擊同一按鈕,因?yàn)樗麄儾淮_定第一次是否可以運(yùn)行。
為交互式事件提供即時反饋,使用戶可以快速識別錯誤源并在錯誤發(fā)生后立即予以修復(fù)。實(shí)際上,即時反饋是直接操作的主要好處之一,直接操作是一種交互樣式,用戶可以直接對不同的UI對象進(jìn)行操作。與直接操作UI相比,命令行界面不顯示系統(tǒng)的當(dāng)前狀態(tài),也不提供即時反饋,這樣程序員知道在缺乏即時反饋的界面中定位錯誤的源可能會非常困難, 他們通常不得不求助于斷點(diǎn)和步進(jìn)之類的工具,以了解系統(tǒng)狀態(tài)如何隨著代碼中指定的每個動作而變化。
原則2:用戶可控原則
User control and freedom
用戶常常會誤觸到某些功能,系統(tǒng)應(yīng)該讓用戶可以方便的退出。這種情況下,我們應(yīng)該把“緊急出口”按鈕做的明顯一點(diǎn),而且不要在退出時彈出額外的對話框。很多用戶在進(jìn)行某些操作時、總會有忽然意識到自己不對, 需要修改撤回的地方,這個叫做臨界效應(yīng);所以最好支持撤銷/重做功能。
比如微信聊天中的撤回功能:兩個人在聊天中,A發(fā)了一條消息,突然覺得不合適,可以長按這條消息,在出現(xiàn)的選擇框中選擇撤回、或者重新編輯發(fā)送,來避免錯發(fā)消息給對方或者自己造成困擾,這就是用戶可控原則
比如相冊刪除照片之后的撤銷功能:避免誤刪除對用戶造成一些損失,這也是用戶可控原則的體現(xiàn),如下圖:
原則3:一致性原則
Consistency and standards
對于用戶來說,同樣的文字、狀態(tài)、按鈕, 業(yè)務(wù)邏輯都應(yīng)該觸發(fā)相同的事情,遵從通用的平臺慣例;同一文案、功能、操作保持一致; 軟件產(chǎn)品的一致性包括以下五個方面:
1)結(jié)構(gòu)一致性:保持一種類似的結(jié)構(gòu),新的結(jié)構(gòu)變化會讓用戶思考,規(guī)則的有邏輯的排列順序能減輕用戶的思考負(fù)擔(dān);
例如微信每個模塊的條目布局:微信中每個模塊的條目都用了統(tǒng)一的“圖標(biāo)+文字信息”的列表結(jié)構(gòu)樣式,用戶可以快速的各個模塊的操作方式,這就是結(jié)構(gòu)一致性的體現(xiàn):
2)色彩一致性:產(chǎn)品所使用的主色調(diào)應(yīng)該保持統(tǒng)一;
例如網(wǎng)易云音樂的顏色:網(wǎng)易云音樂的圖標(biāo)顏色與界面的主色均為紅色,也包括其中一些標(biāo)簽和強(qiáng)調(diào)的文字顏色都是紅色,整個界面除了圖片的有效信息外,都通過灰、白、紅色來呈現(xiàn),界面保持了很好的一致性,這就是色彩一致性原則
3)操作一致性:能讓產(chǎn)品更新?lián)Q代時仍然讓用戶保持對原產(chǎn)品的認(rèn)知,減小用戶的學(xué)習(xí)成本;
比如安卓版微信、支付寶和釘釘APP中左上角的返回操作:它們?nèi)齻€安卓版的應(yīng)用內(nèi)返回上一級操作,都是通過頂部左側(cè)的返回按鈕進(jìn)行的,當(dāng)然也可以通過安卓的物理返回鍵,這就是操作一致性的體現(xiàn)
4)反饋一致性:用戶在操作按鈕或者條目的時候,點(diǎn)擊的反饋效果應(yīng)該是一致的;
比如安卓版手機(jī)QQ信息列表的打開方式:它的信息都是列表式結(jié)構(gòu),不管你點(diǎn)擊那一行條目,下一級界面都是由右往左滑出,點(diǎn)擊頂部左上角的返回按鈕會從左往右滑回,體驗(yàn)相當(dāng)一致;這就是反饋一致性的體現(xiàn),
5)文字樣式一致性:產(chǎn)品中呈現(xiàn)給用戶閱讀的文字大小、樣式、顏色、布局等在不同頁面的相同模塊下都應(yīng)該是一致的.
原則4:環(huán)境貼切原則
Match between system and the real world
軟件系統(tǒng)應(yīng)該使用用戶熟悉的語言、文字、語句,或者其他用戶熟悉的概念,而非系統(tǒng)語言。軟件中的信息應(yīng)該盡量貼近真實(shí)世界,讓信息更自然,邏輯上也更容易被用戶理解。
案例一:
比如計算器的軟件界面設(shè)計:現(xiàn)在我們手機(jī)中的計算器軟件設(shè)計界面,基本上跟我們現(xiàn)實(shí)中使用的計算器的樣式差不多,這樣用戶會很快的帶入聯(lián)想, 快速上手,這就是環(huán)境貼切原則:
比如很多產(chǎn)品在做不同市場的時候, 會根據(jù)不同國家的文化差異, 做不同的版本設(shè)計, 如淘寶的中文版和國際版:考慮到國外用戶的購物使用習(xí)慣,aliexpress的購物圖標(biāo)位置更加突出; 軟件的語言默認(rèn)為英文,當(dāng)然還支持各種語言版本,可以根據(jù)所需在設(shè)置中調(diào)整
原則5:易取原則
Recognition rather than recall
通過把組件、按鈕及選項(xiàng)可見化,來降低用戶的記憶負(fù)荷。用戶不需要記住各個對話框中的信息。軟件的使用指南應(yīng)該是可見的,且在合適的時候可以再次查看。
比如谷歌相冊中的刪除照片操作:用一個類似垃圾桶的“圖標(biāo)”標(biāo)識刪除功能,對于用戶來講是有一定的認(rèn)知負(fù)荷的,且點(diǎn)擊“刪除”之后用戶對于造成的后果及影響也不清楚,因此,刪除之后出現(xiàn)彈窗提示很有必要,此彈窗清除的寫明了刪除之后的影響、后續(xù)的幫助說明以及操作的選項(xiàng),彈出框的出現(xiàn)很好的減少了用戶前后的記憶,這就是易取原則的體現(xiàn)
比如安卓版愛奇藝更新后的新功能引導(dǎo):更新完APP之后,當(dāng)用戶觸發(fā)到這些功能時,會出現(xiàn)下圖類型的遮罩類的提示,這些提示告訴用戶功能所在的地方以及功能的作用;這種做法在很多APP中都會出現(xiàn),這也是易取原則的一種體現(xiàn),
原則6:靈活高效原則
Flexibility and efficiency of use
有些操作對于部分人使用比較高頻, 而這些操作對于其他人使用頻率又沒有那么高, 還有一些功能需要高階玩家才能發(fā)現(xiàn), 新手用戶常常看不見, 這樣的話系統(tǒng)怎么同時滿足有經(jīng)驗(yàn)和無經(jīng)驗(yàn)的用戶、滿足不同用戶對某些功能使用頻率需求的不一樣??允許用戶定制常用功能也許是個不錯的選擇.
比如安卓版本支付寶中的編輯應(yīng)用功能:支付寶首頁的應(yīng)用是可以根據(jù)自身喜好自定義的,包括定義常用應(yīng)用、排序、刪除、新增等等;這樣用戶可以根據(jù)自己的個人興趣定制自己適合的應(yīng)用分布方式,這就叫做用戶定制常用功能,也就是靈活高效原則的一種體
比如蘋果手機(jī)長按圖標(biāo)彈出的快捷操作按鈕, 每次坐地鐵的時候都比別人動作快:).
原則7:優(yōu)美且簡約原則
Aesthetic and minimalist design
對話中的內(nèi)容應(yīng)該去除不相關(guān)的信息或幾乎不需要的信息。任何不相關(guān)的信息都會讓原本重要的信息更難被用戶察覺。
蘋果手機(jī)中自帶的軟件(IOS11設(shè)計規(guī)范):在新版本的蘋果手機(jī)中自帶的軟件中標(biāo)題都屬于字體放大,界面簡潔的設(shè)計風(fēng)格;還有蘋果自帶的音樂軟件中,段落中的標(biāo)題和正文區(qū)別是很明顯的,標(biāo)題明顯很大,而正文部分相對較小,這就是優(yōu)美簡約原則的體現(xiàn),
例如蘋果App Store中的今日推薦功能,卡片式設(shè)計中, 融入圖標(biāo)與列表, 形式感統(tǒng)一,卡片在圓角與投影的處理上細(xì)膩且有質(zhì)感, 在內(nèi)容上, 圖標(biāo)加文字與操作, 沒有別的多余信息, 保持了信息簡潔易讀與美觀.
原則8:防錯原則
Error prevention
比一個優(yōu)秀錯誤提醒彈窗更好的設(shè)計方式,是在這個錯誤發(fā)生之前就避免它??梢詭椭脩襞懦恍┤菀壮鲥e的情況,或在用戶提交之前給他一個確認(rèn)的選項(xiàng)。在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。
比如知乎安卓版本的登錄操作:當(dāng)用戶在知乎中登錄時,在沒有填寫完手機(jī)號碼和密碼前,底部的登錄按鈕是置灰不可點(diǎn)擊的,只有兩項(xiàng)都填寫完整底部的登錄按鈕才會變?yōu)榭牲c(diǎn)擊狀態(tài),也就會藍(lán)色的,這就是為了防止用戶犯更多錯誤,也是防錯原則的一種體現(xiàn),如下圖:
比如安卓版微信發(fā)朋圈動態(tài)時,點(diǎn)擊返回按鈕出現(xiàn)的提示彈窗:彈出框方式會增加不可逆操作的難度,當(dāng)用戶發(fā)一條動態(tài)一半的時候,因?yàn)檎`操作或者其它退出當(dāng)前狀態(tài)的時候,使用彈窗是是個不錯的選擇,因?yàn)橛脩暨@個操作會讓之前辛苦編輯的內(nèi)容刪除找不回,想要再發(fā)只能從頭開始,對用戶造成損失比較大;這就是防錯原則的另外一種體現(xiàn)
原則9:容錯原則
Help users recognize, diagnose, and recover from errors
錯誤信息應(yīng)該使用簡潔的文字(不要用代碼),指出錯誤是什么,并給出解決建議。也就是在用戶出錯時如何為出錯的用戶提供及時正確的幫助呢?即要幫助用戶識別出錯誤,分析出錯誤的原因再幫助用戶回到正確的道路上。如果真的不能幫助用戶從錯誤中恢復(fù),也要盡量為用戶提供幫助讓用戶損失降到最低。
比如yandex PC端的登錄注冊界面:通過密碼的強(qiáng)弱是否一致, 來提醒用戶正確的輸入密碼;
?當(dāng)用戶按照要求填寫時, 會給出正確的反饋, 填寫錯誤的時候給出錯誤的原因, 這種提示做的很輕盈, 不會打斷用的操作, 但是又足以讓用戶重視起來; 這是一種相當(dāng)好的用戶體驗(yàn),也是容錯原則的一種體現(xiàn)。
例如Twitter注冊頁面的錯誤提示:用戶在注冊Twitter賬號時,第一步要輸入名字和手機(jī)號碼,當(dāng)用戶輸入正確的時候,輸入框后邊會有綠色的對勾圓圈,提示用戶輸入正確,可以進(jìn)入下一步操作了,而當(dāng)用戶輸入錯誤的時候,輸入框會變?yōu)榧t色并且在下方出現(xiàn)紅色字的錯誤提示,這樣讓用戶很清楚的知道用戶輸入錯誤以及錯誤的原因,這樣用戶就知道怎么修改了,這也是容錯原則的一種體現(xiàn)。
原則10:人性化幫助原則
Help and documentation
即使系統(tǒng)不適用幫助文檔是最好的,但我們也應(yīng)該提供一份幫助文檔。任何幫助信息都應(yīng)該可以方便地搜索到,以用戶的任務(wù)為核心,列出相應(yīng)的步驟,但文字不要太多。
例如淘寶APP和知乎APP登錄頁面的幫助入口:在比較重要的功能入口處有必要提供相應(yīng)的幫助入口,來解決用戶在操作功能過程中遇到的問題或者反饋問題的入口,不要讓用戶在出現(xiàn)問題時手足無措,不知道怎么辦。
以上就是對Jakob Nielsen(雅各布·尼爾森)的十大交互設(shè)計原則的分析, 希望對大家有所幫助。