User Experience (UX) Tips (Cascading drop down lists)

Everyone of us faced the situation of creating cascading dropdownlists that are dependent on each other for example we have 3 drop down lists, one for Continents, the second for the countries and the last one for the states, so we need to select a continent first, then a country and finally a state, so I’m going to share with you the best ways to produce good UX for drop down lists (from my point of view)

Initial state, all disabled except the first one	Continent was selected

1. Don’t leave the first item of any drop down list as an empty item, if your dropdownlist has values of Countries, then set the first item to be “-- Select a country –”
2. Be sure that all related drop down lists have the same width and height.
3. At first make all drop down lists disabled except the first one until an item from the first list is selected, for example in the above scenario, the Continents dropdownlist should be enabled and the others are disabled until the user selects a continent, then after that selection the countries drop down list should be enabled and the states is disabled until the user selects a country.