R/m Design Almanac — Animation

Modern products seek to be lively and natural. Every touch of a button on a screen can tell a little story. Digital design, thus, is increasingly like music, literature and movie-making: its action develops over time, and becomes an interaction. Like the other arts, product design can contain a prologue, complications, development, climax, conclusion. It has tempo and rhythm, dynamics and lulls. Adventures may happen.

All of this is based on the fact that the non-digital world—in which humanity existed for 2.5 million years—is alive. It is always changing, always moving. And we, as humans, are programmed to respond to movement. Instinctively, we know what is alive and what is not, even out of the corner of our eye, when we are not looking intently. There is no way we can resist reacting to sudden movements; not so long ago, after all, it was a matter of survival.

For this chapter, the Readymag team discussed animation with a number of designers, developersand animators—about how the static becomes dynamic, how something dead becomes alive, and how art becomes less like artifice.

Honestly, I wouldn't have my career if it wasn't for Flash. I started out in the early 2000’s doing a lot of static web. Soon after, I discovered Flash—which was a big thing back then—and started making simple animated cartoon videos. They were terrible if I look at them now but from there I moved on and started developing my own creative perspective and making my own things. Experiments with cartoons inspired me to apply Flash animations to UI.

‍

In 2013 I began doing work at an agency that was curating the promotion of the recently released Moto X phone and there was a lot of UI design involved in its marketing campaign. I started animating UI through After Effects, which is something I didn't actually do before, but I found I really liked it. I had much more control than in Flash. I became hugely interested in it and reached out to Google (by that time they had purchased Motorola), who had some available positions for UI animators. I came in right when UI animation and mobile was starting to be a thing.

Flash was great because it introduced animation in an interactive sense, yet it also offered lots of non-functional decoration. Motion and UI design got more than just eye-candy in 2007 when the first iPhone was released. It was a brand new thing with so many ways of interacting with OS and apps that users needed extra help understanding the flow of it all. That was the tipping point when mobile UI became more useful—more a necessity than decoration.

In April of 2010 Steve Jobs published an open letter called "Thoughts on Flash" in which he explained why Apple would not allow Flash in its products. That was a really tough point because back then I was still working in Flash. And by that time HTML5 wasn’t even close to being able to replicate what Flash could do. However I think ultimately it was the right move, and brought positive changes. First, Flash was a very bloated software: it required a special plugin and was very battery-hungry on mobile devices, which thwarted the progress of mobile web. Second, Steve’s letter pushed people to put their best efforts into HTML5.

In 2014 Google introduced its new design language called Material Design. The great thing about Material Design is that it was built with animation in mind. I was one of the people who wrote guidelines for it. With Material Design Motion, Google aims to help users understand where they are in the product, add real-time dynamic reactions to things, and make all their products feel more polished and intelligent.

The four big words to take from Material Design Motion are: Responsive, Natural, Aware, and Intentional.

Google account animation is probably one of the most cohesive experiences that explains the best of what Material Motion is. Take for instance Google Calendar. There are a lot of small animations helping the user understand what's going on.

When you're in the schedule view you see a list of colored rectangles representing your events. We really wanted it to feel that each of the colored ‘chips’—as we call them—represents one full event. In the iOS, when you tap on one of the chips it expands and fills the screen, revealing information about the time, location, and attendees. Then when you tap back, it collapses again into a single chip.

Other design elements convey spatial relationships—this is actually something developers did on iOS but less so on Android. There's always platform differences but, if you're familiar with materials elevation guidelines and how large shadows should be under objects, take a look at the Google Calendar schedule view and you'll notice that the app bar at the top of the screen is probably at the highest elevation—that and the little red action button at the bottom right. When a chip opens it rises to the level of those two objects. The idea here is that when it comes in contact with the app bar it actually pushes it out of the way. It's just a subtle way to help the user understand hierarchy, elevation, and spatial relations. And again, when you collapse it, the app bar lowers and everything shifts back into place.

I consider web animation a little different than mobile. With web animation the screen is a lot larger so you have to be a little more mindful about visual noise and objects moving on the screen. Also, information density is a lot higher with web. People viewing a website expect it to be a lot more responsive. I know there's scrolling animations where you scroll the entire view and as you scroll things animate based on your scroll position, but for other things, like when you click a link to go to the next page, people aren't really used to seeing animations there.

Instead of using the same principles for mobile UI animation we tweak them for web, because we still want it to feel fast. Since the animations are faster they're a lot subtler —we imply motion in certain ways rather than just moving an object from point A to point B. We might do some trickery and quick fading to make it feel like it moved from point A to point B but in reality it just faded out here and faded in to the new area. There's little things we can do to make it feel less overwhelming on larger screens and websites.

Currently animation is not a mandatory part of a designer’s skills set. But I think eventually it will be. UI animation is more than just something fun to look at: there's deep meaning behind it and why things move the way they do. When a designer that typically doesn't work in animation is able to understand basic animation principles, they can create interactions with that in mind, knowing how to demonstrate certain interactions to a user. It also helps a lot with understanding the structural hierarchy of an app.

For people just starting out in UI animation I’d recommend prototyping their own apps and interfaces. There aren't really very many UX motion courses out there. The only one that comes to mind is UXInMotion.net. Explore Form and Principle because they have some pretty great animation tools to create app prototypes and add interactive animations. That's a great way to grasp UI transitions and how things move in a functioning app, instead of just animating something in After Effects. Today’s devices are more powerful, and can handle richer animations. The new iPhone 10 has great interaction animations that are pretty processor-heavy. Same with the Pixel II Google phone that came out recently.

People are becoming used to animation within UI, so we're finally crossing over from pure functionality to being functional and fun. The best example of crazy, amusing, but also functional animations is messaging platforms. A lot of what people do when speaking to somebody through a messaging app is very personal, and oftentimes there's a lot of emotion in what’s being sent. Being able to convey that through animated stickers or messages with effects or just making the conversation more lively within your UI can really help express the emotion and make it more fun to communicate. That's something I think only motion can do. There are things that just make it feel so much richer and more alive, rather than just functional.

Animation

Rachel Nabors

Rachel Nabors
Rachel is an interaction developer and author
 of the animations at work book. She has also
 helped develop web animation standards
 within Mozilla and Microsoft and has been
 invited to be a web animations expert at the
 W3C.

rachelnabors.com

Before 2004 there were only two ways to interact with the web: click a link and go to a new page or submit a form so the page refreshes and new content appears. But between 2004 and 2005 everything changed. On April 1, 2004 Google launched Gmail, and one year later it launched Google Maps. These two web apps were probably the first that took full advantage of the new features added by the Internet Explorer browser: the DOM API (the Document Object Model presenting HTML as a tree structure) and AJAX (asynchronous JavaScript, which allows pages to update information without refreshing). 
 
Google Maps allows a user to map a location, scroll around, zoom in and out, and share the URL—all of which requires animation. You have to revise and update the page while people pan around within it, moving it around on the page. The page has to repaint as the viewer moves the map. And the same with Gmail, having an inbox that automatically updates and shows when new mail has arrived. In the past you had to use an entire program to do that or else be constantly refreshing the page.
 
That’s when the world of interaction on the web became real, although it took people a long time to understand it. Designers and developers soon realized if they used interaction wisely they would build a more competitive product. In the long run this prompted us to evolve from a point-and-click world to a touch-based world, a place where we interface with our fingertips.
 
Animation is what makes web interactions look and feel beautiful—slide a new modal in and out of view as it is added and removed from the DOM after an AJAX call. Flash provided an interface and library for interaction developers to create pleasing animations and interactions with, and some 10–15 years ago it was really popular. Flash did things with rendering animations on the screen that the web did not have APIs or standards for.

Flash developers were well-respected in the professional community. However, in 2010 Steve Jobs wrote his infamous open letter on Flash, which turned out to be a death sentence for the platform.

Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind. 
Steve Jobs

 It became popular to make jokes about Flash at conferences. If you wanted to get a chuckle from the crowd you could just say something derogatory about Flash, like “Yeah, Flash. Good riddance!” Imagine going from being a rock star, a hero, and the person who brought in all the money to your agency to the person who’s being mocked at the conferences your company sends you to.

A lot of Flash developers left the industry. But some stuck around. They’d worked in ActionScript, which is a sister language to JavaScript, so most of what Flash developers were building translated well for the web. For instance, GSAP, the most popular web animation JavaScript library today, was a Flash animation library. It was written in ActionScript.
 
Today we’re seeing animation really taking off. You could say Flash meant we always had that capability. Well, it took us a long time to wean off Flash and move on to the web. After the death of Flash there was a period of several years when most people treated the web like a document, only considered in terms of layout, typography, content. There was no talk of interaction. But that has finally come full circle. Interaction designers finally moved away from Flash and back to the web. That’s been a big deal.
 
Secondly, hardware today can support animation—we have powerful phones and laptops. But also, I would say, education. People don’t build what they don’t know they can build. Because of folks like myself, Sarah Drasner, Val Head, and Sarah Swaden giving talks tirelessly, acting as unpaid evangelists for technology nobody asked for, the web design and development community realized they have access to useful tools.
 
Half the things people are building for today’s web are app-like experiences. When information interfaces with the page in an app-like fashion it requires app-like animation. Animation helps link users to what’s happening on the screen. If you don’t visually demonstrate cause and effect it can be difficult to figure out what your fingertips are doing. You have to correlate human input (a finger interacting with the screen) with computer output (how the screen changes and reacts to that input).
 
You also have to show when information is being added, removed, or updated. To explain to the viewer what has changed you have to bounce or highlight these updates and changes. These are all opportunities for visual animation. And these things inevitably look so much better if they’ve been implemented by an actual designer, rather than just dropped in higglety-pigglety by developers!
 
In the future the line between app-like web experiences and native apps will continue to blur. Everything is moving increasingly towards the web. I think we’re going to see the web stand alone as its own platform more and more, which means learning how to use web technologies will only become more and more important.

Animating with Readymag

While I often advise only using animation when it facilitates the user's experience, there are times when it brings something to visual narrative that’s impossible otherwise. 
In I, Pencil, readers are told a story with typographic elegance and cleverness worthy of a classic print publication coupled with motion design usually reserved for Pixar movies. Proof that, in the right hands, animation is a powerful design tool.