In-page notifications

In-page notifications are used to contextually inform users of important information or status of an interaction.

They are designed in a way that attracts the user's attention. The level of attention is dependant on the notifications importance, the notification types are:
 

  • Information
  • Success
  • Warning
  • Critical

Information notification

Used for information the user should know, but is not critical.

They are designed to be less intrusive or interruptive that the other 3 levels of notification.

<div class="nsw-container">
	<div class="nsw-notification nsw-notification--info">
	  <svg class="nsw-icon nsw-notification__icon" focusable="false" aria-hidden="true">
	    <use xlink:href="#status-info"></use>
	  </svg>
	  <div class="nsw-notification__content">
	    <h4 class="nsw-notification__title">Rockdale Service Centre is coming soon</h4>
	    <p>Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.</p>
	  </div>
	</div>
</div>

 

Copy

Success notification

Used to inform the user that an action has been successfully completed.

<div class="nsw-container">
	<div class="nsw-notification nsw-notification--success">
	  <svg class="nsw-icon nsw-notification__icon" focusable="false" aria-hidden="true">
	    <use xlink:href="#status-success"></use>
	  </svg>
	  <div class="nsw-notification__content">
	    <h4 class="nsw-notification__title">Your application has been received</h4>
	    <p>Thank you for submitting your interest. We will be in contact within 5 business days.</p>
	  </div>
	</div>
</div>

 

Copy

Warning notification

Used to warn the user of a possible issue.

<div class="nsw-container">
	<div class="nsw-notification nsw-notification--warning">
	  <svg class="nsw-icon nsw-notification__icon" focusable="false" aria-hidden="true">
	    <use xlink:href="#status-warning"></use>
	  </svg>
	  <div class="nsw-notification__content">
	    <h4 class="nsw-notification__title">Password expiring soon</h4>
	    <p>Your password is expiring in 4 days. Please change your password.</p>
	  </div>
	</div>
</div>

 

Copy

Critical notification

Used to inform the user of an error or convey information which is vital to the user.

<div class="nsw-container">
	<div class="nsw-notification nsw-notification--error">
	  <svg class="nsw-icon nsw-notification__icon" focusable="false" aria-hidden="true">
	    <use xlink:href="#status-error"></use>
	  </svg>
	  <div class="nsw-notification__content">
	    <h4 class="nsw-notification__title">It looks like there was a problem</h4>
	    <p>Please contact your service desk for further assistance.</p>
	  </div>
	</div>
</div>

 

Copy

The family of notifications are designed with a consistent layout to aid comprehension of what they are and how they work.

They are designed to look 'not alway present', to draw user's attention.

The type and urgency of the notification is conveyed through colour and the icon used.

The icons used are industry standard, with the exception of the warning and critical icons which are some what interchangeable but both are perceived as more important that the other 2 notifications. This further aids comprehension.

Notifications are often displayed following a user interaction or system event.

The notifications are not dismissible. 
 

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

Display the notifications in context and at an appropriate time.

Don't over use notifications as this will erode their effectiveness.

Avoid using multiple notifications on a single screen (if multiple are required, display them by importance; critical, warning, success then information). 

Use the appropriate notification for the task in hand.

Don't use for global alerts which are required on all pages.

 

Information

  • Use for tips or information which the user can benefit from.
  • Use for messages which don't require too much attention or action.
  • Don't use in response to a user action.

 

Success

  • Use to inform the user that an action was performed successfully (e.g. submitting a form or registering an account).

 

Warning

  • Use to warn the user of a possible negative outcome (e.g. password expiry).
  • Provide sufficient information to avoid the problem.
  • Use for an action which is out of the ordinary or might not be desired.

 

Critical

  • Use where a system event has failed.
  • Use when the user has made an error.
  • Use where the user is blocked until the issue is resolved, or the issue needs resolving immediately.
  • Provide sufficient information on the issue and resolution to fix the issue.
  • Don't use for validation or validation summary.