How do I inform the user a component has stopped working?

Question

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.)

Answer 1

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.

Answer 2

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.

Answer 3

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:

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.