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.

4 Answers
4

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.

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.