7

I'm currently working on a part of our application in which the user edits a document. Part of the application allows the user to input certain "parts." We've implemented this as a couple of drop down buttons; however, this can be frustrating to users, as the list of parts is commonly so long that it goes off screen (and the arrows on the top & bottom are not easy to use). I'm looking for a better replacement for this control. We were considering a "Choose Part" button which opens a new dialog...but we're not quite sure what to put in the dialog, or if the dialog is the best option at all.

Some important points:

  • The "parts" have unique names
  • The target user is a salesman or equivalent, and we'd like to make the process as easy as possible (which is why the current dropdown with arrows isn't the greatest)
  • The list of "parts" must be loaded (complete with a dialog prompting the user for certain details). Currently we do that upon first click of the button.

Has anyone ever come across a similar problem or a solution which works better? I'd appreciate input.

Screenshots for clarity (note that this isn't the real application; it's a mockup of the specific problem)

Application:

application

Short List:

short list

Long List:

long list

Improve this question
8
  • Is the dropdown list populated based upon what you enter in the text entry or are the dropdown lists independent of that
    – Mervin
    Dec 29, 2011 at 17:38
  • 2
    Do the users generally know the name of the parts they are looking for? If so, something akin to auto-suggest might be in order.
    – peteorpeter
    Dec 29, 2011 at 17:45
  • @Mervin the dropdown is independent of what has been entered (after the user clicks an entry, certain information is copied into the editor). The list does need to be loaded in, but that is a separate process.
    – NickAldwin
    Dec 29, 2011 at 17:45
  • @peteorpeter yes, they do. The difficulty in auto-suggest is how exactly to implement it--new dialog? Listview of items that narrows its selection when user types in a textbox? We're also concerned with user confusion.
    – NickAldwin
    Dec 29, 2011 at 17:47
  • I would go with the auto suggest as suggested by Peter but another question I have is that are the dropdown items all independent of each other ? Or there certain items which are subsets of another item .For example if the super set is tires,the subset would be tire brands
    – Mervin
    Dec 29, 2011 at 17:50

5 Answers 5

Reset to default
2

Since you need the user to select the datasource, try to incorporate the datasource selection inline:

enter image description here

This keeps their eyeballs on their work and not on the dialog that just flew up at them. (I don't think dialogs are evil per se, but if they can accomplish a task inline, all the better to their "flow".)

  • Start loading the parts as soon as you can detect the user has clicked in the text field, or whenever the datasource changes. If you can guess at what they are likely to want to pick, load it right away.
  • If they user needs to wait while you retrieve or sort results show them a spinner, preferably in the search field or result list area. If you have to gray out the text field, that's alright, but ideally they can be inputting text while you load data.
  • Add the selected part when it is selected.
Improve this answer
7
  • I'd love to load the parts in the background, but the user needs to give me certain information for the parts (the datasource to use).
    – NickAldwin
    Dec 29, 2011 at 18:57
  • When/how do you get the datasource information from them?
    – peteorpeter
    Dec 29, 2011 at 21:21
  • This is a bit off-topic but where did you do your wireframes that you've included in your answer?
    – Allen Liu
    Dec 29, 2011 at 21:41
  • 1
    @AllenLiu balsamiq - it's great for quick-and-dirty.
    – peteorpeter
    Dec 29, 2011 at 21:53
  • @peteorpeter I get the datasource information from a couple of different sources (hence the dialog that allows the user to choose from where to load the data). The backend data loading is working fine; I'm just wondering how to do the loading in the UI. Perhaps a button to load parts that gets replaced by the textbox once the parts are loaded?
    – NickAldwin
    Dec 29, 2011 at 22:13
6

Use a Multi-Box

The user interface and experience of the Chosen javascript plugin may be exactly what you're after. It's a combo-box: it starts as a drop-down, but narrows the choices as you type. For the desktop, write your requirements to match.

enter image description here

Improve this answer
3
  • 1
    It's a desktop application.
    – peteorpeter
    Dec 29, 2011 at 21:52
  • 1
    Thanks for this,I was looking for something like this for one of my sites
    – Mervin
    Dec 29, 2011 at 23:20
  • @peteorpeter I see the tag, now that your point it out. I'll edit.
    – Taj Moore
    Dec 29, 2011 at 23:49
4

We've run in to a similar issue with selection from very long lists in our web-based software. Drop down boxes didn't scale, and combo boxes didn't allow users to quickly look at a long list and filter by different criteria. We developed an "item selector" which is really nothing more than a searchable widget. The simplified example below shows only a list of 3 items, but typically our lists exceeds several hundred or thousand.

This interface allows us to include additional filtering (in addition to simple search) such as categorization of items in folders or selection of a default item. Inside this selector, we also typically have the option to create a new item (in this case, add a new animal to the list if it's not already there).

Improve this answer
2

You could use the auto complete based upon the the letters which the user enters and dynamically update like this

enter image description here

Or if you are not comfortable with the concept of auto complete,you could perhaps look at an accordion which will atleast reduce the length of the list

enter image description here

An alternate approach is to have two dropdowns ,One dropdown which contains the super sets and the second dropdown which is populated based upon the selected value from the super set dropdown (i.e it will have the items of that group)

Improve this answer
8
  • I just looked at your question more carefully and realized that even with three sets,you have a large number of items in each set,In that case I guess auto complete would be the way to go unless you can potentially break it down into more sets
    – Mervin
    Dec 29, 2011 at 18:08
  • I really like the autocomplete (and it would be easy to implement, too!). I have one question: as I said, I need to first load the parts (involves another dialog). When should I first show that? Should I have a button "load parts" which turns into the text box once the parts are loaded?
    – NickAldwin
    Dec 29, 2011 at 18:20
  • I need to read questions more carefully,is the load parts button dependent on the text entry? like in the case of your example,the parts will depend on the keyword 'editor'
    – Mervin
    Dec 29, 2011 at 18:28
  • The load parts isn't dependent on text entry. It loads parts based on user input in a new dialog.
    – NickAldwin
    Dec 29, 2011 at 18:34
  • Sorry ,I am a little confused now,where does the load parts (is it the same as insert parts in the example) come in now and whats the relation with the text entry if any
    – Mervin
    Dec 29, 2011 at 18:36
1

Most user interface guidelines suggest using a list when the number of options in a drop down goes beyond 20 elements or so. You could have a permanent list on the right side. There are many ways to do this. It could be a tree with groupings to find your way faster or a multiple lists in a cascading style like Finder (Mac OS X file manager). The list could support some kind of filtering to show only relevant items.

Improve this answer
1
  • Could you explain how your suggestions improve the UX here?
    – dnbrv
    Apr 2, 2012 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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