[Applause]

Hello, everyone. I am Julian. 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. [Applause] 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. [Laughter] 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. [Applause]

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? Thanks. Okay. So - [Applause] -- 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.

[Laughter] Namaste. Okay. [Laughter] 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.

Okay. Great. 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. Okay. Great. 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. [Applause] 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. So, Marek. [Applause]

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 really easily. 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. Hi, Marek. 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. [Applause]

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 on prototyping. 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. [Applause]