A Guide to Creating Accurate Progress Indicators in Adobe XD

How to Avoid Jarring Inaccuracies in a Few Simple Steps

Various progress gauges, diagrams, and bars to indicate progress and user stats.
Progress indicators and user statistics screens are ubiquitous in UI/UX design. Doing them right isn’t hard but is often neglected.

Jarring Inaccuracy

Let’s be honest. We’ve all done it. We’ve all created dummy progress bars or visual representations of user stats that were completely inaccurate.

It’s easy to get so focused on the shape and style that we lose sight of basic proportions. I didn’t realise how jarring this was until I switched roles from designer to product owner. A UI/UX designer on my team recently submitted a screen with a progress wheel that was beautifully designed but so inaccurate that a 4th-grader would have immediately spotted the error!

Accurate and inaccurate progress bars and progress wheels in juxtaposition.
Grossly inaccurate progress indicators (left) and correct representations (right).

Does It Matter?

Does such inaccuracy matter? Ultimately, the final product needs to work correctly, so why bother with accuracy at the design stage? When we showcase a design product, we immediately create an impression on our viewers. Most of this impression is based on a large number of unconscious brain processes. Research in neuroscience has shown that our brains are really good at understanding fractions¹. We intuitively know if something isn’t split fairly: Even primary school children can intuitively spot when fractions are off and something isn’t shared at least roughly equally². Having inaccurate progress indicators could elicit a feeling of something being off or of subpar quality that may influence the overall perception of the presented design in many viewers. Progress indicators can be accurately created in a few simple steps, so it may be a worthwhile investment that requires little extra cost but offers potentially big rewards.

How to Create Accurate Progress Bars in XD

Creating accurate progress bars in Adobe XD can be done in four simple steps, removing all the guesswork and estimating:

  1. Draw a rectangle.
  2. Style the background scale (select the desired fill and rounded corner options).
  3. Duplicate it (⌘/CTRL + D) and style it as the progress bar.
  4. Change the width by multiplying it by the progress percentage (in this example the width of the scale was 1500px, so to show 30% complete, the width was set to 1500px · 0.3 = 450px).

That’s it.

Screenshot of Adobe XD with steps on how to create a progress bar.
Steps to create a progress bar in Adobe XD.

Accurate Progress Rings/Wheels in XD

Creating accurate progress rings/wheels takes a few more steps.

  1. Draw a circle (hold SHIFT to make it a perfect circle).
  2. Style the background scale (select the desired stroke colour, stroke size, NO fill, etc.). I recommend using a “Center Stroke” for a centred alignment with the progress section.
Stroke selection in Adobe XD; Center Stroke selected
Center Stroke Selection

3. Duplicate the circle (⌘/CTRL + D) and add the desired style for the progress section.

4. Now we need a little bit of maths. (Don’t worry if that’s not your strong suit; you can skip the explanation and simply punch the width and percentage into the calculator, hit the pi [π] button, and you’re done).

The progress section is based on a dashed circle stroke with a single dash that corresponds to the fraction we want to represent.

Screenshot of Adobe XD with steps on how to create a progress wheel.
Steps to create a progress wheel in Adobe XD.

4a. We need to make sure that we only have one dash, so we need to set the “Gap” between dashes to a value that is larger than the circumference (C) of the circle. That means we need to have a value that is at least equal to the width times pi (W · π). You can also simply use W · 4 or input any random number large enough so that only one dash shows up.

Gap ≥ W · π

Gap = W · 4 always works

That’s because C = 2 · π · r. The width (W) of the circle equals the diameter d, which is 2 · the radius r. So, we have C = π · d = π · W. Since π is 3.14152…, multiplying the width by 4 guarantees a gap size that’s larger than the circumference.

4b. Now that we have the gap, we need to set the dash size to correspond to the progress fraction. In the previous step we saw that the complete circle has a circumference of W · π. So, to show 30% progress, we simply need to make the dash size 30% of the circumference, or Dash = W · π · 0.3 (e.g. 730px π · 0.3 = 688px).

Dash = W · π · percentage

Screenshots of the steps involved to create a progress ring in Adobe XD with explanations.
The reasoning behind each step for creating the progress ring.

4c. We can now finalise the progress ring design, e.g. adding a rounded stroke cap.

Adobe XD screenshot to select “Round Cap” strokes.
Finishing the design by selecting “Round Cap” strokes.

Summary

User feedback is one of the most important aspects of UX design³. Progress indicators and user stats have become ubiquitous for all types of programs, from games to enterprise software. Creating accurate indicators elevates the quality of a design and gives removes the feeling of something being off. It only takes a few simple steps to create accurate progress bars and rings/wheels in Adobe XD, offering a lot of payoff for little extra investment!

References:

[1]: Jacob, S. N., & Nieder, A. (2009). Notation-Independent Representation of Fractions in the Human Parietal Cortex. Journal of Neuroscience, 29(14) 4652–4657. https://doi.org/10.1523/JNEUROSCI.0651-09.2009

[2]: Empson, S.B., Junk, D., Dominguez, H. et al. (2006). Fractions as the Coordination of Multiplicatively Related Quantities: A Cross-Sectional Study of Children’s Thinking. Educational Studies in Mathematics, 63, 1–28. https://doi.org/10.1007/s10649-005-9000-6

[3]: Nielsen, J. (1994). 10 usability heuristics for user interface design. URL: https://www.nngroup.com/articles/ten-usability-heuristics/

Damian Pang (2020). Head of Design at Sirius Technology (https://siriustechnology.net/) and cognitive science researcher.


A Guide to Creating Accurate Progress Indicators in Adobe XD was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a Reply

Your email address will not be published. Required fields are marked *