Peripheral messages in digital products, collectively known as notifications, should never harm the user experience. Instead, they must contribute to an experience that helps people accomplish a goal. Addressing notification design early in the product design process will produce better results.

數字產品中的外圍消息(統稱為通知)永遠不會損害用戶體驗。 相反，他們必須為有助于人們實現目標的體驗做出貢獻。 在產品設計過程的早期處理通知設計將產生更好的結果。

Imagine a group of architects designing a three-story house, laboring over the blueprints for months. It’s impressive! It’s beautiful! But just as they get close to finishing the diagram, one of them exclaims, “ Wait! How do people get from the first to the third floor? “ They forgot about the staircase!

想象一下，一群建筑師設計了一個三層樓的房子，花了幾個月的時間來設計藍圖。 令人印象深刻！ 真漂亮！ 但是，當他們接近完成圖表時，其中一位驚呼道：“ 等等！ 人們如何從一樓到三樓？ “他們忘記了樓梯！

Similarly, product designers tend to think of small yet critical UX enhancements last. As it is with empty states, designers are prone to leaving the design of notifications-alerts, error messages, confirmations, announcements, and acknowledgments-until the very end. The issue may suddenly come to light when a developer asks, “ How do we handle errors? “ Because it’s an afterthought, this tacking-on approach frequently produces sloppy “frankendesigns,” which hurts the UX.

同樣，產品設計師傾向于最后考慮小的但重要的UX增強功能。 由于處于空狀態，所以設計人員傾向于在通知，警報，錯誤消息，確認，公告和確認的設計中保留直到最后。 當開發人員問“ 我們如何處理錯誤？ “因為這是事后的想法，所以這種固定方法經常會產生草率的“ frankendesigns”，這會傷及用戶體驗。

To avoid such a scenario, it’s best to use an integrated approach to notification design to enhance user experiences. Even though designers may not have all the information at their fingertips, designing a comprehensive notifications framework during the product design lifecycle will help prepare the product for unforeseen use cases.

為避免這種情況，最好使用集成方法進行通知設計以增強用戶體驗 。 即使設計人員可能沒有觸手可及的所有信息，但在產品設計生命周期中設計一個全面的通知??框架仍將有助于為不可預見的用例準備產品。

When embarking on notification design, the essential design principle to keep in mind is that they must assist (not impede) people to perform tasks. It’s imperative to test product prototypes early and map out the use cases where peripheral messaging would be of value in assisting interactions. However, the best way to communicate with users will vary and depend on several key factors:

在進行通知設計時，要牢記的基本設計原則是， 它們必須幫助(而不是阻礙)人們執行任務 。 必須盡早測試產品原型并確定用例，在這些用例中外圍消息傳遞對協助交互很有用。 但是，與用戶交流的最佳方式會有所不同，并取決于以下幾個關鍵因素：

• The type of information being communicated

  傳達的信息類型

• The urgency of the information-whether it needs to be seen immediately
  信息的緊迫性-是否需要立即查看
• Whether user action is required as a result of the information
  該信息是否要求用戶采取措施

Aside from what the styling and behavior of notifications will be, their tone needs to be established by UX copy. All copy on notifications must be clear, concise, and useful. A well-designed notification system is also designed with accessibility in mind and has the flexibility to accommodate different languages.

除了通知的樣式和行為外，還需要通過UX復制來確定通知的音調 。 通知上的所有副本都必須清晰，簡潔且有用。 精心設計的通知系統在設計時還考慮了可訪問性，并具有適應不同語言的靈活性。

The terminology used for notifications tends to be similar, yet will vary slightly from team to team and project to project. It’s incumbent on the designer to determine the notification framework’s terminology—what’s called what—as well as sync everyone up on the rationale for their use: the what, where, and how.

通知所使用的術語趨于相似，但團隊之間和項目之間會略有不同。 設計人員有責任確定通知框架的術語(稱為“什么”)，并同步每個人的使用理由： 什么，在哪里以及如何使用 。

通過更好的通知設計來提高可用性 (Better Usability Through Better Notification Design)

Notifications serve an essential function in product usability. “ Visibility of system status” is number one on the list of the “ 10 Usability Heuristics for User Interface Design” from the Nielsen Norman Group. The rule states that “ the system should always keep users informed about what is going on, through appropriate feedback within a reasonable time. “

通知在產品可用性方面起著至關重要的作用。 “ 系統狀態的可見性 ”是Nielsen Norman集團在“ 用戶界面設計的10種可用性啟發法 ”列表中的第一名。 該規則指出：“ 系統應始終在合理的時間內通過適當的反饋使用戶了解發生的情況。 “

A notification system is so much part of a digital product’s UX that without it, the product would feel as if something was left out. If there is no “visibility of system status” and feedback, it is akin to driving a car without a dashboard.

通知系統是數字產品UX的重要組成部分，如果沒有它，產品就會感覺好像遺漏了某些東西。 如果沒有“系統狀態的可見性”和反饋，則類似于在沒有儀表板的情況下駕駛汽車。

A car’s dashboard is full of gauges, icons, and lights designed to provide visibility into the car’s operating system and ensure safe and reliable operability. When we drive, a cluster of readouts and notifications about engine temperature, battery health, oil pressure, lights, brakes, airbags, and so on keep us informed. When we want to make a turn, there is a blinking light for the turn signal, along with a clicking sound, both providing us with feedback. We also have a fuel tank gauge that indicates when the fuel tank is low.

汽車的儀表板上充滿了儀表，圖標和指示燈，旨在提供對汽車操作系統的可見性并確保安全可靠的可操作性。 當我們開車時，會發出一系列有關發動機溫度，電池運行狀況，機油壓力，燈，剎車，安全氣囊等的讀數和通知，使我們隨時了解情況。 當我們要轉彎時，轉向信號燈會閃爍，同時還有咔嗒聲，這兩者都為我們提供了反饋。 我們還有一個油箱壓力表，用于指示油箱何時處于低位。

It works in the same way with a digital product. Visibility of system status and feedback is foundational when it comes to usability, and usability is the bedrock of great user experiences.

它與數字產品的工作方式相同。 當涉及到可用性時，系統狀態和反饋的可見性是基礎，而可用性是良好用戶體驗的基礎。

建立有用的通知框架 (Establishing a Helpful Notification Framework)

To design a notification framework well, it may be helpful to think of notifications in terms of “signal strength.” Which peripheral messages need more or less attention? For example, interactions that may potentially be destructive need “louder” notifications, and non-destructive interactions need “quieter” ones.

為了很好地設計通知框架，從“信號強度”的角度考慮通知可能會有所幫助。 哪些外圍消息需要或多或少的注意？ 例如，可能具有破壞性的交互需要“更大聲”的通知，而非破壞性的交互則需要“更安靜”的通知。

Sending people the right amount of notifications is a balancing act, and overdoing it is fraught with peril; the product may get a lot of negative feedback, or at worst, alienate people to the degree where they will abandon it. Designers, therefore, need to carefully consider the UX and only send messages with a well-defined purpose. It’s also a good idea to give users the flexibility to turn off all, or at least some of the notifications.

向人們發送適當數量的通知是一種平衡的行為 ，而過分這樣做會帶來危險。 該產品可能會得到很多負面反饋，或者最糟糕的是，使人們疏遠到他們放棄它的程度。 因此， 設計人員需要仔細考慮UX，僅發送具有明確目的的消息。 給予用戶靈活性以關閉所有或至少一些通知也是一個好主意。

The initial approach to notification design needs classification on three levels: high, medium, and low-attention, i.e., “levels of severity.” Following that, notification types need to be further defined by specific attributes on those three levels, whether they are alerts, warnings, confirmations, errors, success messages, or status indicators.

通知設計的初始方法需要在三個級別上進行分類： 高關注度 ，中關注度和低關注度 ，即“嚴重性級別”。 然后，需要通過這三個級別上的特定屬性進一步定義通知類型 ，無論這些類型是警報，警告，確認，錯誤，成功消息還是狀態指示符。

Once the notification attributes have been identified, it’s time to create a taxonomy of the various notifications that will make up the framework. The following is by no means an exhaustive list—the types of notifications will differ based on the product, the use cases, and other variables. ( Please note: As mentioned, different teams use a variety of terminologies. For example, we’re calling a “confirmation” a notification that requires user approval to proceed with a destructive interaction. Some teams may use “confirmation” as a term for a success message.)

識別通知屬性后，就該對構成框架的各種通知創建分類法了。 以下絕不是詳盡的列表-通知的類型將根據產品，用例和其他變量而有所不同。 ( 請注意 ：如前所述，不同的團隊使用各種術語。例如，我們稱“確認”為通知，需要用戶批準才能進行破壞性的交互。某些團隊可能將“確認”用作術語成功消息。)

High-attention

高關注度

• Alerts (immediate attention required)
  警報(需要立即關注)
• Errors (immediate action required)
  錯誤(需要立即采取措施)
• Exceptions (system anomalies, something didn’t work)
  異常(系統異常，某些功能無效)
• Confirmations (potentially destructive actions that need user confirmation to proceed)
  確認(可能需要用戶確認才能進行的破壞性操作)

Medium-attention

中等注意

• Warnings (no immediate action required)
  警告(無需立即采取措施)
• Acknowledgments (feedback on user actions)
  致謝(用戶操作的反饋)
• Success messages
  成功訊息

Low-attention

低注意力

• Informational messages (aka passive notifications, something is ready to view)
  信息性消息(又稱被動通知，某些內容可供查看)
• Badges (typically on icons, signifying something new since last interaction)
  徽章(通常在圖標上，表示自上次互動以來的新內容)
• Status indicators (system feedback)
  狀態指示燈(系統反饋)

設計Great Notification UX (Designing Great Notification UX)

To design a product with great UX, designers need to make a list of all the use cases where notifications may be helpful. It is recommended that this process be done in collaboration with a developer as in most cases they can be impartial and able to help troubleshoot edge cases the designer may not have considered.

要設計具有出色UX的產品，設計人員需要列出所有可能有用通知的用例清單。 建議與開發人員合作完成此過程，因為在大多數情況下，開發人員可以保持公正并能夠幫助解決設計師可能未曾考慮過的情況。

Designers should also make a note of all interactions during user testing where notifications may provide value to enhance the UX.

設計人員還應該記錄用戶測試期間的所有交互，其中通知可能會提供增強UX的價值。

Once armed with the list, the next step is to categorize the notifications based on the desired attention level and attributes. Again, because notifications should not be intrusive, this needs to be done carefully. Some of the questions to ask during this process are:

有了列表后，下一步就是根據所需的關注級別和屬性對通知進行分類。 同樣，由于通知不應具有侵入性 ，因此需要謹慎進行。 在此過程中要問的一些問題是：

• What would trigger the notification?
  什么會觸發通知？
• What type of feedback is being communicated?
  正在傳達什么類型的反饋？
• Where would the notification appear and how?
  通知將出現在哪里以及如何顯示？
• Which notification would require an immediate interaction?
  哪個通知需要立即互動？
• Is the notification persistent or non-persistent?
  通知是持久的還是非持久的？

Next, color-coding and icons need to be determined and put into a design system (or style guide). When going through this process, designers need to consider every instance where a notification would appear and make sure they render correctly on all backgrounds.

接下來，需要確定顏色編碼和圖標，并將其放入設計系統(或樣式指南)中。 在執行此過程時，設計人員需要考慮將出現通知的每個實例，并確保它們在所有背景上正確呈現。

The placement of notifications is also key. At the risk of stating the obvious, to avoid obscuring the interface, notifications should appear at the top or bottom, or near the corners of the UI. What’s more, if the design is responsive, designers need to test the appearance of notifications with various viewports. It’s particularly important where error messages may be shown with responsive mobile forms.

通知的位置也是關鍵。 為避免明顯的界面冒著明顯的風險，通知應顯示在UI的頂部或底部或角落附近。 此外，如果設計具有響應能力，則設計人員需要使用各種視口測試通知的外觀。 當錯誤消息可以通過響應的移動表格顯示時，這一點尤其重要。

Designing a notification framework isn’t easy. Many small details occurring under different scenarios need to be considered. Beyond accessibility and legibility, future localization needs to be kept in mind. A notification system that looks perfect in English may fall apart entirely when used on a German or Japanese platform.

設計通知框架并不容易。 需要考慮在不同情況下發生的許多小細節。 除了可訪問性和易讀性之外，還需要牢記將來的本地化。 在德語或日語平臺上使用時，英語看上去很完美的通知系統可能會完全崩潰。

Further questions to ask when it comes to defining the behavior of notifications:

有關定義通知行為的其他問題：

• If an alert or warning is meant to be persistent, how do designers ensure that people still have access to them after they navigate away from the initial screen?
  如果要持續發出警報或警告，那么設計師如何確保人們離開初始屏幕后仍然可以訪問它們？
• Would an alert icon with a badge need to be incorporated where an archive of notifications could be seen?
  是否需要合并帶有徽章的警報圖標，以便可以看到通知檔案？
• If a notification is non-persistent, how long before it disappears, and should there be an option to dismiss it before it fades out?
  如果通知是非持久性的，則通知會消失多長時間，并且應該有一種在消失之前將其關閉的選項嗎？

For mobile apps, not only in-app notifications but push notifications (system-level, outside the app) also need to be meticulously designed. They are mostly interruptions, so it’s crucial to look at the notification’s copy and how and when to ask for permission to send them. Used too much, they may discourage people from using the app. Too many nonessential notifications can frustrate users who may then silence notifications or stop using the app altogether.

對于移動應用程序，不僅需要精心設計應用程序內通知，還需要精心設計推送通知(系統級，應用程序外部)。 它們主要是中斷，因此查看通知的副本以及如何以及何時請求發送它們的許可至關重要。 使用過多，他們可能會阻止人們使用該應用程序。 太多不必要的通知會使用戶感到沮喪，他們可能隨后使通知靜音或完全停止使用該應用程序。

Designers also ought to consider actionable notifications that allow people to be productive without opening an app. Enabling users to accomplish small tasks without going into an app can be a powerful tool in enhancing UX.

設計師還應該考慮可行的通知 ，這些通知可以使人們無需打開應用程序即可提高工作效率。 使用戶無需進入應用程序即可完成小任務，可以成為增強UX的強大工具。

For mobile push notifications, the UX best practice is to delay notifications of any kind (asking for access to a person’s location, sending push notifications, and so on) until people have had the chance to explore the app a little bit.

對于移動推送通知，UX最佳實踐是延遲任何形式的通知(要求訪問某個人的位置，發送推送通知等)，直到人們有機會探索該應用程序為止。

優秀UX的通知最佳做法 (Notification Best Practices for Great UX)

Observing the following best practices will ensure that people will perceive notifications as providing value, not as interruptions, thereby enhancing the user experience. Before designing a system of notifications and putting them into a design system, consider these fundamental best practices:

遵循以下最佳實踐將確保人們將通知視為提供價值，而不是打擾，從而增強了用戶體驗。 在設計通知系統并將其放入設計系統之前，請考慮以下基本最佳實踐：

• Classify notifications by the three attention levels discussed earlier. Then, define the taxonomy of the various forms of notifications within those three levels.
  通過前面討論的三個注意級別對通知進行分類。 然后，在這三個級別內定義各種形式的通知的分類法。
• When creating a style guide for the notification system, specify the maximum character lengths for the notification in all languages in which it will be released.
  為通知系統創建樣式指南時，請以將要使用的所有語言指定通知的最大字符長度。
• Pay special attention to adaptability and flexibility to accommodate different content types and text lengths.
  要特別注意適應性和靈活性，以適應不同的內容類型和文本長度。
• Create a consistent color scheme for the three attention levels as well as consistent iconography.
  為三個注意級別以及一致的圖標創建一致的配色方案。
• Create concise, easy-to-read notifications that provide useful information.
  創建簡明易懂的通知，以提供有用的信息。

• Carefully consider what to send and when to send. On mobile, delay sending notifications on freshly downloaded apps to avoid alienating people. Examine the context and use cases closely.

  仔細考慮發送什么以及何時發送。 在移動設備上，延遲在新下載的應用程序上發送通知，以避免疏遠人們。 仔細檢查上下文和用例。

• Err on the side of showing fewer notifications, whether they’re alerts or warnings, or other high- to middle-attention status updates. Instead, put them in a list people can access when they want to see them (signified by an icon badge in the UI).

  錯誤地顯示較少的通知，無論是警報還是警告，或其他中高關注狀態的更新。 相反，把它們放在一個列表中的人可以訪問時，他們希望看到他們(通過圖標徽章在UI表示)。

• Consider a system with an option to mark notifications “do not show again.”
  考慮一個帶有標記通知“不再顯示”的選項的系統。
• Non-persistent acknowledgments such as “snack bars” should disappear from the screen after a minimum of four seconds and a maximum of eight seconds, with an option to dismiss it sooner and “undo” where appropriate.
  諸如“小吃條”之類的非持久性確認應在最少四秒鐘到最多八秒鐘后從屏幕上消失，并可以選擇將其盡快消除，并在適當的情況下“撤消”。
• For high-attention level notifications on mobile, consider sound and haptic feedback when possible.
  對于移動設備上的高關注度通知，請盡可能考慮聲音和觸覺反饋。
• Ensure proper contrast on notifications for readability and between the background on which the notifications appear. Be aware that with fluid, responsive designs, the background may shift under the notification.
  確保在通知上和通知背景之間進行適當的對比以提高可讀性。 請注意，采用流暢的響應式設計時，背景可能會在通知下轉移。

錯誤消息的最佳做法 (Best Practices for Error Messages)

• Error messages should be simple and direct, preferably actionable, written in a language that is easy to read and quick to comprehend.
  錯誤消息應該簡單直接，最好是可操作的，并以易于閱讀和理解的語言編寫。

• Avoid obscure codes and abbreviations such as “received response success is false.”

  避免使用晦澀的代碼和縮寫，例如“ 收到的響應成功為假”。 ”

• Provide concise, clear descriptions of the problem instead of “an error has occurred.”

  提供問題的簡潔明了的描述，而不是“ 發生錯誤。 ”

• Avoid blaming people or telling them they did something wrong—for example, by saying it was an “illegal command.”

  避免責怪別人或告訴他們他們做錯了事，例如，說這是“ 非法命令”。 ”

• Provide in-context constructive error messages so that people can fix the issue.
  提供上下文中的建設性錯誤消息，以便人們可以解決此問題。
• Avoid indicating an error just by turning the field red. It doesn’t make it accessible to people with disabilities. It’s always best to include other visual cues that the colorblind can see.
  避免僅通過將字段變為紅色來指示錯誤。 它并沒有使殘疾人可以使用它。 最好總是包括色盲可以看到的其他視覺提示。

• Use inline validation for input fields on forms.

  對表單上的輸入字段使用內聯驗證 。

• Error messages should not disappear until people have fixed the problem.
  在人們解決問題之前，錯誤消息不應消失。

摘要 (Summary)

Notifications contribute to an experience that helps people accomplish a goal and should be treated like any other digital product component. However, notifications can cut both ways. If handled well, they can boost UX and assist engagement, but when executed poorly, risk becoming an annoyance. Striking the right balance is key.

通知有助于提供幫助人們實現目標的體驗，應該像對待其他任何數字產品組件一樣對待通知。 但是，通知可以雙向進行。 如果處理得當，它們可以提高UX并有助于參與度，但是如果執行不佳，則有可能成為煩人的事情。 爭取適當的平衡是關鍵。

Notifications should not be treated as an afterthought. In order to do them properly, designers must address use cases early, define the various forms during the product design lifecycle, and test them extensively.

通知不應被視為事后的想法。 為了正確執行它們，設計人員必須及早解決用例，在產品設計生命周期中定義各種形式，并進行廣泛的測試。

A quick recap on the right way to design notifications:

快速回顧設計通知的正確方法：

• Start notification design early, not as an afterthought.
  盡早開始通知設計，而不是事后思考。
• Classify notifications by the three attention levels: high, medium, and low.
  按三個注意級別對通知進行分類：高，中和低。
• Color-code, assign icons and determine placements.
  進行顏色編碼，分配圖標并確定位置。
• Categorize them by type: persistent or non-persistent, pop-up, banner, dialog, etc.
  按類型分類：持久性或非持久性，彈出式，橫幅，對話框等。
• Incorporate them into a design system.
  將它們合并到設計系統中。

Understanding when and how to use notifications is essential to providing great usability and building consistency in product messaging. By carefully assessing the peripheral messaging that needs to be shown at the right moment, designers can increase the efficiency of a product and enhance its UX.

了解何時以及如何使用通知對于提供出色的可用性和建立產品消息傳遞的一致性至關重要。 通過仔細評估需要在適當時候顯示的外圍消息，設計人員可以提高產品的效率并增強其用戶體驗。

Written in collaboration with Sara Vilas Santiago and originally published at https://www.toptal.com

與 Sara Vilas Santiago 合作撰寫， 最初發布在 https://www.toptal.com