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.

This is for a web based app. I currently have html select (drop-down list) where the user selects a widget. The list is currently sorted by a readable name for the widget, but I also want to allow for the user to enter a widget number. Not all users will know the widget number, but for those that do, I'd like to speed up the process.

To accommodate these 'savvy' users I currently have a separate input textbox that they can skip the drop-down and just enter the number. This works, but it feels sorta 'off', plus it is also adding something to the screen that could confuse first time users. Its not ideal and I'd like to change it.

I'm looking for a solution that would allow a user to click on an element, see the list, but also type the widget number to bypass possibly large amounts of scrolling.

This will be brought to life via - HTML, CSS, jQuery, and PHP. A jQuery plugin would work, I've considered the built in jqueryUI autocomplete combobox(http://jqueryui.com/autocomplete/#combobox), but I wanted to see if there were other solutions.

share|improve this question

2 Answers 2

I think the old combobox would be a good solution to your problem: enter image description here These are a drop down list with a text field at the top. They're not standard web components so you'd have to construct one.

So given a combobox, list the names of your components prefixed by their number:

  • 1 button-1
  • 2 slider-1
  • 3 textarea-1

etc. The behavior of the combobox would be that as someone types in the textfield the best match is always selected in the list. Once the selected item is correct, hitting return commits the selection. Of course if the desired item is visible in the list it can be selected with the mouse (or finger). Given the convenience of a combobox, you might even do away number prefix in the list as typing the component name might be more efficient than typing the number - remember often you don't have to type in the complete name to get to the area of the list you want.

share|improve this answer
    
Thank you, I was leaning toward the jQueryUI autocomplete comobox. I should have specified in my OP. jqueryui.com/autocomplete/#combobox. I like your suggestgions, though I will need to retain the ability to have the user type the number. It will be much quicker for the user to type 11234 than to start typing - then select widget-1-36-24-left-window out of a result set of dozens of similar widgets. I'm glad your instinct lined up with mine :) –  Jeremy A Nov 12 '12 at 20:03

You may try to use your own customized drop down list which will behave as follows:

  1. Every item has it's own number associated
  2. Drop down has a tip at the bottom suggesting using widget number for a quick select
  3. As soon as user start typing a tip is replaced with a small textfield which will show the number typed (and if the user will press backspace, etc, you should handle it properly) and the corresponding widget is selected

See the pic for how it may look like:

enter image description here

share|improve this answer
    
I love adding the 'tip' and then replacing it with what they've typed. I hadn't thought of that, thank you! –  Jeremy A Nov 13 '12 at 16:05

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.