May 9, 2016
Finding Animation’s Place in Web Design
When a project begins, I ask myself if the agency understands the importance of animation for interface design - that the work of the motion designer can contribute to the success of the interactive experience, reinforcing everything that has been thought since the birth of the project, right there in the information architecture.
Many times motion designers have got their hands on projects to refine and add frills to the site. It always gave me the feeling that my work was secondary. Or, if there was not enough time to animate the site, I was told to choose an element that I thought was important and make a nice animation. Great, but what is a "nice animation"?
Unfortunately, animation is considered decorative by most web development professionals. Viewing animation as something just “nice” makes it much more difficult for this stage of the process to be taken seriously, when in fact it is an essential part of the process of communication and understanding of an interactive project.
We use HTML to tell stories and communicate large amounts of information, animation helps us do both things, better. Imagine animation as a tour guide which allows people to track the history of your site without getting lost. It helps people to orientate themselves within the interface, to find their way or establish visual relationships.
Our brains and eyes are programmed to pay attention to moving objects - it is a reflex. Magicians use movement to perform tricks with their hands. Similarly animation can help the eye to see where a new object comes from and where the old object is. Motion is not frills, it is necessary and can improve the user experience by making it more consistent and real.
Interface animation fills gaps of comprehension in various ways:
- It is crucial to suggest interaction and creates a visual stimulus so the user perceives new information in a status change in the interface
- It provides visual feedback and guides to what is coming next
- It presents spatially logical transitions between screens. According to the laws of physics animated elements can help people memorize interfaces more easily because they seem familiar and predictable
- Animation styles communicate more personality to the content than any static image
- Well produced animations win over users, help them relate better to the product and make a more pleasant and enjoyable experience
Today the popularity of small screened devices leads us to implement major interfaces in small spaces. It would be confusing and frustrating for the user to understand the spatial relationships between layers, sliding tabs and zooms without the work of the motion designer who connects the dots. Similar to typography, which can only serve functionally for reading or adding expression to the content, animation goes beyond and shapes to work in harmony with the design. Attention to this level of detail is what separates the great projects from the average projects, in both typography and animation.
Annoying new terminologies are continually being thought up, new professions appear each month on LinkedIn (yes, I've seen things like "astronaut ideas" there), our area is closer to UI Motion Designer. The term “UX Choreographer” will probably be used in the near future.
It's something new in the digital world that is proving its importance and it not only deserves a greater share of design hours, it also needs to stop being "just" a branch that supports art direction or programming within the agencies, to finally become an independent area of major importance. Independent, here, refers to becoming more professional and not reduced to a lone person sitting in the background of the agency getting the famous: "Do something nice” Agencies and producers must provide space for another speaker, for this storyteller.
To find out more, I recommend reading the article Jedi Principles of UI Animation by Kit Oliynyk
Also watch the video Illusion of Life, the 12 basic principles of animation from Frank Thomas and Ollie Johnston of Walt Disney Studios.