Trees & Mixed Value Selections
Hi all,
Has anyone tested "mixed values" in trees in webapps lately? We
discussed this four years ago
(http://www.ixda.org/discuss.php?post=7380) and I'm wondering if
anything has changed.
Picture:
- A tree with selectable nodes (e.g. http://bit.ly/fEXrR)
The issue:
- How to indicate that some child items under a parent node are
selected, but not all
Options:
1) "Mixed value" square -- as seen in many desktop apps
2) Greyed out check (as seen in the example above)
3) Leave the parent node's checkbox empty regardless of whether some
of its children are selected (e.g. http://bit.ly/me8Hv)
Considerations:
- This is a webapp so options 1) and 2) would have to be specially
coded, and aren't "standard" on a webpage
- I tried option 1) and in usability testing, people had no idea what
it meant -- even when I had "(5 selected)" next to the mixed value
node.
Given 1) failed in usability testing, and 2) looks like the checkbox
is disabled, I'm wondering about 3) but don't know how I feel about
it. It's not fully accurate, but if my users can't understand the
mixed concept, perhaps it doesn't NEED to be accurate.
What it does mean though, is that if the tree is fully collapsed,
some nodes could be selected and the user would never notice.
Any thoughts, IxDAers? Getting frustrated over this one. (Darnit
users, UNDERSTAND!)
Meredith
Get the feed
Comments
On Mon, Sep 21, 2009 at 4:50 AM, Meredith Noble
<meredith at usabilitymatters.com> wrote:
> Hi all,
>
> Has anyone tested "mixed values" in trees in webapps lately? We
> discussed this four years ago
> (http://www.ixda.org/discuss.php?post=7380) and I'm wondering if
> anything has changed.
>
> Picture:
> - A tree with selectable nodes (e.g. http://bit.ly/fEXrR)
>
Do you have flexibility in the design of the tree itself, or at you
tied to the current checkbox + files UI?
Scott
--
"You always have the carny connection." - Clair High
I'm a fan of using a dash or emdash to indicate mixed value in trees,
but I have no idea how it tests w/ users.
Brandon E. B. Ward
brandonebward at gmail.com
UI • UX • Ix Design
Flex • Flash Development
Portfolio: http://www.uxd.me
LinkedIn: http://www.linkedin.com/in/brandonebward
VisualCV: http://www.visualcv.com/brandonebward
A human being should be able to change a diaper, plan an invasion,
butcher a hog, conn a ship, design a building, write a sonnet, balance
accounts, build a wall, set a bone, comfort the dying, take orders,
give orders, cooperate, act alone, solve equations, analyze a new
problem, pitch manure, program a computer, cook a tasty meal, fight
efficiently, die gallantly. Specialization is for insects.
- Robert A. Heinlein
I don't know what you're selecting, but I ran into a similar problem with a
tree control awhile back.
Our solution at the time was to display the items you selected in a separate
area of the page - to the right of the tree, in fact. The checkbox for the
parent either selected or deselected all of the children, but did not
represent the state of the child items. With the selected items always
visible on the right, and the parent having a predictable behavior, we had
no mixed-behaviors to explain, and folks generally "got it" without too much
trouble.
Not scientific, but perhaps helpful for your web-app world.
Bryan Minihan
CA Global Ops (SCM) - Project Manager
Email: bminihan at cisco.com
Phone: 1-919-392-1788
-----Original Message-----
Meredith Noble
Hi all,
Has anyone tested "mixed values" in trees in webapps lately? We
discussed this four years ago
(http://www.ixda.org/discuss.php?post=7380) and I'm wondering if
anything has changed.
Scott -- The tree isn't representing traditional files and folders,
so the design is wide open. I can do whatever I want (though I'm
sure the developers would like it if some components were steal-able
from common JS frameworks!).
Brandon -- thanks; I think that's what Mac OS does, but given that
my users didn't understand the square mixed value indicator, I'm
worried that they won't understand a dash either. It's a bit risky,
since I can't test again.
Bryan -- while playing around I added a total count at the bottom of
the tree ("104 selected") but perhaps I need to go further in your
direction, by listing them out directly. The problem is the number of
items in the tree: it could range between 1 and 3500 (sigh). If they
did a "select all" on the tree, that would be one massive list on
the right!
I think I'll still play around with that concept though... I agree
my best bet may be to get myself out of the standard tree entirely.
Thanks all!
Meredith
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45857
When you say 3500, does that mean total tree nodes or total top level
nodes? Is there only one level under the top level nodes, or can it
be several levels deep? Also, are there any general categories that
can be applied? I've used a combo box drop down before to limit
the amount of data in the tree. The drop down selects which top
level node you want, restricting the tree view data to only one level
(in my case). Another time I used a change in font (using italic
font) to indicate a partially selected sub tree. To be fair, I never
tested that, but we never had any customer complaints about it either,
fwiw. Other options could be to use accordian panels for the top
level nodes. If that isn't appropriate for your data, consider
using icons at the nodes and having a legend that explains your fully
selected, partially selected, and none selected icons. Just some
ideas for you. I have seen lots of ways to work around the
"partially selected" issue, but they are domain-specific so they
depend on your data and context. If the content is similar to a
file/folder structure, that is, its user-created data with few
limitations on organization and function, then you don't have too
many options. The standard tree view doesn't handle that situation
very well (as you've noticed), so if you aren't willing to settle
for compromises that you've already looked at, you may have to
consider a custom-built control.
Out of curiosity, what was the demographics for the usability test
you ran? I'm curious to know if older/younger people had more or
less trouble, or if there were any issues with people based on their
level of computer familiarity.
Brian
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45857
Unfortunately our testing was incomplete -- we were only able to test
5 people, so clearly not a great sample, but the pattern was still
clear (utter cluelessness with respect to the mixed value). It's
hard to know what to call the participants, but they keep track of
all of the service contracts / devices within their company. All were
middle-aged. I'd be really curious to repeat on people in their teens
/ 20s. I still fear that rates of understanding would be dismal, but
who knows.
I think the results are complicated by the fact that we were testing
a paper prototype. Testing a tree picker on a paper prototype is NOT
something I would recommend (!). I am having trouble deciding what
issues arose because they didn't experience the true dynamics of the
tree, vs. what issues are genuine.
I have UX designers in my own office telling me that they've never
seen a mixed value in their entire lives! This blows my mind. The
trouble is, I can't think of any immediate examples of panels with
them on OS X or Windows. Anyone??
To answer your question, 3500 = number of leaf nodes
Those can be arranged in an extremely simple hierarchy, or something
much more complex. The arrangement options are pretty limitless
(sadly) so I'm pretty much looking at a file system paradigm.
Unfortunately there is no additional sense of categorization that can
be layered on to limit numbers -- would have done that a long time ago
if I could have :)
Thanks for the suggestion of the legend, the italicization and the
accordion view. All are worth a ponder. I am trying hard to focus on
the 90% case, while still letting things work for the remain 10%.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45857
For anyone who wants a good example of the OS X-style dash option:
http://developer.yahoo.com/yui/examples/treeview/tv_highlight.html
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45857
For your designers, at least, you see this a lot in Adobe CS products.
Come to think of it, you also see it in Excel -- enable Autofilters, and
select only some of the values in the drop down.
Those are examples of mixed values, not tree hierarchies, of course.
Hope that helps,
Amy Jones
-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Meredith Noble
Sent: Monday, September 21, 2009 9:26 AM
To: discuss at ixda.org
Subject: Re: [IxDA Discuss] Trees & Mixed Value Selections
Unfortunately our testing was incomplete -- we were only able to test
5 people, so clearly not a great sample, but the pattern was still
clear (utter cluelessness with respect to the mixed value). It's
hard to know what to call the participants, but they keep track of
all of the service contracts / devices within their company. All were
middle-aged. I'd be really curious to repeat on people in their teens
/ 20s. I still fear that rates of understanding would be dismal, but
who knows.
I think the results are complicated by the fact that we were testing
a paper prototype. Testing a tree picker on a paper prototype is NOT
something I would recommend (!). I am having trouble deciding what
issues arose because they didn't experience the true dynamics of the
tree, vs. what issues are genuine.
I have UX designers in my own office telling me that they've never
seen a mixed value in their entire lives! This blows my mind. The
trouble is, I can't think of any immediate examples of panels with
them on OS X or Windows. Anyone??
To answer your question, 3500 = number of leaf nodes
Those can be arranged in an extremely simple hierarchy, or something
much more complex. The arrangement options are pretty limitless
(sadly) so I'm pretty much looking at a file system paradigm.
Unfortunately there is no additional sense of categorization that can
be layered on to limit numbers -- would have done that a long time ago
if I could have :)
Thanks for the suggestion of the legend, the italicization and the
accordion view. All are worth a ponder. I am trying hard to focus on
the 90% case, while still letting things work for the remain 10%.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45857
________________________________________________________________
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
The two best OS examples I can think of are, of course, Microsoft:
1. When you do a custom install of Microsoft Office (since 2003, I
believe), you're presented a list of features to install. The
mixed-select here is that you can select some options, which makes
the parent grey, select all options, making the parent white, or
select no option, which (IIRC) puts an X in the parent.
2. When you turn Auto Filter on, in an Excel spreadsheet, then click
the arrow next to a column name. When you select one child, the
parent check turns black; select all children, the parent gets a
check; and selecting none gets a big white parent check box.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45857
To add to the example mix, here a working sample from a company
called Telerik. Their custom asp treeview control uses a blue
gradient in the square to indicate a mixed mode:
http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/checkboxes/defaultcs.aspx
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=45857