Best way to select a subset of items in a long list

Question

One of our clients wants us to build a web application to share information about the magazines he publishes. Each edition of a magazine contains a variable amount of advertisers. These advertisers come from a central pool of advertisers. This pool contains (at the moment) about 150 advertisers. Each edition of a magazine contains a subset (about 70-80) of these advertisers.

Our client wants us to come up with a way for him to add 70-80 advertisers from this list of 150 to an edition of a magazine. It needs to be as fast as possible, as easy as possible and as intuitive as possible.

What would be an ideal solution here? I was thinking about something in the lines of the image below.

1. List of available advertisers.
2. List of selected advertisers. Advertisers have a delete button.
3. Textbox with auto-suggest for advertisers in the list on the left. <Enter> removes the advertiser from the left list and adds it to the right one. Textbox gets cleared and remains focus.

My colleagues suggested drag-and-drop or just one list with a checkbox for each advertiser, but those approaches force the user to do a lot of searching and clicking. With my approach the user can just keep on typing.

Any other suggestions for this situation?

Answer 1

Your design Kristof is pretty good already. You've nailed very important things like stopping this mouse and keyboard back-and-fourth action - that's gonna ruin the experience. And I'm with you on the drag-and-drop - yuk!

I've just refined your idea a little:

• Obviously mouse clicks on the left items will add them to the right.
• You would want the text filter to be Google Style - ie. multi-word, partial matching. As in the search input "rce bm" would match the third item shown in the diagram. This is easy to do and gives the user a powerful, intuitive way to look for names. Second-rate filtering (like start-of-string) will only frustrate users and put them off from using it again. Since the filtering is so critical to the interface, it better work well.
• Another way to save time for the user (as someone else suggested) would be to have a partially completed list in the "selected advertisers" side. If you thought that there was a good chance the "top 10 most used" advertisers would be a 70% or greater hit, then might as well dump them in the right hand list on load right? Worst case the user has to delete one or two (1 mouse click each) of the top 10 and the remaining 7 items that they want have saved them searching for them. Tweak the numbers in this idea to relieve the user of more work.

Remember: The more work you can do for the user; to reduce their clicking, looking and searching, the faster, easier and likeable your interface will be.

Answer 2

I work for a company that publishes magazines, so I'm a little bit familiar with your domain.

I imagine the list of advertisers doesn't change much from issue to issue, so I would have the advertisers from the previous issue selected by default.

Since you only have 150 advertisers, and about half of them will be selected, I wouldn't bother with a search. I would start with a simple checkbox list and see how well that works. Make sure the items that are selected are visually distinct (e.g. make them bold) so it's easy to scan.

Answer 3

My first post, so please be gentle and I'll do the same :-)

While there are some good ideas here, I don't think any of them quite meet the requirements of the original poster:

"Our client wants us to come up with a way for him to add 70-80 advertisers from this list of 150" - Kristof Claes.

I certainly agree with many of the nifty ideas in which users would be able to filter results and add them to the Selected Advertisers list, we still need a way to bulk add approximately 70 advertisers to the selection. While the filtering ideas are quite good, it would merely lead to an application much like any e-mail application where the user is specifying the recipients in the "to" field. Imagine having to add 70 recipients by hand!

Ideally, we would not want the following workflow:

1. Type of phrase to search on
2. (Results appear)
3. Use either presses enter for the auto-completed item or selects one or more items from the appearing list
4. Repeat steps 1 to 3 until approximately 70 advertisers have been added

I see some fine posts here from many people who really know their stuff, but I think some have gone perhaps a off topic and are somewhat focused on implementation technologies rather than the psychology of good "user interface design".

My final thought to this thread is – perhaps some sort of mechanism to add "groups" to the selection as this would certainly reduce repeating the same workflow 70 times. Some software that I have seen will pick advertisers in a "round robin" approach. Certainly this could help to some of the selection; in addition, you could have predefined groups that you may always want added, perhaps a list of your top paying advertisers or advertisements for products that are "new".

And now for something slightly off topic...

Matty, I see you mentioned Apple and in particular the iPhone -

...we can learn from the iPhone ...key is about making reasonable assumptions that eventuate in decisions made for the user...

Not quite sure which you mean by that after our talk the other day. Not only are touch devices , perhaps less usable, but Apple generally has a history of making software that makes you wonder what they really think of their user base. A prime example – if you wish to rename your iPad device, first you will need to connect it to a computer that in addition has iTunes software. Why on earth I cannot simply go into the General settings of the iPad is anyone's guess.

The best user interfaces are of the style – "inductive user interface design", as opposed to – "deductive user interface design" or in other words – "trial and error". Touch devices fall into the latter category. Let me explain:

If anything touch devices made popular by Apple as in the iTouch, iPhone, and now the iPad have if anything thrown software usability back into the Stone Age of "deductive user interfaces". Like a very badly designed glyph on a button , leaving the user to think – "my goodness, what does that mean?", staring at the screen of a touch device, it is not immediately apparent that using two fingers allows the user to zoom in or out; or my favourite – that holding your finger down and an icon for two seconds or so puts the device into "delete mode".

In the same way that a badly designed icon falls into the category of – "I don't know what that means, but after I use it for the first time, I'll usually remember what it does", many touch devices fall into the category of deductive user interfaces because the user must deduce what the program can actually do by "playing with it" therefore reducing its immediate usability.

Keep up the fine work!

MickyD's Random Thoughts

Answer 4

The entire list of advertisers should have filtering on top of it (basically putting your "3" on top of your "1" and have "3" dynamically effect "1"'s content):

• Search (on the fly narrows down the list)
• Groups ("Last Used", "Fashion", "Electronics", etc.)

Note - if your search is powerful enough, you can use just one control hence searching for "fashion" would return all the advertisers that have "fashion" in their name, or that have been tagged as belonging to the "fashion" category.
The "Last Used" can be a check box.

Main benefit:
Narrowing down the list on the fly allows you to select all the relevant items together and move them.

Example: You type "electronics", get a list of all the electronics related advertisers, you select them all (with the mouse, ctrl+A or whatever other method) and immediately move them to the right list.

Answer 5

I have to agree with Micky Duncan : I think searching/grouping/filtering are not at all suited for this task.

You don't want to search and select a few items from a big list. You want to select about half of all items on the list. If the user has to select half of the items, the user will want to make sure he has selected all candidates and not missed anyone. So the workflow is more akin to the following:

Imagine you have the List of 150 advertisers on paper. You would go through the list from top to bottom and decide for each one "do I want this advertiser?" And then give it a tick or a strike-through and at the end you are sure you have evaluated all of them.

So the Design should be like this:

The focus is on the top item in the middle list and the user can use arrow keys left and right to either discard the item, or put it into the selected list. So he can rapidly work through the whole list by pressing left or right depending on the advertiser and is sure he has given each one some thought and not missed any.

Answer 6

I have this UI that might be relevant.

It could be useful if the advertisers were somehow organized in categories, and the user knew in which category is each one.

It's a mouse-only UI, requiring a single click per advertiser.

It can be operated with the keyboard, but the menu closes and has to be expanded again for each selection. This can be fixed by not closing the menu on Enter.

Answer 7

Looks like your solution is a pretty good one. I'd remove the left list as it doesn't really add any information (it's just a long list, and it's going to be hard to tell that something just evaporated from it after pressing Enter) and just offer a search field with autocomplete (although there should be a dropdown from that field so users can still see what options are available) and add a big "Add advertiser to list" button in case your user(s) don't know to press Enter.

Get this to working prototype stage ASAP (using mock data) and then demo it with your client and have them run through it. Getting their feedback as soon as possible is critical since they'll be the ones using it frequently and therefore they need to feel comfortable with it.

Answer 8

I agree with the points raised by MickyD and Patrick. It all depends on how the selection of advertisers are made. Will the client use the UI to select the advertisers that should be in a specific issue or does the client already have a list with the advertisers in the specific issue. I don't think filtering is the best solution in either case.

If the client uses the UI to select the advertisers it should work much better to just present one list with a checked/unchecked state. As Patrick wrote it is good idea to make the selected state stand out. It is also possible to make the unselected state appear lighter rather than just bolding the selected state. The client moves in the list using key up/key down and checking/unchecking using space (or a similar key).

If the client has a list with the advertisers appearing in the specific issue the first approach should be to check if that list could be received in digital form and automatically imported. If that is not possible perhaps the list is sorted in some way and then UI should sort the advertisers in the same way.

The third option is that either the client looks through the issue searching for advertisers or he has a list that is unsorted. In this case it makes sense to have a filter function.

The point is that without knowing the goal and the circumstances surrounding the task it can be really hard to provide a good solution.

Answer 9

I would use two lists, and two buttons. The user can mark single elements in the left list with a mouse click, double click will move the element to the right list.

He can shift-click,click mark a range, and with the [ > ] button transfer all marked elements to the right. With Ctrl a single element can be switched from marked to unmarked state and back again.

Ctrl-a would mark all elements. All is known from other program interfaces.

Alphabetic sorted elements would make it easy to find an entry, the first character could be used as a hotkey to navigate to that entry, if scrolling is neccessary.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a,d,e,f}foo is now marked on the left. With [ > ] the user moves them to the right.

Such interfaces are pretty fast, easy to use, and easy to understand. Maybe you can add tooltiptext or name the buttons 'move to List of selected items' and 'remove from List of selected items.'.

After moving to another List, this list has to be resorted.