交互設(shè)計(jì)師必懂的尼爾森十大原則
尼爾森十大原則作為交互設(shè)計(jì)師的基礎(chǔ)理論知識(shí),各位設(shè)計(jì)師需要聊熟于心。
前段時(shí)間在某個(gè)群里看到有個(gè)小伙伴說(shuō),他在面試的時(shí)候面試官讓他說(shuō)尼爾森的十大可用性原則。
雖說(shuō)尼爾森10大可用性原則是交互設(shè)計(jì)師的基礎(chǔ)理論知識(shí),但是實(shí)際上,不知道或者不完全知道的小伙伴也有很多,今天就以實(shí)例跟大家聊聊尼爾森十大原則。
系統(tǒng)狀態(tài)可見(jiàn)性
定義:系統(tǒng)應(yīng)該在適當(dāng)?shù)臅r(shí)間內(nèi)做出適當(dāng)?shù)姆答?,告知用戶?dāng)前的系統(tǒng)狀態(tài);該原則強(qiáng)調(diào),產(chǎn)品要給用戶適當(dāng)?shù)姆答仭?/p>
當(dāng)頁(yè)面在加載的時(shí)候,需要告訴用戶頁(yè)面在加載,而不是空白的頁(yè)面。
再比如按鈕的點(diǎn)擊,以前網(wǎng)速比較慢,當(dāng)你點(diǎn)擊完按鈕時(shí),無(wú)法立馬打開(kāi)新的頁(yè)面,需要等一會(huì)兒。
如果沒(méi)有點(diǎn)擊反饋,那么用戶很可能以為自己沒(méi)有點(diǎn)上,然后重復(fù)點(diǎn)擊,導(dǎo)致一下子會(huì)打開(kāi)很多重復(fù)頁(yè)面。
再來(lái)看這個(gè)例子,當(dāng)你收到了微信的Push。于是,你點(diǎn)開(kāi)微信,發(fā)現(xiàn)沒(méi)有任何新消息。你會(huì)不會(huì)在想剛剛明明是告訴我微信有新消息的,為什么沒(méi)有?是軟件出了問(wèn)題?是自己網(wǎng)絡(luò)出了問(wèn)題?還是手機(jī)出了問(wèn)題?
現(xiàn)在又收到了微信的Push,于是點(diǎn)開(kāi)了微信,發(fā)現(xiàn)聊天窗口有一個(gè)記錄顯示“對(duì)方撤回了一條消息”。這時(shí)你就知道了,原來(lái)他剛剛給我發(fā)了一條消息然后撤回了,怪不得沒(méi)有新消息。這就是為什么當(dāng)對(duì)方撤回消息時(shí),微信會(huì)給出提示。
系統(tǒng)與現(xiàn)實(shí)世界相匹配
定義:系統(tǒng)應(yīng)該使用用戶熟悉的詞、句、語(yǔ)法,應(yīng)該符合真實(shí)世界中的使用習(xí)慣;該原則強(qiáng)調(diào),產(chǎn)品要使用用戶語(yǔ)言。
比如這些彈窗的文案,簡(jiǎn)潔明了,通俗易懂。如果我們?cè)谖陌钢袑憽包c(diǎn)擊主按鈕”即可參與,那么很多用戶就會(huì)不理解“主按鈕”是什么意思。
用戶控制與自由
定義:用戶在使用產(chǎn)品時(shí)經(jīng)常會(huì)誤操作,因此需要一個(gè)非常明確的“緊急出口”來(lái)幫助他們脫離困境,需要支持撤銷與重做;該原則強(qiáng)調(diào),產(chǎn)品需要支持用戶“反悔”。
作為設(shè)計(jì)師,撤銷、重做的重要性大家都知道,你想萬(wàn)一你每次只要畫錯(cuò)一點(diǎn)點(diǎn)就要從頭開(kāi)始重新畫,那得多崩潰。
Gmail一次性將多個(gè)郵件標(biāo)為已讀時(shí),會(huì)有“撤銷”功能,防止出現(xiàn)誤操作,將重要未讀的郵件標(biāo)記已讀。
當(dāng)你在打字時(shí),搖動(dòng)手機(jī)即可撤銷輸入的內(nèi)容,當(dāng)你刪除了部分文案時(shí),搖動(dòng)手機(jī)即可恢復(fù)刪除的內(nèi)容。
一致性與標(biāo)準(zhǔn)化
定義:產(chǎn)品的信息架構(gòu)、交互方式、功能名詞、視覺(jué)表現(xiàn)等應(yīng)該具有一致性;該原則強(qiáng)調(diào),產(chǎn)品需要具有一致性。
一致性大到產(chǎn)品的架構(gòu),小到icon、文案,利用設(shè)計(jì)系統(tǒng)可以協(xié)助我們保持產(chǎn)品的一致性。
預(yù)防錯(cuò)誤
定義:無(wú)論錯(cuò)誤場(chǎng)景設(shè)計(jì)的多好看,都不如在第一時(shí)間防止用戶發(fā)生錯(cuò)誤;該原則強(qiáng)調(diào),產(chǎn)品需要有防錯(cuò)機(jī)制。
填寫銀行卡信息時(shí),由于數(shù)字過(guò)長(zhǎng),因此我們將銀行卡填寫時(shí)以4位數(shù)字為一組便于用戶輸入,這個(gè)也屬于一種防錯(cuò)機(jī)制。
同樣的,手機(jī)號(hào)登錄時(shí),將手機(jī)號(hào)分成344形式也可以降低錯(cuò)誤率,便于用戶檢查輸入的正確性。
再比如支付寶兌換頁(yè)面,提示用戶積分不足同時(shí)按鈕置灰,也屬于防錯(cuò)機(jī)制。
當(dāng)出現(xiàn)危險(xiǎn)操作或者不可逆操作時(shí),會(huì)進(jìn)行二次確認(rèn),防止用戶出現(xiàn)錯(cuò)誤。
辨認(rèn)而不是回憶
定義:將用戶的記憶負(fù)擔(dān)最小化,盡可能減少讓用戶去記住信息,應(yīng)該提供信息讓用戶辨認(rèn)。
我經(jīng)常遇到這樣的情況,讓我說(shuō)XX歌是怎么唱的,我說(shuō)不上來(lái),但是如果有音樂(lè)我就能知道是什么歌,這是就是辨認(rèn)與回憶的差別。
淘寶搜索時(shí),使用關(guān)鍵詞聯(lián)想,這種情況下,即便有些商品名稱記得不完全,我們也能輕松搜到。
有些歌名很長(zhǎng),很難記住,因此QQ音樂(lè)的關(guān)鍵詞聯(lián)想也解決了這個(gè)問(wèn)題。
靈活性與使用效率
定義:無(wú)論是老手還是小白,都能夠輕松高效的使用產(chǎn)品。
當(dāng)產(chǎn)品進(jìn)行大版本迭代時(shí),會(huì)出現(xiàn)引導(dǎo)彈窗來(lái)提示用戶如何操作,讓用戶快速上手。
當(dāng)產(chǎn)品第一次打開(kāi)時(shí),此時(shí)有很大可能是小白用戶,一般情況下會(huì)進(jìn)行新手引導(dǎo)來(lái)告訴用戶怎么做。
學(xué)習(xí)能力有強(qiáng)有弱,有些用戶看一遍引導(dǎo)就知道怎么做,快速成為老手,而有些用戶可能還不太會(huì)用出于新手狀態(tài),此時(shí)引導(dǎo)就要做出區(qū)分,比如UOKA相機(jī),如果你一直點(diǎn)擊下方縮略圖切換,則會(huì)出現(xiàn)提示,告訴你左右滑動(dòng)也可以切換。
好看而簡(jiǎn)潔的設(shè)計(jì)
定義:頁(yè)面中不要出現(xiàn)無(wú)關(guān)的或者冗余的信息,每個(gè)多余的信息都會(huì)分散用戶的注意力;該原則強(qiáng)調(diào),產(chǎn)品要簡(jiǎn)潔明了
頁(yè)面內(nèi)容合理,不能用太多無(wú)用的內(nèi)容來(lái)分散用戶的注意力,讓用戶聚焦。
幫助用戶發(fā)現(xiàn)、判斷和修復(fù)錯(cuò)誤
定義:錯(cuò)誤信息需要告知用戶哪里有問(wèn)題,并且告知用戶如何解決問(wèn)題,而不是展示代碼;該原則強(qiáng)調(diào),異常狀態(tài)要告知用戶如何解決。
比如上面這2個(gè)示例,雖然空狀態(tài)做的還比較精致,但是沒(méi)有告知用戶該如何解決這個(gè)問(wèn)題。
這個(gè)示例中,第一張圖是搜索無(wú)結(jié)果,此時(shí)用按鈕告知用戶可以重新嘗試(搜索),第二張圖是沒(méi)有分組,因此用按鈕引導(dǎo)用戶創(chuàng)建一個(gè)分組。
左圖中沒(méi)有數(shù)據(jù)的情況下,提示用戶可以返回首頁(yè)看看,右圖因?yàn)閮?chǔ)存空間不足給用戶報(bào)錯(cuò),用按鈕告知用戶可以去管理儲(chǔ)存空間。
幫助文檔
定義:即便最好就是不需要幫助文檔就能輕松使用產(chǎn)品,但是當(dāng)用戶需要幫助時(shí),幫助文檔需要易于查找,專注于用戶的任務(wù),列出使用步驟,并且信息量不能過(guò)大;該原則強(qiáng)調(diào),幫助文檔要清晰。
微信在幫助里面羅列了熱門問(wèn)題,協(xié)助用戶快速解決問(wèn)題。
QQ在幫助里面以不同的功能進(jìn)行信息架構(gòu),但是基礎(chǔ)功能是哪些功能?增值服務(wù)又是哪些?這些名詞并不容易理解。
QQ音樂(lè)在幫助反饋中也首先展示了熱點(diǎn)問(wèn)題,協(xié)助用戶快速解決
總結(jié)
尼爾森十大可用性原則是交互設(shè)計(jì)師必須掌握的知識(shí),甚至有些時(shí)候面試還會(huì)提問(wèn),因此一定要聊熟于心。
注:部分圖片來(lái)自網(wǎng)絡(luò),侵刪。
作者:何必復(fù)雜;公眾號(hào):何必復(fù)雜(UXSimple)
本文由 @何必復(fù)雜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
系統(tǒng)狀態(tài)可見(jiàn)性、預(yù)防錯(cuò)誤、辨認(rèn)而不是回憶、幫助用戶發(fā)現(xiàn),判斷和修復(fù)錯(cuò)誤這4個(gè)好贊??
這個(gè)很好。我應(yīng)該發(fā)給我老板看看~
看了一遍,收藏以后再溫習(xí)
好