Designing Intuitive User Experiences 

Session 211 WWDC 2014

Learn about the key concepts and principles that will enable you to make your app intuitive and approachable. Gain insights into how you can harness UI animations to help people stay oriented, get clear and meaningful feedback, and navigate with ease.

Hello everyone.

[ Applause ]

So I’m Mike Stern.

I’m a User Experience Evangelist at Apple, and thank you all for coming.

And sticking around, after a really long day of very technical content.

Now, this presentation is going to be a bit different, right?

This is about design.

And in particular, it’s about designing intuitive interfaces.

I’d like to start with a little exercise.

Imagine if you will that you’re at your house, and you’re in your kitchen, and the phone rings.

And the person on the other end of the line has some really exciting news for you.

They tell you that you’ve won some money.

Not just a little bit of money, but like a lot of money.

And they also tell you that in order to claim your prize, you need to call a phone number.

And then, they hang up the phone.

And so you’re sitting there in your kitchen, and you need to write down this phone number.

And you need to write down this phone number before you forget it.

So you’re looking around for something to write with.

Your iPhone is not around, right?

And you’re casting around, and you’re starting to get a little panicky because you really want to remember this number, and right before you forget it, you see a pen and a piece of paper, and you write down the phone number.

So that’s a pretty simple scenario, right?

That was the end of the story, by the way.

[Applause] Thank you, thank you very much [laughter].

So you had this very clear objective, which was to write down this phone number, and you found a pen and a pad of paper with which to accomplish that task, and then you wrote down the phone number.

And that was it.

Well, it’s not really quite that simple.

You were under pressure.

You were stressing out a little bit, and when you’re stressed out, that can affect your memory.

And it can affect your ability to perform basic cognitive tasks, such as remembering a phone number and writing it down.

Or picking out a pen from a bunch of similar objects, things that look just like a pen.

And assuming that you can remember the phone number, and find the pen and paper, and write it down, you have to also consider, what are all the skills that are necessary for you to write?

For starters, writing involves a lot of coordination and dexterity.

Just ask a 3-year-old.

They totally suck at writing [laughter].

And so did all of you, and so did I, when we were that age.

We went from writing like this to writing like that.

Or at least something like this.

Writing with a pen takes years and years of practice, and there’s all of these small little skills that you need to learn along the way.

They’re so fluid and natural to you now, but they weren’t always so easy.

You had to gain the eye-hand coordination to be able to pick up and manipulate small objects.

And it took years to learn how to hold a pen properly, and position your wrist on the table, and your arm for stability.

You had to learn how to draw basic letter forms.

Or write along a straight line.

You needed to learn the difference between upper case and lower case letters.

The list goes on.

But you don’t think about any of those things when you’re sitting in your kitchen and writing down that phone number.

All of those years of writing with different types of pens and pencils and markers and crayons have given you this tremendous amount of muscle memory.

And that muscle memory frees you to remember something like a phone number.

If you had to consciously remember all of those individual skills, it would be pretty difficult for you to have accomplished that task.

In other words, it’s easier for you to have written down and remembered that phone number because the act of writing is so intuitive.

Using software is no different.

The more apps behave as we expect them to, the more intuitive they are to us.

The more intuitive apps are to us, the easier it is for us to concentrate on our true objectives, whether that’s communicating with friends, capturing memories of loved ones, checking the weather, or exploring the cosmos.

The very best user interfaces are so intuitive, so natural, that they just sort of disappear, and allow us to focus on what truly matters.

That is what we call intuitive.

So with that in mind, what makes an app intuitive?

Well, I’ve put together a list of what I believe to be the top five characteristics of intuitive user and interface designs.

And this is not an exhaustive list.

We could be here for hours and hours and hours talking about all of the things that makes something intuitive.

We would order pizza, get drinks, it would be a lot of fun.

But unfortunately, we don’t have the time for that today.

This list of five things I think are the most basic and essential characteristics of what makes an iOS or Mac app intuitive.

And I also want to point out up front here that what’s intuitive to one person may not be so intuitive to others.

I mean, this is intuitive if you’re an airline pilot.

Every button, every switch, every display is there for a very good reason.

You know where everything is.

Totally natural.

I’m pretty sure this doesn’t work [laughter].

I also want to point out that these are the most fundamental things.

The most basic things.

But design is just like anything else in life.

I mean, sometimes the most basic things are the most important.

The most consequential.

I’ve been designing for many years, and I’ve seen time and time again, even the most seasoned, the most experienced designers, who make poor quality designs because they’ve lost sight of the fundamentals.

Now, in order for a pen to be intuitive, it needs to get some very fundamental or basic things just right.

It needs to be wide enough to grip firmly, but not so wide that it can’t be manipulated easily.

If a pen is too thin, or too wide, it becomes intuitive because we become aware of it.

We’re trying to think how are we going to write with this pen?

It doesn’t feel quite right.

Or if a pen was too short, we would not know how to hold it, right?

We would pick it up with our fingertips and we’d be writing with it, it’d be going all over the place, and what we write wouldn’t look very good.

We’d be very conscious of the pen itself.

Or if a pen was too long, there’d be an opposite problem.

The top of the pen would be swinging all over the place, it would feel heavy, our hands would strain.

Again, we’d be very conscious of the pen itself.

Designing a pen to have the right diameter, or the right length, seem like pretty basic and obvious things, right?

Yet, there are countless pen and app designs that fail because their designers have lost sight of these fundamentals.

And before we dive in, I’ll just say one more thing, which is that being intuitive is not very intuitive.

It’s actually pretty difficult to do.

You have to understand the fact that you’re not designing just for yourself.

You’re designing for other people.

And those people, they don’t know the things that you know.

And they frankly probably aren’t as passionate about your app as you are.

So they’re going to tend to be a bit impatient, easily frustrated, fickle, right?

Designing an intuitive interface isn’t possible until you can get out of your own head.

You need to recognize your own assumptions about things.

About who the people you’re designing for are, what they’re trying to accomplish.

What they know, what they don’t know.

You need to see clearly, and you need to hear clearly, and figure out what it is that you can do to help them succeed.

If you can do that, you will have done an amazing thing.

People will appreciate the fact that you cared enough to make a great user experience.

So let’s dive in, and find out what the top five characteristics are, starting with platform savvy.

Now, let’s go back to pens again.

You see this particular pen, but you’re not going to have any trouble writing with it, because you’ve used thousands and thousands of pens before, and those experiences, writing with all those different pens, has given you this generalized understanding of how all pens work.

They have shaped your expectations, and they’re going to influence your behavior.

And when you pick up that pen, and you write with it, sure enough, it works like you expected it to.

And if it didn’t, you’d become frustrated.

When someone uses your app for the first time, they do so with all sorts of expectations about how it’s supposed to work.

Now, these expectations are formed and affected by so many different factors, but the most important of those is that individual’s experience using other iOS or Mac apps.

Those could be ones that were built into their device when they purchased it, or they could be ones that many of you here today have made for them.

Now, let’s just take a look at an example.

Swiping a table row to reveal some actions.

In particular, let’s look at swiping a table row to reveal some kind of Delete button or Trash button.

Now, we’re all really familiar with this.

And we first encountered it maybe with Mail, and we thought, hey, that’s kind of neat, right?

I don’t have to go open the E-mail to see the Trash button so that I can delete it.

I don’t have to go into some kind of edit mode, I can just use a gesture to delete it right away.

And after doing this a couple of times, well you got into the habit of it.

You started to learn to expect this behavior, this interaction.

Now you open Notes for the very first time.

Never seen this before, and, you know, notes looks a little bit different from Mail, but not completely different.

There’s some similarities.

Like Mail, everything is arrayed in a scrollable view, and there’s these little gray lines that separate them, and you know, you figure that like E-mail messages, Notes can be deleted.

So you think to yourself, well I should be able to swipe to reveal a Delete button.

You don’t even have to think about it.

In fact, you probably don’t.

You try swiping to delete, because unconsciously you believe that it should work.

Intuitively, you think it should work.

And when it does, you’re rewarded with the outcome that you expected.

And if it didn’t, you would be frustrated.

You would say “why did they not do that?”

It makes so much sense, right?

You now have to figure out how you’re going to delete a Note.

Swiping to delete is a platform convention, and it’s among thousands and thousands of different platform conventions that iOS users have come to expect.

And not only do they expect swipe to delete to work in whatever situation it would make sense for it to work, they expect every aspect of that interaction to match their previous experience.

From the sense of direct manipulation, to how far they need to drag the row to reveal the buttons, maybe even the color and the size of the button itself.

Any deviations from these things, no matter how small or insignificant, could be incorrectly perceived by them as being meaningfully different.

Or maybe they just get this vague sense that something’s not quite right.

Being consistent with platform conventions, in other words, is a very good thing.

Gestures like pinch, swipe, pan, tap, they should work in very consistent ways, no matter what type of app we use.

Same is true for controls, like switches or buttons, or navigation bars, tables, and tab bars.

And there are also powerful conventions about the labels that we use to convey certain actions, or the icons that we use.

Now, this symbol may have not been immediately familiar to you the first time you saw it, but after you shared something a couple of times, you started to get a sense of what that symbol represents.

You know what kind of functionality is accessed by tapping that button.

And these conventions that exist, at least for iOS and Mac, are not at all arbitrary.

Swiping to delete isn’t just intuitive because of the thousands and thousands of apps that support that same interaction.

It’s consistent, or sorry, that’s a part of it, but it’s not the whole story.

It’s intuitive to us because it’s like the real-world experiences that we all share together.

It’s like crossing something off of a list, or you know, being a 2-year-old and eating food and swiping it out of your way.

Right? You don’t want it anymore, so you’re going to swipe to get rid of it.

There is countless, countless conventions that exist for any platform for which you’re designing, and it’s important to recognize what those conventions are, because that’s what people are going to expect.

But sometimes it’s necessary to break those conventions.

Now, this is actually not that common, but maybe you’re designing an app that’s never existed before.

A new type of experience.

Or you’re designing for a new type of user, a new type of scenario, or context?

Maybe you’re just trying to solve a problem that we, at Apple, or other, you guys have never tried to solve before, right?

So there is no precedent to follow.

Now, if that’s the case for you, you have a responsibility to tell people, to inform them that you have decided to do something different with your app.

Now, let’s take a look at an example.

This is Leo’s Fortune.

We saw that it won ADA yesterday.

That’s Leo, up there, on the wooden scale.

Now, as you can see, there’s only one button on the screen, the Pause button.

Everything else is done through gestures.

And these gestures, they’re intuitive, but they’re not standard.

They’re not really obvious.

So the game provides instruction.

It teaches you about them one at a time.

You use your left thumb to move left and right so that he moves forward and backwards.

Or you swipe up your right thumb to inflate Leo so that he can hop over obstacles like this ledge.

These are non-standard interactions and the developers of this game knew that they had to educate people about them, or else players would be confused, and they would become frustrated, quit and delete the game.

Wouldn’t be a very good experience for them.

Now, that’s all I’m going to say when it comes to onboarding and help today, because we have an entire hour dedicated to this topic.

It’s a really great presentation, and I encourage everyone here to go.

It’s Thursday, in the Mission.

I’ll see you there.

The next characteristic of intuitive user interfaces is that they’re easy to navigate.

Now, intuitive navigation systems do three things really well.

First, they just tell you where you are.

The clock app, with its tab bar, does a really good job of that.

Makes it perfectly clear what your location is.

And I’m sorry it’s so low on the screen, I know everyone is going to have to crane their necks in order to see it.

Now apps that use a Navigation Bar and have a title also do a really good job of telling you where you are.

The title serves that purpose.

The next thing that they do is they show you where else you could go.

They show you what your options are.

So the phone app, again with a tab bar, does a very good job of it.

It just means having everything on screen and visible.

Pretty simple.

And the third thing that they do is they explain what’s there.

Meaning the navigation system informs you about what’s contained within each section.

You don’t have to go to every single section to figure out what’s inside.

So let’s take a step back for a second, right?

Why do we need navigation to begin with?

We need navigation because there’s way too much information and functionality in any given app to display on screen at one point in time.

So we group things together.

Make these categories, or sections, and these categories that we come up with, they need to be understandable and logical to people who are using your app.

It shouldn’t feel like a mystery what’s behind or what’s inside of each of these category labels.

So the phone app succeeds because each of these icons and labels that’s used makes the content inside self-explanatory.

Meaning, it provides a good explanation of what types of key information or functionality is contained within each section of the app.

So in other words, intuitive navigation systems answer three basic questions.

Where am I?

Where else can I go?

And what will I find when I get there?

Now, these seem like really basic things, right?

Everyone here is kind of smirking, it’s like totally obvious.

But it turns out that designing a navigation system that can accomplish these three things well is pretty challenging to make.

So with that in mind, I have a few tips for you about how you can make your navigation system really intuitive.

Starting with progressive disclosure.

Now, if you’re not familiar with what this term is, it’s pretty simple.

It just means not showing things to people until they actually need it.

Now, you do that by kind of creating a little bit of a deeper hierarchy, or adding a few more steps in a process.

Now this seems like it might take more time to get to your destination, or get the outcome that you’re after, but it’s worth it.

Because it makes decision making simple and un-intimidating at every stage of the process.

So ultimately, you’re able to get to your destination more quickly and more confidently.

Unless, that is, you use category names that aren’t logical, or not meaningful.

So in this situation, if you’re reading the slide, we’re picking a mode of transportation for getting from one place to another.

And if we’re doing that, the first choice that we have is do you want to go by air or do you want to go by land?

Now, that makes a lot of sense, right?

Those things are kind of mutually exclusive choices.

And these labels are pretty good because if we’re going to go by air, we figure that one of the items in that category is going to be a choice to go by airplane.

Or if we’re going by land, we’re going to have the options to go by car or maybe by rail.

We don’t know all of the choices that are contained inside, but we get an inkling.

We get an understanding about what things are contained within.

Now, if we decide to go by land, we get the second choice.

This is a disastrous set of labels for us.

Now, we can go take a mode of transportation that uses fuel, or it doesn’t use fuel, but now all of a sudden we’re thinking about, well okay a car uses fuel.

But if I want to take a train, does that use fuel?

I mean, it’s like, steam power?

Fuel? Or coal?

Right? What if it’s electric?

What if I’m taking light rail, you know?

Maybe that’s no fuel, I mean it’s electricity, but it could be solar powered, or wind powered, or nuclear powered.

Instead of getting to where I want to go, I’m asking all of these esoteric questions about the nature of fuel and the meaning of that word, right?

These are not very good labels.

That uncertainty is causing hesitation, and it’s making me aware of the interface itself and trying to decode it.

Again, use progressive disclosure, but make sure that it doesn’t feel like you’re trying to figure out what’s behind door number 3.

Now, the next tip I have is about being predictable.

Everyone likes surprises, right?

Except when it comes to navigation.

With navigation, we do not like surprises.

When navigation changes on us unexpectedly and in ways that we can’t explain or rationalize, we can get really confused and tripped up.

So let’s take a look at how this can happen.

So let’s say we’re making a banking app, right?

And we have a few choices to select from.

And then once we register and then log in, there’s a few other sections that are added.

So the navigation has changed, but I guess I can explain to myself why things changed in the way that they did.

Or maybe the bank decides they’re going to add this awesome new feature of giving away free cash, right?

I want to bank at this bank.

This is a great feature.

So they put it right at the top, because they think their customers are really going to love it.

But then someone comes to their senses and decides that they’re not going to be able to give away that feature of free cash much longer, so they de-emphasize it and they reduce its visibility in the list by pushing it to the bottom.

So it’s changed.

Or let’s say we looked at the analytics of the app, and we’ve talked to all the people who are using it, and we figured out that people really want mostly to find locations or figure out how to contact the bank, so we move that stuff to the top.

Now there’s hundreds of reasons why navigation can change.

Some of them are good, some of them are bad or just terrible, but whatever the reason is, there’s always this downside retraining people on how to do something that they’re familiar with, takes time, and it can be really frustrating for people.

I mean I think we’ve all had this experience where we’ve been going to like a website or using an app for a very long period of time, and then it was redesigned, and all of a sudden we’re thrown off.

We have to study the interface and figure out where things went to.

We had just been used to pressing the red thing over there, right?

We weren’t even reading the label, and now we have to study it, and figure out where that went to.

Even the smallest changes can really trip people up.

So by all means, change your interface when you need to, but do it carefully, and don’t do it frequently.

Now, the next point is really obvious.

But it’s worth talking about anyway, and that is that selection needs to be immediately obvious.

On iOS tab bars, for example, we use color to show selection.

And we also use shape.

So on the left-hand side, you can see sometimes icons get filled in, and on the right side you can see that sometimes they get thicker.

Now part of the reason for this is that it makes it easier to show the selection color, to see the selection color, but there’s another reason for using a thicker or filled in shape.

So let’s take a look at the clock app again.

Now we can all see, unless you’re sitting in the back, that the world’s clock is selected.

It’s very obvious right?

Well let’s say we didn’t have enough time to design a totally different set of icons for the active or selected state, so instead, we just use the off state, but we tinted it red, and we put that into the interface.

Well, right off the bat, you can see that selection is a lot less obvious.

And it’s really not obvious if you’re color blind.

Now, just as a common practice, something to always remember to do.

Take screen shots of your app, bring them into the graphic design tool of your choice, and desaturate them, and make sure that you can still clearly see state and selection.

This is a really important thing to do.

With the filled in tab bar icon, it’s still at least possible to see what selection, if the color red looks like gray to you [applause].

See. And even if you can see every color of the spectrum just fine, using a filled-in shape makes selection more obvious for all of us.

This is a case of doing the right thing for accessibility and improving the experience for everyone.

Next, navigation systems that are intuitive maximize continuity.

Now, in a profession, in a world of UI Design, we use this word flow all the time.

And all it really means is this is the experience of moving from one place to another.

One view to the next.

One state to a different state, or section to a different section.

And intuitive navigation system is designed to minimize disruption, or maximize continuity, by keeping people oriented, as they flow through the experience.

So let’s take an example.

This is the photos app for iOS.

And here we’re looking at a grid of photos, and when we tap on one of those photos, it zooms up, fills the screen.

And this is really important for usability, because without having to think about it, you know that the photo you tapped on is the one now you’re looking at.

You get that instantaneous confirmation, again, without having to think about it.

And the animation to go back is just the opposite, reversed.

And this is also important for the usability of the photos app, because now you’re back in the grid view, and you know exactly which photo you had just been looking at, so you know how to proceed forward or backward from that specific photo.

Now, if this animation had been done differently, instead we tapped on the photo, and the big photo slid in from the right, we wouldn’t have the benefit of that continuous experience.

We would have to remember which, what the photo looked at that we wanted to look at, and then compare it with the image we’re now looking at.

And the same is true when we go back.

We have to remember what that photo we were just looking at looked like, and compare it to the photos in the grid view.

Now, this is a very simple UI animation concept.

But it’s a powerful one, and it’s used in all sorts of different iOS apps that we make, as well as on the home screen itself.

And, what’s more, is we use it all over the place on OS X as well, for the very same reasons.

Okay. The next tip is about providing hints.

Provide hints to people when they seem to be getting confused.

This is the app, Sky Guide.

Again, also won at ADA yesterday.

And it provides information about the entire universe, right?

You get to see detailed information about Betelgeuse, and countless other solar bodies that exist.

Now, you may think that the way you get that information is just by tapping on a star.

That’s pretty logical.

That’s pretty intuitive, right?

That’s how you get information about something in just about any app.

But if you thought that, you would be 100 percent completely and totally wrong.

The real way that you get information about a star is by pressing the i button over on the right-hand side of the screen.

But if that i button was just sitting there the whole time, well, you wouldn’t know what it represented.

You might think it’s just general information about the app itself, or you know, like the cosmos, right?

So to clarify that for people, Sky Guide does a couple of very simple things with animation to help you out.

When you select a star, when you select a star, the i button fades in and it pulses a little bit, just draws your attention to it.

And when you de-select the star, it just fades out.

And that gives you this understanding that there is a relationship between the star that you have selected and the info button.

It’s very effective.

Very subtle.

I mean you’re not necessarily even thinking about that.

And what’s even cooler than that, is that if you happen to think that double tapping a star will also give you information about the star, as I did, then the i button will just keep pulsing every time you tap on that star.

So it’s elegantly redirecting your attention back over to the i button, because they can infer by how you’re interacting with the app that that’s what your intention is, is to get information about the star, and they’re retraining you, redirecting you.

Okay. And the last and probably most important tip that I have is that less is more.

Picking between a smaller number of choices is faster, and easier, than picking from a larger number of choices.

I told you I would say a lot of really dumb and obvious things.

Now giving people too many choices can slow them down, and it can be intimidating.

You might think that you’re impressing people who are using your app with how feature-rich your app is.

But their takeaway may be very different.

They may think that your app is too much for their needs, or just too intimidating.

And when we see a long list like this, I mean, we all know this.

We start to skim over things.

We don’t want to spend hours and hours looking at this app.

So we’re just going to glance down really quickly.

But when we do that, inevitably, we wind up skipping over things.

And the things that we skip over may very well have been the things that we wanted to select.

Which means that if we’re skipping over the stuff that we wanted to select, that the people who are using your app are not getting what they want out of it.

They’re not realizing your app’s full potential.

And if you can’t limit the number of choices that you’re offering to people, again, use progressive disclosure to help keep decision making simple and unintimidating at every step in the process.

Now, that’s a lot about navigation.

And I promise I’m going to talk about other things.

But I feel like I would be remiss if I didn’t use this opportunity to talk with you about hamburger menus.

[Laughter & Applause] AKA Slide out menus, AKA sidebars, AKA basements, AKA drawers.

Now, these controls are very common on iOS, and on other platforms.

And I’m sure many of you here work on apps that have these.

You guys made the decision to put it in your app.

And I’m sure that you did so with the very best of intentions.

And I will say that these controls do a couple of things very well.

For one thing, they save space.

So rather than taking up a bunch of room at the bottom of the screen for a tab bar, you’re just taking up a little bit of area in the top left corner for the hamburger menu.

And you practically have the entire height of the screen to show options to people, and if that’s not enough, you’re going to cram more awesomeness into your app, people can scroll, right.

But [ Laughter & Applause ]

this is I actually haven’t played around with the latest version of Xcode, so I really hope that they haven’t changed this, I don’t believe you’ll find a hamburger menu controller inside of Xcode [laughter].

Now, typically we don’t provide design advice about the things that we don’t offer to you guys, but I can’t help myself, right?

I’ve had so many conversations with people about this control, spending hours and hours and hours talking about it, and you know, I think it’s important that we talk about it here today.

And again, I’m not going to say that there’s no place for these controls categorically.

I think there are some apps that could maybe use one.

But I will say that their value is greatly over-stated, and they have huge usability downsides too.

Remember, the three key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go.

Hamburger menus are terrible at both of those things, because the menu is not on the screen.

It’s not visible.

Only the button to display the menu is.

And in practice, talking to developers, they found this out themselves.

That people who use their app don’t switch to different sections very frequently when they use this menu.

And the reason for that is because the people who use their app don’t know where else they can go.

Right? They don’t know because they can’t see the options, or maybe they saw it at one point in time, but they have since forgotten.

And if you use this control, you have to recognize that the people who use your app may not realize the full potential of your app.

Hamburger menus are also just tedious, right?

If you want to switch sections from the Accounts tab to the Transfers tab, all you need to do is tap the button and you’re there instantly, and if you want to go back, you tap the Accounts button, and you’re back where you started from.

Doing the same thing with the hamburger menu involves opening the menu, waiting for the animation to finish, re-orienting yourself, finding the option you’re interested in, tapping that, and then waiting for the animation to complete, getting back to where you were before, and if you want to go back, you have to open the menu again, go through that whole process, and there you are, again.

It takes at least twice as many taps to change sections.

Something that should be very easy and fluid is made more difficult.

And the other thing the hamburger menus quite frankly do badly is that they don’t play nicely with back buttons.

Right? I’ve seen this a lot.

Back buttons are supposed to go in that top left corner position, but instead there’s this hamburger menu there, so people put the back button right next to it, but no longer does this look like a back button anymore, it just looks like this arrow which is pointing to the hamburger menu, looks ridiculous, and sometimes people recognize that it looks ridiculous, so when you drill down into the hierarchy of an app, the hamburger menu goes away.

Now it takes even more steps to switch to a different section.

You have to go back up enough times to get to a level in the hierarchy of an app to get to a view that contains the hamburger menu.

Now, sometimes people will try to solve this by putting the menu on the right-hand side, but that’s not advisable either.

That location is a really important location.

Usually you can put some kind of action there, you know, like a plus sign to add something, or an edit button.

And finally, the downside of being able to show a lot of options is that you can show a lot of options.

Is that you will show a lot of options.

The potential for bloat and misuse is tremendous.

They allow you to add all sorts of stuff that your users don’t really care about.

Like information about the app.

Or version history, or credits.

I hate to break it to you, but no one cares.

[ Laughter & Applause ]

And the other thing is that people wind up taking ads and special offers and making them look just like regular sections and putting it in there too.

That sucks.

No one wants that either.

Look, drawers of any kind have a nasty tendency to fill with junk.

Okay, let’s move on.

[ Applause ]

Thank you.

Okay, the next major characteristic of intuitive navigation, or sorry, we’re not talking about navigation anymore, intuitive user interfaces, is that they are clear.

Now, this applies to the information apps present, and the functionality that they present.

Information and functionality need to be straightforward and understandable.

It’s easy for people to do things, so they’re not trying to decode or interpret what it is they’re saying.

And clarity is this very broad, but very powerful concept.

And just about everything I’ve said about navigation really boils down to just being clear.

Is it clear where you are?

Is it clear where else you can go?

Is it clear what type of information or functions you’ll find when you get there?

But clarity applies to so much more than just navigation.

Now, let’s start with language.

Now obviously, we rely heavily upon the written word to communicate with the people who use our app.

But how well do they understand what we’re saying?

It turns out that that’s a really hard question for us to answer, and it’s especially hard to answer that question before they’ve even had a chance to use the app.

But there are a few things that you can do to increase the likelihood that you’re speaking and communicating as clearly as possible.

Now, here are six ways that you can be sure that you’re being as clear as possible, starting with using simple words.

Now if you’re designing an app for a large number of people, avoid using big words that people may have trouble understanding.

So here’s you.

And this red circle, that represents your vocabulary.

Now, you use words from your vocabulary to write the text that you’re going to put in your app’s interface, and that’s great while you’re developing it, but once you shift, along come some other people.

And their vocabularies are different than your own.

They may not be native speakers of your language.

They may have different educational backgrounds.

Whatever the reason is, it doesn’t really matter.

The bottom line is that the number of words you share in common is limited.

So use simpler words that most people will understand, most of the time.

Those words, they may not be as precise or descriptive as you would like them to be, but it’s going to make it easier for more people to enjoy your app.

The next tip is to avoid jargon.

People shouldn’t need to be computer scientists to use an app.

So, for example, we say airplane mode.

We don’t say turn off radios.

Now, turn, off, radios, those are really basic words, but most people don’t understand what radios mean in this context.

They just think it’s like the AM/FM radio they have in their house.

So we use airplane mode.

It’s much more effective.

And this isn’t just about computer mumbo-jumbo, this is kind of about everything.

So let’s just say we’re making an app about renewable energy, and this app is intended to be used by people who own houses, or office buildings or what have you, and they’re interested in doing the right thing for the environment or just saving money.

They’re not necessarily really well informed about all of the technologies that they can choose from.

Now, they shouldn’t need to know what a photovoltaic module is.

They’re going to say solar panels, right?

Photovoltaic what now?

Right? A better design is one that leads with solar panels, leads with the commonplace term, and if you want to define it for people, that’s great.

You’re educating them, right?

Well, it’s kind of synonymous with photovoltaic modules.

So now, when that individual goes somewhere else and they see that term, well they’re going to know what it means.

But there is a bit of a qualification here.

And that is that it’s critical to know your audience.

So in this scenario, we were designing an app which is targeted at a consumer.

That someone is, it’s a large audience of people who I described, right?

And we don’t know what they know.

And they probably can’t take anything for granted.

So we want to use a term like solar panels.

But imagine we were designing an app which was to be used by the technicians, the people who install solar panels in people’s homes.

Well, they’re probably going to be a lot better informed about the technology.

Maybe they intuitively or just naturally would use the word photovoltaic modules.

It’s more precise.

In fact, they would be embarrassed to use an app which says solar panels.

They wouldn’t want to be caught dead they’d be laughed at by their colleagues.

So think about your app.

Now there’s a spectrum, and it’s important to consider, are you’re targeting a consumer or a professional?

Correctly positioning your app on that spectrum is the key to making sure that your app is intuitive for the audience who is using it.

Now, the next tip is about being descriptive.

So sometimes I see this.

There’s an option that says Home.

Well what’s on the Home screen?

I have no idea.

Home is very undescriptive.

In fact, it always suggests to me that the person designing the app probably comes from a web design background.

On iOS, we try to be really descriptive about what kind of content or functionality you would find on that screen.

So use better words that are more descriptive.

And next, be succinct.

Brevity is a virtue.

Next, avoid truncation [Applause].

It’s really hard to read text when it’s not all visible on the screen at one point in time.

Being succinct, and using shorter words will help.

And finally, you could have the best copy in the whole world, I mean, beautiful prose.

But it won’t do you much good if people are having a hard time reading it.

So use a type face which is legible.

And make sure that text is large enough for people to read at a comfortable viewing distance.

Not with their face pressed against the device or the computer screen.

And if you’re making an iOS app, I highly recommend that you use dynamic type.

This will pretty much assure that text will be as legible as our built-in apps, and for those people who have a hard time reading, have bad eyesight, well they can adjust font size to suit their individual needs.

Now, just as important as speaking clearly with words is communicating clearly with visual symbols.

In fact, a well-designed icon can often communicate a concept more quickly and more effectively than any word can.

But icons are really tricky to get right.

I mean, what does this icon mean, right?

It means nothing.

I mean, if I just saw this, I would think maybe it’s like a beach ball floating in a fish tank, or it’s a dish in a dish rack, or it’s like a super modern door knocker.

Right? Without any context, I have no idea what this means.

This is a terrible icon.

So what kind of icons will work well?

Well, there’s some icons which are successful because they’re internationally recognizable, such as this information sign.

We’ve seen information signs in museums, in malls, and airports, and we always know what they mean.

It means getting information about something.

Next, there’s symbols which are so pervasively used in so many types of apps, like this magnifying glass, that we understand what it’s trying to tell us.

We know that this relates to searching.

Even if the particular form of searching may vary.

And next, there’s icons that are successful because they represent these real ordinary, commonplace objects that we’ve all used in our lives.

We’ve all owned an alarm clock, or we’ve at least seen one on TV.

So when we see this icon that looks like an alarm clock, we know what it’s trying to communicate to us.

So let’s flip this around a bit.

What types of icons don’t work well?

Well if your icon needs a label in order to be understandable, that’s a really bad sign.

If your icon represents a commonplace object that many people have never seen in their life, that’s a problem.

And if you use a really common icon, but in a very non-standard, unconventional way, then it’s time to go back to the drawing board, and start over.

And also if you ever catch yourself or someone around you says, “Well it may not be perfectly clear, but people will learn what it means eventually,” then I’d like all of you people to meet me over here after, because I have this awesome bridge that I’d very much like to sell you.

Look, it’s not that icons can’t be learned.

It’s just that they’re not likely to be learned.

Why would I find out what an icon does if I don’t know what it means?

Why would I even tap on it or click it?

Maybe it’s going to do something destructive?

And anyway, that’s a really low bar to set for yourself.

If you want to make a truly intuitive app, don’t settle for icons that need to be learned.

And I also want to mention that icons are often used because space is limited.

So they wind up being kind of small.

So let’s say we’re making an icon of a coffee cup.

And when we’re making it, we’re using like a vector design tool, and we’re zoomed into 3200 percent, and we want to really get creative with this, so yeah, it’s coffee, but you know, it’s hot coffee, so we’re going to add a little bit of steam, and we want people to know that if they happen to tip the coffee cup, it’s going to be okay because there’s a saucer that will catch all the coffee, and you know, who likes boring, blank vanilla coffee mugs, right?

They often have pictures and logos on them, and coffee makes us happy, so let’s put a happy face on it.

But then when you display it at the correct resolution, all that detail gets kind of lost.

Becomes muddy.

So don’t add all those details.

It’s better to render the same symbol, but with less visual detail.

It will be far more clear when it’s downsized to the correct resolution.

And if that doesn’t work, just try using a different symbol altogether.

Look, it’s not always that easy to come up with a great icon.

If you can’t find a visual symbol whose meaning is universally, immediately, and clearly understood, then just stick with text.

Now, pictures and words.

These are really key and important ways of communicating information.

But there’s another tool in the tool box that I’d like to talk with you about today, and that’s animation.

Animation can sometimes communicate things far more clearly than either words or pictures.

One of my favorite examples of this is the focus and exposure indicator in the camera app.

This animation of the focus and exposure indicator says three really critical things very well.

First, by first appearing and then scaling down, it’s drawing your attention to the object of the part of the image which is being used to determine the correct focus and exposure.

And because it’s getting smaller, it’s giving you this hint that it’s really precise.

Right? It’s zeroing in on a particular area.

And then when it stops getting smaller, it just pulses twice, which tells you that focus and exposure have been locked.

And then, it simply fades away, which tells you that the process is complete, and it’s now okay for you to take your photo.

Ready? Set.

And go. That’s a lot of information contained in a very quick and simple animation.

Let’s look at another example.

The animation when you key in the wrong passcode on your lock screen.

Without saying a single word, it just shakes its head no, that’s not the right answer, I’m going to clear out that gibberish that you just entered, and let you try again.

Okay. So the second to last major characteristic of intuitive user interfaces is that they are simple.

Now, the common element of not overwhelming people with too many options at any one point in time are using more basic language to communicate with people, or reducing the extraneous visual ornamentations from icons, is that the user interface, and the user experience, needs to be simple.

Now, let’s go back to that pen and paper analogy for a second.

Remember, you were in your kitchen, and you were frantically hunting around for a way to write down that phone number.

And let’s just say, that just like before, the pen was sitting there and the pad of paper was sitting there on your kitchen table.

But there is also some pieces of paper.

And there was also some dishes.

And your kids’ toys.

That pen could be right there, but you don’t see it because there are all these other objects which are demanding your attention.

Complex apps are like this.

In order to do the most basic and simple of things, you have to wade through a bunch of things that you don’t care about.

Simple apps take the 80/20 rule to heart.

Now, there’s a lot of definitions for what the 80/20 rule means, one of which is that 80 percent of people are only going to use 20 percent of features, or that 80 percent of the time, people are only going to use 20 percent of the capabilities of any given system.

However you define it, it’s pretty simple.

Most of the time, most people will use very little of what you actually make.

And however you define it, the takeaway is this.

If you show people information that they don’t care about, or functions that they don’t need, then all that stuff is just going to distract them.

It will get in their way and make it harder for them to accomplish what it is they want to do.

Now, I’ve been showing a lot of iOS examples here, and I want to talk about Mac for a second, and the context of simplicity.

Now, what does simplicity mean for a Mac?

I mean Macs are very different than iOS, right?

I mean for one thing, the screens are much larger than an iPad, let alone an iPhone, so there’s a lot of room to show all sorts of controls and information.

And a lot of times, that’s what people really want.

I mean, if you’re designing a professional application, that’s a good thing right?

Macs are all about utility and power.

So Macs that are designed for professionals take advantage of this by offering sophisticated and advanced work flows, and people use these apps for really extended periods of time, and as they do so, they become comfortable in managing all of that complexity.

And when they become comfortable managing complexity, other concerns come to the fore, such as being efficient.

And efficiency is all about availability, meaning everything is in plain sight, or within reach.

Okay. So that’s a good thing, actually.

But still, keep in mind that if you’re not just designing for professionals, for a wider range of people, maybe people who are just wanting to pick up new skills and grow into that profession.

Just new users are trying to learn the system, you don’t want to drop them into something that looks like this.

Take the time to give them this, and allow them to graduate to something that’s more complicated.

Now, finally, the number one characteristic, and that’s corny, of intuitive user interfaces, is that they are focused.

Now, the design of this pen is successful because it’s perfectly suited for the context for which it was made.

It’s a general purpose writing tool that works well in your home or in your office.

There’s nothing about this pen that’s extraneous.

It’s not made more complicated by features that people don’t really need all that often.

It just serves basic writing tasks.

There’s no ability to change the color of the pen.

It’s not double-sided in case one side breaks down.

It doesn’t have any kind of laser pointing capability.

All of those features would make this pen needlessly complicated.

The design of this pen is a very singular and focused purpose.

Every aspect of this pen’s design serves that goal.

Its form invites us to pick it up and to hold it comfortably with a couple of fingers.

It’s obvious how to click open the pen tip, and click it closed again by pressing on the button at the top.

It’s obvious how to clip it to a shirt pocket or a piece of paper so that it’s portable and we can take it with us.

In other words, it’s intuitive, because of the intense focus on supporting just a couple of basic tasks like writing and drawing, and being portable.

It is uncomplicated.

And therefore, it is made intuitive to a wide range of people and a wide variety of contexts.

But focus can also mean designing to support very specialized, or niche applications.

This calligraphy pen is intuitive to a calligrapher.

Everything about it they understand.

It makes total sense to them.

The shape, and the nib of the pen.

But if you’re not a calligrapher, and you pick this up, and you try to write with it as you would think to intuitively, as you would write with a pen, well the results are going to be pretty ugly.

You’re going to have a lot of slashes and holes in the paper that you’re writing on.

The paintbrush, it’s the same thing.

This is intuitive to a painter.

But if you’re not a painter, you’re going to make a mess.

The design of these tools is optimized for very specialized applications, and just like a pen, adding any extra stuff would result in a less successful and a less intuitive design.

The beauty of iOS is that there are hundreds of thousands, I mean 1.2 million apps, out there.

And many of the most successful apps are successful because they do just one or two things, extraordinarily well.

In other words, they were designed around a clear and singular purpose.

Focus means that your app can and probably should do less.

If your app does less, you’re going to have more time to iterate, to prototype, to implement, polish and test.

If your app does less, you’re going to have less need for complicated navigation controls that are difficult to use.

If your app does less, you can spend more time crafting just the right wording, or picking just the right icons, and making sure that you have time to build in animations that clearly and meaningfully provide user feedback and help people to stay oriented.

Now, some of the best UI Design advice that I ever received was that great software starts small.

You pick something that you’re really passionate about, and that is important to real people, and you try to figure out what it is that you can do to help make things in their life better, easier, faster, more fun.

More delightful.

And then you dive in.

And you make that happen.

And you don’t ship until you have something that is truly great.

You don’t ship until you have something that you can and should feel proud of.

If you’ve accomplished that, your app will become indispensable.

People won’t delete it, because the function it provides them perfectly suits their needs.

It’s exactly what they want.

And the form of the app, how it’s been designed, perfectly matches the functionality that it offers to them.

And perhaps most importantly, people will sense the care, the attention to detail, and the love that went into making a truly great and truly intuitive app.

Okay. So thank you.

I want to point out really quickly if you want to continue this conversation, here’s my Email address.

We also have a lot of really great design resources for you available on, including links to the Human Interface Guideline, a bunch of videos.

We also have made the iOS Human Interface Guidelines available as an iBook, so you can go out and get that.

And I also want to point out that this is not the last session about design.

We have three other really great sessions for you this year.

I already talked to you about the last one there on the list.

Go check it out.

If you do internet purchase, we have a really good session with tons of great, wise advice content for you to follow, and then this session in the middle is awesome.

It’s about prototyping, and how we use it at Apple to develop ideas, and really refine them and figure out what it is we want to do.

Thank you very much for your time, and have a great evening.

[ Applause ]

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