Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 1 down vote favorite

I need to show a set of N items to the user, but I can render comfortably only M. (M ~ 20, N ~ 1000). The user then can select one or more of these items and then move on to the next stage. I need to be able to indicate the items already selected.

One approach that comes to mind is what Facebook does when you have to choose among your friends: they show you a bunch, and those already selected are shown as disabled. Your collection of selected friends is shown in a smaller container.

Any ideas on how to do this elegantly, without pagination?

share|improve this question
Why is pagination a inelegant solution? Did you mean that Facebook highlights selected friends because people who can't be selected are grayed out? – dnbrv Jan 14 '12 at 17:17
pagination has its own set of problems, and in my opinion its just a front end symptom of back end limitations (long queries to a db, for example). in facebook you have a large list of your friends, and a smaller one you want to fill. for those friends you already put in the smaller list, they appear grayed out on the bigger one so you know you cannot select them twice. – Dan Jan 15 '12 at 10:31
Facebook grays out friends when you come back to friend selection after having already sent them invites. The purpose is to avoid multiple notifications. Are you building something similar? As for pagination, it also plays an important role in UX as it reduces loading time for large lists. The only alternative for it is "endless scrolling", which still loads only parts of the list. – dnbrv Jan 15 '12 at 16:01

2 Answers

up vote 1 down vote accepted

You could use a List Builder pattern. The simplest form is as @JonnyBoats describes, but there are a great many options and variations out there (much ugliness abounds).

For your use case you could have the source list be either navigable via scrolling, tree-navigable, or filterable.

Here is a mockup of a filterable list with some tree navigation:
ugly
It even includes a "write in" option for the filter text – that option probably isn't something you need. It uses checkboxes instead of the usual "click unadorned line and click the Move button" mechanism since most users already know what a checkbox does and it's only one click (not two).

The key takeaway is to design the candidate pool (the left hand list) according to what qualities and attributes you have available, and which make sense to the user. If the 1000+ candidates naturally fall into a hierarchical structure, and your users are familiar with that hierarchy, then provide a tree navigator on the left. If the 1000+ candidates don't have a natural hierarchy but can be filtered by keywords, then provide a live filter mechanism. If the data-set doesn't have keywords but does have a number of fixed-value attributes then provide a set of switches to filter the candidate list.

Note that the visual design of "two side by side lists" is also open for redesign. You could have a much larger candidate pool floating above a smaller summary list or even collector buckets, just like how Google plus does it's circles.

Here is a great big list of ugliness design variations.

share|improve this answer
up vote 2 down vote

One interface I find easy to use is two lists with vertical scroll bars. On the left is the list of available items to choose from and on the right is the list of selected items. One can then use the mouse (or keyboard) to move items from one side to the other.

So for example the screen might start out like:

Bob
Mary
Sam
Fred
Jane

And the user moves Sam and Jane from the left to the right and the screen looks like:

Bob        Sam
Mary       Jane
Fred
share|improve this answer
Thanks JonnyBoats but your approach works best if both lists could have the same order of magnitude of elements. In my case, the source list has thousands whereas the target may have up to 5. – Dan Jan 15 '12 at 10:29
Actually my FTP client uses exactly this interface and may have 1,000s of files on the server and a relatively small number locally. Vertical scroll bar works much better than pagination for quickly moving through the list. This is how the file explorer in Windows works as well. – JonnyBoats Jan 15 '12 at 16:49
still, in an FTP client you could conceivably have the same amount of elements in each side. my case is particular in the sense that you have to choose up to 5 from a huge set (say a couple of thousands) – Dan Jan 15 '12 at 17:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.