Notification

Notifications are used to present timely information to the user. Windmolen offers four types of notifications for different context.

When to use

To let users know about something that affects them in particular.

Use when the message is temporary.

Don't use to tell the user about validation errors - use input validation instead.

Don't use for global messages, which are required on multiple pages.

Variables and variants

Variables

Notifications include a number of optional variables that can be toggled on or off and used in any combination.


Body text	Highlights	Action
Use when a longer text is needed to give users context.	Use for short texts, which are easy to remember (e.g., promotion campaign USPs). The number of USPs can be adjusted from 1 to 3.	Use when an action can be taken based on the notification's context.

Variants

Notifications come in four different variants, each serving a specific purpose but sharing the same core functionality.


Informative	Positive	Warning	Error
Should be used for neutral messages, which do not have high urgency.	Should be used for positive messages (e.g., after a user successfully completes an action).	Should be used for urgent messages, where a user action is necessary.	Should be used when there is an error.

Best practice

Use notification sparingly. There is evidence people often miss them.

Use clear, concise, easy to understand language to minimise cognitive load.

Make notifications actionable, so users can directly address the message.

Don't show multiple notifications at once unless it's absolutely necessary.

Placement

Desktop

Notifications should appear in the top-right corner of a page, below the secondary navigation bar, within Mijn Vandebron.

Mobile

Notifications should appear in the top center of a page, below the secondary navigation bar, within Mijn Vandebron.

Behaviour

Notifications should slide onto the screen from the right side on desktop devices and from the top on mobile devices. They should remain visible until the user dismisses them. Once dismissed, they should slide off the screen in the same direction they appeared.

If multiple notifications are displayed simultaneously on desktop devices (though this should be avoided), they should stack vertically, one below the other. On mobile devices, only one notification should be visible at a time.

These behaviours apply to all four notification types.

Content

Notification heading should:

Have a maximum of 25 characters (mobile and desktop).

Include an icon from the component library.

Notification body text should:

Have a maximum of 200 characters (mobile and desktop).

Notification USP should:

Have a maximum of 80 characters (mobile and desktop).

Accessibility

Notification and all of its variants are complaint with the AA accessibility guidelines.