Notifications Component

👋 Hey!

Notification component from the project

When to use

Use notifications to inform users of updates or changes to system status. Communicating with users and providing immediate feedback is essential for building trust. Even though notifications are an excellent way to get in touch with users, they can be annoying and should be used sparingly.

Content

Notifications provide limited space for content; therefore, the content must be short and concise. A user should be able to quickly scan the message, be apprised of the situation, and know what to do next.

Main elements

Title

  • The title should be short and descriptive, explaining the most essential piece of information.

  • When possible, communicate the main message using just the title.

  • Use a period only if the title is a complete sentence.

  • When using rich text, such as in a title, a screen reader will read aloud the entire message as one sentence. Since the message will be read as one string, ensure that any text styling does not convey meaning.

Body content

  • Be concise and avoid repeating or paraphrasing the title.

  • Limit content to one or two short sentences.

  • Explain how to resolve the issue by including troubleshooting actions or next steps. You can include links within the notification body that redirect the user to the next steps by using an actionable notification.

Action (actionable only)

  • Only actionable notifications can contain interactive elements such as a link or button.

  • Keep labels concise and clearly indicate the action the user can take.

  • Limit action labels to one or two words. For a list of recommended action labels.

———

Thanks for watching!

Remember to follow my profile for more!

Let's talk about your project — hello@iroshandezilva.com.

Iroshan De Zilva
Real things & experienced designer ⤵

More by Iroshan De Zilva

View profile