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 ...


111

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 ...


56

This image is know as test card (or test pattern) and was originally used as a TV test signal. Before 24/7 TV, it was typically shown when the regular broadcast ended. In its beginning it used to be physical test cards at which the camera was pointed and was later replaced by a digital version. See Wikipedia for more context. In YouTube's case, I can't ...


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!


50

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, ...


46

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 ...


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 ...


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.


18

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 ...


16

Like the floppy disk icon commonly used to represent the feature of saving for most of the digital products, the animation visual you mentioned was the opening screen for channels to set up calibration during the use of colored or black and white televisions. Since you're probably aged below your 30s and haven't ran into occurring of this image on TV, you ...


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 maximum ...


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

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

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 ...


8

Animation in its very basic form is used to signify change. Whether that's a change in relationship between elements or the status of an element itself, doesn't matter. However, this is when you look at animation in the context of animation vs no animation. If you take it out of that context, animation is like color, pattern, shape, etc. It's just another ...


8

Any time you design a feature you can't deliver, you're spreading bad UX. And if you're delivering a feature you haven't successfully developed, you're spreading terrible UX. This video shows what a smooth cursor should look like. The video you posted shows why Office is the quintessential product riddled with bugs from feature overload. The presumed ...


8

It depends on what kind of animation you mean by "Flash-like" animations. If you mean "a lot of spinning doodads and scrolling marquees that do nothing," then your client is almost objectively wrong (insofar as any answer in a creative field can be "wrong"), for the reasons mentioned in the answer contrasting the images of a gaudy bus and a Porsche. ...


7

Apple provides some good recommendations to developers regarding animation inside an interface. While this isn't necessarily directly related to website interface design, some of the basic principles still apply, and might be helpful in persuading your client to avoid going down the path of excessive animations. "In general, avoid using animation as the ...


6

It all begins with system capabilities. In last couple of years the external graphics drivers are playing a huge role in improving system performances by GPU Accelerated Computing Systems. Cursors can be either monochrome or color, and either static or animated. The type of cursor used on a particular computer system depends on the system's display. ...


6

There are two problems. The first is the visible delay between the instance typing stops and the cursor moves, the second is that instance where the cursor appears above the text. Optimisation of response times is quite a nightmare and will often require extensive tests to be carried on users to reach any conclusion. You can read up on what the Nielson ...


6

Button animations serve a different purpose Observations: The purpose of the animation is not to draw the user's attention, but rather to provide feedback to the user. This is sometimes called a clunk: a clear acknowledgement to assure users that you have noticed the interaction. In the physical world users live in, interactions provide feedback (closing a ...


6

Both work, but it's more important to make sure that the top of the page is visually clear Let's look at what happens when the user hits the home or scroll to top button: The screen changes (either by scrolling or by jump). This is going to be cognitively disruptive for long documents, whether you scroll or jump: the user will still be confronted with ...


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