Animation is a powerful tool for creating a delightful and intuitive app experience. We will show you how to get started with animations, how to make them effective for your user interface, and how to save time coding by building animations into interactive prototypes.
I brought along my teammates, Joe and Marek.
Welcome to Designing with Animation.
If you have an app or a game, you've probably come
across the circumstance where you want to tell someone
that something has happened.
Perhaps a new item is added to this list.
You could do something like this.
Or perhaps you would like people
to understand how two different parts of your app are related.
You could do something like this ...
Or maybe your app has a gesture you've just introduced and you'd
like people to understand how the gesture works.
You could do something like this ...
Now, as you might suspect, given the name of the talk today,
there is another way to do this.
Today we're going to talk about how you can use animation
to direct people's attention, keep people oriented,
and connect people's behavior to what's happening on screen.
But before we get into that,
just a little bit about who we are.
We're a team of inventors, designers, and prototypers.
We explore what new interfaces mean for Apple's products,
including trackpad gestures, Force Touch,
and the Taptic Engine.
But we don't make full working apps to do this.
We make little animated experiments
and interactive prototypes.
Today we will talk a little bit about what that means.
So the plan for today is to ease in to the what, why,
and how of animation; to communicate an idea
by animating it; and to learn a little bit about how animation
and interaction are intertwined.
So what is animation?
How do we think about animation when we are making our apps?
Well, at one point in time, your app will have one screen,
and at some other point in time, it will have some other screen.
Because these two apps don't exist at the exact same time,
there is going to be some kind of change between them,
even if it's just an instantaneous pop.
It's this change that we are talking about,
this change over time, when we think about animation.
Now, because humans usually can't perceive instantaneous
change unless you are pretty special,
you can slowly change things over time
to communicate something about how things are related.
So animation is change over time.
But you'll note that when I was talking about this change
over time, I already had those two screens.
Animation isn't going to solve all of your design problems.
You still need to go out there and figure
out which screens your app should have
and what should be on them.
But the manner of this change
over time can communicate things.
Chances are your app has more than just two screens.
In fact, it may have many, many different screens.
And you can use a different type of animation for the transition
between different types of screens to communicate something
about how all the screens relate to one another.
So all this different change over time communicates something
about how all of the screens in your app fit together.
This is a very practical way of thinking about animation.
It's solving some of these problems.
But there's another thing to pay attention
to when you are looking at the manner of the change over time.
If we go back to that example of adding a new item to a list,
you could animate a new item in like this.
And this might be appropriate for a game
if a new player has been added, and this is a very rare event
and you want to kind of celebrate it.
But for most apps, you probably don't need to go
that far with your animation.
You might be more familiar with an animation kind of like this.
The point is both of these animations are communicating
that a new item has been added, but they do it
in a different manner.
They communicate something about your app's character.
It's an artful way of thinking about this change over time
that tells you how the app feels.
Especially as we start to look at content front and center
in apps, the motion of this content can be very powerful
in communicating what your app is and how it feels.
So why should we animate?
When do we decide to start looking at animations?
Well, there are probably a lot of different reasons,
so today we are just going to look at three main categories.
The first is to direct people's attention.
To help them become aware that something
within your app has changed.
Perhaps something behind the scenes in your app has changed.
You want your users to understand
that there's something new that they can explore.
Or perhaps your user has performed some type of action.
Maybe you are going to press and hold
on these icons for a little bit.
This animation is communicating the result of the user's action.
By pressing and holding, I've changed the state of the app.
So directing attention can be useful
for both of those scenarios.
The second reason to animate is to help keep people oriented.
To help them understand where they are within your app
and where they've been.
So if we just take a look at tapping on the Back button
in Mail, for example, there's an animation that happens.
And you can see that this animation is communicating
something about these screens almost being stacked
on top of one another.
But if we slow it down and really take a look
at what's going on, there's some subtlety
to this animation that's reinforcing what's happening
as the user is going back.
So watch as I press the Back button now.
You can see that the label
from that button becomes the new section header
for where I now am.
It's subtle, but if you pay attention to it, it's there.
The third reason to animate is
to help connect people's behavior
to what's happening on screen.
We want people to feel in control
of your app at all times.
If we look at Notification Center as an example,
as I start controlling it, I can actually see what's happening,
where my finger is, even though you can't see my finger
in this video.
We can break this down a little bit and think
about how we connect people's behavior.
I start going into Notification Center
by touching the top of the screen.
Then, as my finger moves, the Notification Center is connected
to my finger at all times.
I can see what is happening and what's going to happen.
I get a hint about what's going to happen.
And then if I flick back up or flick down,
it will either cancel or complete this gesture.
And the animation will respond appropriately.
And perhaps even hint at how I can reverse out of this mode.
This helps you feel in control,
but it also tells you how the gesture itself works.
So these are three reasons we are going to talk about today.
But how do we try out animations?
Part of it is we want to be able to understand
which animations we should use.
As we're designing our app, we start to draw a lot
of screenshots, but these screenshots show you too little.
You can't actually understand anything about the manner
in which you're transitioning from one screen to another
if it's not moving at all.
So we could go and build a real working app.
But apps actually show you too much.
There are a lot of details involved
in building a full working app that get in the way
of exploring many different types of animation; right?
We want to be able to try a whole lot of things
to figure out what's right.
So what we do is make little animated experiments.
We find ways that we can try out many different animations
because this allows us to try built-in animations
and compare those to custom animations.
Maybe we have some brilliant new idea for an animation,
but we should still compare it back
to what the standard iOS one would be to make sure
that our intuition that this is brilliant is right; right?
We need to see both of them.
So really what we are doing here,
we think of this as making prototypes.
Even though it's not in code,
we are kind of making little experiments.
We are trying things out that aren't real.
We are making these prototypes, showing them to people,
and learning from their feedback.
This is actually a bit of a cycle; right?
We make things, we show them to people,
we learn from their feedback.
Something we've talked about a little bit before
in some other sessions.
So today, to get a more concrete example of how we try
out animation, we are going to build some animated prototypes
for an app that some of you might have heard of.
It's called Toast Modern.
Now, it's okay if you haven't heard of Toast Modern.
It still has its original feature,
which is to help people find local artisanal toast,
San Francisco's finest food export.
But over the past year, Toast Modern has been
so successful we've been adding all sorts of new features.
People can share the toast they found with other people.
You can comment on toast.
If you watched a session yesterday, you might have seen
that we've connected Toast Modern to Toastal Service.
The world's first social toaster.
And now that people are making their own toast
and posting these pictures, I can see my toast along
with these toast restaurants.
And now I can see my friend's toast.
And frankly, the biggest thing we are seeing
with this app now is we are just getting overwhelmed by toast.
So today we are going to focus on a single feature.
We are going to really dive in and look
at different ways we can animate just this one feature
and how we can make just this one feature great.
What we are going to do is slice through all this toast
to find our favorites.
Now, to do that, without writing a line of code,
I would like to invite Joe up to the stage.
JOE MALIA: Thanks, Julian.
Hi. I'm Joe, and I spend most of my day in the team designing
and animating and not writing very much code.
So today I am going to be talking
about the Favorites button in Toast Modern.
So we are going to run through a few ideas
for how animation can bring a feature to life.
We are going to look at the process
of designing animation into an app.
We are going to look in at a few places where animation fits,
a few places that it doesn't.
Animation is a powerful - [ding] -- I am sorry.
This is a little bit embarrassing,
but I forgot to turn my phone off.
So let me just -- oh, actually, it's okay.
It's an email from the Toast Modern CEO.
Bill, could we get this up on screen, please?
-- he's had some thoughts.
So let's see what he says.
After some deep meditation in my yurt,
some revolutionary new ideas
for our app have come into focus for me.
People need to know that the Favorite button is there.
Okay? We can do that.
Two, people need to be able to find toast
that they've favorited.
Okay. That sounds fair enough.
Three, using the Favorite button should be simple and elegant.
People should be able to use it from the first touch.
That sounds fair enough.
Okay? So no rush.
Just send me something to try out in the next 20 minutes.
So here we go.
We haven't got much time, so we need to dive right in.
We are going to start trying to animate as many different ideas
as we possibly can in a short time, get through as many
as we can quickly, and get them onto a device.
So the designers out there amongst you might use
After Effects or Quartz Composer in a situation like this.
Any developers might turn to Swift, HTML, CSS.
So these are great tools, but for those of you
that don't know those tools or don't have access
to them, there is Keynote.
And that's what we are going to be using today
because it's very quick to make animations, and it's very,
very quick to get things onto a device.
So let's look again at the requests from our CEO.
Conveniently, they map very well to the three principles laid
out by Julian in his part of the talk.
So let's focus on the first one to begin with.
People need to know that the Favorite button is there.
So let's look at an example where animation is used
to subtly draw attention to a feature within an app.
As we can see here, the iBeam is blinking slowly
to pull people's attention to it, to show people
where text will be entered as they start to type.
It's very subtle but actually really easy to pick
out amongst all the text.
What we can see here is the change is very attractive
to the eye.
So let's think about a few different ways
that we can use animation to draw attention
to our Favorite button.
So we don't have much time, as you have seen.
All I've done is screen-grabbed the existing Toast Modern
layout, and I am just going
to paste it straight into Keynote here.
So we are going to open the shapes panel
and grab the star icon, and we are going to place
that into each line in our list.
Now let's zoom in to get a closer look and think
about how we can change some of the properties
of this button over time.
So we can change the opacity to simulate the gentle blinking
that we saw in the Notes app earlier.
Okay. That's nice.
It's pretty subtle.
How about something more dramatic?
We could change the rotation, the color,
the scale, at the same time.
We could change the shape.
It's just scaling down one object and scaling
up another one quickly.
We could give it some character by sticking some bounce in there
and adding a little face.
So we could animate the layers at timed intervals
to create some patterns as well.
So let's zoom back out and try that one across the entire list
to see how attention-grabbing it is.
Okay. So it's definitely grabbing attention,
but if it's going to be animating constantly like this,
it could go way beyond just grabbing attention,
actually become quite distracting.
It's not really telling us anything new
by animating all the time.
So let's look at a few examples around iOS
where animation is used to draw attention and have a look
at when it's relevant.
We see our notification for an email appear
at the moment that we get an email.
Okay? We see this gently pulsing link appear when we've jumped
out of an app to help us get back in.
And notifications shift into view
when there's something very important for us to know.
So the thing that these animations have in common is
that they occur at the moment
that they are relevant to the user.
They are not constantly calling for attention.
We want people to notice the Favorite button
when they first use the app.
So we can use animation to introduce the feature
when people launch the app.
And actually, there's a whole bunch
of different ways we could just move the button
into position like this.
So these are looking nice,
but they actually dominate the action for a chunk of time,
and if I am just obsessed with toast, really want to get
in there, start favoriting toast or looking at toast,
they are taking up the entire screen.
So what we want is something to come into focus, grab attention,
but not take over the action.
So we'll just do something like this.
Okay. Let's see that again.
Okay. So as I said, we don't have much time,
so we are just going to keep going.
The second part of the email asked us to ensure
that people know where their favorite toast has gone once
they favorited it.
So if people start to favorite toast, as more
and more new toast is added to that list,
their favorites are going to end up way down that list.
They are going to be hard to find in the future.
What we need is a place to store a list
of only our favorite toast.
So let's create two buttons at the bottom of our screen,
one that's going to show us all of our toast
and the other one that's only going to show us our favorites
on a different screen.
So when I tap that Favorite button, it will animate
in from the right and back.
So now we've gone through the process
of designing a simple structure for our app.
Now, this might feel like we've done enough,
but we can actually go one step further.
When someone makes a favorite, let's use animation to hint
as to where those favorites have ended up in the app.
So we want a model for moving toast around our app.
So let's look at how we might move toast
around in the real world as a starting point.
So if I was to move toast from one plate to another,
it wouldn't just disappear and reappear on the other plate, or,
like, disappear out of view altogether,
giving me no idea of where it's gone.
Instead, as we move it, we can keep track of it
by following its journey between the plates.
Even when it moves out of sight.
So we can create connections between different parts
of our app by moving toast along a path like this.
We can animate this transition in many ways.
So imagine that the toast gets swallowed up by a toaster,
spat out along the path, and ends up in the toast list.
Let's see that one again, I think.
There we go.
Alternatively, we could let the user define the shape
of that path by allowing them
to track the toast to the Favorite area.
So we know that favorites are off to the right.
So the toast could move out to the right,
get gobbled up, and then shoot back.
So as we tap the Star button, it can expand,
swallow up the toast, pull it over to the right.
Or the entire panel could move over,
and then we could move it back when we don't
like that toast anymore.
We have created a lot of options to choose from.
That's what we are doing, prototyping
and creating options for ourselves.
So we created an animation that draws attention
to our new feature, and we prepared an animation that hints
at the structure of our app.
But the CEO wants people to be able to use the button
from the first touch, and in order to do that, we are going
to think about how animation responds to touch.
But we can begin one step before that by looking
at how animation can suggest how to interact with a piece
of toast before you've even touched it.
So on the Lock screen here,
we can see an animated highlight move
across the words "Slide to Unlock."
There's meaning in this movement.
It travels in the direction you are meant to swipe.
It offers a subtle cue to encourage the users to act
on it in a specific way.
It's elegantly foreshadowing the interaction.
Let's see if we can create an animation that hints to the user
that they should tap this button.
So we will zoom in again.
We could move the button down to hint that it's been pressed.
Or we could animate the shadow
of an imaginary finger tapping it.
Or we could use a highlight to give some depth and travel.
Let's just take that idea quickly and try it
across our entire list.
So it's actually pretty subtle, so we could add some color
to hint to the user the change that they will see
when they tap the button.
Okay. So in iOS, you can actually interact with buttons
and features in many different ways, and the more complex
and sophisticated an interaction,
the more foreshadowing it may need.
But a tap, what we have here, is actually very simple.
And in this case, it's probably enough to suggest
that you can act on it just by it being there,
just through its presence in the app.
So the simplest option is best.
Let's just reserve animation for the moment
that you first touch the screen.
So we want some feedback when you first tap the app.
So let's start by making the star bigger when you touch down,
and the moment that you lift your finger up, let's imagine
that it travels a little way before bouncing back down.
Okay. That's great.
But what we are going to do is we are going to need
to get a feel for this interaction.
So we can do that by jumping into QuickTime
and screen-grabbing the animation
that we've just created.
Then what I can do is I can open up a movie of that
and get a very basic feel for the interaction
by scrubbing the timeline as I pretend to touch the button.
So as it scales up, it is starting to feel a little bit
like it's coming towards me.
So this gives me the impression
that I can actually drag it around.
Now, why is that?
It kind of reminds me of something
that we see here in the Email app.
As I press and hold on a name, it appears to lift off the page,
which gives me the sensation I can actually start
to move it around.
This isn't actually what we are after here,
so when we press the Favorite button,
let's make it slightly smaller, as if it's moving away from you.
And we could also make it darker.
Okay. It can still bounce up when we've lifted our finger up.
So let's integrate that with the animation
that we created before, see how it looks.
So now we are almost ready to start favoriting toast.
Let's have a look at this.
Great. We have tackled the three items from the CEO's list,
but we need to get a feel for these animations
on a device before we can send it back to him.
So let's head into Keynote one last time.
We are going to build our animation at this orientation,
the orientation of the device.
We are going to build our animations in this format,
and then we are going to load it onto the phone, open Keynote,
open the file, and then we can just tap
through the interaction.
So what I'll do is I'll grab that animation that we created
and some of the assets that we've created
and the pressing email from our CEO, and I will send them
over to my colleague, Marek, who is going
to start integrating some code to raise everything up a notch.
MAREK BEREZA: Thanks a lot, Joe.
Hi. My name is Marek, and I spend most
of my time making interactive prototypes with a little bit
of code, but much less code than you might imagine.
Now, Joe's just sent me this Keynote file,
and it's really amazing how far he's managed to get
without having to write a single line of code.
But as you know, the CEO of Toast Modern is on our backs,
so we really need to get going, and we are going
to do a little bit of programming
to create an interactive prototype.
Now, the main reason to make a prototype is
so that we can get a feel for these animations in our hand
on the device with the interactions involved.
And only then can we ask ourselves the questions:
Does it work?
What doesn't work about the animation?
And then if it doesn't work, then why doesn't it work?
So the second reason to make interactive prototypes is
to let other people try it.
Now, maybe this is even more important than the first point.
Now, you might be a really good judge of your animations,
but at the end of the day, there's just no replacement
for an outsider's opinion.
You, yourself, have got a strong emotional investment
in your app.
You spent loads of time working on it.
So really, you need to find someone who isn't invested,
someone who doesn't know what these animations are supposed
to say, and see if they get it.
I just quickly want to go back to this diagram
that Julian showed earlier, this cycle of making something,
showing someone, and then learning from their feedback.
It's really important to take what you've learned
and put it back into the making process
so you can keep iterating until you get it right.
Now, the third reason is so that you can make changes
If you try doing this sort of stuff
with production-style code,
you end up writing quite a lot of code.
And then when you want to make a small change, you end up having
to scrap a lot of code and then write a lot more code.
So if you make these little interactive prototypes,
then you end up saving yourself a lot of time and money.
Now, what are these interactive prototype things?
Well, essentially, we are going to build an app,
but we are going to cut as many corners as we possibly can
to create the illusion of a fully fledged app
so we can test out our animations.
The easiest way that I can think to do this is rather
than using navigation controllers
and all these UI controls,
we are just going to work with images.
So I've taken a few screenshots from Joe's Keynote.
We've got one picture of the main app with that row
that we are going to make interactive missing.
We've got one picture of the row
that we are going to make interactive.
And then that same row, the favorited version.
And this is what our code looks like.
It's very rough.
We've got three lines of code
to load those three images we just saw.
This block of code adds those images as subviews
to our main view and puts them into place.
Then this block of code listens for a touch event,
and when it gets a touch event,
it animates that favorites row off to the right-hand side,
and then it brings the favorited version of the row from behind.
So running it on the phone looks something like this.
We've got a working prototype, 15 lines of code, 3 pictures.
Couldn't be easier.
We can try it out straightaway, and as soon as we tried it out,
we discovered something wrong, and that was
that when we put our finger down initially, nothing happens.
Joe mentioned something about this.
When you put your finger down on most buttons in iOS,
they respond to you, and it's really important that they do
because it's telling you that this isn't just a static part
of the screen, it's an interactive thing.
In order to dig into this problem deeper,
a really good way to do this is to break down the interaction.
Most interactions can be broken down into the stages
of the start, the change, and the complete.
And each of these stages is an opportunity for you
to help guide the user on their way through the interaction.
Now let's think of this in terms of touch.
We've got the start, which might be our touchdown.
We've got the change, which is moving your finger
across the screen.
And then the complete, when you lift your finger off the screen.
And in programming, we think of touches began,
touches moved, and touches ended.
Now let's go back to our Favorites button.
So as the finger goes down, we need to respond to the user.
Maybe we can just make that star grow
or do something a little bit more intelligent
as to what Joe is talking about.
Now, moving your finger around on a button,
maybe if the user moves their finger off the button,
we can allow them to move out --
I mean, to back out of what the action is going to do.
So maybe for the animation, we just reverse that animation
to go back to the start
to reassure the user nothing is going to happen.
And then finally, the complete stage.
If they want to complete,
we have to make sure we reward the user, make sure they know
that they favorited the toast.
So I am not going to go through every single line of code here
because it's a little bit longer,
and also my code is a little bit messy,
and I guess that's the point that I want to get
across is the fact that this is not an engineering exercise.
We really just want you to hack it together.
I give you my full permission.
And secondly, really try and use images wherever you can.
You will be amazed at what you can get away
with with this sort of fakery.
And then thirdly, there is a really nice suite
of animation functions, which you probably already know,
which is Animate with Duration in the UIView class.
So here's our prototype.
We've got something we can get someone to try out.
So let's try it out on others.
So I took it to my next-door neighbor, which coincidentally,
he's a massive toast fan,
so he was really excited to try it out.
And he came back with some concise
but very revealing feedback.
And that was, I really liked how it felt, but surely,
shouldn't it be a swipe?
Now, he's got a point here.
The animation even goes off to the right.
It looks like a swipe.
And this is a really good example
of how your outsider's opinion can really give you these
insights of things that, in hindsight, are really obvious,
but we just didn't see it because we were too
in the process of the project.
So maybe he is alluding to this nice animation in Mail
where you can swipe to mark as Unread.
So let's try a swipe gesture.
Let's think of it in terms of our start,
change, and complete model.
So in the start, we've got the finger going down.
As the finger goes down, we need
to determine whether the user is trying to swipe
or whether they want to scroll or just tap.
And the way we do this really easily is we just look
at the initial movement of the finger,
and if it moves far enough horizontally
without moving too much vertically,
we know it's a swipe.
So essentially, we are setting some sort of threshold.
And only once a user has passed
that threshold do we start this connected behavior.
So now we are in the change state,
where the user can move this row.
Maybe we can prompt them with a little message saying
if they carry on swiping,
then they are going to favorite this row.
And so hopefully intuitively they get the idea
that they can back out at this stage
by letting go or by moving back.
So this is what it would look like on the phone.
And then finally, the complete.
If the user carries on swiping, we need to make sure, again,
they know that they favorited this row.
So we've got our prototype.
I tried it out on my next-door neighbor.
He seemed to really like it, maybe partly
because it was his idea in the first place.
And we are ready to send it off to the CEO
to see what he thinks.
So he's usually quite quick at getting back to us.
[Ding] Oh, there he is.
Thirty seconds ago I decided to turn my life around and switch
to a gluten-free paleo diet.
I feel better already.
The future is drinkable meal replacements.
Now I don't even need to leave my standing desk to eat.
I need a prototype in 45 minutes.
Have a great weekend.
So of course, I am going to have a great weekend.
Anyway, that's interactive prototypes.
Hopefully now you can see that it's really easy to test
out your animations before you build out your whole app
so that later on down the line you are not going to get burnt.
I'm going to hand you back to Julian
for a quick toast mortem of the session.
JULIAN MISSIG: Thank you, Marek.
Thank you, Marek.
So what did we learn today about animation?
We learned that we can think of animation as a change over time.
We still need to go back and design our screens,
figure out what should be on each screen if we run
into difficulty with our animations.
The manner in which you change over time can be thought
of in two different ways.
It's both practical, it communicates something
about how all the different parts of your app fit together.
And it's artful.
It tells you something about the character
of your app, how it feels.
We have three different reasons why we might want to animate.
We can animate to direct people's attention.
We can animate to help keep people oriented.
And we can animate to connect people's behavior
to what's happening on screen.
We briefly touched on this prototyping process we've
described a couple of times where we want to make a lot
of things so that we can show people a lot of things,
so we can learn a lot of things.
The more that we can do this,
the more that we can learn before we invest time and money
in building the real apps.
If you would like to learn more about this prototyping process,
there was a session at last year's WWDC specifically
And yesterday, there was a session Designing
for Future Hardware, that applies this prototyping process
to apps connected to devices.
Both of these should be available in videos online.
You should certainly also check
out all the other design sessions for more information
on how you can be designing all these screens.
But finally, we would like to leave you with just one thought.
We want you to go out there and use animation to add character
to your apps and games.
But please do so thoughtfully.
The whole point of this is
that we can't understand what the animation communicates
or how it feels without trying it.
So find ways to try animations, whatever those ways may be.
Thank you all.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.