Six years and five months ago, our forefathers brought forth the ability to create a better experience on the web – one with visual cues built not only by colors and shapes, but with motion. We are now engaged in the execution and evolution of sophisticated UI animation techniques, and testing whether this approach can endure the debates and browser bugs it shall bring forth. We are dedicated to the great task remaining before us – that from the advancements we can determine if these solutions will be a fading trend, or become the future of web and product design interactions... end scene.
History
Although WebKit implemented CSS animation in 2009, it was not heavily adopted in UI design until 2014. This could be partially credited to increased browser capabilities and device performance, but it was the explosion of flat UI that created a need for animation. While the reduction of skeuomorphism in UI design increased efficiency and provided a clean presentation, the simplification of these elements also removed some visual cues to which users had become accustomed. The introduction of motion into UI fills this void and sets the stage for a plethora of design solutions.
Pros
Websites and apps are made to be used by people, and people are instinctively drawn to movement. It’s in our nature. Successful interaction animations behave by the laws of the real world. When an environment on a screen acts in a way that is familiar and feels natural, it is easier to understand and encourages the user to keep searching, exploring and discovering. Abrupt changes can be disorienting to the user and interrupt their train of thought, forcing them to stop the task and think about where they are within the interface.
Animations can provide context and explain where the user is going. Subtle directional movements help the mind easily understand the origin of a new object, or destination of an object being hidden from our view. This insight also subconsciously teaches the user what is possible with the product. Color and opacity can also be added to reinforce what has just occurred.
A non-animated menu on the left, as opposed to an animated menu on the right.
Animation also helps establish relationships between objects and states. Take the example of a "details" view being launched from a thumbnail. When a transition is added between the two states, it becomes clear the two are the same item, rather than a new state being created by clicking the thumbnail.
Cons
As pleasant as motion and animations are, there are some downsides to consider. While browser support is better than ever, it is still early in the implementation and (as always) not all browsers handle the code the same way. If the user has an outdated browser or bad connection, the animation can be jumpy or not work at all, which results in a bad experience. The animations are not free and add additional weight and data usage to the product, which can often have the developers rolling their eyes.
Performance is key, and it’s important to always offer a fall back. Designers need to be aware of technical limitations and collaborate with developers so the site performs efficiently, always.
Execution
The purpose of the animations should be clearly defined before being added to a product, and carefully placed. When animations are over-used, they get in the user’s way and make it more difficult to accomplish a task. Certain animations might be nice the first time, but become annoying when used too frequently. Provide feedback without being over-whelming, and direct the user’s attention.
Another thing to keep in mind is that time is experienced subjectively. Animations progressing from slow-to-fast are perceived as lagging and give the impression of a slow product. User feedback should be provided quickly. The faster progress is shown, the quicker the user is engaged.
Close
When Abraham Lincoln gave the Gettysburg Address his goal was to unite two opposing sides to drop their weapons and join forces, which is often the state of designers and developers when it comes to interaction animations. By working together we can implement motion into user interfaces that improves upon the humanities of the product, yet does not sacrifice performance. So that a better web by the people, for the people, shall not perish from this earth. In short, when done properly, sophisticated UI animation is, in my opinion, the future of web and product design interactions.