Putting the action panel on the UI
Set aside a block of space on the interface for the action panel.
Place it below or to the side of the target of the action. The
target usually is a list, table, or tree of selectable items, but
it also might be the Center
Stage, like the Powerpoint example in Figure 5-6. Remember
that proximity is important. If you place the action panel too
far away from whatever it acts on, users may not grasp the
relationship between them.
The panel could be a simple rectangle on the page. It could be one
of several tiled panels on the page, perhaps a Movable Panel, a "drawer" in Mac OS X,
or even a separate window. That choice depends on the nature of
your application. If it's closable, then make it very easy to
reopen, especially if those actions are present only on the action
panel and aren't duplicated in a menu!
Odds are good that you'll need to show different actions at different
times. The contents of the action panel may depend on the state of
the application (e.g., are there any open documents yet?), on the
items selected in some list somewhere, or other factors. Let the
action panel be dynamic. The changes will attract the user's
attention, which is good.
Structuring the actions
Next, you need to decide how to structure the actions you need to
present. Here are some ways you could do it:
If you categorize the actions, consider using a task-centered approach.
Group them according to what people intend to do. In the Powerpoint
example, for instance, there's an "Open a presentation" group, plus
several groups for creating new slideshows.
- Simple lists
- Multicolumn lists
- Categorized lists, like the Powerpoint example above
- Tables or grids
- Closable Panels
- Any combination of these in one panel
Still, try to present these groups linearly. Imagine reading the
actions aloud to someone who can't see the screen -- can you proceed
through them in a logical fashion, with obvious start and end points?
That, of course, is how a blind user would "hear" the interface.
Incidentally, you can also put controls on an action panel, like a
text field next to a "Search" button.
Labeling the actions
For each action's label, you could use text, icons, or both,
depending on what best conveys the nature of the actions. In fact,
if you use mostly icons, then you end up with... a traditional
toolbar! (Or a palette, if your UI is a visual builder-style
Text labels on an action panel can be longer than those on a menu
or a button. You can use multiline labels, for instance -- no
need to be overly parsimonious with words here. Just remember
that longer, more descriptive labels are betetr for first-time or
infrequent users, who need to learn (or be reminded of) what these
actions do. The extra space spent on long labels may not be
appreciated in dense high-performance interfaces used mostly by
experienced users. If there are too many words, even first-time
users' eyes will glaze over.
There's often no need to make the actions look like buttons, even
if they're implemented as buttons. Phrases written in blue text
communicate clickability, since they look like links on a web page;
you could enhance the effect by underlining them when the mouse
rolls over them. This is what Microsoft does in its interfaces that
use action panels. Feel free to experiment. However, usability-test
it to make sure users actually see the actions as clickable things,
not ordinary text or pictures.