176
votes
Why are animations out often neglected, even from Google?
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 ...
111
votes
How to convince a client that the website doesn’t need to be too animation-driven to stand out?
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, ...
81
votes
Slow down job for better progress animation
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 ...
81
votes
How to convince a client that the website doesn’t need to be too animation-driven to stand out?
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:
...
56
votes
Accepted
YouTube Premiere countdown animation
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 ...
55
votes
Slow down job for better progress animation
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 ...
50
votes
Accepted
How to convince a client that the website doesn’t need to be too animation-driven to stand out?
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 ...
48
votes
Accepted
Optimal duration for animating transitions
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 ...
37
votes
Why are animations out often neglected, even from Google?
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 ...
27
votes
Slow down job for better progress animation
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 ...
18
votes
How to convince a client that the website doesn’t need to be too animation-driven to stand out?
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 ...
17
votes
Why are animations out often neglected, even from Google?
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 ...
16
votes
YouTube Premiere countdown animation
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 ...
13
votes
Accepted
Slow down job for better progress animation
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 ...
13
votes
How to convince a client that the website doesn’t need to be too animation-driven to stand out?
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 ...
12
votes
Optimal duration for animating transitions
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 ...
10
votes
Is there a particular UX benefit of the Android Marshmallow boot screen preloader?
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 ...
9
votes
Slow down job for better progress animation
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 ...
9
votes
Accepted
Should the sun rise from left or right side?
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 ...
8
votes
Office 2013 smooth cursor while typing
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 ...
8
votes
How to convince a client that the website doesn’t need to be too animation-driven to stand out?
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 (...
6
votes
Animated scroll vs jump for a "back to top" button
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 ...
6
votes
Accepted
Usage of animated buttons and effects on user experience
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 ...
6
votes
Office 2013 smooth cursor while typing
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 ...
6
votes
Office 2013 smooth cursor while typing
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 ...
6
votes
Accepted
Should the input for a new item of a wishlist be at the top or the bottom of that list?
Neither seem consistent
The first big difference I see appears when the user have a list of maybe 15 items and they enter the page to add another one, I don't think it's a good idea to make them ...
6
votes
Are Animated Images considered bad UX?
Animation is fine when it's needed, for example to provide feedback in response to a user action, or—in first/early experiences—to help users understand the mental model.
In my opinion, a perpetual ...
6
votes
Accepted
What makes Reverse scrolling a sign of Bad UI?
I wouldn't say it is always a bad UI design, but scrolling is one of those things that should not be counter-intuitive and behave in a way the user does not expect.
On a touch device, for example ...
6
votes
Accepted
What software would most commonly be used to create this UI animation from dribbble?
I'm going to lift a quote from an answer over at DesignerNews:
Framer, After Effects, Cheetah 3D (yes, really!), Hype, Photoshop (for
hacky GIFs), Quartz Composer and Form are all worth taking a ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
animation × 135interaction-design × 21
gui-design × 14
loading × 13
website-design × 11
usability × 9
transitions × 9
navigation × 8
microinteractions × 8
scrolling × 6
css × 6
mobile × 5
web × 5
video × 5
user-behavior × 4
buttons × 4
user-expectation × 4
web-app × 4
ios × 4
image × 4
response-time × 4
design × 3
mobile-application × 3
feedback × 3
human-interface-guideline × 3