How to represent, in a dot-progress-bar "Finished, Next, Future" items [duplicate]

Question

I'm working on some educational software (for adults).

Part of a lesson involves moving from one step to the next. So we have a next step button.

I want to show the user:

• How many steps there are
• Where they are now

The trick is that the button says "next step". And I'd really like to show the progress dots on the button (for screen real-estate-efficiency).

One thought I had was to show three colors of dots:

• Dark Gray - everything up to current step
• Gray - Next Step
• Light Gray (silver) - future steps.

Any other ideas?

Answer 1

Evil Closet Monkey is right. Refer to this question.

I don't have that much context, but here are a couple potential options as well. If there are a lot of classes, using option 1 is probably best because you don't need to individually number courses. Using option 2 is better if there aren't that many classes, but since real estate is a concern, putting numbers below/in each container might not work.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Which platform and where are you positioning them? Depending on the location and device the dots could be invisible to the user.

From my experience in usability testing users didn't notice the sequential dot navigation on the top left for a desktop app. In my case the continue / back buttons were down on the page. So my recommendation would be to combine the dots with the navigation (I think that's what you're doing) and be sure to provide additional info around the dots if your users can skip around.

I know this isn't quite answering your question but I think the position / platform will play a key role prior to color.