Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Given the context that this is an institutional product, it is a web-app that enables educators to manage students. The way the UI has been designed, there is a pop-up that will allow a user to add students from a predefined list.

My goal is to make it as easy as possible to:

  • A. Easily search for the student
  • B. Allow a multi-select student functionality
  • C. View the students you have selected

Is there a best practice to have a multi-select functionality within a small real-estate constraint for a possibly overwhelming list? The flow should be seamless and easy. Though this is a huge component of the web-app, it is just a way to manage 1 part of the process so it can not be another screen. It is a simple pop-up that activates when a certain area in the site is clicked.

I have supplied an image below that represents the wireframe UI of this functionality.

enter image description here

share|improve this question
    
By "small real-estate" do you mean that they will be using a mobile device? Or do you mean that the pop-up screen will just be small in size? –  Yallow Jun 29 '12 at 13:28
    
I apologize, this is a web app for desktop, the pop-up will consist of a small real-estate –  Kyle Mirro Jun 29 '12 at 13:30
    
Is it possible to get a screen shot or mockup of what you currently have in regards to space. Thanks! –  JeffH Jun 29 '12 at 13:39
    
How many students will be selected on average? Does the user know the names of the students that he or she wants to add? Does the user need extra information to choose a student (photo, ID, age, etc.)? –  Pep López Jun 29 '12 at 17:26
    

3 Answers 3

up vote 4 down vote accepted

If you really have limited space, I think you're on the right track. Personally, I am not a fan of the two-list approach that is shown in the answers by AndroidHustle and Louise. I find that:

  • It takes too much space
  • It takes too much interaction (first select the item(s), then click a button)
  • It always takes effort to see which pane is what. There was recently a question on that issue: in what order should you display the panes?

The only good use case I see for them, is the case where you also need to be able to re-order the list of items manually, for instance to configure a toolbar. For a plain selection where order is irrelevant or already implicit, they seem like overkill to me.

I think with a small addition, your solution is quite good already. All you need to do, is provide feedback on how many items you already have selected, and make it easy to filter the list back to only the selected items:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In this design, you have constant feedback on the size of your selection, you can select items with a single click and you can review your selection with a single click (and remove items from it). All that without taking up much space. Typing in the search bar should obviously immediately filter back the list.

As an added bonus, you could make it so that if you have only a single result and you hit Enter, you check that single result and select the created filter. That allows fast selection of items without taking your hands off the keyboard.

share|improve this answer
    
The reasoning behind the other two answers is that, after searching and adding, you can change you search and add more, yet still see those you have already added (which no longer appear in the current search). –  Danny Varod Jun 29 '12 at 21:39
    
"It takes too much interaction (first select the item(s), then click a button)" You don't have to use buttons. The user can add one item at a time, just by clicking on it. –  webXL Jul 3 '12 at 16:43
    
"It always takes effort to see which pane is what." More than the effort it takes to see that "items with a checkbox" == "the selected set" if the item names match what is in the search box? –  webXL Jul 3 '12 at 16:48
    
Add one item just by clicking on it? So the items in the list act like buttons? That is... unexpected. Or are you refering to the design by Louise (currently below) that has an embedded arrow in the left list, and a cross in the right? I don't get your second comment, sorry. When entering the dialog with the list above on it, the checked items would be sorted on the top of the list, and the search box would be empty. Why do you think that is hard to understand? –  André Jul 4 '12 at 8:00
    
+1 for combining much of the dual list benefits within one panel. I updated my answer to reflect on the two approaches. I really like this version, but added some points to illustrate the benefits of the second list that make the extra space worthwhile. –  Louise Jul 6 '12 at 10:58

Usually for selecting out of a possibly overwhelming list I'd look into some sort of a dual list (sometimes also called list builder or accumulator). It's a user interface pattern you can see around quite often (Windows, for example, uses it to let you customize some tool bars). There are several websites to describe this pattern (can't find my old links at the moment, but here is one I just found on Google). Basically it works like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

There is a lot of details to adjust to your needs: There may or may not be additional filters to both the source and the selection list. The lists could be tables or icons or anything, really. Swapping items can happen instantly when clicking the entry (or as in my mockup a dedicated button), or you could mark one or more first and then swap them (see the answer by AndroidHustle). etc... etc...

Regarding your case: Your image pretty much represents the left bit of the list builder, so with regards to your task it successfully handles the selection of items. However, it does not yet provide a convenient way to keep track of what you already selected. If the filter is cleared, you can only scan the entire list of items - some checked and some not - to know who's already in the list.

The second panel in a dual list approach does this job for you: It keeps track of what's selected and keeps this choice visible and editable at all times. Additionally, it quite clearly responds to user action by moving items around, so each click has feedback. In an approach with check-boxes and changing views (by filtering) some users might be unsure about whether checking the box will commit their choice so that it lasts after the view change or if they have to press an additional button to commit. The label of the button to accept all the changes and quit the dialog must not be confused with something that suggests to save the changes in the current view state (such as "OK" or "Accept").

Overall, as you mentioned a constraint in screen estate, you have to consider the trade-off: Obviously, the list builder takes up more space. In this case, André (the answer currently above) provided a suitable approach to incorporate as much of the second panels functionality (e.g. making the existing selection available and editable) without needing additional space. You can also consider other ways to achieve this effect: If the selected list is not expected to be long you could append it below/above or you could slide in the list on clicking some show/expand button. Alternatively, you might go for a select-with-tokens approach, similar to picking e-mail recipients.

Just remember the old mantra: You need to look at how the user goes about this selection process. In the language of most design-patter descriptions:

Look into the dual list pattern when:

  • what you already selected affects what you want to select next, so you need to compare what you already got to your available options. (In my opinion, the killer criterion to go for dual lists.)
  • users need to adjust the selected items in some way (order or group them) on the fly
  • users need to frequently revise their choice of items and hence deselect items.

Go for a single panel (with some added mechanism to quickly see the selected list) when:

  • there is not much space
  • what is already selected is not important for the next step, e.g. users know quite well what they want to select beforehand
  • the selection does not need to be revised much

In total, you should also consider to a) add a cancel option to your suggestion to get out of the dialog without manually unchecking all the options and b) clarify what "back to view all" does (does it go back to the previous screen or does it clear the filter?)

Hope this helps. Cheers, Louise

share|improve this answer
    
+1 I like the inline add and remove buttons in your answer, however, it will need an undo button. –  Danny Varod Jun 29 '12 at 21:41
    
Essentially, after the entry has been moved to the "gathering list", its remove button there becomes the undo for that operation. However, if one frequently reconsiders his choice, the distance between the two actions can be annoying. In this case I would try a two step process of first marking (and easily unmarking) items and then "submit" them to the other list with a button. As I said: lots of fine-tuning that really depends on the nature of the selection process. –  Louise Jul 2 '12 at 9:17
    
btw, this two step process is illustrated in AdroidHustle's answer ;) –  Louise Jul 2 '12 at 9:18
    
@DannyVarod I like this approach too, and implemented something like it because of a requirement to validate the selection with each change. Why is an undo button necessary? I can kinda see that requirement if the user clicks "All ->", but for single additions, the user can just click the X, or the perhaps anywhere on the selected item, in order to perform the equivalent of undo. –  webXL Jul 3 '12 at 17:06
    
@webXL The undo is required mainly because of the add and remove all buttons. –  Danny Varod Jul 3 '12 at 18:02

Seeing as you haven't clearly stated how small space you have to work with, my suggestion may be too big. However, working with search results and at the same time keeping track of selection set, it would be good to divide them between two lists which lets the user add and subtract students without losing focus of the task.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In this suggestion the user can freely enter a new filter for searching after a selection and also subtract students whilst in a new search.

share|improve this answer

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.