Error handling is an aspect of user interface and experience design that’s often pushed to the bottom of the priority list or overlooked altogether. After all, let’s face it – error handling isn’t very sexy especially compared to graphic design and other branding elements. Unfortunately giving short shrift to errors often results in higher abandonment rates and lower conversion.
In the first part of this two-part entry I’m going to review some best practices for displaying error messages. In part two we’ll get into the messaging itself. But first things first – let’s look at the importance of ensuring users actually notice when they’ve encountered a problem.
Your attention please
It happens more often than you might think, and I’ve seen it more times than I can count in user testing sessions. Users make a small mistake on a form or encounter a system error and simply don’t notice the resulting error message. This often leads to substantial frustration – for example a user trying again and again to submit a form or complete a transaction, unsuccessfully – until they finally give up. The biggest problems of this nature occur when:
- Error messages appear above or below the fold. The term “below the fold” comes from newspaper publishing, where printed newspapers are often folded in half, leaving major stories visible “above the fold” and less important stores “below the fold”, requiring the reader to open the paper fully or flip the paper over to see them. For a website or application the term refers to the information that’s visible when a scrolling page or screen first loads, before the user scrolls. If information is “below the fold” it means the user must scroll down to see it. This is a bigger problem in website design than application design, but it comes up in both. Suppose a user is interacting with a scrolling page (for example, a long form with a submit button at the bottom) and triggers an error condition. If the error is displayed in a location where it’s not immediately visible such as the very top or very bottom of the display, the user often won’t see it. The user then wonders why he or she can’t move forward in the process – and often repeats the action that caused the error. Or in some cases the user scrolls up or down the page but still doesn’t see the message because they haven’t scrolled up or down far enough.
- Error messages don’t stand out. Often error messages are displayed within the user’s field of vision but fail to stand out, for example because they’re too small or are displayed in a manner that can’t easily be differentiated from the rest of the display.
So what’s to be done? It comes down to ensuring that error messages are clearly visible as soon as the error condition is triggered. There are a number of ways to accomplish this, and the best approach will depend a bit on the website or application design. However, in general you can call attention to error messages by doing one or more of the following:
Use strong colors… in moderation
Careful use of eye-grabbing colors like red or pale yellow can help call attention to important messages, as in this example:
Keep in mind, it’s very important not to overdo the use of colors like these. A little goes a long way.
Ensure the message is within the field of view
This may not be possible in every case but in general it makes good sense to display error messages within context. For example, if your user has skipped a required email address field, the error message could appear associated directly with that field like in the example above.
In a case where there are multiple errors a combination approach may make sense – for example displaying a general message at the top of the page, like this:
Then showing individual error messages associated with each field, like this:
Streamline the display
This is a bigger topic that I’ll cover in more depth another time, but reducing the number of elements on your page will also help. By simplifying your displays and reducing the “clutter factor” you’ll make it easier for users to see the things that are truly important – like (you guessed it) error messages.
Incorporating any of these approaches will greatly improve the chances that users will actually notice when they’ve triggered an error. The next step is to ensure that the error messages themselves are well written. For that let’s go to part 2: writing effective error messages.
Photo credit: “Amnesia” by cesarastudillo. Creative Commons licensed.
Related posts:
{ 1 trackback }
{ 0 comments… add one now }