Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

1

2

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.

share|improve this question
add comment

4 Answers

up vote 8 down vote accepted

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.

enter image description here

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.

share|improve this answer
add comment

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

enter image description here

share|improve this answer
add comment

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

enter image description here

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.