Adam Schwabe

I just tried to buy some tickets to a film as part of Toronto’s Inside Out Lesbian & Gay film festival only to be greeted with this message at the top of the page. That’s right, there’s a message there. Can’t see it? No, there’s nothing wrong with your eyes, that’s actually hot pink text against a red background.

What kills me about this message is that the intent to design something decent was there - it has a couple of the winning elements of a good error message: displayed prominently at the top of the page (after I’ve clicked the next button on a page before), given the good ol’ colour red to signify that something bad has happened. Unfortunately the text itself is a huge loser here. In case you don’t have superhuman eyes, here’s what it actually reads as:

Love Songs
7:30pm
ROM (762)
There are not enough seats available in GA section GA to seat 2 at this time.
Please try again later or contact the box office.

I’ve already established that the font colour, an irradiated hot pink, is awful against the red background. It’s totally illegible, and I have to highlight it with my mouse cursor to see what it actually says. If they’re determined to keep a red background, white text would work, but it’s still not an ideal solution.

For visitors of the site who have disabilities, colour isn’t an acceptable means of distinguishing elements on a page. Error messages should also be identified with an icon (usually an ‘X’ or exclamation mark). Jakob Nielsen outlined the necessary elements for a good error message way back in 2001 - an error message should be explicit, human-readable, polite, precise, and offer constructive advice. He later revised the column to include a very important element: it must also be visible.

This error message fails on all but a few of those fronts. The way the message itself is presented is not at all human-readable. Error messages, like all copy, are a representation of your brand.

If I went to buy a ticket from their physical box office and it turned out there were no tickets left, would they really ask me to try again later? What purpose is that really going to serve? Also, I called the box office after I saw this, and all the guy could tell me is that the film was sold out. The web site box office should directly correlate to tickets available. Having a box office line available to people if the Web site indicates a film is sold out is totally redundant.

Instead, taking into account all of the above guidelines, let’s approach this message again:

This message is much shorter, more precise, and infinitely more readable. Don’t waste your users’ time telling them the details of why something failed and what they just did, just tell them what went wrong and what they can do as an alternative, or as a solution to their problem.

If the box office isn’t able to get them tickets, or if calling later isn’t going to accomplish anything, then don’t frustrate potential customers by leading them down dead ends. Suggest an alternative by allowing them to see what else is playing that night, or better yet, within the error message, we could present available movies and have buttons next to each that read “Buy tickets for this instead” or something to that effect.

Call out the important points of an error message in bold and by writing concise copy. Write error messages as if it were one of the ushers of the theatre talking to a customer, not like a response from a database. Don’t include meaningless codes like “ROM (762)” that will only further frustrate your potential customers.

Error messages are an opportunity to recover a potentially lost customer, and convert them into a sale. Don’t squander that opportunity.