Hover state for Step-based navigation

Question

I'm stumped on figuring out what the proper hover state for a step-based navigation workflow should be.

The navigation appears below. There are 3 states. Completed, Active, and Not-Yet-Completed. The user should only be able to navigate back to any of the Completed steps by clicking the text / icon (see screenshot below).

Because the Active and Not-Yet-Completed states are not clickable I am finding it difficult to communicate to the user "hey, you can click on steps you have done to go back and change your work."

Is there any easy way to do this? Is it as simple as changing the cursor to a hand icon once the user hovers over a Completed step? If so, how would they even know that this is possible?

Answer 1

When I face this kind of decision I often rely on appropriate old tactics, underline the text under the circle to indicate it is clickable. This visual cue also works for touch-users, because as @msanford mentioned, touch users can't see the hover effects.

When the user has completed the first step as is presented with the option of going back you could simply display a chat/text bubble that says something along the lines of "Click here to modify previous step." This bubble should be appropriately sized, positioned and designed based on the user device of course. It should just be a friendly tip, displayed for enough time to catch the attention, but not stay there forever or be in the way.

Hope it helps, Good luck!

Answer 2

How does the user advance from Instructions to Target Candidate Profile, by submitting a form? I assume you've implemented a wizard-like pattern with some kind of Next or Continue button.

If you want them to use the step strop, what you need to do is give an affordance to your pictured step strip buttons.

Show the user how to advance

1. Disable the button for the next step (as you've done) in the step strip.
2. Once client-side validation has determined that the current step is finished, enable the button for the next step and and give it an affordance (make it pulse gently, bevel it, show a tooltip, etc).
3. Clicking on the next step submits the currents step. The affordance, perhaps with a tooltip

This will show your user I believe fairly clearly that the way to interact with your wizard is through the buttons on the step strip. Give the already-completed buttons the same affordance and you've just shown your users that they can move to any enabled step by clicking its button.

Answer 3

Just a quick hit on this one: Maybe on hover the checkmark changes to either an edit symbol (document with pencil kind of deal) or a back arrow, denoting it can go back.