Here’s a little exercise for you to keep in mind the next time you design a web page. Bear with me here - I do have a point.

For this exercise, first take a moment to remember why instructive text exists. If you’ve read my article over on Vitamin on instructive design, you know that instructive text can be a great way to help get users oriented and communicate to them how to use an interaction (provided, of course, you keep it extremely short and make it stand out from other design elements).

Remember how the instructive text you’ve seen before looks. Remember that when users see text that stands out, positioned in close proximity to an input field, they’re likely to associate the two things and think the text is somehow going to be helpful. You do this yourself every single day.

Here’s an example of instructive text, in case you need help visualizing something. (In this example, a default value has been created for the email address input field to tell users what to enter.)

Now step back. Waaaaaay back. Imagine you’re not a geek. Imagine you’re, say, a scuba instructor. You have a degree in business, you used to be a rather successful sales manager, and you cashed out early to buy a hosue on the beach and teach people to scuba dive. You’re smart. You’re a bit of a genius, in fact, because you figured out how to live your life better than everyone you know. But you don’t have much experience with computers.

Imagine you know very little about using computers beyond how to buy a book on Amazon, maybe get your bank balance, and check your email. In other words, imagine you know as little about computers as most of the people who don’t work for your company. And imagine you’ve decided to apply for a part-time job at the scuba shop down the street. Sure, it’s a chain, but it’ll be fun. You click a link to get to the job application, and you see this.

Nice enough design. Nice enough logo. OK, let’s get started.

Take a look at what loads next on the page.

The red text here looks like it’s supposed to tell you something important, but it’s not telling you anything you understand. It’s not telling you to stop what you’re doing because there’s a problem with the site. It’s not telling you what to do instead. It’s not telling you it’s sorry for screwing up your plans.

What is it telling you? Seriously. Look at it like you’re new to all this. Close your eyes if you have to. Let all that web expertise drift away and then open your eyes and see this page like you have no idea what a SQL Server is.

Do you see it? Do you see how this looks like it’s supposed to be helpful? Do you see how this would frustrate you when you tried to complete this job application only to realize that the system was down and no one told you? Do you see how this red text is absolutely meaningless?

Good.

Now, come back to reality and tell me how you’re going to prevent this, in every application you work on, for the rest of your life.

Please, please, please. Get this.

Posted by Robert on December 16th, 2006

Older post: Design Stories: Character counters
Newer post: What makes a company great?