Check this out:

Figure 1. Huh?

Weight of what? A person? A product to be shipped?

What is the unit? Pounds? Kilos? Tons?

Not good. Give users hints about what you’re looking for.

Static hints

This is better:

Figure 2. Static hints

The field is for the weight of the user, in pounds. The field is short, to match typical numbers users would type.

Notice the example – 190. Examples help people know what you expect.

These hints are static. They’re always visible. Most of the time, that’s all you need.

But there will be a few people who want to know more. Why do you want to know their weight? What will you do with the information? Will you sell it? What happens if I leave the field blank?

Maybe you want to answer these questions. But you’ll clutter the screen if all of the answers are shown all of the time.

Active hints

A solution is to use active hints. Active hints start off hidden. They’re only displayed when users ask for them.

Here’s a sample. It starts like this:

Figure 3. Active hint link

Click on the help link, and this appears:

Figure 4. Showing active hint

Click on the link again, and the hint vanishes. You can try it.

Here’s the code:

...
.help_link {
  color: blue;
  cursor: pointer;
  margin: 3px 0 3px 0;
}
.help {
  margin: 10px;
  padding: 3px;
  border: black dotted 1px;
  background-color: #F0F8FF;
  font-size: 12px;
  width: 400px;
}
.help p {
  margin: 6px 0 6px 0;
}
...
$(document).ready(function() {
  //Hide all help hints.
  $(".help").hide();
  ...
  $("#email_help_link").click(function() {
    $("#email_help").toggle("fast");
  });
});
...
<div class="form-field-group">
  ...
  <p id="email_help_link" class="help_link">[Help]</p>
  <div id="email_help" class="help">
    <p>
      If you enter your email address, we can send you product
      updates. We promise not to sell your email address, or
      use it for marketing purposes.
    </p>
    <p>
      This field is optional.
    </p>
  </div>
</div>
...

Figure 5. Code the show active hint

Line 30 shows the help link. The help message is in the <div> from lines 31 to 40. Line 21 hides the help message when the page is first shown. Line 21 hides everything with a class of help. So if there were ten help messages on the page, line 21 would hide them all.

The Help link in line 30 has an id of email_help_link. Line 24 tells the browser what to do when the user clicks on the link:

   $("#email_help").toggle("fast");

This tells the browser to “Find the element with an id of email_help.” That’s the help message in lines 31 to 40. Then “ toggle the visibility of the element.” If the element is not visible, show it. If it is visible, hide it. "fast" says to make the transition quick.

The result? A page can have detailed help messages, but they don’t clutter the screen. They’re only shown when the user asks for them.