WWDC2015 Session 803

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
[Applause]
>> JULIAN MISSIG:
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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]
>> JOE MALIA: Thanks, Julian.
Hi. I'm Joe, and I spend most
of my day in the team designing
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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]
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
-- 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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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]
>> 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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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]
>> JULIAN MISSIG:
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.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
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]