3

I wonder if one method performs better than the other and if there are any advantages or disadvantages. In my scenario, users will be adding more than 3 countries and will edit that list using the same functionality.

Interaction Specifications

  1. Auto-suggest a list of countries as the user types and — upon making a selection — the system provides feedback to show the selection.
  2. Show a list of selections beneath the form field or a "tag cloud" selection within the form field.

Advantages/Disadvantages

  1. List Format: Easier to scan a list of items (one eye fixation, one column) and ensures that the form field is always the same size. However, the list may get big and push other form fields down the page.
  2. Tag Cloud: Combines search and selection into one area. May be harder to find a specific country when users add a lot of countries.

Examples Options

  • Will you actually be ordering/sorting the selections in either format? I think multiple deletion is also easier in the list format because the cursor is at a fixed position all the time. – Michael Lai Jun 12 '14 at 5:46
  • Well that is the question, isn' it?! I'm not sure I follow your initial question. – erik_lev Jun 12 '14 at 15:49
  • What I meant is that once you have selected items from the dropdown list, will they be ordered in any way in the list format or tag cloud format? I am just thinking about it from the point of view of being able to easily glance through the selections if you have to remove or add other items. – Michael Lai Jun 12 '14 at 22:17
  • The list will reflect the order of the selection. Does that help? – erik_lev Jun 12 '14 at 22:46
1

Using the multi-select jQueryUI plugin 'Chosen' you may ensure the form field is always the same size while still saving space, as it is a drop down and shares search/tag area.

An even more powerful jQuery plugin simply called 'multiselect' itself, allows you to keep the interface open longer while checking off different options. This would potentially solve all of the issues mentioned regarding a lot of selections plus saving space.

Many others can be found here in the jQuery plugin site. I think your second solution is best as it keeps the form out of the way, but perhaps one of these can keep you from having any feature conflict at all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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