System notifications

System notifications are used to communicate to users that something went wrong from the client (4xx) or server (5xx) side. They also notify users when their instance is down for maintenance or upgrade. System notifications provide enough information for users to understand what’s happening, and prompt the next action to take.

Structure of a system notification

Layout wise, system notifications are very similar to focused tasks.

System notification structure
Error title:
Use a concise title to explain what happened. If there’s an error number include it in the title, e.g. This page isn’t available (404).
Elaborate on the problem but avoid technical jargon. Link users to any useful and relevant information. Don’t overwhelm users with unnecessary technical jargon; if you need to include an output or log for troubleshooting, hide it behind an action in the footer. For upgrades or maintenance, give an estimate for when their instance will be available again.
Call to action:
Provide a next step for users which makes sense, e.g. a search field for 404 pages.
Last updated time:
Optionally display the last updated time in the footer so users know how recent the information is.

Application header

Only show the application header if the system as a whole is still usable, for example on 404 pages.

Contextual examples

System notification
System notification
System notification