Progressively Filtering Options

Question

I am modelling a selection from a product matrix. The customer envisions this as a series of dropdowns which progressively filter what is available in a subsequent dropdown.

So for example the first dropdown could be "Vehicle Type" and then show options for "Car" and "Truck." Then based on the selection they would choose "Make" and see a series of brands e.g. Toyota / Ford / Audi. Based on the brand selection they'd see models... and so on.

1. Are a series of dropdowns the best job for this? Any alternate options for UI that is more effecient?

2. What is the best way to handle when a person has made a series of selections (let's say they are 5 levels into the hierarchy) and then they modify one of the first selections - best to have them "start over" or is there a better way to handle it?

Answer 1

Mac OS X's finder in column view is a great pattern to follow for this.

Imagine each decision is a folder (except on the left where there's just one choice). Then each step of the way you can move to the right. It's nice because you can move several steps back easily, while still being able to see quite a bit of context and alternatives. If you change an earlier selection, you "start over" but the interface makes it quite clear as to why that's happening.

Answer 2

A series of dropdowns isn't necessarily bad. The example you gave with cars is very well-suited to this type of navigation due it its hierarchical structure, and it's seen on many websites. www.edmunds.com and www.tirerack.com both use this technique.

In both cases they use AJAX to dynamically fill the next dropdown list after the Make is selected, and in the case of TireRack, they expand yet again after the Model is selected to display trim levels. This makes the UI very responsive. Because it's so common, users accustomed to researching cars will also be familiar with this dropdown navigation method.

However, there is an alternative. Edmunds.com also has a list under "Browse by make" that's simply full of links. Clicking a link then takes you to a page with a list of cars by that make.

This has a couple advantages, especially for a research site like edmunds.

1. It's very quick to glance at that list, find the make you're looking for, and click it.
2. This has huge benefits for SEO. I attended an SEO conference hosted by the guys who optimized edmunds.com. One of the things they talked about was the great improvements they made with the link structuring. By dividing the site into landing pages for Ford > Mustang (and so on) they were able to create better long-tail SEO for searches like "Ford Mustang", "Ford Mustang GT" or "Ford Mustang reviews." This technique is called siloing.

The disadvantage of course is that you have to wait for the next page to load before choosing the model. So you should of course weigh your options, based on your end goals.

Answer 3

1. No, drop down, especially multi-level drop downs are bad UX. The info is hard to find, and they dont help users along. The user has to keep with in the element and if they dont it goes away and they have to start over. Even if you separate them and change the next drop down box dynamically, dropdowns will lower your conversion rate Also, they are hard to scan and read. If you must, there are some good guides to follow.

2. Search. Skip it all together and let them search. People browse by searching now. For example I wanted a 2008 toyota truck, I go to your site and type that in. Another person comes and wants a truck thats used, so he goes to your search and there are options for make, model, year range, etc. They can add.