3 animation techniques to UX

One of thing that I want to focus on this article is animation, because I think animation has become this kinda of key component in user experience design. And I’m not talking about animation in the kind of flashy websites, jumping popups and blinking buttons. I’m talking about the tangible benefits to the user experience.

The foundations of motion and UI design, including of,

  • Physicality: objects/elements need to feel like they have actual physical mass and respond in a way that users anticipate. There has to be a level of realism that user can relate to.
  • Visual orientation: animated transition can work as intermediaries between different UI states — to help orientate users.
  • Personality: the moment users see an object like a whirling dancer, we assign attributes to that person. Which attributes we assign, they dictate the person’s reaction (acting)

Now, let’s see how we transfer this into design or digital products. First, sketch your concepts. At this stage, your animations are either pan or paper or with any tool that is good for rapid animation. I outlined all the possible animations about an analytic dashboard as I could with a pen and paper.

Freehand sketch the animation you envision. Think intensively about any flaws in your UI where the animation could improve the user experience

One of the tangible animation benefits is drawing attention to screen elements — to make it memorable. So for example, a call-to-action button that morphs into a circle with border gently to draw your attention to it, which is appealing and interesting. I did it on the webform where the users attempt to select an issue topic on our site.

Code your animation in Framer

It’s useful to make a couple of concepts with a freehand sketch before animating. In so doing, I got that concepts how motions might be when a topic has been either selected or mouseover. On this demo, it’s just a small bit that I’m explaining how it starts from sketch to animation.

Working notes in Framer:

Add array to logos and loop through all of the logos.
“logos = [logo1,logo2,logo3,logo4]
for logo in logos
 logo.states.add
 stateA: {rotation:0}
 stateB: {borderRadius:30, rotation:-360, borderWidth: 10, borderColor: “#06a7e2”}
 stateC: {borderRadius: 1000, rotation:360, borderWidth: 10, borderColor: “#06a7e2”}
 
 logo.animationOptions =
 curve: Spring(damping: 20)
 time: 2
 
 logo.onClick ->
 
 this.stateCycle(“stateC”, “stateB”)
 
 for logo in logos
 if logo is this
 else 
 logo.states.switchInstant(“default”)

Check out my works on Behance !

P.S. I’m anything but a professional writer. But, I would be happy if there’s any of piece of information that you could feel useful! Just lemme know what your feedback is. Thank you.

Follow me on twitter @bullfrogou