Hints All the Way

Hints All the Way.

One of the best ways to make your site easier to use is to provide hints to your visitors everywhere you can. You might think that sounds simple enough, but the amount of time required to do it and the number of things to consider puts a lot of web designers off.

Visitors Don't Know Your Site.

You have to consider that the overwhelming majority of your site's visitors are likely to be visiting for the first time – some of them may be loyal visitors, coming back over and over again, but the modern web lends itself more to being dipped in and out of using search engines and links from other sites. If there's some kind of process visitors need to go through to accomplish something on your site, you can't assume that they have any familiarity with it at all.

For this reason, it's important to scatter hints across your site. Whenever there's something that could seem mysterious if you hadn't used it before, hints should either appear automatically or be easily accessible, in case the user needs to know what to do.

Question Mark Icons.

One of the easiest ways of doing this is to put question mark icons next to things that you think might be confusing. For example, at a website that lets people pay their water bill, I saw this:

Register for Online Billing

First name: ____

Last name: ____

Account no.: ____ [?]

Notice the question mark next to the input box for account number – this was provided because, of course, not every customer is likely to know their account number by heart, or where to find it. Clicking the question mark popped up an image of a paper water bill, with an arrow pointing to where the account number could be found. Unless you want customers to wonder 'what account number?', that's the best way of doing things.

Alt Text.

Alt text is the contents of your images' alt tags – that is, text you put in your image tags' alt properties, like this:

The main purpose of this text is to provide an alternative form of display for browsers that don't support images, and blind users. However, it also has another purpose: as 'tooltips', to provide hints. If you have a small icon of a printer, for example, and clicking it causes the current article to change to its print CSS and then print, then you make make the alt text look like this:

Now, when users hover over the printer icon, the text "print this article" will appear as a tooltip – that is, black text in a yellow rectangle. This is useful for letting users know what will happen when they click parts of your site, without having to have text next to everything – especially good if you're limited for space, or you expect lots of people to use your site from mobile devices like phone and PDA browsers.

Javascript.

Finally, one of the best ways to make your hints context-sensitive is to use Javascript. Not only can you enhance the alt text boxes to look nicer with Javascript, but you can also display hints entirely automatically. For example, you might have a form that asks for someone's state and date of birth:

State: _____

Date of Birth: _____

Using Javascript's onfocus event, you can easily write a little code to not only highlight the box the visitor is currently typing into, but also provide a hint next to it – so when I'm typing my state, the hint can say 'two letters is fine – just CA or NY', and when I'm typing my date of birth the hint says 'dd/mm/yyyy'.

What does this approach achieve? Well, it lets you provide hints when they're needed, without having to clutter the page with them or put them in small, faded text that makes them hard to see. Making your site sensitive to context when it comes to helping the user get things done is one of the big keys to better usability.