UI animation

http://www.creativebloq.com/animation/will-animation-be-big-ui-trend-2015-21514144

Will animation be the big UI trend of 2015?

London-based Athlon design agency predict an animated future for user interface design.

Animation has become an increasingly important part of the UI design experience across many different applications.

There are core considerations of great UX, visual design and functionality, but animation and the way things move is now a key pillar of any mobile, web or software app.
One of the effects of this rise of animation in 2015 will be the availability of more tools that improve UI production workflow and performance in browsers and on devices.

Why animation?

Animation in interaction design is not new, yet it'll become way more prevalent this year as more creatives become aware of the role it can play in communicating UI behaviour.

Well-considered motion in interface design can help guide, provide context and delight users. Animation offers the opportunity to surprise, making applications more enjoyable and engaging.
Equally, too much animation or jarring transitions can break up and distract from an otherwise good digital experience.

The bottom line is people can tell the difference between  mechanical movement compared to something that mimics behaviour in the real world. This means considering things like inertia, speed, bounce or velocity.

The ability to tell stories with transitions and subtle motion-based animations are skills that must be embraced to produce outstanding work.

The guiding principals of animation

Google's material design guidelines are a great starting point in showing the role that motion can play. Some of the principles include:

"Perceiving an object's tangible form helps us understand how to manipulate it. Observing an objects motion tells us whether it is light or heavy, flexible or rigid, small or large."
This is a great consideration when designing menu systems or on-screen visual components.
"An abrupt change in velocity at both the beginning and end of the animation curve means the object instantaneously starts and stops, which is unrealistic..."

Interfaces should not feel overtly mechanical; embracing movement principals from the real world make digital environments more rewarding to interact with.
"The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the obvious."

Introducing the unexpected, such as menu icons that become an arrow or playback controls that smoothly change from one to the other are great ways to surprise users.

Here are some great examples of sites using animations in their UI:

Tools and tips

Here are some reference materials that we embrace when considering UI animation. Whilst we expect to see many new tools appear in 2015, we recommend going back to basics with the Animator's Survival Kit, a great resource for learning from traditional animation principals.

We use After Effects for illustrating UI behaviour and sequences. It creates vivid animations that help us envision how the UI will look when completed, helping us explore concepts prior to technical production.

Even rapid prototyping tools such as Invision are starting to include basic transitions and movements, helping to bring flat UI designs to life based on movement.

Think about translating real world movements into the digital one and make animation really work for your UI. We look forward to seeing what you come up with.

Words: Ranzie Anthony
Ranzie is executive creative director of global design and technology agency Athlon, which works at the intersection of design, human factors and software development.