Real Art

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.

That’s actually a recent problem. Back in the day, Flash was the king of creating digital animations and transitions. It was the great motivator for moving interfaces and making things… flashy. These touches weren’t necessarily informative, but they were expressive and a part of the vocabulary of the web. Flash was the go-to way of making rich, dynamic interfaces because browsers didn’t natively support animations through their own markups. CSS couldn’t really do the animation itself. JavaScript was often dismissed as a security risk and developers didn’t see it as a way to animate using html. Some things were great, but there were also a lot of really long and awful Flash intros.

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.

A great motivator of this idea is a growing trend of using push technologies or those that are socket driven like Node.js—a cross platform application that uses Javascript to create real-time communication in otherwise static apps. The technique of using real-time data isn’t a new one, but as it is used more and more, you will see a decrease in the need for manually refreshing the data yourself. Instead, the page or app will receive updates on it’s own and the new content will populate without you having to do anything.

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.