WWDC2014 Session 230

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> Good afternoon.
I'm John Cavanaugh,
and I manage the group
that creates the
documentation for all
of Apple's consumer
and Pro products.
And here's some of what we do.
Print pieces that come in
the box, iBooks and PDFs,
help topics that appear
in the OS X Help Viewer.
We have some highly
contextual In-App solutions
and deliverables on the web
like these iOS user guides
or this What's New
Experience you may have seen
in OS X Mavericks.
Now, creating great customer
documentation isn't always seen
as one of the most exciting
parts of software development -
I realize that as the
documentation guy.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And it can often be treated as
an afterthought by developers.
Not the developers in
this room of course,
but let's just say
some developers.
And when that's the case, it can
often take the form of an FAQ
or help system where
basically you wait
until a person gets stuck, drop
them into a comprehensive body
of content and then have
them fend for themselves
to try to get answers.
And historically, icons
like this have been used
to represent the experience,
which really isn't the
most flattering image
to have associated with your app
or game, unless of course it's
about rescuing people
lost at sea, I don't know.
Now, this Get answers
strategy, it does have its place
in help systems for deeper
apps, but as iOS developers,
you probably don't
even have to go here.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
you probably don't
even have to go here.
Instead, Rachel is
going to show you how
to anticipate users' needs in a
seamless onboarding experience
so they won't even feel like
they're getting your help.
They'll just feel as though
they're experiencing your
amazing app or game.
She's also going to show you
how to extend the strategy
into an area we like to
call Inform & Inspire,
and that gives you the
opportunity to delight users
by showing them what's possible.
Now as I've said, there's
great ways to do this and not
so great ways, and that's what
Rachel is going to show you now.
Rachel.
[ Applause ]
>> Thanks, John.
Hi, everyone.
My name is Rachel
Roth and I'm one
of Apple's user experience
evangelists.
So today, we're going to talk
about onboarding and
welcoming people.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, this term onboarding,
you may have heard it called
the new user experience
or the first use
experience or what happens
in a tutorial for a game.
And really, onboarding is a term
that's traditionally associated
with what happens with employees
when they first started
a company.
It's how people acquire the
knowledge and the skills
and behaviors to become
successful at their job.
Now, when it comes to an app or
a game, people are going to go
through a similar
sort of experience.
They need to figure out, you
know, how does the UI work,
how's the game played,
is this app really going
to be right for me?
And that's why you
want to welcome them.
It's so important that their
first experience is a good one
because otherwise it's going
to be their last experience,
because we've got a
million other competitors
in the App Store, literally.
So people aren't going to stick
around if the first
experience isn't really great.
Now, when you step into a store,
there's - like a physical store
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, when you step into a store,
there's - like a physical store
in real life, there's a number
of things that are going
to influence whether
or not you stick around
or whether you turn
around and walk out.
You know, is the layout
of the store intimidating
or is it inviting?
You know, is the staff rude?
Is the staff really
aggressively pushy?
Those things could turn you
off and make you walk away.
But if the staff is inviting and
the environment is comfortable,
well, you might stick around,
explore the merchandise.
So the best approach with
apps or games is that you want
to get people in and using
them as quickly as possible.
You just want to let
people jump right in,
and sometimes that's
not always possible.
Now, there are a number of
reasons for having onboarding
and having a confusing or poorly
executed UI is not one of them.
So you want to make sure if
your UI isn't intuitive and easy
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So you want to make sure if
your UI isn't intuitive and easy
to use, spend time
refining that UI,
not building an onboarding
sequence, OK?
Now, if you have
registration required
to use your application,
that's a different story.
Or with games.
You might need to explain
the backstory or the rules,
you know, how games are played.
Or if your UI is heavily
reliant on gestures,
that might warrant a
little bit of information
in order to get started.
So let's talk briefly
about if you have
to require registration.
Sometimes, it is absolutely
necessary to see anything,
like a banking application or
social networks or bill pay,
anything that has personal
information, then you're going
to need to let people
know what's going on.
But before, if there's any way
possible, you want to delay
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
But before, if there's any way
possible, you want to delay
that registration until
it's absolutely necessary.
Now, the iTunes store is
a great example of this.
You can browse and look at
all the books and the music
and the movies that you want,
and it's only when you go
to buy something that you need
to authenticate or register.
So this means there's
nothing standing in the way
of finding something you love.
Requiring people to register
before they can see anything
puts this unnecessary
obstacle in their way.
They have to trust that it's
going to be worth their while
to go through that obstacle.
Here is a better way,
this is "JUKELY,"
and it's a concert-finding app.
They've got a great design.
They'll help you find
concerts that are local to you,
tailored to your taste - they
will even find someone to go
to the concert with you.
Now, not only do they have a
very short onboarding sequence,
but they will let you browse
without registering at all.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
but they will let you browse
without registering at all.
You just tap that "skip this
for now" text at the bottom,
and you can go right inside
and explore what the
app is all about.
You can look at the concert
listings, read about bands,
and it's only when you
express interest in something
or you want to buy some tickets,
well, that's when they have -
they ask you to sign
up, and that's great.
This approach lets you see
what that app is all about.
You can explore everything,
all the concerts in your area,
and you only have to
register when you're ready
to take action on something.
People are going to
be much more motivated
and quite frankly
comfortable going
through that registration
process if they're confident
in the quality and the utility
of what your app
is offering them.
Now, when it's time
to have people go
through that registration,
you want to explain why you're
asking them to register.
So think about it this way,
let's say a stranger walked
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So think about it this way,
let's say a stranger walked
up to you in front of
Moscone and said, "Hey,
can I have your email
address and phone number?"
You wouldn't give
it to him, right?
That's just creepy, and you
have no idea what's going
to happen with that data.
Now, that's exactly what
you're doing if you ask people
to register but you're
not telling them why,
and they don't know
anything about you.
It's especially important in
cases where you have to register
in order to use an app
because your description
in the App Store,
or word of mouth,
or brand awareness isn't enough
to make people feel
comfortable giving you all
of their personal information.
You need to make it really clear
what you're going to do with it.
So this is "Jelly" and they
crowdsource the answers
to questions from
your social network.
So they have a real challenge -
there really is nothing
they can show you
without you registering
and signing in.
So that's why they've given
you this brief explanation
of what the service is about
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of what the service is about
and explain why they
need your information.
And very importantly, they let
you know that they're not going
to post anything automatically.
And this is very important
because when you're dealing
with people's personal
information,
you want to make sure
that they're comfortable
giving it to you.
They want to know that you're
going to protect their privacy.
And transparency around privacy
is particularly important
if you're dealing with
social network integration
because I'm sure we've
all had that friend
that he's got some app that's
going crazy on their timeline
and you're thinking, "Oh
what a noob," you know,
nobody checked their settings,
they didn't know
what they were doing.
And nowhere is this more
the case when you're dealing
with dating applications,
because that would
be a nightmare.
All of a sudden, all your
friends and your family
and some people that you kind of
know from work or met some time
in a bar could see who you
liked and who you didn't like.
Nobody wants that.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So "Tinder" here is a very
popular dating application
and they're very explicit: They
are never going to post anything
to Facebook on your behalf.
And this is hugely
important because the way that
"Tinder" works is
they're asking you if you
like people based
on their picture.
So if you have any doubts at all
or you're feeling
a little hesitant,
you can tap that i button,
and they spell it
out in more detail.
They take your privacy
very seriously.
They're never going to
post on Facebook for you.
They're not going to
give away your location.
So people can feel reassured
and more comfortable.
And nowhere is this privacy
going to be more important
than with your social
integration.
Now I've just given you a whole
lot of advice about things
to tell people before
they register,
but I want to encourage you that
when you're telling them all
of these things, be succinct.
Be as succinct as possible.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Be as succinct as possible.
We all know that people don't
like to read long passages
of texts on an app.
They just tap, tap,
tap and get going so.
"Uber" does a great
job with this.
If you haven't experienced
"Uber" yet in San Francisco,
it's a car service, so
they'll come pick you up,
kind of like a taxi.
And you might think,
"Well, why do I have
to give them an email address
and a phone number just in order
to get a ride from A to B?"
And they explain here very
briefly, they're going
to send you notifications
about when the car is coming
and emails about
the confirmation.
So that makes you feel better.
So being succinct will keep
your registration process short,
and it will help encourage
people to actually read the text
that you've so carefully
crafted for that screen.
Now, another way that you
can make the process short is
to only collect what
you need right now.
Don't be tempted to ask
for a lot of information
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Don't be tempted to ask
for a lot of information
because you have
this great feature
and you're probably
going to do it someday,
or maybe you're thinking about
doing this, so let's get date
of birth and let's ask their
gender and - you only want
to take what it is that
you're going to use
and what you've told the users
that you're going to do with it
so that people feel
comfortable giving it to you.
Otherwise, people are
going to be suspicious,
and that could prevent
them from actually going
through the registration
process.
So, if you do need people
to register in order
to use your app, keep
these things in mind,
follow these guidelines
and everyone is going
to feel really comfortable
and motivated
to give you their information.
All right, so now, let's get
into the onboarding
best practices.
As I said earlier, the best
experience is going to be
to just jump in and start
using that app right away.
So you want to ask yourselves,
"What do people need to know
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So you want to ask yourselves,
"What do people need to know
in order to get started
with my app?"
And if the answer is
nothing, fantastic.
Don't put any onboarding in.
You're great.
Just let them in and
let them get going.
Now, if there are some things
like the rules for a game
or like the gestures that
they might need to know,
you want to tell them
just enough to get started
and then get out
of the way quickly.
So think about if you went into
a restaurant, and before you sat
down at the table,
the host said, "OK,
welcome to the restaurant.
I'm going to tell you
every single thing
on the menu right
now in great detail.
And by the way, here
are the things
that I think you should order."
That would be ridiculous, right?
So pushy. You really
just want to come in,
get settled at your table,
peruse the menu at your leisure.
That's the experience
that you're after, right?
So that's what you
need to re-create
in your app or your game.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You want to do that equivalent
of leading people
in to their table.
Maybe you're going to tell them
the specials in a restaurant,
and then let them
explore on their own.
When people launch an app
or a game, they're expecting
to participate, they're not
expecting a long lecture.
So imagine you launched
"Calculator" app
and you saw something like
this, followed by this,
followed by this, oh my gosh.
Now, I'm not going to make
you guys sit through all seven
of these but you can see how
frustrating that would be
if you're faced with a long
list of marketing messages
about an app before
you even got to use it.
I mean, it's a calculator,
right?
So really, resist the temptation
to string together a whole lot
of long list of features
and marketing and hey,
make sure you check
this thing out.
People want to get
in and get going.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
There is no need
for instructions
if the user interface
is intuitive to use
and the functionality
is obvious.
And if it isn't, I suggest
that you spend time reworking
the design, not sticking a bunch
of onboarding screens on there.
If you need to give a few UI
tips, you want to do it quickly
and get out of the
way, but otherwise,
avoid those long
marketing messages, OK?
Now, you always want to
start with the basics
and this is especially
important for games,
which are most often the place
where you need a little
information to get going.
Like with video games
with our App Store games,
you might want the backstory
so you know, you know,
what's the objective
of the game?
Or the backstory makes
it more fun, right?
But think about a
card game that you sit
down to play with friends.
First, you usually go over
OK, what are the rules?
How does play progress?
How do you win?
That's an important one.
And then you might even
try a couple of tips
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And then you might even
try a couple of tips
on strategy all before
you start playing.
So just like that card game,
you start with the basics
and then you build up the
complexity from there.
Because you're not going
to be prepared to learn
about strategies for winning
if you don't understand
how the game is played
in the first place.
Let's look at a great
example, this is "Dots,"
and "Dots" is a puzzle game.
They need just a
little bit of onboarding
to explain how the game works,
and they've also touched
on the inspiration for the game.
They've got this quote here,
"A smart man once said,
'Everything eventually
connects.'" OK.
So the first thing, two
dots, connect them, got it.
Now, a couple more dots.
Now different colors of dots.
[ Game Sounds ]
Pretty basic, but they're
building up the complexity
as you go, and they're
reinforcing everything
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
as you go, and they're
reinforcing everything
with sound and animation
and positive reassurance
as you're going through.
So it is completely interactive.
So that's a great
way to get started.
And now, I know that this seems
like a pretty simple example,
but really, almost any kind
of game benefits from this:
builders, role-playing games,
arcade games, all of it.
Let's take a look
at "Hitman GO."
Now, "Hitman GO" has eliminated
onboarding altogether.
They just put you in
the game right away.
It's a great experience.
But to set people
up for success,
the very basic levels
start - the first levels
that you play start
with very basic actions.
So what's the first
thing you need to know
in order to play this game?
Well, that's how to move
and how to win, right?
OK, we got a straight line,
I only have one choice.
All right, one more choice.
Hooray. Success.
I mean, it was very easy.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
I mean, it was very easy.
It's a no-lose situation,
but that's teaching you.
What's the objective?
I want to get to that big,
dark circle at the end
of the screen, right?
How do I move along the path?
Next, they introduce
you to obstacles.
Again, I've got one
path, and I'm a hit man,
and this guy's back
is towards me
so he was a pretty easy target.
Again, it's a can't-lose
level, but I'm playing the game
and I'm learning as
I go, so it's fun.
It's not onboarding.
I'm playing a game here.
Now as the levels progress,
they get more difficult.
You get choices in your path,
and now your obstacle here
is facing you so that's going
to be a little trickier.
And trust me, it gets
much, much harder.
You get different kinds of
obstacles, more of them.
Trapdoors and things like that.
When you first start
playing, all you have
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
When you first start
playing, all you have
to do is complete the level.
Get to that dark
circle at the end.
But the more you play, the
more challenges you have.
So now, I'm not just
completing the level,
I need to collect the briefcase,
I got to do it in
12 moves or less.
It's getting more complex.
And this is giving
me more challenges
and it's encouraging
repeat gameplay as well.
I mean, because if you had to
start on this level, hoo-wee,
I think that would last
all of about 30 seconds,
and then I'd be off
to find another game.
Now starting simply and building
up the complexity is
called scaffolding.
And that's how you
can set up new players
to have an enjoyable experience.
It's going to keep them
coming back to your game.
But this approach also
works for apps as well.
You want to teach the basic
things, how to navigate
and the general purpose
functions,
before you even consider
trying to teach people
about more advanced operations.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
about more advanced operations.
Now, this is "Yahoo!
News Digest."
It's one of this year's
Apple Design Award winners.
Now, they've got a fantastic UI
as you might have
guessed by their award.
It's intuitive to use, so none
of their onboarding
is covering UI.
Now, the way that
its news works is
that it's a daily
digest twice a day.
And this is an entirely new
paradigm for Yahoo News,
who have quite an
established audience.
So it's really important to
set people's expectations
about the content that they
were going to be seeing.
Otherwise, people
might be confused
about the purpose of the app.
So by putting together
just three short screens
with the supportive
illustrations,
and then getting you right into
the news, they're setting you
up for success in a
different kind of way.
And this approach
is not appropriate
for all kinds of apps or games.
It's really when you're
breaking into a new market
or that you're establishing
some sort of new paradigm
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
or that you're establishing
some sort of new paradigm
that you might need to
communicate just a little bit
about your core concept.
And that's going to help
people understand the products
and quite frankly,
appreciate it, right?
So, just three short screens and
then getting you into the news
because they're going to
get out of the way quickly.
So think about the basic, basic
things that people would need
to know in order to
start playing your game
or using your app.
And think about if any of
them really need explaining,
because again, if you
don't - if they don't,
don't do any onboarding, right?
But if you do, consider
the ways that you can start
with the basics and
build up the complexity.
With games, it's going to be how
to move, what's the objective,
how do you win and
things like that.
And when you're teaching
these things,
make sure you're only
teaching one thing at a time.
It is so much harder to learn
if you're dealt with a bunch
of instructions at
once or if it's -
especially if it's related to
something unfamiliar, right?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
especially if it's related to
something unfamiliar, right?
OK, I'm going to give all of
you guys some instructions.
After this, I want you to leave
Moscone, make two left turns,
then a right down the alleyway.
Go to the coffee shop on the
corner, order two lattes,
one decaf, one low fat.
Put three sugars in the
decaf one and one sugar
in the low fat one and then
bring them back to me here.
Got it? If anyone got
that, I'm looking forward
to my latte after this.
But you can see how
difficult that is.
I'm sure you guys are all
tuned out on step three.
People are going to
be much more able
to follow those instructions
if they're parceled
out one at a time.
So if I said, "Go out of
Moscone, make two left turns,
and then when you
get to the corner,
I'll tell you what to do."
And then I'll say, "Go
to the coffee shop."
And then when you get to the
register, I text you, "Hey,
here's the coffee that
I want you to order" -
this would be so much easier.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
this would be so much easier.
So you want to give
instructions one at a time
and give people a chance
to apply those instructions
before you start teaching
anything else.
So this is "Leo's
Fortune," another one
of our Apple Design Award
winners from this year.
It's a really fun
platform adventure game set
in these really gorgeous
environments.
And their tutorial
level is fantastic.
They first start
to explain the game
with a little bit of backstory.
They introduce you to Leopold.
They let you know he's lost
his fortune and you're going
to help him reclaim it.
So this translates into
"get the gold coins."
Now you got your
objective, right?
Next step is just about
how to hold your device.
They're getting you used to
this idea that the left side
of the screen and the right
side of the screen are going
to do something different,
but they haven't told
you what that is yet.
Just put your thumbs
in this position,
and that gets you holding
the device in the best way.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and that gets you holding
the device in the best way.
Now, once you press your
thumbs in each circle,
then they're talking
about movement.
What do you do with
your left thumb?
Well first, we're
just going to forwards
and backwards, the very basics.
And then you get a chance to
play with that a little bit.
You're going to collect
some coins, go through some
of the cool environments.
And then, a slight obstacle.
Now, there's a little chalk
drawing to help you out
or some words on the right
that lets you know now
it's time you're going
to use your right thumb, here
we go, get up over that ledge.
And then, a chance to play.
They give you things to jump
over, things to jump onto.
And next step, some
more obstacles.
Here, it's about using that
up gesture for something else.
So they're building
up the complexity while teaching
you one thing at a time.
Pushing up on that lever is
going to release the drawbridge,
and then you can
continue on your way.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Then you'll learn about pushing
down and what that does for you.
So "Leo's Fortune" -
one skill at a time,
which is so manageable, and
it's fun because you're playing.
So it's a great example
of scaffolding,
along with "Hitman GO" and
several other examples.
So the first thing you do,
is you learn the objective,
collect those gold coins.
Next thing you're going to learn
about is the optimal
hand position, right?
So they're building up the
complexity with the scaffolding.
And the next thing
that you learn
about is really basic
movement - how to go forwards,
what are you doing
with your left hand?
Next step is obstacles,
which you conquer using your
right hand and various gestures.
And then further in the game,
they start showing you
advanced obstacles or puzzles.
So you can see how the
complexity builds up that way.
Now like I said, the
same thing applies
to apps, it's not just games.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to apps, it's not just games.
You can teach people by doing.
You don't want to show them
a lot of screens upfront.
Now Pinterest - this
is Pinterest,
and they use onboarding
just for a specific feature.
So they have a new guided
search feature, and they needed
to teach people new to the app
and also returning users
how to go about using it.
And they do a great
job of parceling
out this information
one step at a time.
So the first time you
go to the Search tab
after this feature
was introduced,
you get a little
bit of information.
And they've given
you some samples.
And these samples are all things
that I'm pretty interested in.
So they've done a great job
in making this a really
valuable exercise for me.
Now I happen to like nail art,
and so next I tap, they explain
to me how to refine that
search even further.
And then once I've
done some refinement,
they talk about even
more advanced refinement,
free typing in.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And because you're getting this
information one step at a time,
it's much easier to
understand what to do,
and they're letting you
execute on these instructions
so you're really learning.
You're taking it all in.
You're much more likely
to remember this later next time
you go to search for something.
With all of these examples,
it wasn't overwhelming, right?
And you're actually able
to use what you've learned
because you're playing
the game or using an app.
Because people learn better by
doing than they do by reading
or listening when it
comes to apps or games.
"Dots," "Hitman GO,"
"Leo's Fortune" -
they all reinforce what
they're teaching you with play.
And Pinterest was letting you
actually search for things.
It wasn't a canned experience.
Those were real search
terms with real refinements.
So even though this is
a really super easy,
can't-lose level
on "Hitman GO" -
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
can't-lose level
on "Hitman GO" -
[ Game Sounds ]
- it's a lot more fun
than this would be, right?
Now Benjamin Franklin has
a great quote about this:
"Tell me and I forget.
Teach me and I remember.
Involve me and I learn."
That's why you want to avoid
screenshots and modal displays.
Anything that's going to
take you out of context
or prevent you from
actually using the app
or game isn't going
to be as effective.
Again, what if this was the
experience with calculator?
It would be terrible, right?
First of all, the UI is
so dimmed you can barely
see the buttons at all.
Secondly, you don't need to say
tap here, tap here, tap here all
over a touch interface.
It's a touch interface.
You tap. And my biggest pet
peeve is when I see "Click here"
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You tap. And my biggest pet
peeve is when I see "Click here"
on touch devices - ooh,
that really gets me.
Now again, if your buttons don't
look obviously interactive,
redesign your buttons.
Don't put some modal
display letting you know
that you can tap places.
So if you do need onboarding,
make sure that your experience
lets people participate.
And you can use animation
to do a lot of teaching.
It's a really powerful tool.
And there is a lot of great
information about the craft
of the animation in Tuesday's
"Designing Intuitive
Interfaces" sessions.
So if you didn't
see the session,
check out the video,
it's available.
For today, I would just
like to talk specifically
about something that I
see in games all the time:
the giant bouncing arrow.
Now at first, this does
seem like an effective way
to get people through
a tutorial level.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to get people through
a tutorial level.
Great. But then, you know,
while it starts to show people
where to look, it eventually
becomes distracting.
When there's more information on
the screen, you're not looking
at the information, you're just
looking at the arrow and where
to tap and thinking, "I
want to play the game.
I don't want to read
the tutorial."
So you're looking at this
button instead of looking
at what the different characters
are going to do for you.
Why you're picking them.
The strategy of a game, or how
much it's going to cost you
or what the reward
is going to be.
So pretty soon, your game
has gone from, you know,
"happy ice cream fun time" or
whatever to "tap the arrow."
No one wants to play
tap the arrow.
That's not a fun game.
Tap the arrow gets
old so quickly.
Another way you can
kind of think
of it is I don't know
how many of you have pets
but if you've ever tried to
point something out to a dog
or a cat, they often
just wind up looking
at your finger, right?
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
at your finger, right?
[ Applause ]
Yea. So this is exactly what
you're doing with tap the arrow.
People aren't going
to be looking
at what you're pointing
towards, they're going
to be looking at the arrow.
So rather than pointing,
try a suggestive animation,
one that's going to help lead
people's eye to the right part
of the screen or let them
know what they should do.
This is a really basic
example but it's a good one.
With "Hitman GO," you don't
need an arrow or a graphic
or some other kind of bouncy
arrow thing to let you know
that this is a button in
addition to being the name.
That pulsing animation
draws you to it.
It makes you want
to tap it, right?
I mean, they could have had
an arrow pointing, "Tap here,
tap here," but you
don't need to do that.
So that's what I mean about
using animation thoughtfully.
I hope I look forward to seeing
far fewer bouncing arrows
in the future.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Now, if you do need your
onboarding, another thing
to keep - be wary of is
there is no need to point
out any platform conventions.
You only point out
the unconventional
because everybody knows
there is another screen
of app icons available
in this folder.
The paging dots take
care of that for you.
You don't - you wouldn't need
to put an arrow or some text
that says swipe to the
side to see more icons.
It would be ridiculous.
Similarly, you don't have
to tell people that tab bars
and toolbars are interactive.
They instinctively
look that way.
Or that you can swipe
for more content
because the content bleeding off
the edge does that job for you.
And that's really one of
the greatest advantages
of using platform conventions.
People will just instinctively
know how to interact with them,
so you won't need any onboarding
for these type of things.
You only want to point out
anything that's distinct
and unique and unfamiliar
to your audience.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and unique and unfamiliar
to your audience.
Now, another thing to be wary
of is forcing people to go
down a secondary path that
they may not want to take.
So think about a
photo application.
I don't want to be
forced to crop an image
if I don't think it
needs to be cropped.
If I don't want to
apply a photo filter
to a photo, I shouldn't have to.
This is my app, I want to
do what I want with it.
Similarly, with music
applications,
it's great to show people how
to make a playlist or a station,
but don't make them market a
favorite if it's not a favorite.
That's just frustrating.
Now, when it comes to
text like I said before,
shorter is always better.
We know that people
are not inclined
to read really long
passages unless it's a book,
so make sure your language
is short and clear.
Avoid jargon and acronyms
or insider language
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Avoid jargon and acronyms
or insider language
that may not make sense
to someone who's
new to your app, OK?
This is my favorite example,
"JUKELY," and they're talking
about their notifications.
It's so fun, a mixtape
from a stalker.
I'm excited.
I mean, this text is clear,
it's friendly, it's entertaining
as well as being educational.
So here are some
things you can think
about when it comes
to writing your text.
Ask yourself these questions.
Could the text be shorter
or could it be clearer?
Will the text make sense
to someone who's new
to the application, because
you look at your app all day
and all night every day, so you
really need fresh perspective,
and what will someone
unfamiliar with your app think?
Is the message too complicated?
If it is, you can make it
simpler, or maybe you need
to change your approach
altogether.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to change your approach
altogether.
Or would images work
better than text?
There's our phrase, "A picture
is worth a thousand words."
Sometimes, it's just easier
to do it with a drawing,
like with "Leo's Fortune."
That little chalk drawing
is much - is a quick read.
You can hop up and go on your
way as opposed to saying, "OK.
When you get here,
lift your thumb up so
that Leo will hop
over the ledge."
That would be ridiculous.
And make sure that it feels
like an extension of your brand,
because onboarding is going
to be the first experience
that somebody has
with your app or game.
It's kind of like a
wedding invitation
or a party invitation.
It's going to set the tone
for the entire experience,
so make sure it feels
exactly like your brand,
like the personality
of your app.
And this is a very
important one:
Always give people
an option to skip.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Always. If you saw the lunchtime
session yesterday, Natalia talks
about the dark days
of the interwebs
with the big crazy flash intros,
and all people wanted was
"skip intro, skip intro."
And that's exactly what
we're talking about here.
You don't know if someone has
used your app on another device,
if they watched their friend
use your app, or quite frankly,
if they're just impatient
and want to get going.
If people don't want to watch
your onboarding no matter how
awesome it is, don't make them.
And finally, learning should
be an enjoyable experience.
It's going to be pleasant.
Again, it's your first
impression of the app
or the game, so you want to
make sure that it's a good one.
Let's take a look at "Flight,"
which I think they have a really
great onboarding experience.
That Close button up there
is your option to skip.
And the UI is based
solely on gestures,
and so that's why they
wanted to give some -
just a very brief
onboarding explanation.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
just a very brief
onboarding explanation.
The text invokes
the joy of travel.
It's just a few short screens.
The visual design matches
every other aspect of the app.
And when you're all done,
you tap "Ready to fly,"
and you get a nice
little animation.
Fun, right?
Enjoyable, short and pleasant.
So make sure if you need
to provide onboarding
that you're doing
in a way that's fun.
Nobody likes a long
boring lecture.
So these are the things
that you need to strive
for if you need onboarding
- if you need onboarding.
Now, whether or not you
have an app or a game,
one thing that's always a
challenge is how to teach people
about gestures or
gyroscope enhancements,
anything that doesn't
have some sort
of visual representation
in the UI.
So let me give you
a few tips about how
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to make the invisible visible.
And the first one is
using animation cues.
Now I know none of you are going
to make a big bouncy arrow,
but there's a lot of
things that you can do
to convey the interactivity
or the gestures
in a very elegant way.
You'll keep people focused
on the UI, not on the cues.
This is "JETSETTER."
It's an app that specializes
in luxury hotels and resorts.
And they've got tons of amazing
photography, which is one
of the things that sets them
apart from their competitors.
This gentle drift of
the photo lets you know
that it's interactive,
that you can touch it
and explore different aspects
of this stunning kitchen.
It invites you to touch it.
Now, the Withings health tracker
app uses horizontal movement
to show that the
screens are swipable.
So that - and if you don't
swipe it, it will auto-advance.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So that - and if you don't
swipe it, it will auto-advance.
And they've got a nice rewind
page flip type of animation
at the end so that you know
you've hit the last item,
and then you can flip
through for anything you might
have missed.
And those are just some of the
ways that you can use animation
to really help encourage
people or explain gestures
or other aspects of the UI.
And again, there were
a lot of tips on this
in Tuesday's session,
so make sure to check it
out if you didn't
already see it.
Now, another effective teaching
tool is temporary hints.
Just really quick
tips about gestures.
This is "Yahoo!
News Digest" again, and
as I showed earlier,
their onboarding is all
about the core concept.
So instead, once you get
into the UI, they don't need
to tell you about
that ahead of time,
but they give you just a couple
of animation cues
and temporary hints.
So tapping on an article
headline has a horizontal
animation and then that
short message about swiping.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
animation and then that
short message about swiping.
So if the horizontal
animation didn't do it for you,
this message, which only
appears for two seconds,
makes it abundantly
clear that you can swipe
from article to article.
And you'll notice, they
didn't force you to swipe.
Because I might be interested
in reading this article.
They just want to make sure
you know how to navigate.
"Lightly" has a different
approach.
It's a photo editing
application,
and the first time you use
it, they give you hints
about gestures with short tips.
So here, I've just selected the
Argyle filter, and so what comes
up is a message about
adjusting the intensity.
Now, I just want to point out,
they don't actually force you
to adjust the intensity.
Any other - any place that you
tap will dismiss that hint,
whether it's adjusting
the intensity,
picking another filter from
the bottom or using any
of the other controls.
So in addition to
displaying temporary hints,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So in addition to
displaying temporary hints,
you can also think about
providing controls for people
to turn them on, and
this is what we do
in "GarageBand" on iOS.
Now, this is something
that's more appropriate
for deeper applications.
Not every app warrants this.
And you can come in and just
start playing these drums
and going nuts without
any assistance at all,
but if you want to know
more, get a deeper knowledge
about drumming, because it's
sort of a specialty case.
If you want to become
a better musician,
then using that question mark
button up in the corner turns
on these non-modal tips,
so you can keep playing the
drums while you're reading more
about them.
And without those non-modal
tips - without these tips,
you might not realize that
you can get different sounds
out of the hi-hat based on where
it is that you're tapping it,
or that a single tap will
play the crash cymbal
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
or that a single tap will
play the crash cymbal
and the bass drum together, but
a two-finger tap is what results
in just the crash cymbal.
Or you wouldn't know
that the speed
of the drum repeat is
determined by the distance
between your two fingers.
All really useful.
So if you think you
have an audience
that wants a deeper knowledge
or needs extra guidance
on a specialized subject,
this could be a good method.
And it's really important that
you can continue to use the app
so that you can learn by doing.
You can put it into
practice right on the spot.
Because all of these
approaches work best
if they're shown in context.
It's important that when
you're demonstrating gestures,
you want to do it
right in the moment
when people can experiment
with them
so that they're learning
by doing.
So now, I would like to address
a dirty word in iOS UI design.
Help. Help.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Help. Help.
Nobody wants to think
they need help,
or nobody wants to ask for help.
And as a designer, I certainly
hope that every aspect
of my UI is intuitive
to use to every person
in every scenario no
matter what their needs.
But sometimes, this
is hard to achieve.
I mean, people have
different experiences,
different backgrounds.
They come from different
cultures.
They may have a lot
of experience
with the Apple platform but not
with iOS or specialty knowledge.
Like, I can navigate
around just about any app
on the Apple platform but
I'm not a good photographer.
So all those filters
and photo effects,
I don't know what
to do with them.
I don't know when I should
use them, how they're going
to make my pictures better.
And that's where help
can be very handy.
But it's not so as to feel like
a lecture from a mean teacher.
Or boring.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Or boring.
Nobody wants boring.
We're moving away from that
large reference manual, right?
It should feel more like this.
Just making things a
little bit easier on people.
Or maybe like support from
a friend or a family member,
just giving you a
couple of tips,
because I'm definitely
not suggesting
that you add a huge reference
document to your app.
There are a lot of ways
that you can provide help
without people even
realizing that they got any.
One of the easiest
things that you can do is
to put instructions in
your empty containers.
Rather than just saying "no
results for search" or "nothing
to see here," you want
to keep an empty view
from being a dead end.
If it all possible, let people
know what to expect here or how
to get out of this
dead-end situation.
So in iMovie for iOS,
there is a theater view
where your completed projects
go so you can view them.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
where your completed projects
go so you can view them.
Now, before you create
any projects,
there is nothing to show here.
So the message lets you know
exactly what you're going
to find here in the future,
and then they tell you how
to get started making
a product -
project so that you can have
a movie here really quickly.
And it's worth pointing out that
both the message and the icon
in the navigation
are interactive,
so you can get going quickly
while you're learning the UI.
And this same approach can work
for empty input fields too.
Placeholder text can
be super informative.
This is "UpTo," which
is a calendar app.
You can of course manage
your own appointments,
but one of the things
that's cool about "UpTo" is
that you can also subscribe
to other people's calendars,
and the other people
can be your friends,
or it can be Barack Obama.
And they have tons of
calendars available in here
so you can browse to
find the ones you want,
but you can also search,
and that Search text is very
suggestive in terms of the type
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and that Search text is very
suggestive in terms of the type
of things that you might
want to put in there.
Now, I got the impression from
the graphic that I could search
for sports teams, but I didn't
realize I could just type
in San Francisco and see all
the listings for San Francisco.
It's very helpful, and it
didn't feel like help, right?
I didn't even realize
I needed any help,
but yet I've learned
something new.
You can also think about showing
supporting information right
inline, and we do this with
settings - not all settings
because they don't all need it.
Date & Time is a pretty
universal concept;
there is nothing
else to say here.
The Dial Assist, well,
some people might have some
questions about what that is.
So there's just a little bit
of more information
right in that moment.
Again, it didn't feel like help.
And with games, "Leo's Fortune."
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And with games, "Leo's Fortune."
That chalk drawing is
giving you that little hint.
And they don't just do this
in the tutorial level -
it's throughout the game.
In fact, showing information
inline is often a great
alternative to onboarding
altogether.
You don't have to tell
everything up front.
Just put the extra information
inline so it's there right
in that moment that
people need it.
Now, another great approach
is to watch for indications
that people are stuck.
Now, when it comes to games,
though, you have to be wary
about over-helping people
because it's a game,
nobody enjoys having the
puzzle solved for them.
That's not fun.
You want to give people a
chance to play all on their own
and then watch for clues
they might be stuck.
And that's when you
offer the help.
With "Leo's Fortune," if you
try a number of times to get
over this very basic obstacle
and you don't make it,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
they give you the option
of onscreen controls.
Again, they only
do this if it looks
like you're struggling
with that first jump.
"The Room Two" also
has a great approach.
Now, if you haven't played it,
it's a mystery puzzler game.
You're stuck in this room and
you follow clue, after clue,
after clue to make your escape.
Now, if you've been
struggling for a long time,
and you still didn't manage
to accomplish the next thing,
they give you this
question mark button.
And this is great because it's
giving you the option of a hint.
Because it's true,
I might be stuck,
or I may have been distracted.
My dog may have started barking,
or someone needed something
and walked into the room.
So that's really good because
they're not solving the puzzle
for me.
However, if I am really
stuck and I'm at the point
of walking away, it's
enough to keep me engaged,
to keep me moving forward.
And instead of giving away the
answers, they give you clues
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And instead of giving away the
answers, they give you clues
so you don't have
to feel guilty.
It doesn't have to
feel like cheating.
You don't have to feel
bad about it, right?
And this doesn't devalue
the achievements of people
who didn't use the clues.
We're all going to
get to the end.
Some of us are going
to get there faster,
but this works out really well.
Everyone can feel really good
when they finish the game.
And these kind of hints can
be helpful with apps too.
This is "Sky Guide," another one
of this year's Apple
Design Award winners.
You can pan all around the sky
and see the constellations,
planets, comets, all sorts
of stars, and they have a ton
of information about almost
anything in the night sky.
Now, you might think that
tapping on a star is the way
to get that information,
but that would make it a
little too easy to navigate
into the details view
- if you're going there
on accident then you'd
be getting frustrated.
So instead, the right way to
get to that information is
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So instead, the right way to
get to that information is
by selecting a star and
then tapping that "i" button
on the right side of the screen.
And if you tap a star
again to try and select it
or get more information,
you get a pulsing animation,
and that glow calls
attention to itself.
They're using animation
to attract your attention.
And that's really elegant
because if you double-tap
a star thinking oh,
maybe I didn't tap hard enough
or maybe I need to tap twice,
they pulse every time you
tap, to get your attention.
So they're keeping an eye
out for you that you're stuck
and trying to pull you
in the right direction,
get you back on track.
And all of these tips that
I've shown you are really just
about anticipating
people's needs.
Telling people what they
need to know in the moment
that they need to know it.
Think about the restaurant again
that I talked about earlier.
You don't want to see the
dessert menu before you've been
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
You don't want to see the
dessert menu before you've been
seated or while you're
eating your appetizer.
You want it when you
finish your meal.
And when you have good
service at a restaurant,
it means the wait staff is
there when you need them,
and they're not there
when you don't.
And that's exactly the
approach you want to take
if you've got help inside
of your application.
And "Secret" is really
one of the best examples
that I've seen out there.
It's an anonymous
social networking app.
So what this means is that you
see posts from your friends,
but you don't know who they are
because everything is anonymous.
That's a really interesting
way to interact with people.
Now, the first time your feed
loads, they're explaining
in a moment exactly
the information
that you need to know.
So here, I'm scrolling
through my feed,
and I don't know
anyone in the UK.
Oh, it's traveled
across friends.
Speaking of friends,
where are my friends?
Oh, I didn't have
my phone number yet.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Oh, I didn't have
my phone number yet.
Shoot. And what's the
star mean, I wonder?
It's a popular one.
And when you go to Comments,
they explain why there
are all these icons here.
They're just letting you know
about commenting because that's
where you are in the app.
They're not telling
you about navigation
or what does the star mean
and things like that -
they're focused on commenting.
And it's worth noting that
they're just giving one piece
of information at
a time as well.
And if you're the
first to comment,
they've populated their
empty view with information.
You know that comments
are going to be there.
This little gentle push
should be the first one,
and I just love that the
placeholder text encourages you
to say something kind.
It's great.
So think about what people need
to know based on where they are
in your app or game, how
long they've been using it,
and anticipating people's
needs is just another way
that you're going to
be able to provide help
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that you're going to
be able to provide help
without it feeling like help.
And be sure to take the
opportunity to inspire people
like "Secret" did with
"say something kind."
Now, a lot of people use Siri
to set reminders or send text
or check sports scores,
things like that, but remember
when you found out that
Siri would answer questions
like this?
I mean, all of a sudden, this
convenience feature is a source
of entertainment as well.
It's unexpected and fun, and
now Siri is more valuable to me
because she's not just
a utility anymore.
She's comedy.
She's flattery.
It's great.
People might come to your app
with a certain expectation
about getting one thing
done, but when they discover
that your app can
do more for them,
well then the app becomes
even more valuable.
It's going to feel
like a bonus prize.
And that's why with Siri, we
give you a lot of suggestions
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And that's why with Siri, we
give you a lot of suggestions
of things that you can ask her.
You just tap that question
mark button and you're going
to get a long list of things
that you can ask Siri.
And you may have known that you
can use Siri to initiate calls
or have her make an
appointment on your calendar,
but did you know that she also
will book restaurants for you
or tell you movie times?
I mean, this list goes
on, and on and on.
"Path" does it with some
of their onboarding.
And they're a private social
network, so they really need you
to register because
everything is oriented
around your personal
information.
But before registering, they're
giving you a series of screens
that covers both the
features of the apps
but also how you might
want to use them.
A lot of people go to "Path"
thinking they're going to use it
for work, but now, they're
going to be thinking
about how they can use it
in their personal life, too.
Or with Pinterest, they've
got a similar approach.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Or with Pinterest, they've
got a similar approach.
I mean, maybe you
came to Pinterest
because you were interested
in nail art or wanting recipes
for a dinner party, but
now you're also thinking
about gardening.
And then you're thinking
about what else Pinterest
can be used for.
So step away from that
traditional idea of help,
reference manuals, and think
about how you can
anticipate people's needs.
Putting instructions
in empty containers
and showing supporting
information inline,
it's about telling people what
they need to know in that moment
that they need to know it
- like the perfect service
in a restaurant, there
when you need them
and invisible when you don't.
When you're doing all
of that, don't forget
to take the opportunity
to inspire people,
because that increased
knowledge,
that increased utility
about your app,
it's going to mean
increased value.
So if you only take a few things
away from this talk today,
in summary, only require
people to register
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in summary, only require
people to register
when it's absolutely necessary.
Ask yourselves if you really
need onboarding at all.
If they don't need any
information before getting
started, then just let them
get started, otherwise,
tell them what they need
to know and then get
out of the way quickly.
Teach through actions
because people are going
to learn better by doing.
Anticipate people's
needs, and don't forget
to take the opportunity
to inspire.
Now, I hope that you'll leave
today with a new impression
about help and how it can
work in your apps or games
and that I hope that I've
inspired you all with how
to make a great first
impression.
So this is my email, and I
would genuinely like to hear
about changes that
you make to your app
and how that's changed
the overall experience.
We've got a lot more
information about design
at the developer.apple.com.
And if you didn't see either of
these two sessions on Tuesday,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And if you didn't see either of
these two sessions on Tuesday,
the videos are available.
We've got the "Ingredients
of Great Games," which is
about making a great game,
and then "Designing Intuitive
User Experiences" has all
of those animation tips.
Thanks so much.
[ Applause ]
[ Silence ]