Designing animation is sculpting time. Timing is critical. If you don’t consider animation timing, you’re not designing animation.

Animation is visual music. Skilled animators employ rhythm, timing, tempo, composition, texture and dynamics.

The year is 2018, interface design tools are finally incorporating animation, but many are missing the mark. They’re naively bolting on animation, instead of giving users handles to control animation timing. Consequently, there’s now a landscape of software tools promoting mushy animation.

There’s a wealth of knowledge embedded in classical animation. We don’t need to reinvent the wheel.

Triggered by motion

You first sit down at a movie theatre to watch a flick, and you probably notice the exit signs, the edge of the screen, the heads of other patrons in your view. If the movie doesn’t suck, everything stationary fades away, and you feel enveloped in the picture. That is, until some jackass looks at their Instagram notifications in your peripheral vision, and you’re whisked back into reality.

We typically notice when things move, and stop noticing them when they’re still.

Motion holds our attention, so it’s worth considering how we direct it.

Optical Toil

Learning that “Disney’s 12 principles of animation” exists is not enough. That’s like a designer discovering that design is how it works™️ and calling it a day.

Inexperienced Interface Animators tend to over-animate everything. This is conflated with the pursuit of ‘delight’. They maintain a preciousness around the keyframes they placed, forgetting it will grow tired on the eye. There’s a false assumption the viewer is sitting around with baited breath, looking for hard work. This is reinforced by communities like dribbble, where users poop their pants with excitement when they see animation, because they’ve never seen it before. Truthfully, the best animation feels invisible.

Here’s a classic thing we see in interface work today: The heavy-handed use of springs.

The oscillating interface element holds our attention for no reason. Our eyes are coaxed into focusing on it, because it takes too long to peter out. There’s suspense, and we’re hungry for the end position to be resolved.

Our element feels like it has intent if we reduce the amount of overshoot oscillations. It’s succinct, but still cushioned with a single, intentional overshoot. This can be achieved by dialing in springs, parametric keyframes, or hand-timing. Ultimately, how it feels is what matters most.

Let’s talk about morphing stuff

A play button turns into a hamburger, then into a close button, then it turns into a duck.

Another tasteless interface trope ... behold, the overzealous hamburger menu. Even if you did it without a spring, it’s loud. We don’t need to see a literal, attention grabbing transition to perceive a state change. You don’t have to morph everything into everything.

Let’s see it in context. Tune into where your eyes are looking. Do you notice the icon flapping around long after the broader transition is complete? What’s most important, is the larger state change, triggered by the button. Over-animated nonsense in the hamburger icon splits your attention here.

A more to-the-point approach, is to not morph the icon at all. Instead, we can focus on using subtle animation affordances to communicate interaction. It’s not about catching the eye. It’s about directing it. This button features a depression, and snappy spring back, with a heavily dampened ease, to re-enforce the feeling of pushing a button.

EOIN DUFFY on Twitter

The easy way to morph stuff - don't The old switcheroo always works :) https://t.co/3cUziSuJ18

It’s helpful to think about how you lead the eye across the screen. Think about your eyeballs swiveling in their sockets, darting around, accelerating, decelerating. You’re leading the eye when you animate. Where are you adding accents? Where should the eye settle? More tracking requires more physical and mental commitment. Is it worth optical fatigue to add some quirky offset animation? There’s nuance to balance; an economy of motion.

Formula vs feeling

Determine these for yourself. Don’t start with them. I’m talking about the prescribed, stiff, black & white stuff like IBM & Google Formulas. Be skeptical.

Don’t trust the numbers, trust your eyes and feelings first. You can bend the rules of reality. Motion is an illusion, and you get to be the magician.

Consider the motivation & intent of each element you choreograph. Literal isn’t always better. Animation is a medium where the impossible is appropriate. It’s right when it feels right.

Take these examples compared side by side. They’re both doing the same thing, but with different timing.

The example on the left is too literal . A view presenting itself onto screen doesn’t have to start from 0% scale, and animate all the way up to 100% scale to imply it spawning into space.

You can experience a punchier version by showing the result, and the wisps of time slightly before. All we need to do is carry the eye. On the right, we start the scale at 90%, approaching 100% pretty quickly. We feel the scale, without having to sit through watching every value between 0–100. Nobody’s got time for that shit!

Let’s experiment with a more abstract example. Let’s move a shape across the screen:

A linear, robotic tween. Cold right?

Now, let’s get to the result, by blowing through most of the action faster, but using strong cushioning (easing) for a nice recovery.

What if we push it further? Let’s sculpt the curve some more. Ease in and out. Strong acceleration, spending more frames settling. If the action is too fast, we can lead the eye with an elongated “smear” frame. Perhaps a little bit of overshoot to sand it down a little bit.

Seeing time with graphs

Seasoned animators perceive time with nuance. The eye needs to be trained to see & feel timing. Though this ability can take years to develop, it’s still possible to dissect timing, thanks to computers. THANKS COMPUTERS!

Interpolated Computer Animation often employs the concept of a Graph Editor, to let you sculpt time. While the rats nest of curves can be intimidating initially, it’s simple at its core. Graphs merely describe a value changing over time. The value, is attached to attributes (e.g. scale, position, rotation, color, bendy-ness, shininess, roughness).

Motionscope

When we manipulate the shape of these graphs, we’re designing time. Using MotionScope (our in-house tool at Thinko), let’s take a look at how timing & spacing correlates to graphs. It’s like a console for an engineer, or a histogram for a photographer.

A benefit of using a scope is the ability to observe motion in raw dimensions. We can debug animation issues by focusing on one “layer” of animation at a time.

A RESOURCE DUMP!!!

There’s a mountain to learn, but luckily other animators have written boatloads of great information. Here are some valuable concepts to reference:

Moving holds:

A method for selling weight, and keeping forms alive http://www.keithlango.com/tutorials/march05/movingHold.htm

Antics:

A contrasting wind up before a primary movement.

Disney Principles 7 - Anticipations

Implementing Anticipation & Overshoots:

Arcs:

Arc: The 12 Basic Principles of Animation

Spline Hygiene:

Pixar’s Victor Navone talks about untangling Function Curves.

Tutorial: Splinophilia Part 2

Transitional & Spatial Interfaces:

I wrote these!

• Transitional Interfaces
• Spatial Interfaces

The Art of Interpolation:

GREAT talk by my friend Marcus Eckert.

http://push-conference.com/news/getting-from-a-to-b-the-art-of-interpolation-by-marcus-eckert/

Game Feel:

Some ideas to help consider tactile feeling.

https://amzn.to/2rno2bV

The Animator’s Survival Kit:

This is the Bible for animators. A must have.

https://amzn.to/2w8NrM0

How to Lerp like a pro:

Implementing interpolation

https://chicounity3d.wordpress.com/2014/05/23/how-to-lerp-like-a-pro/

Practice

Reading theory is one thing, but implementing these ideas is a different game. It‘s helpful to sketch around with and without code.

To experiment without code — Practice manual animation to get a sense of timing. Animate a ball across the screen without using computer in-betweens. Draw every in-between frame yourself. It’s not hard. Just get a brush tool, make it the size of a ball, and experiment with timing and spacing! Once you learn to feel timing, your work will improve drastically.

Anyhoo, that’s it for now.

Questions?

pasquale@thinko.com / @pasql on twitter

Thanks for reading & watching ✨

Special thanks to Jacob Bijani for technical contributions.

I think spatially, and so do you. Can you scratch your left ear without looking? Pick a booger out of your nose, without poking your brain? Remember where you left your keys? Can you type, without looking at your keyboard? Know which pocket your phone is in? Which way is up? Do you know where the bathroom is? Of course you do! We imagine multi-dimensional models in our minds, to help understand the complex world around us. We can also leverage this powerful way of thinking, to process more abstract information.

The best software is an extension of the brain. It lets us think naturally, and conforms to us, not the other way around. Translation of information is the computer’s job, not ours. A great Spatial Interface meets our expectations of a physical model. They are Interfaces that are sensible about where things lay. Like a well designed building, they’re easy to traverse through. One space flows into the other, without surprise.

Modeling Space

To design a Spatial Interface, you need to think inside and outside the bounds of the screen. Think about the physicality of the objects in your interface. Where did they come from? Where will they go? How do they behave in respect to Kinetic influence? Do certain objects inherit physical properties of others? Where are you, relative to everything else?

These are hard questions to answer with words. Seems like a no-brainer, but I find it most effective to solve visual problems with pictures.

Drawing the map

Diagrammatic Reasoning

When designing spatially, it helps to imagine an interface as a physical model, which can be manipulated, and travelled through. Rather than placing detached comps next to each other one-dimensionally, try thinking upper-dimensionally.

Here’s a breakdown of the Contextual Zooming paradigm that was key to creating Keezy Drummer.

The 4th Dimension?

You can visualize the relationships between dimensions as extrusions of lower dimensions. Each dimension creates a significantly more complex model to visualize.

We can design with time, by thinking about kinetic, Transitional Interfaces. Both Spatial & Temporal clues lead the eye around physical models.

Manipulating a list

Motion implies space. Movement re-enforces the physical characteristics of the spaces on and off the screen. Objects constrained using sensible, physical rules, help establish a clear model.

We’ve all seen this classic, list item deletion pattern. Swipe the cell, and it reveals a button behind it. Tap the icon, and the entire cell collapses.

What happens if we change the way the list item departs the screen?

If we cushion / ease the item exiting the screen, we suggest where it might stop. In this case, it stops a little short off screen. We might want to do this to imply a holding area, which could feed items back into the list. Maybe we could allow the user to swipe the viewport to the right hand side of the screen, revealing displaced list items.

If the item keeps accelerating, where does it end up? Out of reach? Are we banishing it into the void of outer space?

If the list item rotates and displaces along the x & y axis freely, does it come to rest off the grid? Is there gravity? Maybe it lands in a pile.

Z-translation implies depth.

The list item could flip over. It might fold in on itself like an accordion. Maybe it scrunches. The fill color could drain out of the cell like a liquid. I could go on with visual examples forever, but by now, I think you get the picture; one can encode quite a lot of meaning using motion and space.

Interfaces with tactful Spatial Design

Scorekeeper

Pretty conceptual, but Scorekeeper does a great job of creating focus. It isolates modes, rather than presenting the user with a bloated buffet of options to dig through. Complexity is hidden in secondary, and tertiary sub-interfaces. Each sub-interface is as simple as its parent.

Tinder

Tinder famously employs a card paradigm. There’s an endless stack of cards which make use of z-depth. Toss a card from the stack to the right, for a babe you’re into, or throw them to the left to pass. Similarly, if you tap the heart or ‘x’ button, it automatically tosses the card to the respective side of screen, re-enforcing the function of space.

It’s a physical, kinetic model that’s familiar.

Secondary screens are placed along a horizontal continuum, which is reflected in the motion of the navigation, cascading to the content below. A great example of motion being leveraged to imply space.

I’m unsure if it’s intentional, but the interface for messaging your ‘matches’ happens to exist on the right hand side, within the same area you toss your Tinder crush card.

Tumblr, iOS

Tumblr’s model is simple. There’s a few contexts, connected with a tab bar. It’s easy to visualize if you imagine the interface from the perspective of a camera. A persistent toolbar follows us, as if attached to the camera we’re looking through. Though you don’t see explicit motion along the x-axis as we change contexts (as Tinder employs), there’s still a implicit feeling of space on either side of the columns.

None of this is groundbreaking.

What’s interesting is the use of the compose modal, triggered by touching the blue pencil icon. No matter where it’s touched, you are not transported to a new part of the interface, rather — you’re presented with a temporary offering, in a focused view. You have incredibly simple options: Either select a post type, or dismiss the menu. The view presents itself over the top of the content, as if it were a layer existing on a z-plane. Dismiss the view, and it returns to where it was summoned. Choose to make an action on it, you continue to move along the y-axis with the icons, implying a continuum. It’s like a conveyor belt on a production line.

My one gripe in Tumblr’s process, is that the metadata composer is presented with the insertion of a classic, master-detail view. If I were to push the interface further, I’d continue to present the next screen with y-axis motion, rather than introducing the extra x-dimension. This reduces the cognitive load required to imagine the spatial model.

Facebook’s Swipe to close

A classic lightbox effect, but with a little more. Tap the photo, and it moves into the ‘foreground’. The background feed dims and recedes. Flick the photo away, and it returns back to its initial position, while the original container view zooms back into focus. It’s solid.

Interfaces with careless Spatial Design

There’s a lot to learn, by deconstructing these expensive Frankensteins.

Spotify, what are you doing? 😲

One of the most spatially confusing, while popular pieces of consumer software. To describe how Spotify’s interface makes use of space, would be to describe a rat’s nest of wires. I challenge you to effectively sketch it on a piece of paper.

A user of Spotify is exposed to obscure carousels, buried inside modals, stuffed inside list views, crammed into drawers, contained by drop-downs, tucked behind gestures. Each list item in the hamburger menu forces the user through a wild goose chase in order to perform a simple action. It’s like you have to play a choose your own adventure story to get anything done.

Turkish Airlines in-flight entertainment

How do we avoid the Rat’s Nest? We need to zoom out, and quite literally. Like I mentioned earlier, it helps immensely to think in terms of diagrammatic reasoning. Simple directions on the map result in a less chaotic journey through space.

Some tips:

• Be careful mixing carousels, scroll areas, zooms, and hamburger menus. Each one of these devices introduces dimensional complexity.

• Avoid over-describing space. It becomes hard to digest. The time it takes to convey the space might block an interaction. Added time can cause software to feel unresponsive. Consider shortcuts to imply the feeling of space. Literal isn’t as important as feeling.

• Get drawing. Use a sketchbook, or even a whiteboard. Something more loose than pixel twerking. Think with pictures.

I hope what I’ve penned down has encouraged you to think more Spatially. Go play some video games, and study the interfaces. Go outside. Observe the physicality of reality and your expectations of it.

Spatial Interfaces, as a talk:

update: ~2024~

I’m building new work for the Apple Vision Pro, hit me up if you wanna chat.

Feel free to email me: pasquale@lingonberry.ai, or write to me on twitter @okpasquale

✌🏻

Special thanks:

Jake Lodwick, Eric Skogen, Mark Stultz, & Sebastiaan de With

Spatial Interfaces was originally published in Elepath Exports on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys.

...but there's little consideration about how it all fits together outside of a static comp. You tap a button and the form just ...appears? You swipe to delete an item and it just vanishes? That’s super weird and un-natural. Nearly nothing in the real world does anything as jarringly as just swapping states. It would feel like a glitch.

Oh, ok sweet. You made some notes — it just “slides in.”

How? Quickly? Does it bounce back? Cushion in? Static design doesn't provide context between states.

Folks keep throwing around the word “delight” when referring to animation and cute interactions. Cool and great for those guys. Guess what though? Animation can be used functionally too. It's not just an embellished detail.

Animation leverages an overlooked dimension — time! An invisible fabric which stitches space together. You don't have to be a math dork to understand this.

Let's take a look at some simple ideas:

Easing/cushioning

In traditional animation, a breakdown determines how a mass moves from Point A to Point B. It adds bias to motion, and determines how the rest of the frames fall into place. Take these 25 frame interpolations, where frame 13 (the middle-ish point) varies in position:

Look at that! You just learned about cushioning/easing. Computers are jerks and love to fill in the gaps linearly because they are lazy sacks of wires. A great animator/motion designer spends most of their days fighting computers to make sure they don’t mess this up.

Animation is all about timing. You can play with all sorts of different spacing to get different results. But enough about that. This isn’t an animation tutorial, the point was to get you thinking about the language of timing and spacing.

Some ideas about Animation in the context of Interfaces

Like I said earlier, animation can help to provide context. It helps brains understand how the information flows.

Inserting an item into a list

Let’s say you’re looking at a live list of things and you’d love it to be populating with live data. If you leave it to a computer, it’d look something like this:

Yikes, that’s rough…

Smoothing it out only requires a few frames of animation. How about giving your brain a clue about what’s happening to the list?:

For a new item to be added, the list needs to make room for the item, and then the new item (which came from somewhere) fills in the space. Much less jarring. There’s easing in & out of states to soften the change. It feels more natural, because we have the contextual hook of space — mirroring the way you’d add something to a stack of things in real life!

A few more:

Drilling down into list items

There’s the typical, default pattern of sliding over into an item. A regularly used pattern, but doesn’t make a whole lot of sense spatially:

The direction of sliding doesn’t really give you any useful clues outside of a linear chain of views.

How about considering the item to be a container you prod for more detail, inline?

If the goal is to drill in and have the list item hold full focus, we could even make everything else hide within the same view:

Breadcrumbing>all>the>way>into>a>view is an easy way to get lost.

An advantage of remaining inline is that you can remove the need to explain how deep a user is embedded into sub-views. You can scrap the display of a hierarchical navigation, because the user saw how they got there.

Of course, the above ideas don’t work with every case — but this perspective can lead to much more elegant solutions to connect a flow.

An implemented example - Thinglist

Thinglist, an Elepath product I’m working on with Mister Kyle Bragger has some pretty fun transitional interface work woven into it. The above example demonstrates how we reveal the new filtering feature.

Examples of Transitional interfaces you should check out:

You know, I can’t really name many… On one end of the scale, there are a lot of beautiful, but dreadfully static interfaces. On the other end — ones that are over embellished with gimmicky animation.

Three stand out to me right now.

Clear: Very tight gesture driven animation.

Willcall: Has a consistent, kinetic rhythm. There’s no hard pops between states. A lovely playfulness.

Facebook.app: Not very consistent, but there’s some nice solutions to drawing focus. Specifically… drilling down into lightbox-like views for fullscreen photos, and popping comment inputs into list views.

It seems crazy to me that more people don’t think about interfaces with respect to the dimension of time. Motion can provide so much information! Maybe the tools to create prototypes are too complicated for most designers?

I originally wrote this as an internal document for Elepath employees, to begin to explain my obsession with motion. I am an Animator after all.

We figured it would be cool to share this for discussion. I’d love to hear thoughts from other people building interfaces, with a real consideration for how & why they move.

Do leave your comments here, or pipe up & chat to me on twitter: @pasql

If you’d like help with your next project, shoot me an email:

pasquale@thinko.com

Update: I expanded on this article as a 50 minute talk, which you can watch here ->

*I take no responsibility for you plunging down the rabbit hole and getting hooked on animation.