{"id":7224,"date":"2023-07-20T19:33:00","date_gmt":"2023-07-20T17:33:00","guid":{"rendered":"https:\/\/usersnap.com\/?p=7224"},"modified":"2025-02-28T19:27:05","modified_gmt":"2025-02-28T18:27:05","slug":"progress-indicators","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/progress-indicators\/","title":{"rendered":"Progress Bar Indicator UX\/UI Design &amp; Feedback Notifications"},"content":{"rendered":"\n<p><em>Visibility of system status<\/em>&nbsp;is one of the most important&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/uxplanet.org\/golden-rules-of-user-interface-design-19282aeb06b\">rules of UI\/UX design<\/a>.<\/p>\n\n\n\n<p>The goal behind this rule is pretty obvious \u2014&nbsp;<em>to minimize user tension<\/em>&nbsp;you should&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/usersnap.com\/templates\/quick-issue-reporting-template\">provide feedback<\/a>&nbsp;to the user about what is happening with the app&nbsp;<em>within a reasonable amount of time<\/em>.<\/p>\n\n\n\n<p>Don&#8217;t keep the users guessing \u2014&nbsp;<em>tell&nbsp;<\/em>the user what&#8217;s happening. And one of the most common forms of such feedback is a&nbsp;<em>progress indicator<\/em>.<\/p>\n\n\n\n<p>In this article, we&#8217;ll give you an overview of the main types of the progress tracker indicators and the use cases for them.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Good interaction design provides&nbsp;feedback<\/strong><\/h2>\n\n\n\n<p>While instant app&#8217;s response is the best, there are simply times when your app won&#8217;t be able to comply with the guidelines for&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/usersnap.com\/blog\/how-to-improve-website-loading-times\">speed<\/a>.<\/p>\n\n\n\n<p>Delays are usually caused by slow loading times and latency issues. For such cases, you&nbsp;<strong>must&nbsp;<\/strong>reassure the users that the&nbsp;<em>app is working<\/em>&nbsp;on their request and that&nbsp;<em>actual&nbsp;<\/em>progress is being made.<\/p>\n\n\n\n<p>Essentially, feedback answers questions across three categories:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Current Status: What&#8217;s happening?<\/li>\n\n\n\n<li>Outcomes: What has just happened?<\/li>\n\n\n\n<li>Future Status: What will happen next?<\/li>\n<\/ul>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Improving UX\/UI<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is a good progress bar UX\/UI? (Examples &amp; Best Practices)<\/strong><\/h2>\n\n\n\n<p>Good progress tracker indicators always give some type of immediate feedback.<\/p>\n\n\n\n<p>They&nbsp;<em>notify users that the app needs more time<\/em>&nbsp;to process the user action, and tell (approximately)&nbsp;<em>how much time it will take<\/em>. They have two main advantages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reduce user&#8217;s uncertainty<\/strong>&nbsp;(app reassures the user that it&#8217;s working).<\/li>\n\n\n\n<li><strong>Offer a reason to wait and reduce users&#8217; perception of time&nbsp;<\/strong>(app gives the user something to look at while waiting. Thus, makes users pay less attention to the wait itself).<\/li>\n<\/ul>\n\n\n\n<p>A user&#8217;s wait time begins the moment when she clicks the button (initiates an action).<\/p>\n\n\n\n<p>Immediately, the system should give some visual feedback to communicate that it has received the request.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Use a progress indicator for any action that takes longer than about&nbsp;<em>1 second<\/em>. For anything that takes less than 1 second to load, it is distracting to use an animation.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>6 types of progress bar indicators<\/strong><\/h2>\n\n\n\n<p>Progress indicators could be&nbsp;<em>determinate&nbsp;<\/em>or&nbsp;<em>indeterminate:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When indicators are&nbsp;<em>determinate&nbsp;<\/em>they indicate<em>&nbsp;how long an operation will take<\/em>&nbsp;when the percentage complete is detectable.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"688\" height=\"99\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0etFyd9H09WNqOynV.gif\" alt=\"determinate\" class=\"wp-image-7227\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>When indicators are&nbsp;<em>indeterminate&nbsp;<\/em>they request that the user waits while something finishes when&nbsp;<em>it&#8217;s not necessary to indicate how long it will take<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Also, there could be combinations of these two types of indicators.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"400\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0AmVWS1MBIG3BPeAy.gif\" alt=\"progress bars\" class=\"wp-image-7226\" style=\"aspect-ratio:2;width:526px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Image source:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/materialdoc.com\/linear-progress\">materialdoc<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Looped animation<\/h3>\n\n\n\n<p>Showing an animated graphic on loop offers feedback that the system is working, but usually, doesn&#8217;t give enough information about how long the user will have to wait.<\/p>\n\n\n\n<p>As a general rule,&nbsp;<strong>you should use looped animation only for fast actions (2\u201310 seconds).<\/strong>&nbsp;<br><br>Making the user stare at a spinning wheel longer can increase bounce rates.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"500\" height=\"104\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/03_FKrfSi3qfIbRQk.gif\" alt=\"progress bars\" class=\"wp-image-7225\"\/><\/figure>\n<\/div>\n\n\n<p>It can also be helpful to add&nbsp;<em>additional clarity<\/em>&nbsp;for the user by including text that explains&nbsp;<em>why&nbsp;<\/em>the user is waiting (e.g. \u201cLoading comments\u2026\u201d).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Users expectations<\/h3>\n\n\n\n<p>Default loading icons (like the iOS spinner of gray lines radiating from a central point)&nbsp;<em>tend to have negative connotations<\/em>. They serve a variety of operating system functions, indicating the status of everything from device boot to problems connecting to network or loading a data. Because of that, people don&#8217;t&#8217; like to see only a loading spinner with no indication of progress or time.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"600\" height=\"204\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0OkpuB3JmeSlzsYx5.gif\" alt=\"progress bars\" class=\"wp-image-7230\"\/><\/figure>\n<\/div>\n\n\n<p>Image source:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/appance.com\/wp-content\/uploads\/ios-loading-indicator-PBJActivityIndicator.gif\">appnce<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Looped animation integration<\/h3>\n\n\n\n<p>You can integrate looped animation with existing controls, especially buttons. For Android applications, a circular loader may be integrated with users control or a floating action button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0sM8xtgfVHFRfHNwj.gif\" alt=\"progress bars\" class=\"wp-image-7229\" style=\"aspect-ratio:1;width:594px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Image source: Material&nbsp;Design<\/p>\n\n\n\n<p>The thought process here is to confirm that the submission was complete not necessarily the progress. That is shown through showing progress in the completion of the circle.<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Improving UX\/UI<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">4. System or custom looped animation<\/h3>\n\n\n\n<p>Facebook&#8217;s app has a very interesting experience with looped animation. Rusty Mitchell&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/mercury.io\/blog\/the-psychology-of-waiting-loading-animations-and-facebook\">highlighted this moment<\/a>&nbsp;when he talked about a Facebook loading indicator:&nbsp;\u201c<em>When the users were presented with a custom loading animation in the Facebook iOS app (left) they blamed the app for the delay.<\/em><\/p>\n\n\n\n<p><em>But when users were shown the iOS system spinner (right), they were more likely to blame the system itself.<\/em>\u201d<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"451\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0IoQiM0WUCiaFRRMI.png\" alt=\"progress bars\" class=\"wp-image-7228\" style=\"aspect-ratio:1.7738359201773837;width:612px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">5. Linear animation<\/h3>\n\n\n\n<p>A&nbsp;<em>determinate&nbsp;<\/em>linear progress indicator should always fill from 0% to 100% and never decrease in value. For&nbsp;<em>multiple operations<\/em>&nbsp;happening in sequence, you should use the indicator to represent the progress of ongoing process as a whole, and not each individual operation.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0HZ6Q66Dr1OsFHUS2.gif\" alt=\"progress bars\" class=\"wp-image-7235\" style=\"aspect-ratio:1.3333333333333333;width:622px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Linear Animation. Source:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/shots\/1370599--GIF-Progress-Bar-for-Aviasales-app\">Dribbble<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Percent-done animation<\/h3>\n\n\n\n<p>Uncertain waits are longer than known, finite waits. Percent-done progress indicators are the most informative type of wait-animation feedback. They show the current progress, how much has already been accomplished, and how much is left. A percent-done indicator makes users understand how fast the action is being processed.<\/p>\n\n\n\n<p>As a general rule,&nbsp;<strong>you should use percent-done animation for actions that take 10 seconds or more<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/1L-PZVptC42tnL4R0ZTM1g.jpeg\" alt=\"progress bars\" class=\"wp-image-7234\" style=\"aspect-ratio:1.3333333333333333;width:588px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Source:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/shots\/870104-Progress-bar\">Dribbble<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Progress bar best practices<\/h2>\n\n\n\n<p>Progress bars are the unsung heroes of user interaction.<\/p>\n\n\n\n<p>This chapter unveils the best practices that transform these simple visual elements into powerful tools, seamlessly guiding users through processes while enhancing overall satisfaction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Provide a general time&nbsp;estimate<\/h3>\n\n\n\n<p>Don&#8217;t try to be exact, a simple, \u201cThis might take a minute\u201d can be enough to inform the user and encourage them to wait it out.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"510\" height=\"300\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/1WS8HVg2JocG_4qZHZ68QoQ.png\" alt=\"progress bars\" class=\"wp-image-7233\"\/><\/figure>\n<\/div>\n\n\n<p><em>Software update estimation in Apple&nbsp;iOS<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Progressive animation<\/h3>\n\n\n\n<p>Progress bars tell users how long an action is taking, but they&#8217;re not always correct. You can disguise small delays in your progress bar by starting the progressive animation slower and allow it to move faster as it approaches the end. The progress bar&nbsp;<em>should never stop<\/em>, otherwise, users will think the app froze.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"400\" height=\"300\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/1UdSMKDw4C9Le1qE79z5aFw.gif\" alt=\"progress bars\" class=\"wp-image-7232\" style=\"aspect-ratio:1.3333333333333333;width:532px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Image source:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/tympanus.net\/codrops\/2015\/09\/23\/elastic-progress\">tympanus<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Showing steps<\/h3>\n\n\n\n<p>Instead of showing a percentage number, consider showing the&nbsp;<em>number of steps<\/em>. Users might not know how long each step lasts, but knowing the number of steps at least helps them form an estimate.<\/p>\n\n\n\n<p>You can follow a classic step-description way:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"319\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0AMM7zcC3ZF-JiXRJ.png\" alt=\"progress bars\" class=\"wp-image-7231\" style=\"aspect-ratio:2.5078369905956115;width:580px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Or follow more creative approach:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0a9YVBfQQDI68Il7Z.gif\" alt=\"progress bars\" class=\"wp-image-7239\" style=\"aspect-ratio:1.3333333333333333;width:574px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Image source:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/shots\/773791-Progress-Bar-Icons\">Dribbble<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Skeleton screens for progress bars<\/h3>\n\n\n\n<p>You should always try to make the wait more pleasant if you can&#8217;t shorten the line. And wait-time is a right time for&nbsp;<em>skeleton screens<\/em>&nbsp;(a.k.a temporary information containers). Skeleton screens are another way&nbsp;<em>to focus on progress instead of wait times.<\/em>&nbsp;A skeleton screen is essentially a blank version of a page into which information is gradually loaded. Such action creates the sense that things are happening immediately as information is incrementally displayed on the screen.<\/p>\n\n\n\n<p>Medium uses this trick, showing a simple wireframe as a placeholder, while the actual content loads. With such a screen, the focus is on content being loaded not the fact that it&#8217;s loading.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"571\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0cVpwSmvQgV8hcJUC..png\" alt=\"progress bars\" class=\"wp-image-7238\" style=\"aspect-ratio:1.4010507880910683;width:606px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p><em>Medium skeleton screen. Image Source:&nbsp;<\/em><a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/merhl\/status\/694259963225587712\"><em>link<\/em><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Don&#8217;t use static progress indicator<\/h3>\n\n\n\n<p>This group of indicators is represented by not moving image or text like \u201c<em>Loading\u2026<\/em>\u201d or \u201c<em>Please wait\u2026<\/em>\u201d to indicate that the request has been received. While any feedback is better than none, static indicators don&#8217;t offer enough information inform users about what is happening and should be replaced with a&nbsp;<em>more meaningful&nbsp;<\/em>type of indicator for better&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/usersnap.com\/blog\/ui-ux-design-our-own-experience\">UX<\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/0-IoUUPvNx3NihgGi.gif\" alt=\"progress bars\" class=\"wp-image-7237\" style=\"aspect-ratio:1;width:428px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p><em>Avoid using static progress indicators.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>One last&nbsp;thing<\/strong><\/h2>\n\n\n\n<p>To ensure people&nbsp;<em>don&#8217;t get bored<\/em>&nbsp;while waiting for something to happen, offer them some distraction. This can be something fun, something unexpected or anything else that catches your users&#8217; attention long enough for your app to load. Fine animations can distract your visitors and make them ignore long loading times.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2017\/05\/1-VPlLndVAkCxuZsBHnMlgQ.gif\" alt=\"progress bars\" class=\"wp-image-7236\" style=\"aspect-ratio:1.3333333333333333;width:446px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p>Image credit:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"http:\/\/ramotion.com\/\">Ramotion<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>Providing users with feedback or using notifications system feedback is fundamental to a positive\u00a0<a href=\"https:\/\/usersnap.com\/blog\/emotions-user-experiences\" target=\"_blank\" rel=\"noreferrer noopener\">user experience<\/a>. Feedback can\u00a0<em>reduce uncertainty<\/em>\u00a0for users and\u00a0<em>increase the time they are willing to wait<\/em>.<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Improving UX\/UI<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>A bonus tip to improve user interactions<\/strong><\/h3>\n\n\n\n<p>While users expect feedback from you, they are also happy to share what they think about your product. Using a smart&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/usersnap.com\/blog\/website-feedback-tool\">website feedback tool<\/a>&nbsp;to engage customers and collect micro-feedback can help you understand usability friction, improve UI\/UX and ultimately make users love your product more. Try out Usersnap&#8217;s feedback widget for free&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/usersnap.com\/customer-feedback\">here<\/a>.<\/p>\n\n\n\n<p>Read what Trello&#8217;s VP of product and Typeform&#8217;s head of product have to say about user experience and product design in this ebook:&nbsp;<a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/usersnap.com\/e-books\/how-to-build-products-people-love\">How To Build Products Users Love<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visibility of system status&nbsp;is one of the most important&nbsp;rules of UI\/UX design. The goal behind this rule is pretty obvious \u2014&nbsp;to minimize user tension&nbsp;you should&nbsp;provide feedback&nbsp;to the user about what is happening with the app&nbsp;within a reasonable amount of time. Don&#8217;t keep the users guessing \u2014&nbsp;tell&nbsp;the user what&#8217;s happening. And one of the most common [&hellip;]<\/p>\n","protected":false},"author":80,"featured_media":16135,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[856],"tags":[],"class_list":["post-7224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-feedback-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png","author_info":{"display_name":"Tomas Prochazka","author_link":"https:\/\/usersnap.com\/blog\/author\/tpro\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Progress Bar Indicator UX\/UI Design &amp; Feedback Notifications<\/title>\n<meta name=\"description\" content=\"Visibility of system status is one of the most important rules of UI\/UX design. And one of the most common forms of such feedback is a progress indicator.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/progress-indicators\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Progress Bar Indicator UX\/UI Design &amp; Feedback Notifications\" \/>\n<meta property=\"og:description\" content=\"Visibility of system status is one of the most important rules of UI\/UX design. And one of the most common forms of such feedback is a progress indicator.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/progress-indicators\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-20T17:33:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-28T18:27:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomas Prochazka\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@usersnap\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomas Prochazka\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/\"},\"author\":{\"name\":\"Tomas Prochazka\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/b7cf271d616ad935dad53bf42dd78643\"},\"headline\":\"Progress Bar Indicator UX\/UI Design &amp; Feedback Notifications\",\"datePublished\":\"2023-07-20T17:33:00+00:00\",\"dateModified\":\"2025-02-28T18:27:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/\"},\"wordCount\":1444,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png\",\"articleSection\":[\"Website Development &amp; Feedback\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/\",\"url\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/\",\"name\":\"Progress Bar Indicator UX\/UI Design & Feedback Notifications\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png\",\"datePublished\":\"2023-07-20T17:33:00+00:00\",\"dateModified\":\"2025-02-28T18:27:05+00:00\",\"description\":\"Visibility of system status is one of the most important rules of UI\/UX design. And one of the most common forms of such feedback is a progress indicator.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/progress-indicators\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png\",\"width\":1200,\"height\":630},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/b7cf271d616ad935dad53bf42dd78643\",\"name\":\"Tomas Prochazka\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2023\/06\/cropped-tomas-prochazka-96x96.jpeg\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2023\/06\/cropped-tomas-prochazka-96x96.jpeg\",\"caption\":\"Tomas Prochazka\"},\"url\":\"https:\/\/usersnap.com\/blog\/author\/tpro\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Progress Bar Indicator UX\/UI Design & Feedback Notifications","description":"Visibility of system status is one of the most important rules of UI\/UX design. And one of the most common forms of such feedback is a progress indicator.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/usersnap.com\/blog\/progress-indicators\/","og_locale":"en_US","og_type":"article","og_title":"Progress Bar Indicator UX\/UI Design & Feedback Notifications","og_description":"Visibility of system status is one of the most important rules of UI\/UX design. And one of the most common forms of such feedback is a progress indicator.","og_url":"https:\/\/usersnap.com\/blog\/progress-indicators\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2023-07-20T17:33:00+00:00","article_modified_time":"2025-02-28T18:27:05+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png","type":"image\/png"}],"author":"Tomas Prochazka","twitter_card":"summary_large_image","twitter_creator":"@usersnap","twitter_site":"@usersnap","twitter_misc":{"Written by":"Tomas Prochazka","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/"},"author":{"name":"Tomas Prochazka","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/b7cf271d616ad935dad53bf42dd78643"},"headline":"Progress Bar Indicator UX\/UI Design &amp; Feedback Notifications","datePublished":"2023-07-20T17:33:00+00:00","dateModified":"2025-02-28T18:27:05+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/"},"wordCount":1444,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png","articleSection":["Website Development &amp; Feedback"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/","url":"https:\/\/usersnap.com\/blog\/progress-indicators\/","name":"Progress Bar Indicator UX\/UI Design & Feedback Notifications","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png","datePublished":"2023-07-20T17:33:00+00:00","dateModified":"2025-02-28T18:27:05+00:00","description":"Visibility of system status is one of the most important rules of UI\/UX design. And one of the most common forms of such feedback is a progress indicator.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/progress-indicators\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/progress-indicators\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Improving-the-UX-of-Progress-Indicators-and-Feedback-Notificationsw.png","width":1200,"height":630},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/b7cf271d616ad935dad53bf42dd78643","name":"Tomas Prochazka","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2023\/06\/cropped-tomas-prochazka-96x96.jpeg","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2023\/06\/cropped-tomas-prochazka-96x96.jpeg","caption":"Tomas Prochazka"},"url":"https:\/\/usersnap.com\/blog\/author\/tpro\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/7224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/80"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=7224"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/7224\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/16135"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=7224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=7224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=7224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}