Interaction design and web animations

Animation timing and interaction design

Animation timing and interaction design

Have you ever thought about what makes a particular app great? You know, something about the design just feels right?

All of the design decisions- from fonts to colors to graphics to motion effects- on an app or website work together to create a consistent feeling in users. Sometimes the combined effect is positive and we love to shop, visit, play at a particular site and other times it just feels wrong and we are not likely to purchase or visit that site again.

According to this article, Guidelines for Animation Timing, a lot of our perception of great design comes from what happens in the in between states, which is called interaction design. Think of hovering, clicking, motion animations- those sorts of things. Some examples of interaction design is how the page turns when we are reading a Kindle book or how an app reacts when we click on an internal link.

Whether we add motion animations to our site using Java or CSS, as coders, we are making subtle decisions about how things change and move. The normal movement of web motion is instantaneous- the link is blue and when we hover over it, it instantaneously changes to green. There is no transition or softness to the change between colors.

As users, we generally prefer natural movement. We gravitate towards movement that mimics the laws of nature that we are accustomed to seeing outside of our screen-world. Luckily, CSS3 allows us to create more naturally-paced animations and transitions that move smoothly from one state to the next instead of instantly jumping between states.

Be sure to read more about Animation Timing. By understanding interaction design and how timing can effect the overall feel of your website or app design, we can help make the web a more enjoyable place.