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.

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

share|improve this question
    
Is the dropdown list populated based upon what you enter in the text entry or are the dropdown lists independent of that –  Mervin Johnsingh Dec 29 '11 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 '11 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 '11 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 '11 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 Johnsingh Dec 29 '11 at 17:50
show 3 more comments

5 Answers

up vote 2 down vote accepted

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.
share|improve this answer
    
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 '11 at 18:57
    
When/how do you get the datasource information from them? –  peteorpeter Dec 29 '11 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 '11 at 21:41
1  
@AllenLiu balsamiq - it's great for quick-and-dirty. –  peteorpeter Dec 29 '11 at 21:53
    
@peteorpeter Thanks =) –  Allen Liu Dec 29 '11 at 21:55
show 3 more comments

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

share|improve this answer
1  
It's a desktop application. –  peteorpeter Dec 29 '11 at 21:52
1  
Thanks for this,I was looking for something like this for one of my sites –  Mervin Johnsingh Dec 29 '11 at 23:20
    
@peteorpeter I see the tag, now that your point it out. I'll edit. –  tajmo Dec 29 '11 at 23:49
add comment

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).

share|improve this answer
add comment

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)

share|improve this answer
    
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 Johnsingh Dec 29 '11 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 '11 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 Johnsingh Dec 29 '11 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 '11 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 Johnsingh Dec 29 '11 at 18:36
show 3 more comments

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.

share|improve this answer
    
Could you explain how your suggestions improve the UX here? –  dnbrv Apr 2 '12 at 16:26
add comment

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.