<p>Published on <a href="https://blog.prototypr.io/ui-progress-bars-to-make-you-enjoy-the-wait-1d973f6f8034?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Graeme Fulton </p>
<h4>UI Inspiration</h4>
<p>After the fun of the <a href="https://blog.prototypr.io/ui-toggles-to-turn-you-on-83de3ef91e21">UI toggles</a> post, I came across 10 really entertaining progress bars!</p>
<p>Some of the concepts below <em>might</em> not be the most feasible, but they can help you think about bringing emotion to your interfaces, especially when users are facing one of the most boring aspects of life in your app: <strong><em>waiting</em></strong>.</p>
<blockquote><p>“Boredom, according to psychologists, is merely lack of stimulation, <a href="http://www.apa.org/monitor/2013/07-08/dull-moment.aspx">the unfulfilled desire for satisfying activity</a>. So what if we use the interface to give them that stimulation?”</p></blockquote>
<blockquote><p>~ <a href="https://medium.com/u/b5efd6e44c8e">Alice Kotlyarenko</a></p></blockquote>
<p>Let’s go! 👇</p>
<h4>1 — 2. Snail loaders 🐌!</h4>
<p><a href="https://dribbble.com/shots/541530-Helixbar"><img alt="" src="https://cdn-images-1.medium.com/max/400/1*G9PIbOt0ZUL5FD6ud0tjWg.gif"></a><a href="https://dribbble.com/shots/4137007-Loading-bar"><img alt="" src="https://cdn-images-1.medium.com/max/450/1*GafnSJKTNBPKdKtVpldlrw.gif"></a>1 by <a href="https://medium.com/u/31b31da89b76">Andrey Davlikanoff</a> (<a href="https://dribbble.com/Davlikanoff">Davlikanoff Design</a>)|| 2 by <a href="https://dribbble.com/TomLoots">Tom Loots</a></p>
<h4>3. The beach ball ⛱</h4>
<p><a href="https://dribbble.com/shots/4483904-Progress-Bar?ref=prototyprio"><img alt="" src="https://cdn-images-1.medium.com/max/400/1*dVdHoB9VcQrbQLbre-s7fA.gif"></a>3. ProgressBar by <a href="https://medium.com/u/5e807872b5d1">Webshocker</a></p>
<h4>4–5. Character Loaders</h4>
<p><a href="https://dribbble.com/shots/4360373-Loading-Astronauts"><img alt="" src="https://cdn-images-1.medium.com/max/400/1*HTBJrhAFl2MkxGi-XgqC8w.gif"></a><a href="https://dribbble.com/shots/1356913-Loading-Christmas-Gifts"><img alt="" src="https://cdn-images-1.medium.com/max/500/1*FPmecJO0gW1E0J8wW7lQLQ.gif"></a>4. Loading-Astronauts by <a href="https://dribbble.com/supi_">Supi_</a> || 5. Loading Christmas Gifts by <a href="https://dribbble.com/woodmouse">Chuan²</a></p>
<p>Next are 4 loading bars that aren’t animated, but they’re just as great — imagine them moving:</p>
<h4>5–6. 🚬 for smokers</h4>
<p>These 2 show different types of result smoking can bring depending on the substance 🍃:</p>
<p><a href="https://dribbble.com/shots/142779-Progress-bar-lives"><img alt="" src="https://cdn-images-1.medium.com/max/400/1*f32zyVrSSPfugJm93BO-9A.jpeg"></a><a href="https://dribbble.com/shots/173910-Holland-progress-bar-lives-rebound"><img alt="" src="https://cdn-images-1.medium.com/max/400/1*JAxLF7N0YIP1dn4EkVmVRQ.png"></a>3. Progress bar lives by <a href="https://medium.com/u/ebb580c418">Dmitriy Fatkhiev-Dolokhov</a>|| 4. Holland progress bar lives (rebound) by <a href="https://medium.com/u/754d7c13762d">dymytri</a></p>
<h4>7–8. for golfers ⛳️:</h4>
<p><a href="https://dribbble.com/shots/1826616-Golf-Progress-Bar"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*0jD14MNSdZ5F6czbvTOB9w.png"></a><a href="https://dribbble.com/shots/870104-Progress-bar"><img alt="" src="https://cdn-images-1.medium.com/max/400/1*8B47KICa6o9fEKaSNfdSTw.jpeg"></a>4. Golf Progress Bar by <a href="https://medium.com/u/d36c0eadcf6f">Pavel Novák</a>|| 5. Progress bar by <a href="https://medium.com/u/f9f6b8c61389">Denis Perepelenko</a></p>
<h3>Last 2!</h3>
<h4>9. What if you could…</h4>
<p>(by <a href="https://medium.com/u/a9b08fd49c46">Gal Shir</a>)</p>
<p><a href="https://dribbble.com/shots/4026985-If-only-I-could"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*cLnEqhplleWcQ1kyq9Xc-g.gif"></a>If only I could… by <a href="https://dribbble.com/galshir">Gal Shir</a></p>
<h4>10. Or what if there’s interruptions?</h4>
<p><a href="https://dribbble.com/shots/1887815-Download"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*JzEgzgSjJKV7zxWKPdBAjg.gif"></a>Download by <a href="https://dribbble.com/xjw">xjw</a></p>
<p>That’s all! For more on emotional interface design, check out <a href="https://medium.com/u/b5efd6e44c8e">Alice</a>’s article on <a href="https://medium.com/u/5ef3beaef7aa">Smashing Magazine</a>:</p>
<p><a href="https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/?ref=prototyprio">How To Design Emotional Interfaces For Boring Apps</a></p>
<p>She uses the popular Tunnel Bear app as an example. Tunnel Bear makes the boring concept of <a href="https://en.wikipedia.org/wiki/Virtual_private_network">VPNs</a> (Virtual Private Networks) entertaining through the use of funny bears. Here is their downgrade animation:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/500/1*dhiZGqbry83-VroemBDVOg.gif"></p>
<p>Hope you enjoyed the inspiration! Sign up to <a href="http://prototypr.io">Prototypr</a> for more 😃:</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1d973f6f8034" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/ui-progress-bars-to-make-you-enjoy-the-wait-1d973f6f8034">🐌🐌 UI Progress Bars to make you enjoy the wait 😅</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


UI Progress Bars to make you enjoy the wait

UI Inspiration

Top Stories