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.

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?

enter image description here

share|improve this question
    
Are you expecting mobile users with a touch interface? Because cursor:pointer won't work for them. –  msanford Sep 28 '12 at 15:22
    
at this point, we are not building 'mobile first' :( –  squeezemylime Sep 28 '12 at 18:22
add comment

3 Answers

up vote 2 down vote accepted

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!

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

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.