Animation-In are fine BUT no animation when something disappears. IS THIS GOOD?
From Google images
From Toptal
https://www.toptal.com/designers/ux/interview-questions
From Designation
http://designation.io/campfires/author/will/
-
22the hover example, if it animated away as well as in, there would be too much going at once if you moved from one to the other.– Dave HaighAug 8, 2016 at 16:12
-
3While in some cases it doesn't really matter, it's recommended to animate-out any transition. Not only for aesthetic reasons (it's less violent) , but because users need to keep track of interaction. Imagine accidentally clicking something and then item disappears just like that. Other than that, WHY some people do this, I don't know, you'll need to ask them. There are no technical or theoretical reasons to do this, so it's an opinion based issue– DevinAug 8, 2016 at 21:43
-
10If I had to choose one annoying gimmick, I'd definitely prefer to have animation out. At least that way, I don't have a forced pause before I can continue to interact with the content.– SuperbestAug 9, 2016 at 1:23
-
7Heh... "even from Google", pioneers in inconsistent, incomprehensible UI. Too bad animations in aren't neglected, too. The example gifs are driving me insane, heh.– Jason CAug 9, 2016 at 13:29
-
1@Devin completely disagree...– jeremyAug 10, 2016 at 12:42
|
Show 6 more comments
7 Answers
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 user is currently interested in.
-
49A good example of when animating out may be good practice is the "genie" effect on Mac's. That is, when you minimize a window, it appears to get sucked down (like a genie in a bottle) into the menu bar, which shows the user where they need to click to un-minimize the window. Aug 8, 2016 at 20:10
-
17I think you're confusing animation with transition. I understand that the question's wroding is confusing, but the examples are about transitions rather than animations. And if we talk about transitions, then in and out transitions are always recommendable when user interacts with different elements on a page– DevinAug 8, 2016 at 21:48
-
1Furthermore: how is a transition draw attention to an element unless you already interact with it (hence the focus is already in it). This answer really has nothing to do with the question, both are 2 completely different things– DevinAug 9, 2016 at 0:36
-
1Because the bright red box of text appearing over top of a picture in that Designation example isn't enough to draw attention to it, heh.– Jason CAug 9, 2016 at 13:25
-
1@JasonC, so you need to interact with it, or am I missing something? Seriously, animation and transition are 2 different things, no matter what. Bottom line is this answer is getting upvoted by lots of people when it isn't even attempting to answer the question at hand, therefore the answer is incorrect , as incorrect as an answer speaking about a different thing can be.– DevinAug 9, 2016 at 16:52
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 adding animation: ...; to the CSS, an exit animation requires either 1) avoiding display: none (not always possible; requires jumping through some hoops) 2) use JavaScript to wait for the exit animation to finish before setting display: none. Here's an entire tutorial on the subject.
-
16the day a couple lines of code interferes with good UX, we're talking of horrible UX, as simple as that– DevinAug 8, 2016 at 21:44
-
1also, Material Design has very explicit guidelines about duration of animation, including in and out, see material.google.com/motion/…– DevinAug 8, 2016 at 21:54
-
@devin I've also gone through the pain of animation out. it sucks i know.– JivanAug 9, 2016 at 7:58
-
22) is actually rather easy if you're using jQuery instead of CSS animations. In fact, it's a built-in functionality. Another option would be to use
opacity:0; pointer-events:noneand live with the fact the objects are still there on the screen, but I guess that counts as 1). Aug 9, 2016 at 9:30
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 here.
The third animation aims to keep user oriented while zooming into the clock tile (which is a bit less trivial interaction). And so it's important that the animation will revert to tile's original location once zoom out is initiated - user won't lose orientation.
Bottom line, design decision is derived from the purpose of the specific functional animation. Reference: Functional Animation In UX Design
-
+ for highlighting potential design intent. Animations should always be based on intent and not be dribbble drool. Aug 9, 2016 at 20:22
Opening animation
If the UI layout changed suddenly, like when there is no animation and the change happens fast as it happens in modern PCs, then the user would be hit by the "What did I break?!" feeling.
This happens when the user loses her context. The user loses focus and gets a sudden feeling of having broken something.
An animation, like gradually sliding down a form, communicates the user something like "Hey, watch how I insert this block here, don't freak out!".
So it can be said that one purpose is to alter the UI without stealing the user's focus by preserving the context by making it evolve instead of instantly changing.
Notice that the animation consumes a bit of a non-infinite resource, which is the user's time. Like for example .6 seconds, potentially many times.
Closing animation
The closing animation should exist is there is a risk that the user loses her focus in her way back.
Else it's superfluous.
What I personally do is to set closing animations, only much faster than the opening ones. This way I don't waste the user's time. I use intervals like .2 seconds.
So why do we omit closing animations?
Because else sometimes it might be a waste of user time.
-
Using comparitively less interval for clossing animation is logicallly good approach.I think it is not about user time. It is about feeling coool or not. Don't you feel the same?– JivanAug 10, 2016 at 2:14
-
@Jivan: try to picture yourself into a cool animation-out situation, make the animation a bit slower just for the experiment. Wait for it: cool! Now picture yourself the 1000th time the same lengthy animation happens in a session. Now you are in anger, aren't you? Aug 11, 2016 at 11:42
An animation out takes time, and for an experienced / familiar user will cause only time wasted. A well-done animation in won't have this effect, as it will draw your attention to the right spot, but when animating out, you already "know" that screen, so its not needed. Also there is often no specific place to focus your attention to.
One exception to this could be, that when animating out you need to load a resource, it would be a nice way to hide the small delay of the load.
-
nice point but i personally don't feel cool while animating out. Don't you feel the same?– JivanAug 10, 2016 at 2:09
-
1@Jivan Did you mean to say you do feel cool when animating out? Yes, if visuals are more important than usability, then an animation out might be good.– akaltarAug 10, 2016 at 11:01
The only reason I can think of is based on an assumption. The given examples have in common that it's about a transition between an established state, a new state and back to the original state. Also the context doesn't change (the view doesn't change too drastically). Animating to a new state is often used to get the user ready for the change in view. Changing back to a state the user is already familiar with is perhaps considered unnecessary.
When looking at animations on the web, in regards to UI interface design, you have to take context into consideration.
Not all interface animations are the same, nor should they be treated the same.
We are visual creatures and things like a flash of bright color in an otherwise monochromatic environment, or "physical" movement instinctively catches our attention right away. People have been using these instincts to grab attention for marketing purposes for years.
I have to agree with Rotem, and MJB - although cdrini brings up another very good point.
It is kind of Gimmicky, along the lines of the old-school FLASH tag that's since been thrown out.
Also you need to take into consideration IF a designer has considered accessibility needs (animations can trigger epileptic seizures if done poorly). Not many designers do or are aware of such needs. Some of the above animations do not (to me) come across as taking this serious issue into consideration.
The other aspect to is, if it adds value. If it doesn't add value (whether the animation in or out) don't use it. It's interferes with the UX rather than enhances it.
So not all animations are apples to apples. There is a lot to consider.
