4

I have a number of requirements to allow the user to select an item from a long list.

Example - country selection from an alphabetical list (where the user location is not relevant) - there are no categories

Some options are much more frequently selected. I would like users to be able to select these quickly and easily.

Currently we are using combo boxes which allows the user to type (and see a filtered list) or scroll through the options. Some of the items have a difficult/unfamiliar spelling so type/filter is not always helpful. Our interim design groups the popular options at the top of the list. We are also considering an option where the popular options are shown alongside the select list - clicking on one of these would populate the list. This allows a one-click / one-tap selection.

I'd like feedback on the second option and suggestions for other patterns which support this task.

Interim solution: https://i.imgsafe.org/3e7abca57d.png // Possible alternative (this is a very rough mockup to illustrate the concept): https://i.imgsafe.org/3e7abf0618.png

| improve this question | | | | |
  • According to me, as a general user If you are going to show only three (or few) items in Popular list, then the second option is advantageous as it also gives the Visual idea of what he's choosing. Images are always better than text. – Deepak Yadav Aug 29 '16 at 8:12
  • 1
    In the alternative pattern, there should actually be labels with the icons, and in some cases there would only be labels. For example if you are selecting a currency there is no icon that would support the currency code. – LynnseyS Aug 29 '16 at 8:16
  • Yes, images are not always better than text. Nielsen/Norman determined that icons need text labels. – Ken Mohnkern Oct 28 '16 at 14:30
  • @LynnseyS does it allow to select multiple items from same group? – NB4 Dec 28 '16 at 10:06
1

With your possible alternative option, I like the common appliance icons but I'm concerned that people may be confused having two fields to select from; some might think they need to complete both fields.

Select appliance

Alternatively hide the select list and add a "More" option that when clicked shows the select list. For example:

Select appliance:
Select appliance

| improve this answer | | | | |
0

The Interim

The interim solution provides the most compact solution, taking no more space than that necessary to show the selected value. The split menu you use to allow access to the most frequent items has been shown to work well (Sears and Shneiderman, 1993), and it’s been around for a while, so it may be familiar to users.

The Alternative

Your possible alternative reduces the clicks for the most common items from two to one, which may very well be worth consuming the added space. If you use text labels instead of images, you’ll probably be able to save even more space (or fit more high-frequency items).

The largest potential problem is ambiguity about the relation between the combo box and the frequent-item controls. Usually, different controls implies separate fields. Do the users choose from one or the other, or from both? How do they know? Where do users look to see what they selected? Focus is divided in this design.

Some design details may mitigate the issue. The combo box probably should automatically set to match a selected frequent-item controls. Likewise, the frequent-item controls should set to match any choice made with the combo box if it’s one of the high-frequency items.

A possible issue with your particular design is that frequent-item controls may appear ambiguous to the user. I’m guessing they are toggle buttons, but users could mistake them for command buttons that might take them somewhere they don’t want to go. Worse, with no borders around the controls, the user might mistake them for mere illustration –just examples of what you mean by “appliance.” A one-of-many selection is usually represented with radio (option) buttons. That would mean the odd situation of sometimes no radio button being selected (because the user chose from the combo box), but they might adapt to it.

A Third Possibility: List Box with Split Menu

I think you can avoid such complications by using a list box with a split menu rather than a combo box. It’ll take the same amount of space as your alternative (show all high-frequency items, plus the top of the full list without scrolling), and still provide one-click selection of the most frequent items. However, now it’s a single control so it’s a single point of focus for the user. It’s more familiar than a combo-box-with-radio-buttons design.

Fourth: Search/Filter/Sort Enhancement

You mention items may have unexpected spellings that may make them hard to find in a long list (probably true with scrolling or type-and-filter). You say there are no categories, but are there other attributes that users may use to filter or sort items? Cost? Geographic position? Can you use a search algorithm that is more tolerant of spelling errors than type-and-filter?

If so, you may want to include, in addition to the split-menu combo box or list box, a “More…” button that takes the user to a page or dialog box for searching, sorting, and filtering in various ways on various attributes.

| improve this answer | | | | |
  • Thanks for your helpful input. The final design for option 2 will address issues like affordance and that it should look like a single control - I will give more thought to your other concerns. – LynnseyS Aug 29 '16 at 13:00
  • Options 3/4 - I'll try these - I do have concerns about the lack of search / filter capability for a country list which is really long and has no (useful) categories or attributes, and where (I believe) being able to filter on the first 1 or 2 characters is important. They might work for some of the other scenarios - I will share the results if they are useful. It may be that option 1 is actually the best in the end but I'd like to make sure it is. – LynnseyS Aug 29 '16 at 13:15
0

Just make the dropdown standard, but with the top three options at the top! It's simple and straightforward, no need to overthink this.

| improve this answer | | | | |
0

Agree with @bloodyKnuckles answer, it might confuse the users in selecting both fields.

His second solution seems a better alternative, but if you still want to go with the select list, I would suggest to put the common appliances icon on the top followed by an 'OR' and then the select list. Since they are the most used, no need to show the select list first.

| improve this answer | | | | |

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.