The Rebirth of Transitional Interfaces
How motion and animation are about to permeate our digital interactions (again).
Transitional interfaces are basically the spaces between interactions. They are not only the static elements that make up a digital experience but what happens in between those elements. There is information within the movement from one element to the next. Say, if the window slides from left to right, there’s information contained within that motion: you know that you can slide the window back. If something just disappears or changes without even a hint of transition, that forces the user to put more thought into understanding that a change has happened. Not only are these movements important, but they add an opportunity for style in motion.
For the past half decade or so, popular culture hasn’t given much attention to these interstitial moments. The emphasis has been on how things look, on the visual styling of websites and apps, and the fight between skeuomorphism and minimalism. While app creators have continued to evolve in terms of visual style, they haven’t fully delved into the animation level that moves one state to the next. They’ve ignored the stuff in-between.
And then we all caught the Flash-Is-Bad-Syndrome and went in the direction of designing and producing in pure CSS. But at the time, browsers didn’t have the same ability to perform an action over time. There was little support for CSS transitions. The web started to became more static. And then HTML5 came along and things like adaptive and responsive became the vernacular. They filled the void for a time and gave us tools that helped make designing across different screens more effective and beautiful. The visual style became really nice and clean, with more of a designer’s aesthetic. It was a great exercise, a great way of doing things. But it was also a step backwards in terms of richness and expression. No one was really thinking in terms of time and, subsequently, animation.
The devices themselves played a role in this evolution. You go back to the iPhone 1, 2, and 3—they weren’t great devices for playing around with transition. They were amazing at the time and helped redefine the mobile landscape. But they were only capable of doing so much in an app or browser. Developers were also pushed into using the native kinds of vehicles that were already baked into the iPhone’s operating system, so it was hard to truly design and play with motion on your own.
But now that’s changing. The prevalence of the modern browser has brought with it a much more matured ability to customize transitions using CSS. The same can be said about more powerful devices like the Samsung Galaxy S3, S4, and the iPhone 5. The toolbox is there.
This reduction in requiring the user to pull the data themselves will make it more important to make the user aware of what has changed. If a new post is available, it should slide in while the existing ones move out of the way. Or if you fill out a lengthy form or take a quiz, it will verify and assist you on the fly as you go, providing in-line contextualized feedback. Pages will become applications and their interfaces will evolve as time progresses, but they will use motion to visually tell you that it happened.
In the coming years, we’re going to see a resurgence of motion and more design focused on the information and flourishes in the spaces between. Sure, we’ll see some good and some bad. We’ll see people doing the worst things from Flash, the annoying, embellished-upon-for-the-sake-of-animation things. But we’ll expect our interfaces to demonstrate their responsiveness. Objects in our apps will respond and move more, they’ll use motion to give directions and intuitive hints. As designers, we will define and finesse those eases and flourishes as a part of the whole, not as an add-on or afterthought.
We want that spatial, visual indicator because we’re human beings. We’re not robots. We like to see those visual representations of cause and effect. It’s something we’ll see more and more in the years ahead.
Got you hooked? Here’s More:
An open source framework for rapid app prototyping that enables you to customize animations and interactions
Pasquale D’Silva’s delightful rant about designing the perfect digital interactions and animations