Long list with multi-select

20 Jan 2009 - 2:51pm
5 years ago
9 replies
2564 reads
R Sengers
2008

I'm looking for a solutions for a form that includes a very long list of
items, where user needs to select one or more items in the list. User needs
to have a sense of what has been selected (or number of items that have been
selected). User needs to be able to jump quickly to items in the list that
they want.

Traditionally, this is solved by a listbox where multiple items can be
selected (using Ctrl-Click). Or the pattern that Tidwell calls "List
Builder" that has 2 listboxes - you pick items from box on the left and
click an arrow button to move them to the right, so you can easily see what
you've selected (Example:
http://welie.com/patterns/showPattern.php?patternID=parts-selector)

I think that these are difficult to use, and it is hard to navigate to the
item you are interested in. And the List Builder takes up a lot of real
estate.

Do you have examples of good alternatives?

One option we are considering is putting the list of items is in an iframe,
alphabetically sorted, with a checkbox next to each item. There could be a
"jump to" text entry field above it. As you type in letters, the list jumps
down to the first item that starts with those letters. You can check/uncheck
items. There would be a way to check all or uncheck all items. Above the
list it would say how many items are selected. Does anyone have examples of
something like this?

Thanks!
Rachel

Comments

20 Jan 2009 - 6:46pm
Marijke Rijsberman
2004

Look at the brand selector on endless.com. I think it has all the features
that you list. (Note: most users don't use the box at top.)

Marijke

Rachel said:
I'm looking for a solutions for a form that includes a very long list of
items, where user needs to select one or more items in the list. User needs
to have a sense of what has been selected (or number of items that have been
selected). User needs to be able to jump quickly to items in the list that
they want.

20 Jan 2009 - 7:12pm
Chauncey Wilson
2007

Hi,
A few questions and comments here:

1. What is the frequency of use of the long-list-selector mechanism? Is
this something that will be a rare task or one where people will be using
many times a day?
2. How long is long?
3. Will the items have more than on attribute on which you might want to
search?
4. You might want to brainstorm on metaphors where there are many items in
some kind of list.
5. How many items might be in an average sample?
6. Will the first letter or "starts with" search approach work or will
users possibly remember something that is "contained" in the list item.
7. Do you operate on the items in any way other than selecting them
(delete, rename, etc.)?

Chauncey

On Tue, Jan 20, 2009 at 2:51 PM, Rachel <rachseng at gmail.com> wrote:

> I'm looking for a solutions for a form that includes a very long list of
> items, where user needs to select one or more items in the list. User needs
> to have a sense of what has been selected (or number of items that have
> been
> selected). User needs to be able to jump quickly to items in the list that
> they want.
>
> Traditionally, this is solved by a listbox where multiple items can be
> selected (using Ctrl-Click). Or the pattern that Tidwell calls "List
> Builder" that has 2 listboxes - you pick items from box on the left and
> click an arrow button to move them to the right, so you can easily see what
> you've selected (Example:
> http://welie.com/patterns/showPattern.php?patternID=parts-selector)
>
> I think that these are difficult to use, and it is hard to navigate to the
> item you are interested in. And the List Builder takes up a lot of real
> estate.
>
> Do you have examples of good alternatives?
>
> One option we are considering is putting the list of items is in an iframe,
> alphabetically sorted, with a checkbox next to each item. There could be a
> "jump to" text entry field above it. As you type in letters, the list jumps
> down to the first item that starts with those letters. You can
> check/uncheck
> items. There would be a way to check all or uncheck all items. Above the
> list it would say how many items are selected. Does anyone have examples of
> something like this?
>
> Thanks!
> Rachel
> ________________________________________________________________
> 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
>

20 Jan 2009 - 7:12pm
Andy Edmonds
2004

After testing a safety incident reporting form with 50 factory workers in
2004, I came up with a edit mode / read mode model for multiple selection.
Only 1 of 50 participants reported knowing ctrl-click (none used it), and
49/50 checked email regularly.

I released the code to open source and someone made it even better. See:
http://www.frequency-decoder.com/2006/03/10/unobtrusive-alternative-selectlist-widgit

hth, Andy
http://surfmind.com

On Tue, Jan 20, 2009 at 2:51 PM, Rachel <rachseng at gmail.com> wrote:

> I'm looking for a solutions for a form that includes a very long list of
> items, where user needs to select one or more items in the list. User needs
> to have a sense of what has been selected (or number of items that have
> been
> selected). User needs to be able to jump quickly to items in the list that
> they want.
>
> Traditionally, this is solved by a listbox where multiple items can be
> selected (using Ctrl-Click). <http://www.ixda.org/help>
>

20 Jan 2009 - 7:32pm
stepheneighmey
2008

this builds on another solution i found recently, though it does take
up some real estate and is similar to your solution.

it starts with an open text box that auto populates as you type. the
auto population tries to match the elements in the very long drop
down list, which is just below the free text field.
if it finds a match, it brings up the results in the drop down list,
but, if you open the drop down you see only the 10-15 items before
that result and the 10-15 items after that result.
this saves system resources (by not having to build the drop down
list in its entirety when a match is made) and lets the user scroll
to a similar result nearby.
this then does utilize your suggestion of the separate box that uses
a back & forth arrow to populate and depopulate the collection box
from your choice in the drop down list, though this could be located
below the drop down with up & down arrows for pop/depop.

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

20 Jan 2009 - 8:13pm
R Sengers
2008

Responses below. Thanks for the questions, they are helpful!

On Tue, Jan 20, 2009 at 7:12 PM, Chauncey Wilson
<chauncey.wilson at gmail.com>wrote:

>
> 1. What is the frequency of use of the long-list-selector mechanism? Is
> this something that will be a rare task or one where people will be using
> many times a day?
>

Answer: very rare task

>
> 2. How long is long?
>

Answer:
from 1 to 250, depending on the situation
- If 1, we will show read-only text, not as checkbox
- If list is short, will show as a list of items w/ checkboxes
- if list is long, need a special control (as I've described)

> 3. Will the items have more than on attribute on which you might want to
> search?
>

Answer: Maybe, but it is not critical.

5. How many items might be in an average sample?
>

Answer: few. It is very rare that you would see a long list (only a few
users of the system would see a long list)

> 6. Will the first letter or "starts with" search approach work or will
> users possibly remember something that is "contained" in the list item.
>

Answer: "Contained" within feature would be nice, but not sure if it is
critical. (I notice that endless.com, mentioned by Marijke, has that feature
in the brand selector)

7. Do you operate on the items in any way other than selecting them
> (delete, rename, etc.)?
>
>
Answer: No, it's just selecting.

Another wrinkle is that in the future, the list of items may become
hierarchical - but we don't need to cater to that possibility now.

Thanks,
Rachel

21 Jan 2009 - 10:54pm
DampeS8N
2008

Without really knowing what you are talking about, we can't offer a
real solution.

There is nothing that will work in all situations. It is going to
have to be tailored directly to your problem.

If you can't tell us what that problem is in enough detail to grok
it, we can't solve it. We can just stab in the dark.

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

21 Jan 2009 - 11:04pm
Bill Welense
2008

Hi Rachel,
Have you thought of using the type of selector that LinkedIn has for
managing your contacts? It would be a rolodex/address book style with
alphabetical tabs along one side or the other. Within each tab would
be each item that starts with that letter with a checkbox to the left
of it. When selected, it would change the color of the tab for the
letter a different color. If there were no items starting with that
letter you'd want to indicate as much so the user would click it and
find an empty list.

Basically, you'd have 27 tabs, one for each letter and one with a #
sign for numbers, running down the left side. Each tab would have
three color-coded states:
1. Empty - white with light grey text
2. Items available - white with black text
3. Items selected - blue with white text

There could also be a search box at the top to filter the list.

Good luck!

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

25 Jan 2009 - 5:22am
Adrian Howard
2005

On 21 Jan 2009, at 01:13, Rachel wrote:

[snip]
> Answer:
> from 1 to 250, depending on the situation
> - If 1, we will show read-only text, not as checkbox
> - If list is short, will show as a list of items w/ checkboxes
> - if list is long, need a special control (as I've described)
[snip]

As an aside - I've always been surprised by how well large numbers of
check boxes test with users.

They have the advantage that (in web apps anyway) the user can quickly
scan all the entries. With a multiple column layout and clear styling
on selected items it can be very effective.

I wouldn't automatically discard a list of check boxes just because it
had a couple of hundred entries.

Cheers,

Adrian

5 Feb 2009 - 2:43pm
Jeffrey D. Gimzek
2007

On Jan 21, 2009, at 7:54 PM, William Brall wrote:

> Without really knowing what you are talking about, we can't offer a
> real solution.
>
> There is nothing that will work in all situations. It is going to
> have to be tailored directly to your problem.
>
> If you can't tell us what that problem is in enough detail to grok
> it, we can't solve it. We can just stab in the dark.

Bullpucky. She said what she wanted to do.

She wants a widget to do ONE THING. The data set is not important to
designing an interaction model.

I understood it, so did at least 8 other members.

I think Marijke's post gave an excellent answer that solves the
problem quite well:

<http://www.endless.com/landingpage/brandwomen/ref=home_sb_wm?node=242169011&landingType=department
>

Could there be other solutions that better apply to her needs? Perhaps.

Do we have enough to go on with out more info? Yes.

I have dealing with a similar issue with multi-select, and I think the
endless.com model is great.

Thanks, IXDA.

--

Jeff Gimzek | Senior User Experience Designer

jeff at springstudio.com | www.springstudio.com

Syndicate content Get the feed