Visual indication of a partially selected group

13 May 2008 - 9:30am
6 years ago
11 replies
1564 reads
David Mathew
2008

Are there any good conventions for displaying a "partially selected
checkbox"? 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)

Comments

13 May 2008 - 11:13am
martinpolley
2007

>
> Are there any good conventions for displaying a "partially selected checkbox"?
>

One I have seen a lot (in Windows) is a gray checkmark for Case 2.

HTH,
--
Martin Polley
Technical writer, etc.
+972 52 3864280
<http://capcloud.com/>

13 May 2008 - 11:15am
Oleh Kovalchuke
2006

I have seen it done with check box, which is selected with grayed check mark
(the checkbox itself wasn't gray). That "made me think", but not for too
long.

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

On Tue, May 13, 2008 at 9:30 AM, David Mathew <mathewda at gmail.com> wrote:

> Are there any good conventions for displaying a "partially selected
> checkbox"? 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 ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

13 May 2008 - 11:47am
cneidley
2008

Does it need to have checks? Why not have a box that is completely
filled in for the first [all black], half filled in for the second
[black/white], and empty for the third [all white]? This may also help
differentiate the parent folders from the children by having the
children be all checkboxes.

-Christine

On Tue, May 13, 2008 at 1:15 PM, Oleh Kovalchuke <tangospring at gmail.com> wrote:
> I have seen it done with check box, which is selected with grayed check mark
> (the checkbox itself wasn't gray). That "made me think", but not for too
> long.
>
> --
> Oleh Kovalchuke
> Interaction Design is design of time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>
>
>
>
> On Tue, May 13, 2008 at 9:30 AM, David Mathew <mathewda at gmail.com> wrote:
>
> > Are there any good conventions for displaying a "partially selected
> > checkbox"? 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 ....... discuss at ixda.org
> > 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 ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

13 May 2008 - 12:29pm
Adam Korman
2004

The standard Mac OS behavior is to indicate partial selection with a
horizontal line instead of a check mark. 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). 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.

-Adam

On May 13, 2008, at 8:30 AM, David Mathew wrote:

> Are there any good conventions for displaying a "partially selected
> checkbox"? 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)

13 May 2008 - 12:20pm
Corn Walker
2008

On May 13, 2008, at 11:30 AM, David Mathew wrote:

> Are there any good conventions for displaying a "partially selected
> checkbox"? 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:

I've seen a number of conventions in use, including completely
filled, partly filled, and empty boxes for 1, 2 and 3 respectively as
well as black check marks for 1 and grey check marks for 2. On the
Mac OS the Omni Group applications use a check mark for 1 and a dash
for 2 although on Windows the latter might lead to confusion with the
tree collapse and expansion widgets (Omni uses a disclosure triangle
for tree expansion and collapse).

Corn Walker
The Proof Group
http://proofgroup.com/

13 May 2008 - 2:01pm
Will Parker
2007

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
wparker at channelingdesign.com

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 ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

13 May 2008 - 2:20pm
Paul Eisen
2007

David Mathew asked:
> Are there any good conventions for displaying a "partially selected
checkbox"?

Check boxes with mixed-value state have been around a long time, dating
back to GUI's in the 80's. The most common representation I've seen is
gray fill of the entire check box - usually dithered (probably because
that was the state of the art for gray in the earliest incarnations).
See Check boxes, Figure 6.12 in the Gnome Usability Project's Human
Interface Guidelines for one example
(http://developer.gnome.org/projects/gup/hig/hig-diff/controls-check-box
es.html).

MS Office 2007 uses green fill - same idea, different styling.

Displaying a gray check mark is a poor solution for reasons stated in
Adam's posting.

Paul Eisen
Principal User Experience Architect
tandemseven

416.840.4447 office/mobile
peisen at tandemseven.com
http://www.tandemseven.com

16 May 2008 - 5:56am
Anonymous

> Are there any good conventions for displaying a "partially selected
> checkbox"? 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...

An idea that springs to mind for me is a partial fill approach - "I
give this movie three and a half stars" - although circles might be
more appropriate.

If you have the ability in what you're developing, you could indicate
the proportion selected by turning it into a mini pie-chart with
colour differentiators for completely selected or completely
unselected (a traffic light esque thing, perhaps)

That might be overkill for what you're doing, though....

Alex.

16 May 2008 - 6:45am
Rakitin Karamazov
2008

I've seen some software use a color to fill in the checkbox for state
two. The fill color is the same as the color of the check that is
present in state one.

Turning the checkbox gray makes it seem unavailable -or at least
un-interactable- which is not the message you are trying to send.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=28994

16 May 2008 - 9:27am
Pawson, Mark
2007

We are working on this same issue right now in our desktop app and we
are using the small green filled square inside the checkbox for case
# 2. I have seen this used a lot in Windows to the point that I have
just assumed it is a standard. I will admit the first time I saw it
during a Visual Studio Install I wondered what it meant. However
expanding the treeview to display both Parent and child nodes quickly
explained it.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=28994

16 May 2008 - 11:48am
Jack L. Moffett
2005

On May 16, 2008, at 8:27 AM, Mark Pawson wrote:

> We are working on this same issue right now in our desktop app and we
> are using the small green filled square inside the checkbox for case
> # 2. I have seen this used a lot in Windows to the point that I have
> just assumed it is a standard.

It is a standard—right out of the Windows XP style guide.

Jack

Jack L. Moffett
Interaction Designer
inmedius
412.459.0310 x219
http://www.inmedius.com

Design is a process -
an intimate collaboration between
engineers, designers, and clients.

- Henry Dreyfuss

Syndicate content Get the feed