David:
Are there any good conventions for displaying a "partially selected
checkbox"?
I'd recommend against referring to this state as 'partially selected';
instead, think of it as 'partially activated'. You'll see why in a
moment.
Adam:
The standard Mac OS behavior is to indicate partial selection with a
horizontal line instead of a check mark.
See http://twitpic.com/11co for an example from Linotype FontExplorer
on Mac. The parent grouping is the Arial Narrow font family, and one
of the members of the family has been disabled. I don't have a Windows
box handy at the moment, but I'm sure I've seen the same usage in apps
that don't use the standard Windows tree control.
I think this is more successful than the "greyed out" check mark
that a couple of people mentioned, since the greying may make the
control look unclickable (unless that's what you want).
IMO, 'greyed out' state displays should be reserved for 'currently
inactive AND inaccessible' controls. However, if you're rolling your
own control imagery, Christine's suggestion of all-black, half-black,
and all-white could work if used consistently.
Clicking on a partial checkbox acts like "select all." I think
there's a similar Windows standard, but I can't remember if it's a
horizontal line or something else (I seem to remember a dot or
square? not sure...).
The horizontal line might be problematic if your tree control uses
pluses (+) and minuses (-) for expanding/collapsing the tree because
you'd have one visual cue for two distinct controls, which could
cause confusion. Mac OS uses right-facing and down-facing triangles
for expand/collapse, which avoids this issue.
You'll also note from the Mac example that there are different visual
cues for active/inactive (checkboxes for child objects), partially-
activated group (check box for the parent object) and current
selection (the dark background for the currently-selected font).
The last of these cues is important in cases where useful information
or interaction related to the *currently-selected* item can be
accessed whether or not the item is *currently-active*. That's why I
warn against confusing activation and selection.
For example, in the UI sample I provided, Arial Narrow Bold is
inactive and selected. Because it is the current selection, Linotype
FontExplorer shows me quite a lot of information (not shown in the
screenshot) that helps me decide which fonts should be active and
which shouldn't. I can shift-click on another font, Arial Narrow
Italic, to make a discontiguous selection without changing the
activation state of the two fonts, and the app shows useful
information about both fonts. Contextual commands are available to set
all selected items to a common active or inactive state, regardless of
their current activation state.
Regardless of the visual design you adopt, ALWAYS account for all the
overlapping functional states a given control can be in, including
FAIL. That's somewhat important for the visual design, but it's
absolutely required for proper communication with your developers.
- Will
Will Parker
[EMAIL PROTECTED]
On May 13, 2008, at 8:30 AM, David Mathew wrote:
I have a tree of checkboxes and I'm trying to think of the
clearest way to show the user an indication that a parent checkbox
is in one
of the following three states:
1. All of its items (child checkboxes) are selected/checked
2. Some but not all of its items are selected ("partially selected",
ie some
child checkboxes are checked and some are not)
3. None of its items are selected (no child checkboxes are checked)
Cases 1 and 3 are easily shown with a checkmark or lack of a
checkmark, but
what about case 2? What is the best way to visually indicate the
partial
selection to the user? Should the indication be different in a web
application as opposed to a windows application? (I'm currently
working on a
web application)
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... [EMAIL PROTECTED]
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... [EMAIL PROTECTED]
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help
