293

This took forever to make using Image Ready. lol Going forward: Going backward: When the spiral is going against the bar direction, it does visually exagerate the speed of the bar movement. The bars are pretty close to each other, so hide one with your palm and look only one at time. :)


277

Studies have shown it looks faster and in UX perception is everything ;) A study (PDF)[1] demonstrates that animations can increase the perceived speed of a download by up to 11% over a bar that is not animated. Having a reverse-animated background as in the Gmail loading bar, or having the background pulse faster as the bar nears completion, both create ...


176

Animation is used to draw focus to objects. It makes less sense to draw focus to an object the user is no longer pointing to (and thus, is no longer interested in focusing on), than to draw focus to the object the user does want to focus on. It is not a matter of neglect, but a conscious decision to narrow the area of focus to coincide with the object the ...


110

Don't be so arrogant as to call yourself "right" and your client "wrong." Concentrate on the problem the client has given you, not the solution. The problem is that everything seems static, boring, and typical. He wants more wow. Your job is to give him more wow. How you do that is up to you. Forget about convincing the client that he is wrong. He is not ...


81

Root Level Progression I think a better approach if your sub tasks are completing very quickly would be moving the progress bar to the root elements. Or outside of the table completely (if it's an option) which also gives you the ability to use different icons if a sub task fails etc.


81

Wow factor is not always helpful Without the specifics it's hard to tell whether animation is going to be suitable for your site, but here are some common arguments for not using animation: Animations can distract users from their core task. Human perception is highly sensitive to movement, so animations can instantly rivet a user's attention in an ...


55

I would hide the progress bar once a task is completed. Progress bars communicate to the user that something may take awhile so maybe you could hide the progress bar at 100% and even change the word to DONE. If all the tasks start out as DONE then awesome I have to tell all my friends how fast you are!


49

To me, the most crucial problem here is that your client wants to see the site as HE wants it, not as users want it. He finds his perspective more important than the users' perspective. It doesn't matter why he likes animated sites, it doesn't matter that you don't. What matters is that he doesn't see that it's users who decide. He doesn't make conversions, ...


45

You can use the "Model Human Processor" system to decide the length of an animation.* On average it takes a human 230 ms to visually perceive something, with a min/max of 70-700 ms across different people. That basically means that some people are faster at perceiving motion than others, and what some people can perceive in 100ms will take others else ...


38

This is an assumption, but it's likely because it makes the progress bar appear to fill more rapidly. This effect is achieved because the right edge of the bar, the consequential part, is moving in the opposite direction from the animation, thereby making the increments that bar edge moves appear larger than they do relative to the box containing the ...


37

I don't think it's a design decision; I think they're neglected because, at least in web development, they're kind of annoying to implement and don't contribute enough to the UX to make them worth the work. If you look at Google's Material Design Animation guidelines, they always show the end animations: Whereas showing an entrance animation is as easy as ...


28

In my book, all animations of control elements must be triggered only by user actions. For example, in large forms or full-screen workflows animations can be used as additional visual cues for the next step once something has been completed. If This Than That (ifttt.com) is a good example here - the page auto-scrolls to the next step when you click Next. ...


27

No, don't slow down the job. There's nothing wrong with having something be instantly 100% done. Your app will actually seem better than if you slow things down so that the progress bar animation is visible. Users would love nothing more than to have everything happen instantly.


17

What are you trying to solve? From a UX point of view, your heart is in the right place: any animation that solves a problem is welcome. For example, if you press one of the icons on iOS they will start shaking: that’s an animation that means something to the user. It delivers a message and solves a problem (how to show the user that he is about to delete ...


17

Pay attention to the fact that the three examples above are all functional animations but serves a different purpose. The first two examples acts like a modal box pop up. User opens a box and expect it to disappear once done. So it's a good design decision to reveal it slow, helping user understand the change made, and hide it fast. User is in full control ...


15

The conceptual model isn't "left arrow moves the elements left"; it's "left arrow takes me to the element on the left". With indirect manipulation like this, it's probably fair to assume that users are thinking in terms of the content they're consuming rather than the spatial projection of the UI.


14

In addition to the perceived-speed reason offered by the other answers, this interior-pattern animation also makes sense at another logical/analogical level. The example progress bars are animating in two ways: (1) the area representing progress is widening, with its right-edge moving to the right; and (2) the colored pattern inside is shifting, right-to-...


14

I'm assuming this question was incited by: How and when should you use animation in your application? I definitely do believe that if loading time cannot be improved, distraction is a good technique. Examples: github.com , as well as the popularity of having interlaced .png's. Maybe the term "distracting" would only apply to stuff below 750ms, and after ...


14

This is the most compact and intuitive way to present an indefinite progress. The key word is indefinite. source I can hardly imagine an indefinite linear solution. For example, a common progress bar in indeterminate mode looks a bit unclear: source BTW, circle is a very useful shape (just want to make your day better :) Round-robin - The term ...


13

I was thinking in a similar line as @Yako: Do not slow down any tasks, but think on what gives a nice user experience separately. My suggestion: Don't slow down the task, slow down the bar Just let your tasks run, and measure their progress, but rather than displaying the updated progress immediately, do something more smooth. For example: define a ...


13

A web site is not like a magazine cover or print ad which may be what your client is thinking. It doesn't need to draw the user's attention because if someone is at your website, they came there intentionally with some particular reason. If they can see the site, you've already sold them on visiting it. The goal then is to impart the best impression on ...


12

The advice is: it depends. But here are numbers that can help us figure out what works best: Google ran experiments wherein their search results pages were slowed by 100 to 400 milliseconds. The slower response times had an impact on the number of searches per user: even weeks later, users from the slowed pages were not searching as much: https://research....


11

Wireframes are a terrible place to try to describe animation. The closest you can get is something abstract like interactive sketching notation, but that requires the viewer of the wireframe to understand the notation style and it can only communicate very limited transitions. Use a wireframe to outline the structure of a page. Treat it like a sketch, even ...


11

Ideally, we'd always be able to give the user an estimate of the amount of time remaining. Visually, this is usually done through the infamous progress bar. However, certain activities such as waiting for a stream to buffer are difficult to estimate completion for. Most, if not all, progress bars have some sort of "indefinite" state available to programmers ...


11

First, I applaud anyone showing an interest in focusing on the interaction side of design. In corporate UX groups, I find that the one thing that often does fall through the cracks is the interaction design (often due to waterfall development processes). The UI may look stunning, the back end, tight and responsive, but then you put them together and things ...


10

There is very simple logic behind it and that is difference of perspective. For example Make a frame of your fingers and like shown in the image below and turn your "frame" towards the right and see what happens. you move your frame right and your vision moves left. you move your frame left and your vision moves right. Now you have to pic one of the two ...


10

This type of loader may not be overkill, in it's context. If this was a loader for something within an application for completing a simple task, then I'd say there is definitely too much going on, but this is for the boot screen, and it may work in this case. I think one of the main reasons this works well is that it changes the user's perception of time by ...


9

I think casinos can be used as a good model for positively reinforcing a sense of achievement to the user. Specifically slot machines, as they make all types of pinging noises even when you are really losing money. This gives the user a false sense of achievement in a lot of cases but it can still be used as a good reference point. This video summarizes a ...


9

I think that a perceptible progression may be a good idea after all: If it jumps straight from 0 to 100, did it really work? Wasn't it a bug? However, it's important not to actually slow down the job, but only its perception by the user. So, here are a few features I would likely implement in that case: an animation of 100ms between each step (so that ...


9

I don't know where the sun rises in a screen animation, but I do understand that the movement of the sun indicates the passage of time. Our generic indicator of the passage of time is the clock. The hands of the clock always turn to the right direction. If we split the clock face in half, keeping the upper half, the hand appears from the left and disappears ...


Only top voted, non community-wiki answers of a minimum length are eligible