產(chǎn)品通知設(shè)計(jì)需要掌握的必要原則
編輯導(dǎo)語(yǔ):在開(kāi)發(fā)一款產(chǎn)品時(shí),通知設(shè)計(jì)也是最重要的一環(huán),良好的通知設(shè)計(jì)能跟用戶(hù)搭建起橋梁;通知的設(shè)計(jì)目原本是為了提升我們產(chǎn)品的用戶(hù)體驗(yàn)和一般可用性,但有時(shí)會(huì)引起用戶(hù)反感,怎么樣才能把握適中的力度呢?本文作者分享了關(guān)于產(chǎn)品通知設(shè)計(jì)的內(nèi)容。
是否存在一種合理的設(shè)計(jì)方法能讓通知設(shè)計(jì)為用戶(hù)提供便利而不是負(fù)擔(dān)呢?
通知設(shè)計(jì)處在產(chǎn)品的外圍,所以設(shè)計(jì)師傾向于將通知設(shè)計(jì)留到最后。
但它幫助用戶(hù)實(shí)現(xiàn)目標(biāo)的體驗(yàn),產(chǎn)品設(shè)計(jì)過(guò)程中盡早處理通知設(shè)計(jì)將產(chǎn)生更好的結(jié)果,一起來(lái)學(xué)習(xí)如何深度執(zhí)行通知設(shè)計(jì)。
?一、通知設(shè)計(jì)的基本原則
進(jìn)行通知設(shè)計(jì)時(shí),需要牢記的基本設(shè)計(jì)原則是它必須協(xié)助(而不是阻礙)用戶(hù)執(zhí)行操作。
通知的形式取決于以下幾個(gè)關(guān)鍵因素:
- 傳達(dá)的信息類(lèi)型
- 信息是否需要用戶(hù)操作
- 信息的緊迫性(是否需要立即查看)
一個(gè)設(shè)計(jì)良好的通知模型會(huì)考慮到可訪(fǎng)問(wèn)性,并具有適應(yīng)不同語(yǔ)言的靈活性,所以要求通知的樣式和行為必須清晰、簡(jiǎn)明和易用。
?二、通知設(shè)計(jì)的目是什么?
通知在產(chǎn)品可用性方面有至關(guān)重要的功能。
人機(jī)交互學(xué)博士尼爾森發(fā)表的“十大可用性原則”中,第一條是狀態(tài)可見(jiàn)性原則,該規(guī)則規(guī)定:系統(tǒng)應(yīng)始終在合理的時(shí)間內(nèi)通過(guò)適當(dāng)?shù)姆答伿褂脩?hù)了解發(fā)生的情況。
之前的文章中講過(guò)如何通過(guò)反饋來(lái)讓用戶(hù)清楚所處的狀態(tài),點(diǎn)這里快速回看提高產(chǎn)品狀態(tài)可見(jiàn)性的4種方法。
通知設(shè)計(jì)是產(chǎn)品UX的重要組成部分,如果沒(méi)有通知和反饋,就好比駕駛一輛沒(méi)有儀表盤(pán)的汽車(chē);汽車(chē)儀表盤(pán)上布滿(mǎn)了儀表、圖標(biāo)和指示燈,這樣設(shè)計(jì)的目的是提高汽車(chē)操作系統(tǒng)的可見(jiàn)性,并確保安全可靠的操作性。
當(dāng)我們開(kāi)車(chē)時(shí),儀表盤(pán)會(huì)發(fā)出有關(guān)發(fā)動(dòng)機(jī)溫度、機(jī)油、剎車(chē)、安全氣囊等一系列的通知,使我們隨時(shí)了解情況;轉(zhuǎn)彎時(shí)轉(zhuǎn)向燈會(huì)閃爍,同時(shí)伴隨著咔噠聲,這兩者都為我們提供了反饋。
App產(chǎn)品與儀表盤(pán)的工作原理相同,系統(tǒng)狀態(tài)和反饋的可見(jiàn)性是基礎(chǔ),而可用性是優(yōu)秀用戶(hù)體驗(yàn)的基石。
?三、建立靈活的通知模型
向用戶(hù)發(fā)送一定數(shù)量的通知是一種平衡行為。
而過(guò)度發(fā)送會(huì)帶來(lái)風(fēng)險(xiǎn),產(chǎn)品可能會(huì)得到很多負(fù)面反饋,或者會(huì)讓用戶(hù)疏遠(yuǎn)甚至放棄使用。
因此,設(shè)計(jì)師需要仔細(xì)考慮產(chǎn)品的交互,只發(fā)送具有明確目的的消息,另外讓用戶(hù)靈活地關(guān)閉所有部分通知也是一個(gè)好主意。
通知設(shè)計(jì)首先分為三個(gè)級(jí)別:
- 高關(guān)注度
- 中關(guān)注度
- 低關(guān)注度
然后再通過(guò)這三個(gè)級(jí)別中的特定屬性進(jìn)一步定義通知的類(lèi)型。
下面是一個(gè)可參照的列表,通知的類(lèi)型將根據(jù)產(chǎn)品、用例和其他變量而有所不同:
1)高關(guān)注度:
- 警告(需要立即注意)
- 錯(cuò)誤(需要立即采取措施)
- 異常(系統(tǒng)異常,某些功能無(wú)效)
- 確認(rèn)(需要用戶(hù)確認(rèn)才能繼續(xù)進(jìn)行的操作)
2)中關(guān)注度:
- 警告(無(wú)需立即采取措施)
- 確認(rèn)(對(duì)用戶(hù)操作的反饋)
3)低關(guān)注度:
- 信息性消息(又稱(chēng)被動(dòng)通知,可以回看某些內(nèi)容)
- 標(biāo)記(通常在圖標(biāo)上,展示上次互動(dòng)后的新內(nèi)容)
- 狀態(tài)指示燈(系統(tǒng)反饋)
?四、通知設(shè)計(jì)需要注意的問(wèn)題
要設(shè)計(jì)具有出色用戶(hù)體驗(yàn)的產(chǎn)品,設(shè)計(jì)師需要列出所有可能用到的通知清單。
有了清單,首先根據(jù)所需的關(guān)注級(jí)別和屬性對(duì)通知進(jìn)行分類(lèi)。
通知不應(yīng)該具有侵入性,所以需要謹(jǐn)慎進(jìn)行。
在此過(guò)程中要思考的一些問(wèn)題:
- 什么會(huì)觸發(fā)通知?
- 正在傳達(dá)哪種類(lèi)型的反饋?
- 通知將出現(xiàn)在哪里以及如何出現(xiàn)?
- 哪個(gè)通知需要立即交互?
- 通知是持久性的還是非持久的?
接下來(lái)確定顏色和樣式,并將其放入設(shè)計(jì)系統(tǒng)中。
在這個(gè)過(guò)程中,設(shè)計(jì)師需要考慮每個(gè)可能出現(xiàn)的通知類(lèi)型,確保它們?cè)谒斜尘吧隙寄苷_呈現(xiàn)。
通知的位置也很關(guān)鍵,為了避免混淆界面,通知應(yīng)該出現(xiàn)在UI的頂部、底部或者靠近角落。
除易讀性外設(shè)計(jì)通知模型還要考慮在不同場(chǎng)景中許多小細(xì)節(jié),作為全局導(dǎo)航的一部分,下圖界面中的通知應(yīng)保持可訪(fǎng)問(wèn)性。
有關(guān)定義通知行為的其他問(wèn)題:
- 如果一個(gè)警告是持久的,那么設(shè)計(jì)師怎樣確保用戶(hù)在離開(kāi)初始屏幕后仍然可以訪(fǎng)問(wèn)它們?
- 是否需要在可以看到通知存檔的地方加入帶有徽章的警報(bào)圖標(biāo)?
- 如果一個(gè)通知是非持久性的,它會(huì)在多長(zhǎng)時(shí)間內(nèi)消失,是否應(yīng)該有一個(gè)選項(xiàng)可以在它淡出之前關(guān)閉它?
對(duì)于移動(dòng)應(yīng)用,不僅要設(shè)計(jì)應(yīng)用內(nèi)的通知,應(yīng)用外的推送通知也要精心設(shè)計(jì)。
太多沒(méi)必要的系統(tǒng)推送會(huì)讓用戶(hù)感到沮喪,他們可能會(huì)讓通知靜音甚至棄用該產(chǎn)品,比如令人恐懼的App小紅點(diǎn)。
考慮一些通知的可操作性,讓用戶(hù)在不打開(kāi)App的情況下就可以完成特定的需求,以此提高工作效率;還需要謹(jǐn)慎安排推送通知的時(shí)間,以免疏遠(yuǎn)用戶(hù)。
?五、打造優(yōu)秀的通知設(shè)計(jì)體驗(yàn)
遵循以下做法可以確保用戶(hù)將通知視為提供價(jià)值,而不是打擾或中斷,從而提高用戶(hù)體驗(yàn):
- 根據(jù)前面討論的三個(gè)注意級(jí)別對(duì)通知進(jìn)行分類(lèi),再定義這三個(gè)級(jí)別中各種通知的形式,為三個(gè)注意級(jí)別創(chuàng)建統(tǒng)一的配色方案以及圖標(biāo)樣式。
- 創(chuàng)建簡(jiǎn)潔易讀的通知來(lái)提供有用的信息,注意適應(yīng)性和靈活性,以適應(yīng)不同的內(nèi)容類(lèi)型和文本長(zhǎng)度。
- 仔細(xì)考慮發(fā)送什么以及何時(shí)發(fā)送。對(duì)于高關(guān)注度的通知,盡可能考慮聲音和觸覺(jué)(振動(dòng))反饋。
- 對(duì)于非持久性的通知至少應(yīng)該停留4~8秒后再?gòu)钠聊簧舷?,也可以選擇更快將其取消,另外考慮一個(gè)帶有標(biāo)記通知“不再顯示”的選項(xiàng)。
- 確保通知與背景之間有適當(dāng)?shù)膶?duì)比來(lái)提高可讀性,采用流暢的響應(yīng)式設(shè)計(jì)時(shí),背景可能會(huì)在通知下自動(dòng)變化。
六、總結(jié)
通知設(shè)計(jì)不應(yīng)該被看作事后諸葛亮。
了解何時(shí)以及如何使用通知對(duì)于提供良好的可用性和建立產(chǎn)品的一致性至關(guān)重要。
快速回顧通知設(shè)計(jì)的正確方法:
- 盡早開(kāi)始通知設(shè)計(jì),而不是事后考慮;
- 按三個(gè)注意級(jí)別對(duì)通知進(jìn)行分類(lèi):高、中、低;
- 考慮顏色和圖標(biāo)的樣式并確定位置;
- 按類(lèi)型對(duì)它們進(jìn)行分類(lèi):持久性或非持久、彈窗、橫幅等;
- 將它們整合到設(shè)計(jì)系統(tǒng)中。
原文:?toptal.com/designers/ux/notification-designe
原文作者:Sara Vilas
譯者:Clippp,微信公眾號(hào):Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章,專(zhuān)注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!