Discover the progress bar UI design element, from how it translates into the user interface of apps and websites, to useful UI UX designer tips on how to create them.
A famous saying states that time is money - and it could not be less true! We generally access a website or app with a clear purpose in our mind, and it is less likely that we are just opening tabs over tabs just because we are bored. Let’s take the example of booking a flight. If we wanted to plan out our next holiday, chances are that we would need to undergo a few steps just to get that airplane ticket reservation going.
Normally, we would expect steps such as entering our name, phone number, ID, and so on but maybe this website we are currently using is requesting more information than usual. We are now starting to grow impatient because we have no idea how much more the process will take. And let’s be honest, we probably already have a lot more tasks on our plate for the day. There is, however, a UI design element that can help us with this issue, and that is the progress bar.
What are Progress Bars in UI Design?
Progress Bars are UI elements used to visually indicate the progress of a task or operation flow. It shows the degree of task completed and the remaining amount yet to be completed. They are very commonly used by UI UX designers because they ensure a balance between a clearly organized user interface and a great user experience.
Types of Progress Bars
1. Determinate Progress Bars
Determinate progress bars are used in the context of quantifiable activities, and they show how much the operation has been completed and how long it will be fully completed. Use this whenever possible to communicate the status of an action. This way, users will know that the platform is still working and their action is in progress.
2. Indeterminate Progress Bars
Indeterminate progress bars are used when it is not possible to measure the time it takes to complete an operation. This type of progress bar does not give users any indication of an ongoing activity, and watching the bar for too long might lead them to leave the platform. When enough data is available, subtly switching to a determinate progress bar is recommended.
There are multiple contexts that would make the insertion of progress bars suitable. As UI UX designers, it is important to know in which cases to use them.
Use when dealing with operations that will take time to complete. This way, the current progress and the remaining amount will be displayed, consequently enhancing the user experience.
Use if an action disrupts the user's interface for over three seconds. In this way, users will know how long the message will interfere with their navigation.
Use if an operation requires running in the background for over three seconds.
Use when you need to visually communicate an ongoing operation's progress and remaining percentage.
There are a few cases in which progress bars do not match the context of the website or app. One of these is when the entire page is loading. A better strategy for these cases would be to use the Wireframe page instead.
Progress Bars Design Principles
There are a couple of UI UX design principles that should be taken into consideration during the design process of progress bars for websites and apps.
Anatomy
The content of the progress should describe the operation that is being performed. There are a few components that make up any progress bar.
Label: The label is an optional element in progress bars – especially in indeterminate progress bars. But it might be necessary when dealing with multiple steps. If you decide to integrate a label for a progress bar, make sure to keep the content short, clear, and concise. Don’t give too much information and use it with no period, so as to not confuse users.
Status: The status shows the progress and how much until the action is completed. It is also optional in progress bars – especially when it is not possible to determine how long it will take to finish a certain operation. This is especially the case for indeterminate progress bars.
Combine Steps
When dealing with multiple operations within a flow, a good strategy is to combine all related steps into just one progress bar. Try not to “rewind” the bar every time a step has been completed because users might lose confidence in its accuracy if the bar moves backward.
For example, when “uploading” and “verifying” files in the file upload process, make sure to show only one primary progress bar with the entire process. You can add another progress bar but change the status text when finished and move the initial progress bar forward simultaneously and continuously.
Layout
A progress bar can be presented within a new panel, within a notification, or under the user interface element that triggers the task. In some cases, it may also substitute the initial user interface, provided that it can return to its original state when the operation is completed or canceled.
Allow users to pause or cancel by adding a ‘Close’ button in the right corner. Make sure that the button is aligned with the progress bar label because the positioning will directly influence the user experience.
uinkits – Our Figma Design System and UI Kits
We at uinkits understand the importance of inputs in great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.
“You press the button, we do the rest,” – Kodak.
Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.
Our design system includes components, icons, variables, cards, buttons, and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!
