July 7, 2016

Let’s Talk About:

User Experience & Animation

Look at the world around you for a second and think about the way things move. Do objects appear from nowhere? Do you ever find yourself in a completely different place from where you were a moment ago? Hopefully not.

Our world moves and advances in a series of transitions. Going from one place to the next takes time and has a sense of flow. In fact, abrupt movements often feel eerie and out of place, yet this is how the web often works. Pages change suddenly, content appears and disappears, and transitions can be awkward. Frankly, it feels unnatural.

As we’ve enhanced how people experience the web, we’ve introduced animation to our interfaces. It isn’t just an afterthought or add-on. It’s an experience, an extension of your brand, and a way to better engage with your audience. Animation can make people wait longerbetter understand how your app functions, and learn more from your content. Motion makes our interfaces feel more helpful and human. See how we used animation to enhance the experience on GoPole.com:

Read About GoPole.com

Community Thoughts on User Experience & Animation...

  1. 1. The Principles of UX Choreography “The more wireframes I made, the more I started to realize that everything I had once learned about motion design was completely relevant to our roles as UX and visual designers. As I started to pay more attention to everything I engaged with day to day, I realized that the most fluid, delightful, and intuitive experiences were always the ones that put detail into motion design.”
  2. 2. The Illusion of Life The 12 basic principles of animation were developed by the ’old men’ of Walt Disney Studios, amongst them Frank Thomas and Ollie Johnston, during the 1930s. Of course they weren’t old men at the time, but young men who were at the forefront of exciting discoveries that were contributing to the development of a new art form.
  3. 3. Val Head - Motion Design with CSS - Falsy Values 2015 Animation is a powerful way to convey meaning and guide tasks both for interfaces and presenting data. Conveniently, our old friend CSS has seriously stepped up its animation game!
  4. 4. Motion with Meaning: Semantic Animation in Interface Design “This means that when you add animations, an interface isn’t a series of screens anymore, but a collection of semantic components inside a single, continuous space. These self-contained components enclose everything associated with them, like meta information or interactive controls.”
  5. 5. Google Material — Motion Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.

Related Articles

Experiments in Loading - How Long Will You Wait?

Washington DC Metro
105 West Broad Street
4th Floor
Falls Church, VA 22046

Durham, NC
309 E. Chapel Hill Street
4th Floor
Durham, NC 27701

Boulder, CO
1915 Broadway
Boulder, CO 80302