What is a good way to design a selector menu for different product lines?

Question

How can I create user experience that lets user pick a product group?

Currently I have something like this but it strikes me as cumbersome.

^{download bmml source – Wireframes created with Balsamiq Mockups}

You have to

• click a small area
• Scroll down to your choice
• Click the choice
• Click the Submit button

all this for a single choice of the product line.

Question

Is there a better more industry accepted way?

Answer 1

It depends on how many items are there to choose from. If it's less than 5, you can simply use buttons or links.

If it's a lot more, you can let the user type into the drop-down, but that only works if the users know what to type.

I'd rather use some kind of hierarchy. Take a look at Amazon and Apple:

• https://www.amazon.com/gp/site-directory/ref=nav_shopall_btn
• https://www.apple.com/mac/

Amazon is a bit overcrowded but handles a gazillion product groups. Apple's top double selection bar is great, but can only applied to a limited number of product group. Choose whichever fits you better or take a look at other respected (i.e. larger) webstores.

Answer 2

You could make it more usable if you give the user the ability to type inside the field and show him possible results.

This would shorten the time the user needs to choose the product he wants.

Of course this only makes sense if the products aren't really special. For example: "car", "table", "television" might work but "Supermax 2000" wont.

To make the search results more accurate you could tag the products with different keywords so for example if he types in "Car" he also gets shown nissan, honda etc.