uiAnimation.gif I have seen UI animation all over native apps. Sadly, I've been seen on the web only for micro-interactions. I wonder if this is the year where UI Animation becomes a must have. Here are some eye candy examples. Which one is your favorite one?

https://uimovement.com/ 
4
LVL 7

Comment

by:Brian Matis
I'm a huge fan of useful animation and am very glad to see it happening more and more in web apps. I've certainly see people critique animation as being superfluous, and there's no doubt that there's a potential for misuse. But well-considered animation can greatly reduce some of the disorientation that can occur in complex interfaces or to draw attention to important state changes that may be easy to miss.

It especially makes a lot of sense in touch interfaces, where the tactile nature of the interface creates an expectation of it responding more like the real world, where things move instead of just appear. And even though desktop interfaces are less tactile than touch, we can still see how behaving in a natural way can make the interface easier to understand.
1
LVL 7

Comment

by:Brian Matis
As for the examples in the link: I'd have to say that my favorite was the progress bar. But that's mostly because I have a (potentially unhealthy) obsession with progress bars. :-)

A few specific analytical reasons I liked it are:
  • It conveyed a state change (short bar to longer bar) of something that might be easy to miss without the animation
  • Was an animation that doesn't delay me from doing something (that kind of animation is lame)
  • Was subtle enough to not be overly distracting
1
LVL 7

Comment

by:Brian Matis
And finally, I'll add that I didn't like the animation of the overall page. Since almost every example was animating all at once, it was really hard to stay focused on one particular example. I get that it was important to show that they all had animation, but would have preferred that each one only animate when I was hovering near it, or something like that.
1
LVL 5

Author Comment

by:Juana Villa
@BrianMatis It is interesting that you did not like the fact that all the animations were playing at once. I personally liked it because that way I don't have to click/hover on it to know if I like it or not.
1
LVL 7

Comment

by:Brian Matis
@Juana - Yeah, I was pretty torn on it... I saw the usefulness of it in this particular scenario, but there was still that effect for me of "too much going on with this page". Fortunately, clicking on an individual card did take me to a standalone page so I could focus on only that one, which solved the problem. (Would have liked a nice animation in getting to that standalone view though ;-)
1
LVL 5

Author Comment

by:Juana Villa
@BrianMatis This is why I find UX so interesting. On this feature we are completely the opposite. :D
1
LVL 79

Comment

by:Scott Fell
In my own travels, it's usually the site owner that wants moving things to the extent it annoy's the heck out of their actual users.  I keep going back to the old IBM commercial https://www.youtube.com/watch?v=Cp9J0Szgxmo.  People just want things to work.  If there is animation that helps direct attention or let you know you did something correctly without getting in the way, it's all good. When it starts becoming a "cool" factor or a fun challenge to break through, that's when things go bad for the user.

Just like cooking, the right amount of salt will enhance the flavor of  food and go noticed until you add too much, then you can't stomach  the dish.

But I also don't think the type of animation you have on your smaller mobile device translates well to the larger screen.
2
LVL 5

Author Comment

by:Juana Villa
@ScottFell, I love your analogy! It perfectly describes the balance between animations that hence and diminish the user experience.

By the way I LOVED the youtube video it is hilarious "The spinning logo"...  LOL

I agree it, the gif animation I placed as an images doesn't translate into web. There were two things that I liked on the gif animations. 1) When clicking the "sign up" button the spinning wheel came to indicate that data is loading and the user needs to wait. 2) When clicking the "plus" pink button it animates and gets bigger. I find this way of showing correlation/relationship interesting.
0

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month