Guides Foundations Components Patterns Styles

Error state

Displays a message when an expected action fails, alerting users to the problem and how to proceed.

Appearance

Large and full-page

For error states that take up most or all of the page, such as when a user is unauthorised.

How an error might look

This is a center aligned example with a short summary. You can use a button or a TextLink to suit your needs.

Open in Playroom

Anatomy

Illustration (recommended): A static image that relates to the user’s situation
Heading: A short summary of the situation. Refer to the content guidelines below
Text: Copy to instruct, explain, reassure or support the user
TextLink (optional): A link to further help or info when appropriate
Button (optional): Actions for what to do next when appropriate

Visual guidelines

Display the message on a neutral surface. Avoid using heavy or saturated background colours such as brand accents.
Centre align components by default. Left align when the content includes a list, and optionally place the illustration to the left to save vertical space on longer content. It will still stack on mobile.

Small and inline

For error states that sit within content, such as a dashboard widget. Consider using an Alert or Notice with the tone critical. If that feels too intense, the info tone can be used instead.

Widget title

Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit amet.

Widget title

We can’t load this data right now. Please check back later.

Widget title

Widget content lorem ipsum dolor sit amet, consectetur adipiscing elit amet.

Open in Playroom

Best practices

General best practice

More isn’t always better. Reading takes time and effort, so let’s make it easier for people to understand what’s happening.
Break down complicated processes into easy-to-follow steps.

Do	Don’t
Be as specific as possible.This helps users resolve the issue. If they end up calling Customer Service, it helps CS with troubleshooting.	Don’t try to address multiple error scenarios in one message.The more generic the message, the less helpful. If individual errors cannot be implemented all at once, create the messages anyway and put them in the backlog.
ExampleWe can’t give you access to this right now.Try: Refreshing the page Signing out and signing in again Asking your admin for access If it still doesn’t work, reach out to our Customer Service team on 1300 658 700.	ExampleApparently you’re not authorised to view this page.Not sure why you’re not… maybe try heading to our homepage or contact support.
Project calm or light-heartedness as appropriate.Users will start to mirror the emotional state that we show them.Show the ideal state (problem fixed, calm person) instead of the present, negative state.Use imagery that focuses on the positive state of something being fixed, instead of something being broken.	Avoid negative words, such as: Error Mistake Oops Invalid Failed Problem Wrong These words make people feel anxious and your product seem less reliable.
ExampleCan we try that again?Refresh the page to see your job search results.	ExampleOops! Let’s try this again.Just hit refresh and your jobs will be right here.
Show an understanding that the user might be in a challenging situation.	Don’t blame the user. Try to make it about what we can’t do, instead of what the user didn’t do. Don’t assume you know how they feel. Don’t trivialise the situation.
ExampleWe need this information for your application: Cover letter - select one of the cover letter options Resumé - select one of the resumé options	ExampleBefore you can continue with the application, please address the following issues: Cover letter - Please make a selection Resumé - Please make a selection

Content guidelines

As errors are negative moments or pain points in someone’s interaction with our products, it’s important for us to handle errors in an empathetic and supportive way.

Handling an error well:

Helps users resolve an error quicker. When someone is frustrated, they’re more likely to keep trying something that doesn’t work, which keeps them caught in an error loop. If they’re calm, they see more options and can problem-solve better.
Helps us turn a negative moment into a positive one. If someone feels supported through a negative moment, it helps build a more lasting connection to SEEK.

How people might feel when an error happens

Understanding how someone might feel when they encounter an error helps us craft an appropriate response.

High impactLow effort

Frustrated

ReassureTask cannot be completed.

High impactHigh effort

Infuriated

Apologise, SupportTask cannot be completed.

Low impactLow effort

Annoyed

InstructTask interrupted but can be resolved.

Low impactHigh effort

Irritated

ExplainTask interrupted but can be resolved.

How to respond to errors

If the error…	User feels	Our goal	How to respond	Recommended message
can be resolved by the user is easy and quick to resolve	Annoyed	Instruct	Tell the user clearly what they need to do to resolve the error. It’s an easy fix so let’s get them back on track quickly. Don’t make this a big deal i.e. don’t use negative words.	Select one of the cover letter options.
can’t be resolved by the user (low to no effort is needed from the user) requires the user to wait for SEEK (or someone else) to resolve it	Frustrated	Reassure	Since there’s not much the user can do, reassure them that we’re doing all we can. This is an opportunity to introduce some light-heartedness.	We’re working on itWe can’t load this right now but we’re doing our best to fix it.Try refreshing the page or check back later.
can be resolved by the user requires user to go through many steps to resolve it user can continue with their task or other parts of the process	Irritated	Explain	Explain clearly what the user needs to do. Take the time and space to break the process into steps. Provide as much information as needed to help users resolve the error. If the process is particularly tedious, try to inject some playfulness, if appropriate.	Get access with Premium Talent SearchOur Customer Service team can help to organise a subscription.Or you can browse talent search matches for your active job ads.
can’t be resolved by the user or requires the user to go through many steps prevents the user from completing a critical or time-sensitive task	Infuriated	Support	It’s always best to avoid a situation that would infuriate someone. Sometimes it might not be our fault or something we have control over. Be helpful, supportive and calm to defuse the situation. This is not the time to be upbeat or playful.	We’re trying to connectCheck your internet connection and try again.If it still doesn’t work, you may have to contact your network provider.We’re always here to help, so reach out anytime. Are you offline?Check your internet connection and try again.

SEEKers can visit the internal APAC Writing Space for further guidance and examples.

When to use

Use an error state when:

there are permissions issues such as unauthorised or forbidden access
there are systems issues such as server errors, timeouts or scheduled maintenance
configuration is required, such as an unsupported browser
a page or resource cannot be found, such as a missing page or bad request.

Don’t use an error state when:

there is no data available, but nothing has failed (use an Empty state instead)
the message sits within a section, card, or widget (use an Alert or Notice instead)
content is still loading (use a Skeleton loader instead).

Empty state — For communicating an absence of data and directing users toward their next step.
Alert — For strong in-flow messages that sit at page or section level.
Notice — For light in-flow messages that sit within a section, card, or widget.

On this page