What does animation mean to the world of interaction design?
Over the past few weeks I have been working with Adobe’s XD (eXperience Design) team on a challenging and exciting new project that pushes the limits of the AIR platform. Unfortunately, I can’t divulge the details of this project due to obvious legal ramifications, but anyone going to MAX this year may just catch a glimpse of the fruits of our labors.
One particular aspect of the project involves using subtle animation and transitions to enhance the application’s overall end user experience — to create something more “cinematic” and “fluid.” As someone who’s worked in the interactive media space for several years now, animation is not unfamiliar to me. Indeed, it sits at the very heart of the Flash universe. But in the world of web applications, as well as in the world of most desktop applications, animation is still relatively new and unexplored territory. As part of most design processes, it is often left as an afterthought — relegated to the dark corners of the experience designer’s toolbox. Sometimes this is due to technological restrictions. Even with sophisticated Javascript libraries like script.aculo.us, animation in a traditional web applications faces severe limitations. And on the desktop, only in the past few years has processing power reached the point where precious CPU cycles could be “wasted” on the “luxury” of animation for things like OS-level operations. The same holds true for mobile devices. Other times, however, the animation dearth is due to time or budget restrictions. Why waste a developer’s time on animating buttons or transitions when there are more important, functional features that need attention?
But I think there are plenty of good reasons to “waste a developer’s time.” Transitions, animation and movement in general provide important (and even necessary) elements of the interactive experience. Here are what I believe to be the two most important:
- Transitions: Transitions can provide the user with a locational, relational or contextual clues that would be difficult to achieve through other means. Rather than just switching from one screen to the next, transitions can show how data or elements in two different views relate to each other. A chart, for instance, that when clicked on zooms in to particular data points, offers the user not only an immediately understandable mapping between differing data representations, but also gives discernable meaning to input actions. Transitions make it easier for the user to understand how his or her input affects both application state and virtual “location” within an application.
- Animations: The human eye operates in such a manner that it is quick to notice even the subtlest of motions. Even a simple fade-in or fade-out animations that last no longer that 1/4th or a second are often easily noticed by most users. Designers can and should use this fact to draw attention to or away from certain elements on the screen in ways that color or pattern alterations cannot achieve. Consider an application that uses slide-up/slide-down animation to show and hide a small, passive status bar at the bottom of a window. Popping such a status bar in and out of existence would be jarring and obnoxious, and using bright colors (red, for instance) would be equally inappropriate in such a context. But smooth motion can also grab attention while still remaining subtle and unobtrusive.
It should be known that while I may enjoy thinking about and reading about and discussing the topic of design, in practice I am a developer first and designer second. Nevertheless, all labels aside, it’s important for anyone in the product development process to understand how seemingly small elements of design can have a substantial impact on the experience of the end product. Animation is often considered one of those “small elements,” especially for the non-designers of the team. Sometimes, though, even the smallest of details can have the greatest impact.
For more thoughts on animation in the design process, check out this old post by Josh Ulm, another member of Adobe’s XD team.