jQuery in Action
Putting events (and more) to work
113
The goal for this example seems simple: to allow users to select the type and
number of appetizers they would like added to their order. No problem, right? A
series of check boxes and text boxes will do nicely as the expected
series of check boxes and text boxes will do nicely as the expected
GUI
element
for making multiple choices and specifying the quantities.
But there's a small catch: for each appetizer, other options must be presented.
For example, when ordering Crab Rangoon, diners can choose sweet-and-sour
sauce, hot mustard, or (for those who can't decide) both. Again, this shouldn't be
a problem because we can associate a series of radio buttons representing the
options with each appetizer entry.
sauce, hot mustard, or (for those who can't decide) both. Again, this shouldn't be
a problem because we can associate a series of radio buttons representing the
options with each appetizer entry.
But as it turns out, this does lead to a small problem. With a little
HTML
coding
and some
CSS
magic, we create the layout shown in figure 4.10.
Even with only five appetizer choices and their corresponding options, the
number of controls is overwhelming; it may even be difficult to see the choices
the diner has made so far. The form works as required, but its usability leaves
much to be desired.
the diner has made so far. The form works as required, but its usability leaves
much to be desired.
We can solve this usability dilemma by applying a principle known as progres-
sive disclosure. We don't need to present options for an appetizer the user isn't
ordering, so we'll hide the radio button options until the user needs to see them.
ordering, so we'll hide the radio button options until the user needs to see them.
Progressively disclosing information as it's needed will vastly improve the
usability of the form by reducing the confusing clutter, as shown in figure 4.11.
Figure 4.10 All our appetizers and options are displayed, but the screen is a
jumbled mess!
jumbled mess!