How to quickly prototype progress bars for multiple use cases
Progress bars tell users what’s going on and provide useful feedback. This is how to design them in Justinmind
A progress bar is a straightforward UI element and is easy to create in Justinmind. We’re going to show you how to design two progress bars that serve different purposes depending on the context.
If you need a little inspiration before we start, don’t miss our article on 10 awesome progress bars that delight users.
The first progress bar we’re going to design is the kind you would find in iTunes, Spotify or any music app that lets you play songs.
The second progress bar is one that you’ll see on a signup form. It indicates how many steps you’ve done and how many you’ve got to go.
We’ll add animation and effects to our progress bars to give them dynamism and visual interest.
Let’s go.
Song Progress Bar
We’re going to start with the song progress bar. Let the prototyping begin.
To get started with your progress bar, download Justinmind. Create a new mobile prototype and choose your own dimensions.
Design a play button
Drag an ellipse widget onto the canvas. Then drag a triangle widget and rotate it 90 degrees. Resize the triangle so it fits on top of the ellipse widget. Change its color. Select both widgets, right-click and group them. Now we have our play button.
Create the progress bar
It’s time to add the progress bar. Below your play button, drag a rectangle widget. You can choose its height from the properties panel.
Drag another rectangle and place it on top of the other rectangle. Make sure it’s a different color from the first rectangle and as small as possible.
The first rectangle is to show all of the progress of a song, the second rectangle represents the progress in action, while the song is playing.
Add interactivity to your progress bar
Now we need to add an event so that when you click the play button, the progress bar moves along the screen. Drag a hotspot widget over your play button.
Click your hotspot widget in the Outline palette then add an “On Click” + “Resize” event to your rectangle from the Dialog.
Next, we’ll choose the event options. Make sure both height and width are “fixed”. Width should be fixed at 360px and height at 16px. For easing, choose the effect “swing” and the duration should be the length of a song but in milliseconds.
Click OK.
Now click Simulate and press your play button. The progress bar should activate and move along the screen.
This same functionality can be applied to other contexts and use cases where you might need a progress bar. Uploading or downloading something, for example.
Process Progress Bar
The next progress bar we’ll prototype is for a 3 step loan application process. We’ll create a form that a user has to fill out. Above the form will be a progress bar which shows where the user is in the process and how much they have left until it’s finished.
To get started with the next progress bar in Justinmind, create a web prototype.
Design your form
Use text widgets to add copy to your form. You can add SVG icons for visual interest. Drag a rectangle widget and stretch it wide enough so that you can add 3 ellipses widgets to represent the steps of the application process, like in the image above.
Drag another rectangle widget and place it on top of the original rectangle widget . Make the second rectangle as small as it can go. Change its color to blue.
Place one ellipsis widget at the start of of the rectangle, one in the middle and one at the end.
Now drag a Dynamic Panel onto the canvas below your copy, progress bar and icons. Within that panel, add 2 additional panels from the drop down.
In the first panel, add 4 input fields and change the placeholder text. We used:
- Name
- Address
- Date of birth
Add a button widget at the bottom.
In the second panel, do the same but with:
- Job title
- Company name
- Company address
- Company website
Add a button widget at the bottom.
In the third panel, add one input field and one button. Our placeholder text says ‘tell us about your situation’.
Make your form interactive
Now we’re going to add 5 events to make our form interactive and show the progress. What do we want to happen?
- We want the rectangle widget to stretch wider to show the progression.
- We also want to change to our next Dynamic Panel, which contains content for the next step in the application process.
- We want our ellipses and our icons to change color.
Click your button widget in your first Dynamic Panel. Add an “On Click” + “Resize” event. Stretch the rectangle until the second ellipses. Add a “Set Active Panel” and choose the second Dynamic Panel. Now add two “Change Style” events to change the color of your ellipses and SVG icons.
Repeat this process for the button that’s within your second Dynamic Panel.
Between your events, click the diamond icon to set the sequence of your interactions. Make sure you set the first, third and fourth sequences as “With previous” in both of your panels.
The second sequence in both panels should be set to “Time after previous started”. Set the time to 400 (ms).
Your string of events should look like this:
And that’s it! Progress bars complete.
Designing progress bars for intuitive UX — the takeaway
Progress bars are a useful UX element. They can set expectations by showing the user how much of a process they have to complete. They can tell a user how long they have left to wait for a song to finish or an upload to complete.
Small, seemingly innocuous, patterns like progress bars pack a punch when it comes to intuitive UX. And now after this walkthrough, you can confidently add progress bars where your UX design projects call for them.
