Selection in a dropdown with two different input formats

Question

I am building a tool which will be used on a regular basis by call center agents. The tool is concerned with supporting products - and as such each product has a product page which contains information, articles, news and other items of interest about that product.

The way a user currently navigates to a particular product is via a custom dropdown control with autocomplete - this control is displayed on every page and is shown below. 1) is the default state, 2) is as the user types text into the control. From that point the user can select a matching product using either the mouse or keyboard and selection will automatically take them to the product page. (Please note this is a prototype screengrab).

I am happy with this control, and have done 2 rounds of usability testing on the prototype. Users are comfortable with the control.

There is a second way however that a user can select a product, it is much less used (probably only 5% of the time) - the product can be located using a serial number. This is useful for when the customer does not know the make and model of their product.

So my question is this - what are some patterns I can follow to allow auto-selection of an object via two different input types? Here are some of the different ideas I have had:

Provide a second control with a prompt for serial number This is probably the simplest but seems a waste of real estate for something that is used so infrequently.

Allow the user to type a product name OR a serial number into the above control In this case the user would need to be trained, or conditioned to do this - it doesn't seem right as it is not intuitive.

provide an option for 'lookup by serial number' that launches a second control, or UI element This is where I am leaning right now, but does introduce extra clicks and complexity

Are there some examples of where this problem has been solved before? Am I missing some other options to solve this problem?

Answer 1

Change the prompt text to "type a product name or a serial number".

If you see that the string begins with a digit, don't autocomplete - the user apparently knows the serial number, and the autocompletion doesn't really help him in any case because serial numbers are meaningless to him (that's assuming your product names can't begin with a digit).

If the sting doesn't begin with a digit, proceed with the product name autocompletion.

Answer 2

Using the current control to allow look-up by type or by serial number would be a good solution and you can always use the watermark to give details about what types of inputs are allowed for that field. Having one unified area for getting to the same end data shouldn't be that foreign to anyone who has used a search engine.

Of course you can do a combination of 1 and 3 by having the second input field / form for serial numbers hidden by default and replace the search type field when an action is performed. This way you do not use any extra real estate and you guarantee an either or search function.

Any solution you choose is going to add a bit of complexity to the end user and potential for needing additional training but having an all-in-one field would have the least impact on the user but the most complexity for the coder. It all depends on who you want to inconvenience less.

Answer 3

I think your best option would be to go with allowing the user to enter either a keyword or the serial no into the same input box. Adding more controls would probably just confuse them. The best way would be to allow the default text in the input box to state the kind of inputs that are allowed, ie, either the product name OR serial no. The user chooses to enter what he is comfortable with.