1

Interfaces that guide users through several steps with one per screen per step often have little circles at the bottom of the page, with each circle representing a step/screen in the sequence. The active circle indicates the number of steps/screen the user has already completed.

Is there a name for this design pattern? I'd like to read more about best practices in this area (the max number of circles / distinct screens that hold user attention, size of circles, interaction patterns, etc).

Improve this question

2 Answers 2

Reset to default
5

Dot navigation

Horizontal dot navigation

Series of icons in the top or bottom of a content frame:

  • Show how many elements or steps there are
  • In a simple element content, allows easily jump from one content to another by clicking on the icon

Vertical dot navigation

Series of icons in the left or right sidebar with two main features:

  • Indicate the number of pages
  • Allow users to easily browse the page by clicking on each icon

enter image description here

Progress Trackers

Progress trackers (or progress indicators) display progress through a sequence by breaking it up into multiple logical and numbered steps. They guide the user through a number of steps in order to complete a specified task. Good progress tracker should inform users about following aspects:

  • What steps (or tasks) they have completed (preferably with a proper visual response)
  • Current step they are on (user’s current location within the process)
  • Which and how many steps still remain (preferably with clear designation)

Progress Trackers

Sources bashooka.com, tympanus.net, uxplanet.org

Improve this answer
1
  • 1
    Excellent answer! Thank you!
    – duhaime
    Nov 14, 2019 at 16:21
2

I believe that it is a variation of the Progress Indicator/Completeness meter that you are referring to, and there is a general description of the UI pattern that talks about the problem and provides examples of potential solutions to the design problem.

Often this is implemented as a series of circles at the top of the screen or along the left/right hand side of the page, but I actually haven't seen them at the bottom of the page.

I wouldn't think that the styling of the progress indicator affects the terminology applied to it (at least from a UX design point of view), but perhaps there are differences when it comes to the visual design perspective.

Improve this answer
1
  • Ah yes, it's a discretized version of the continuous progress meter. Here's an example of the circles idea: dribbble.com/shots/4020266-Period-Tracker-Onboarding In your experience, can users generally click the individual circles to navigate to the ith route / screen?
    – duhaime
    Nov 14, 2019 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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