Motion and animation have long been part of online experiences. From ASCII-based “video” on green screens to AOL’s “You’ve Got Mail” icon, animations have been in the repertoire of digital designers for years.
However, it was only in 2011 that the latest wave of browsers officially recognized CSS – unlocking sophisticated web animations without the restriction of a plug-in. But now, with improved browser-based animation support, shrinking screens, and more processing power, motion design is poised to become a cornerstone of the modern user experience in a way that it was not in the past. Whether used on digital displays in venue, on desktop computers, or on smartphone apps, motion and animation are changing the user experience.
When done well, motion imbues an experience with functionality, as well as personality and style. Such meaningful, animated interactivity gives the user interface, regardless of platform, a competitive edge.
Motion design delivers this edge in three areas:
Motion adds meaning. It allows users to acquaint themselves better with the interface and find their way around. Motion can help direct focus, as well.
Motion can invoke and provoke deep emotional engagement with users. Subtle movements can tell sophisticated stories.
Motion can set context. By mimicking real-world physics like gravity and inertia, designers can help users anticipate what will happen. Motion can help create a natural feeling interface, full of digital interactions that feel spontaneous and genuine.
By combining these characteristics, marketers can create dynamic and compelling animations that allow for much-improved storytelling.
So how will motion and animation play out in the next few years?
Whether designing for laptops, smartphones, or smartwatches, designers (especially traditional web or e-commerce designers) will make much more frequent use of animation. However, this will not always be easy.
Animation requires a new mindset. Designers moving from a traditional, “flat” website design will learn that animated experiences require designing in multiple, additional dimensions. One animator compared it to working with clay: the designer builds a 3-D space, and then polishes and paints it. It is a craft – an art form – that requires working with time and space. To aid the creative process, storyboard animation and prototyping animation skills will become critical.
The more motion and animation becomes widespread, the less you’ll notice it. Instead, skilled designers will use these new capabilities wisely and in very intentional ways. By combining technological capabilities with natural movements, animation allows for seamless interaction between users and platforms.
Exemplary transitions will stem from e-commerce websites, whose flat experiences will slowly be replaced by more dynamic experiences infused with the meaning and context provided by motion.
And as motion and animation increasingly affect meaning, emotion, and context, narratives will become the foci. Analogous to film, a medium built upon motion and animation, Story Systems – a key part of our Storyscaping approach – will be experienced through a blend of these technologies and narratives.
Brands continue to use motion and animation to create experiences, as they have for a long time. But today, the ability to interpret and render massive datasets in real time is a major restriction. So far, big data has been difficult to animate in real-time, often requiring experiences to be carefully scripted or simplified. The result is less flexibility in these experiences, as well as greater difficulty in data interpretation.
But technology, with faster processors and cleaner streams of data from the Internet of Things, will increasingly enable the intake of data. It will then enable real-time conversion of that data into visuals, which will in turn be better understood using motion and animation built upon the latest capabilities.
Motion design is becoming a valuable digital asset for both experience creators and users. To find out more about how it is reshaping the digital expectations for better marketing, download and read the full article PDF below.