How to lead users through a mandatory 3 step list select?

Question

Developer here (I'd like to say designer but I get stuck with the code work either way).

As part of a much larger system I have built a system to sign up for a course.

A user can land on this page having pre-selected a course or a course and a place. I need to ensure the user has selected all three but they need to be selected in the order left to right. Selecting a new option from any box resets all the options to the right of it. I want to make the experience more obvious and intuitive without altering the basic 3 field structure too much. So far my ideas revolve around using colours, more text and icons but I also want to keep it as light as possible.

Answer 1

I think adding a progress-tracker would be a good way to guide the user to complete the 3 step process.

Check out the mockup below.

When the page loads up all the steps in the progress tracker would be grey. But as the user selects an option under each list, the selected value can be displayed right above the list with some sort of indication that it's the chosen option (I've added a checkmark and added a background color to draw attention.

Also, you can now add a different color to the step number at the top to indicate that the corresponding step has been completed (I've used orange color to highlight the completed steps)

Finally, note that I've also changed the color of the line that connects the completed steps as well to visually separate them from the remaining stages.

Hope that helps.

Answer 2

You mentioned people may have selected the course or the course and place, which means the course list and place list become clutter and make them think "I have chosen that yet..."

Below is my suggestion, almost the same with Benny and Girish. Only difference is to hide the list if user already selected and grayed out

Answer 3

I would make it the most simplest of designs, order by numbers - like this:

That way users know why the options on the right disappear, when they select something in a previous list box.

Answer 4

I really like the other solutions. If you go with that idea, you might want to hide the lists that are not relevant yet, so the user focuses only on what he might want to choose, but leave the headers of all steps visible at all times, so the users knows what to anticipate when starting off.