This is my design challenge:

The idea is to have a separate component integrated into a website, displaying data retrieved from another system.

When a problem occurs with this other system, we are unable to retrieve the proper data to display in the component.

This is not a critical error.

Do I display an error message?

And if the answer is yes: what should it say and how should it look like?

(using a red font or red border might attract the user's attention away from the site towards this current unavailable component.)

  • What is the impact on the user when this occurs? That will help you design the display. Dec 19, 2011 at 14:13
  • The impact is minimal, when the component fails, the user is unable to see data, but only on that website. A link can be provided redirecting him to another environment where the information can be retrieved. Dec 19, 2011 at 14:38

3 Answers 3


If it as an internal website, then 'yes' display an error, something like the following:

  • Data is currently unavailable;
  • Currently unavailable;
  • No data available, error 1234

Even follow it with an error code that you and your team will recognize, so if someone in the company reports it to you or another of your team, then you'll know exactly what it means and what to do. Make it look something like it is disable, so I'm thinking font size should be the default size of your size, and light grey color for the text and border.

However, if it an external facing website whereby users may not be familiar with your system, then 'no', do NOT display an error message, but more of an informative message like "No data available at this time." Or simply hide it all together, on page load, since it will be unavailable to them at the time.

  • It's a public website. Hiding the component when it can not retrieve the data might confuse the user. An informative message was my initial idea. Dec 19, 2011 at 14:35

If people are expecting to see a component that can't be rendered, you should tell them something. What you should display, and how, depends on the audience, severity and the context of the app.

  • The graphic design should be roughly commensurate with the severity of the error - in this case, somewhat important. Visual "loudness" is relative to the context, so the design depends on how loud the rest of the app is. Red is probably too loud, but not if there is a lot of color and/or contrast on the page. Most likely, simply bold or italicized text is enough.

  • Consider putting the message where the missing thing ought to be. This makes the message more self-explanatory and saves the user hunting around the page.

  • Focus the copy of the message on what you want your users to do. Most likely, they should just wait and try again another time - politely ask them to do so. If you would like them to report the error, you might point them to the right number to call or person to contact and include some information about the particular error.

  • Pete, should the message contain the reason why the data is not available? (due to technical problems, or connection problems,...) Dec 19, 2011 at 14:36
  • If it's useful to them, then yes. Telling them some specifics also can increase user trust that you know what's going on. For instance, when Gmail points out that it can't fetch my inbox because it can't connect to the internet I know that a) they know what's going on and b) I should go reboot the damned wifi for the umpteenth time ;) Dec 20, 2011 at 4:56

Keep it simple and make sure your error message and presentation denote the severity and context of the error.

Take responsibility: Here's a great error message I noticed on Twitter yesterday: enter image description here

Also note the Twitter error message is dismissable and pretty small. If no user action is required consider moving the error message over the pane/content the error effects so you don't distract from the working parts of the site.

Some good guidelines are in this blog post 10 Tips on Writing Hero Worthy Error Messages. Included is a recommendation of humility and taking responsibility:

I tend to crash my OS frequently, and it’s not FF’s fault, yet every time FF makes the assumption that I’m not at fault.

Here's an inspirational list of 60 Cool 404 pages, but don't make a minor error too striking either. These are all visually striking as they have the whole page to display their error and there's nothing to distract from.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.