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.