Making a Great First Impression With Strong Onboarding Design 

Session 230 WWDC 2014

Learn how to effectively introduce new users to the capabilities and features of your app or game in a way that will draw them in the very first time and then keep them coming back.

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.

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.

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.


[ 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.

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 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 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 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.

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 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 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.

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.

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 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 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.

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.

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 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 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.

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 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.

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 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?

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.

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.

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.

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.

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.

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” – [ 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” 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.

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?

[ 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.

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.

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 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.

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.

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.

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 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.

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.

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, 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 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.

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.

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.

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 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.”

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, 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 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 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 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.

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 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 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.

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 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

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 ]

Apple, Inc. AAPL
1 Infinite Loop Cupertino CA 95014 US