UX design patterns for Progress

Various ways to show the progress in digital interfaces and their design guidelines. Do you interchangeably use the terms Progress indicator, Stepper, Progress tracker? Well, this article would give you clarity on what they are and when to use them. What is a UX design pattern They are repeatable solutions to common design problems. For the user, design patterns reduce cognitive strain by giving them something they are familiar with and for the designer, a lot of time is saved by not having to reinvent the wheel. In this article, we will discuss the UX design patterns of progress. What is progress It simply means to move forward in space or time. In the context of digital interfaces, when a user moves forward in their journey, they make progress. And to show their progress, we take the help of two popular UX patterns named — progress trackers and progress indicators. Imagine you want to upload files in Google Drive. You drag the files and drop them into the browser, Now the system processes your request and shows you a progress bar telling the estimated time for completion. Why there is a need for a progress bar? To indicate your progress towards the goal of uploading files to Google Drive. In broader terms there are two UX patterns that help you to see the progression: Progress trackers Progress indicators Let’s start by exploring progress trackers and learn about their further categorization. Progress Trackers They act as a guide letting the user know what has been done and what is waiting to be completed. Depending on their design they could show the current state of the user as well allow a user to go back or forward in progress. The below figure illustrates the basic anatomy of a progress tracker. They are a powerful and effective way to boost engagement simply because they motivate us to complete a given task or goal and also conveys a sense of accomplishment. Why they are so powerful As humans, we are driven to have goals and then accomplish them. And when you finish a complex task, your brain releases massive quantities of endorphins that generate feelings of euphoria ???? and general well-being. How TETRIS takes advantage of this psychology- Neil Patel in his blog highlights a study by Dr. Tom Stafford from University of Sheffield, describes why Tetris was such a massive success. Tetris takes advantage of the mind’s basic pleasure in getting things done and uses it against us. We enjoy the short-term thrills in tidying up those blocks, and the game constantly creates new unfinished tasks that keep us engaged, even though we know it has no purpose. Progress trackers are an effective tool for onboarding a user, Patel adds. Coming back to the topic, Let’s explore the further categorization that is based on their usage type. Type A — Progress trackers for bigger goals Type B — Steppers for smaller goals Type C — Status trackers for tracking status of an order or service Type A — Progress trackers for bigger goals Trackers of this category track the progress of goals that are bigger and cannot be completed in one go. The user cannot revert the progress once it has been completed. These trackers prove to be really powerful because a bigger goal could be broken down into smaller milestones making it easy for the user. A good example is LinkedIn’s profile completion tracker. The bigger goal is to complete the profile. As you know completing a Linkedin profile is not something to be done in 1 or 2 hours. So Linkedin breaks down the goal into smaller milestones so the user can complete the given milestones and come back to check their progress. These types are often but not necessarily used in conjunction with elements that create a sense of challenge that motivates. In LinkedIn’s example, the motivating element is “Profile Strength” and the user tend to push it to the max (all-star). Type B— Steppers These types of trackers generally have smaller goals associated with them that can be achieved in one go. The design allows the user to navigate back and forth and the tracker would follow the current position of the user. Example of this type- Job posting, Setting up a marketing campaign, Uploading YouTube video. Type C— Status Trackers These are used for tracking the progress of the delivery of a product or service. They generally display the latest status and prior updates, displayed in chronological order. Status trackers do not motivate user to take any action. In fact, they don’t have any action items tagged with them. If you’ve ever ordered anything from any e-commerce website you’ve probably seen a status tracker before. Design guidelines Show previous, current and next steps Inform the user about where they are in the progress. What is ahead and show their previous progress so they can look back and feel motivated. 2. Use simple labels If you’re using labels in the progress tracker, use one or two words and avoid sentences, complex words. You may use a tooltip on hover if you need to convey some me

UX design patterns for Progress
Various ways to show the progress in digital interfaces and their design guidelines. Do you interchangeably use the terms Progress indicator, Stepper, Progress tracker? Well, this article would give you clarity on what they are and when to use them. What is a UX design pattern They are repeatable solutions to common design problems. For the user, design patterns reduce cognitive strain by giving them something they are familiar with and for the designer, a lot of time is saved by not having to reinvent the wheel. In this article, we will discuss the UX design patterns of progress. What is progress It simply means to move forward in space or time. In the context of digital interfaces, when a user moves forward in their journey, they make progress. And to show their progress, we take the help of two popular UX patterns named — progress trackers and progress indicators. Imagine you want to upload files in Google Drive. You drag the files and drop them into the browser, Now the system processes your request and shows you a progress bar telling the estimated time for completion. Why there is a need for a progress bar? To indicate your progress towards the goal of uploading files to Google Drive. In broader terms there are two UX patterns that help you to see the progression: Progress trackers Progress indicators Let’s start by exploring progress trackers and learn about their further categorization. Progress Trackers They act as a guide letting the user know what has been done and what is waiting to be completed. Depending on their design they could show the current state of the user as well allow a user to go back or forward in progress. The below figure illustrates the basic anatomy of a progress tracker. They are a powerful and effective way to boost engagement simply because they motivate us to complete a given task or goal and also conveys a sense of accomplishment. Why they are so powerful As humans, we are driven to have goals and then accomplish them. And when you finish a complex task, your brain releases massive quantities of endorphins that generate feelings of euphoria ???? and general well-being. How TETRIS takes advantage of this psychology- Neil Patel in his blog highlights a study by Dr. Tom Stafford from University of Sheffield, describes why Tetris was such a massive success. Tetris takes advantage of the mind’s basic pleasure in getting things done and uses it against us. We enjoy the short-term thrills in tidying up those blocks, and the game constantly creates new unfinished tasks that keep us engaged, even though we know it has no purpose. Progress trackers are an effective tool for onboarding a user, Patel adds. Coming back to the topic, Let’s explore the further categorization that is based on their usage type. Type A — Progress trackers for bigger goals Type B — Steppers for smaller goals Type C — Status trackers for tracking status of an order or service Type A — Progress trackers for bigger goals Trackers of this category track the progress of goals that are bigger and cannot be completed in one go. The user cannot revert the progress once it has been completed. These trackers prove to be really powerful because a bigger goal could be broken down into smaller milestones making it easy for the user. A good example is LinkedIn’s profile completion tracker. The bigger goal is to complete the profile. As you know completing a Linkedin profile is not something to be done in 1 or 2 hours. So Linkedin breaks down the goal into smaller milestones so the user can complete the given milestones and come back to check their progress. These types are often but not necessarily used in conjunction with elements that create a sense of challenge that motivates. In LinkedIn’s example, the motivating element is “Profile Strength” and the user tend to push it to the max (all-star). Type B— Steppers These types of trackers generally have smaller goals associated with them that can be achieved in one go. The design allows the user to navigate back and forth and the tracker would follow the current position of the user. Example of this type- Job posting, Setting up a marketing campaign, Uploading YouTube video. Type C— Status Trackers These are used for tracking the progress of the delivery of a product or service. They generally display the latest status and prior updates, displayed in chronological order. Status trackers do not motivate user to take any action. In fact, they don’t have any action items tagged with them. If you’ve ever ordered anything from any e-commerce website you’ve probably seen a status tracker before. Design guidelines Show previous, current and next steps Inform the user about where they are in the progress. What is ahead and show their previous progress so they can look back and feel motivated. 2. Use simple labels If you’re using labels in the progress tracker, use one or two words and avoid sentences, complex words. You may use a tooltip on hover if you need to convey some message. 3. Visually separation Keep your previous, current and next steps visually distinct for easy understanding of the user. 4. Give a fixed placement Give a fixed position for your tracker throughout the process so the user can look for that particular space to see the progress. The position could be in the header, subheader, bottom or even at the side. 5. Realtime feedback Update the status as soon as the step is completed giving immediate feedback on the progress. Progress Indicators Progress indicators express approximately how long the user can be expected to wait. Sometimes the time is specified and sometimes not, which gives their further categorization as: Progress bars (determinate) Loaders (Indeterminate) This UX pattern is not designed to be interactive however, they are often accompanied by a button for canceling the corresponding operation. Progress bars Also know as determinate indicators. Use them when the process is more than 10 seconds and the system can estimate the completion of a task. They are not interactive UX patterns but could be coupled with a control to stop or resume the progress. Tip: If the progress bar increasing at a steady pace, It will make people feel like things are slowing down. In a study by Dennis Koks, it was found that the progress bar that was initially accelerated was perceived as the fastest by the participants. Current Time Indicators This is a nuance of progress bar which does more than just showing progress. It primarily acts as a control to navigate through the video or audio. Loaders To simply put, they are spinners or indeterminate indicators. Use them when the progress isn’t detectable, or if the process is taking lesser than 10 sec. One interesting finding over the usage of custom loader vs OS loader by Facebook highlighted in this article —When their users were presented with a custom loading animation in the Facebook iOS app (left) they blamed the app for the delay. But when users were shown the iOS system spinner (right), they were more likely to blame the system itself. Carousel Indicators These types are popularly used in walkthrough screens and carousals. It helps the user to know which page/part are they in. Design Guidelines 1. Inform your users Why do they need to wait? What’s happening? Informing your users will make your users wait or else they may assume it as a bug and move onto other websites. Include a label with a progress bar to add context. Don’t use vague terms like ‘Loading’ and ‘Processing’. Use simple, meaningful sentences for example “linking your bank account” that inform users. 2. Use Animation Use animation to capture attention and inform users of an activity’s progress. It makes the users feel you’re listening. You can also play with animation speeds to give a sense of slowing down or speeding up. Progress in mixed form We talked about two kinds of UX patterns that give feedback on the progress. However, both kinds completely have a different use case. One thing is to be noted is both types could be used in conjunction with each other. Observe closely how Instagram cleverly implemented indicators in stories. The discrete bars act as carousal indicators while each indicator itself is a determinate indicator. In the second example, the progress tracker gives the overall progress in onboarding and the little loader in the button that indicates the progress of user’s request. Conclusion Now that we know which type is for what use case, we can be more informed when we use them next time. Hope this article can guide you to pick the right type for your use case. If you have any feedback, let us know in the comments. Shoutout to Abhinav Sharma for helping me with research and draft feedback. Use it for your reference, Clap as much as you can, Share on your LinkedIn and that's it! UX design patterns for Progress was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.