3 animation techniques to UX

Disambiguate UX
Jul 26, 2017 · 3 min read

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

Disambiguate UX

Written by

Senior Visual UX Designer in IT software https://dribbble.com/bullfrogou

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade