1

I'm working on an application redesign, and I can't determine a better replacement for what we are currently using, which is a single-select list, showing about 10 items, where you can only select one at a time. It's combined with a search field at the top where users can start typing the selection. Anecdotally, I'm told no one uses the search, although there's no research to verify that.

Here's the goal: show around 10 options, with more available, and allow the user to select one. Optionally keep the type-ahead feature that jump to the selection being selected and visible.

Here's the ugly current version.

enter image description here

  • Curious. What kind of information is being selected here? Is there anyway to phrase what you want differently and break it up into smaller asks? Also, it may be worth looking at some of the options that Select2.js has available. They're type-ahead/pre-population/formatting/multi-select stuff is very, very nice. – Daniel Brown Sep 28 '15 at 17:31
  • Thanks! The kind of information is results from tasks - while there is a way to separate the results into 2 categories, I'm hesitant to add that decision tree into a current process where they do a task, then select from one list - separating them makes it seem like 2 lists - I don't have any research, but my guess is that might be harder for current users to adjust to. The challenge is that this software is configured differently for different customers - meaning I need to create a UI that is flexible enough for a varied number of selections. – Carolyn Bernier Sep 29 '15 at 18:08
1

This isnt as bad as you think. What you can do is order the list with the top two or top X choices as the most common ones. You can also store this per user.

The second thing to note is the list should be ordered in a logical.

If there’s anywhere between 7 and 15 options, a drop-down list is usually a really good fit. You can put a healthy amount of information in your form without cluttering the entire page, because the list’s options are hidden when you don’t need them.

via drop down usability article. I wish they shared data on why the number is 7-15 choices.

As per the low side of why you dont want less than 7ish items in the drop down the article states and I agree with.

When drop-down lists have less than 7 options they suffer from a lack of up-front information. The user has to click in order to see the available options.

In these cases you are better off using radio buttons so your users immediately can scan how many options they have and what each of those options are, without clicking anything to reveal this information.

On the other end of the spectrum when you have too many items (15+ in a drop down, searching with auto-complete seems like a better choice like this example of a country selector also this similar question has a fair amount of best practices.

Lastly if your just looking to spice up the visual presentation take a look at this library.

  • Thanks for the advice! more than anything, I think I'm looking for some better design options - I've researched and researched, and I've found nothing better. Thanks! – Carolyn Bernier Sep 29 '15 at 18:18
  • Your welcome glad it was somewhat helpful! – Frank Visaggio Sep 29 '15 at 18:18

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.