The Importance of Progress Bars
Progress Bars are a standard interface pattern from web design that you’ll normally find on online forms as a way to split up the content into smaller more manageable chunks. They provide a clear visual indication of content volume versus completion status, and encourage participants to continue by visually showing the progress being made with each step.
By visually representing progress or activity, we provide a sense of context, urgency, and progress, thus encouraging momentum to complete the task at hand.
We can easily translate this pattern over to workshop and presentation design (heck, you can even use them in long documents too!). And in doing so we provide a more informative and useful interface for our audience, not to mention an engaging visual aesthetic.
Watching those bars fill up is delightful in and of itself!
Ways to use Progress Bars in workshops, presentations and documentation
There are many ways we can use Progress Bars in our everyday lives:
- Workshops and presentations: Use progress bars to clarify the completion rate of your workshop or your slide deck, giving the audience comfort in the knowledge of where they’re at and how far they’ve got to go.
- Project Statuses: Visually indicate the completion status for projects, tasks, learning modules or , to showcase the completion of workshop modules or learning objectives, enabling participants to track their progress visually.
- Documentation: Use progress bars to indicate the completion status of various sections in your documentation, helping readers navigate through the content effortlessly.
- Feedback Stamps: You can also adapt progress indicators to indicate general feedback of satisfaction, mood or group energy.
Different Types of Progress Indicators
‘Progress Bars’ don’t always have to take the form of bars. Check out the CNVS alternatives to the traditional bar method.
Progress Bars
The traditional bar, represented in a linear format (vertical or horizontal).
Use when: you want to clearly communicate a specific number of steps, and if you have less vertical space available on your page.
Progress Levels
An organic alternative that looks fantastic, and doesn’t rely on clearly showing the number of steps, but instead a general feeling for completion rate.
Use when: You want your document to feel less rigid, and don’t want or need to show exact number of steps.
Progress Charts
A circular format that works more like a pie chart that takes up an equal amount of horizontal and vertical space. The assets come with different variations of numbers of steps, with up to 12 steps total.
Use when: You want to have a more compact asset to sit in the corner of your document, or balanced alongside another icon (for example a duration icon).
How to use the CNVS Progress Bars
With CNVS, integrating progress bars and progress loaders into your visuals is a breeze. Simply drag and drop from the library of 8,000 icons and illustrations onto your document, and watch as your content comes to life.
You can place them in different areas, here are some examples:
