Good morning everyone.

My name is Mike Stern. I'm Apple's User Experience Evangelist and I'm really happy to be talking again today about design for iOS. Now, if you saw my talk on Wednesday, you heard me speak a lot about the difference between iOS 6 and iOS 7. Well today, we're going talk about Evergreen Design advice. So this is advice that is relevant if you're making an app for iOS 7 but it was relevant for 6 and 5 and every version of iOS before that.

So, as many of you know, we spend a lot of time and energy creating apps at Apple. We focus on it, we want to make sure that user experience is really fantastic. And I've been a designer at Apple for seven years and I know at first hand how much care and thought goes into the design of each one of our apps, and it shows. Our users have come to expect experiences that are intuitive, engaging, beautiful, and sometimes a bit magical.

And you guys heard all week long about the great new technologies that you could take advantage of for designing your apps. And I hope you guys learned a lot and have come away from this week really inspired to try some of these new things. But the thing I want to remind you of is that your users aren't going to judge your apps based on how many technologies you use or how many APIs you integrated or how elegant your code is. The way they're going to judge your app is based on what enables them to do, how it makes them feel. So with that in mind, it's really important that the design of your app has the same qualities of being intuitive and engaging and beautiful.

And we saw on Monday, some of the winners of the Apple Design Awards, apps like ProCreate, WWF Together, Ridiculous Fishing, Badland, Yahoo! Weather, and Letterpress. These apps, they set the bar for high quality user experience. I worked on this a little bit and I got to see dozens, hundreds of apps that we considered for the final selection and it was a really tough choice. There's so many great apps being designed for iOS, many of them only for iOS.

But this is tough competition. So how do you get here? How do you start going in this direction? Now, I look at a lot of apps all the time and I see some of the same mistakes being made over and over again. And as we know, a lot of apps get rejected from the App Store during the review process. In fact, it's one of the top three reasons why apps get rejected-- why apps will get rejected. So, I'd like to head that off at the pass, try to provide some advice to streamline the process and prevent your apps from getting rejected.

And in order to do that, got a little ahead on myself, we're going to look at 10 common pitfalls that I see over and over and over again. And the first one is bad app icons. So this is the first place that most people are going to encounter your app.

They're going to search for something and your app is going to come up in the results alongside dozens and dozens of other apps, and you have to standout from the crowd. This is a search for camera, I just did this couple of weeks ago. And I bet there're some icons here that are standing out better than others, that you noticed first immediately, right when we got to the slide. And that's not unlike what happens when you did the search yourself at home on your computer.

Things are going to draw your eye in, and you immediately begin to make a lot of assumptions about the user experience of these apps, so you'll look at them and start to make these inferences about how enjoyable they're going to be to use, how intuitive the interface is going to be, how well it's going to serve your needs. And I think those are kind of reasonable assumptions actually to make from an icon. I mean, if an icon looks great and it obviously was carefully crafted, it's reasonable to assume that the rest of the design of the app is also great and also well crafted.

But it goes beyond that. People start to make all sorts of other assumptions about your app. How good the technology is. How secure your data is. How performant it is. Is it stable? Is it going to have functionality which is ahead-- you know, advanced better than the competition? So with that in mind, an app icon is really an important thing to focus on. And what are the qualities that distinguish a really great app icon? Well, there's two main things. One, it's beautiful and I think probably more importantly, it's instantly recognizable.

So how do you accomplish that? Well, there're six things that I want to point out that are important to keep in mind. I think they distinguish every great app icon. The first, focus on unique shape. These four icons, they do different things, some are very simple or with solid colors, or just a clean gradient. Others are a little bit more complex but they all start with this very basic shape, and that allows them to be recognizable at a great distance.

So you guys in the back of the room right now are having a really easy time making out what the shape of these icons is, and that's important. Icons are seen at all different sizes. You know, it's not just the size you see in the store, it gets smaller on the home screen and smaller on the notification center and it's really small inside the groups. So you have to make sure that the imaging you choose for your app icon is kind of reduce really well and be clear at any size.

The next step is to just choose a limited pallet, one color, maybe two. Now, there're app icons that have much more than one color or two but it's really complicated to pull off right. We'll see an example of it in a few moments and I'll point it out when we get there, but notice these icons, just really one color and it has variations and tone but they stand out, they're not fragmented.

Now, the next one is to avoid using photography in your app icon. I've seen it a number of times and it never works out well in the end. So let's take for example, you're making an app for wine lovers, to take notes about the wines they like and share with others. So you might be tempted to start with something like this, nice glass of red wine and you just crop it, put some rounded corners on it, throw a gradient over it.

Does anyone think that looks good? Looks terrible. So you-- but, you know, if you want your icon to have these features, that's fine, just illustrate it, take it to the next level, hire a good app icon designer, who can pull this off well. And that's exactly what the people at Sipp did, hired a really talented designer named Eddie Lobanovskiy and he made this fantastic illustration for their app icon.

It has the same elements as that photo, it's got the red wine, it's got the glass, it's got the wood texture that evokes the barrel, but the composition is really solid and it's also really creative. And these are two values that we cherished at Apple, creativity and attention to detail, and of course, the way that red wine swishes around and forms the letter S, the mnemonic device to connect with the app name.

All right, so the next one is avoid a lot of text. In fact, if you can get away with having no text, that's probably the right thing to do. So, let's take a made-up example to illustrate a point. This is for a fictitious hair salon and make up studio called Fuzz.

Now, you can have an icon that's-- a logo that's this complicated and it might work really well in website or in marketing collateral, on a billboard, but when you reduce it down to use as app icon, it starts to break down very quickly especially when you start to think about all the smaller sizes that people are going see then.

So that was a fake example. Let's take a more real example. A lot of you guys use this app. It's a great app, ness, you can use it to find restaurant recommendations and they have very customized personal profile based on your own preferences. And they have a really fantastic logo that's actually really simple, not nearly as complicated as what we just looked at before.

And they could've maybe just taken that and reduced it and used it as an app icon. But that wouldn't have been good enough. What they chose to do instead was to pull out just the heart and use that. It's a really simply shape. Now I was going to call this out when I was talking multiple colors, and you can see there are multiple colors here but the composition of the heart really holds that altogether. So even at small sizes, it works well. I've had this app on my phone for a number of months and it always catches my attention, it really stands out.

In fact, you see a lot of companies doing this sort of thing. So for example, Pocket, they have that little pocket icon with the down arrow and they use that as their app icon, it works really well, or Pinterest with their P that's kind of like an abstract pin or the S for Snapguide and the V for Vine, there's some patterns here. But the reason why there's this pattern is because this works really well. Now, of course, they bring in the color from their brands to give it some unique personality and they work well on the home screen.

Alright, next up, accurately portray materials. Now this might be a little bit surprising given some of the changes that have taken place, but sometimes materials are really important for your app icon. App icon is the ability to be expressive to demonstrate your unique value and personality of your app.

So let's look at Paper. I mean, the name of the product is Paper. So it would be sort of odd if your icon didn't look like it was made from paper. Paper is this brilliant drawing and painting tool which won an ADA last year and it's got these amazing brushes and you can-- anything you draw is going to look beautiful. And so, they demonstrate that by these careful washes, the watercolor layered on top of layer of color. They have the crease of the paper which connects to the journals that you see inside of application. It's a really nice icon.

And this icon, from Square Wallet, it's kind of that hologram thing that you used to see in credit cards. I don't know if they still have them but this is beautiful. And I know it has a lot of colors but it has an overall color of the sort of cool blue tone and it's got a really distinct shape, it's got these concentric squares so just it pops really well, it's easy to make this out. If you're going to go for a texture like this, this holographic paper, you really want to sell it, you really want to nail it, and this icon does that.

Now, this icon from 1Password and 1Password stores all your passwords, obviously that's pretty sensitive information so you want to get a sense that that data is secure, and this icon conveys that by looking like a lock or-- sorry, a safe, you know, it feels strong, it feels impenetrable. So, it's communicating these emotional reactions or it's eliciting these emotional reactions in us and we see it and that's why they use these materials. But, again, it's really realistic.

And finally, I came across this icon when I was looking for some examples to show you guys, and this is for an app called LifeKraze, it's kind of a cool app. You set some personal goals and then you have a team of people who are in your social network and they cheer you on and in turn, you cheer them on. And I didn't a get a chance to confirm this with them but my interpretation of this is that it's meant to be kind of like a team Jersey or sponsorship kind of thing, embroidery.

But look how amazing this icon is. I mean, the texture of the string, the embroidery, I'm not even sure how they made this. [laughter] I've been at this for a really long time. I want to go out there and figure out their trick. So this is brilliant. Again, this is highest level of artistry.

And finally, be creative. I can't emphasize this enough. You try to stand out from the crowd, you're trying to stand out from the rest. So take for example this icon for an app called Routesy, it gives you information about local Muni Transit timetables and such. This looks like the old Muni Passes. It's really nice, it looks pretty.

This icon from Hipstamatic. You guys are familiar with this? Or Evernote Food? Or this icon for Brewski Me. I mean, look at the perspiration on the glass, in a way that frothy head foam is about to just fall over the edge. It's really dynamic. It has a lot of good characteristics that we look for in illustration.

And yet, while this is a really complicated rendering, it's actually kind of simple and when you pull back from it, you see it's just a big area of yellow color in the center with a nice white outline, stands out really well from multiple backgrounds. Anyone thirsty? I became a little thirsty.

So these are really creative icons. Now, we'd looked at a range of icons and I'm going to show you all the way for a new phone icon. It couldn't be more simple. Just a simple shape and a gradient up to something which is a little bit more complicated all the way to something which is this really detailed illustration for Sip. And these are all valid approaches to designing icons.

They work well for their respective products. Alright, next bit of advice, please make sure to check your icon against multiple backgrounds. It's really tempting, a lot easier, in fact, to just test it against a black background. But a lot of times, you can't-- you have to account for the fact that these icons are going to show up against who knows what. And also, put your icons into a group and then collapse that group and evaluate how well it's working.

So, I'm going to show you really a cool case study. This is for an app called Turnplay and the design work was done by a company called Ramotion and what Turnplay is, is this fun little app that allows you to play your MP3 files, whatever your music files as though they were vinyl, and that's the whole sum of this app. That's what it does and that what makes it unique and special.

So even when you select your songs, they have the sleeves for the vinyl. And then this is the turntable interface that you see when you're playing a record. This is not a photo. Every pixel here was hand-drawn in Illustrator then in Photoshop. I mean, this is an exquisite rendering of a turntable.

So when it came time for them to make an app icon, they knew they needed to connect to those characteristics. They knew they needed to demonstrate the beauty of that turntable interface but they also had to get the symbolism of the icon right, and so Ramotion started with sketches. Now, there's a lot of different approaches to making icons. You could start in a 3D rendering tool, you can start in Photoshop, you can do whiteboard drawings. In fact, that's-- my team used to do a lot of it when we started app icons for Apple products.

But they started with paper sketches and the team set out to work out all these different ideas. And as you could see, they explored a lot of different things. All these of icons have a vinyl record at the heart of it but then they tried different compositions, adding different elements, you can see the hands here, the styluses, different orientations, a lot of them are top-down but this one second from the right, is at a 45-degree angle, and sometimes the record is floating above the platter. Sometimes, there's a-- the hint of an audience in the background or the dot pattern from the platter to tell you what tempo you're playing your record at.

It's really antiquated technology. How many people have heard of a turntable? So, they tried all these different things. They even tried to do what we were looking at before, which is to take the first letter of their app name, the T, and integrate that into the design, and they came up with some pretty interesting ideas on how to accomplish that.

By starting with sketches, you're not thinking about color, you're not thinking about materials, you're thinking about the core element of the illustration which is the composition. It's really important that your composition is solid. So they kept going, tried out-- I don't know what the fingerprints thing is. I know you get fingerprints on vinyl. I'm glad they didn't go down that route. And finally, they started to kind of lock in what they wanted to do and eventually, they got to this.

Really simple, right? Turntable, play, and you can see they started to think, "Oh, we're going to have this play icon in here" but it's going to be like this little sticky label that goes on the record. But these are concentric shapes. They're really powerful. This is a strong form in and of itself.

Only from-- only when they had that did they to start add in some of the detail. They started to add in gradients. They added in the dot pattern around the platter but they didn't make it totally accurate because that would have been a mess. I mean, it just would have been too much detail to work at any size, even 1024 square.

They kept adding in a detail, adding in detail. They gave that play icon that papery texture so really knew that it was supposed to be paper. Shading, highlight. With each successive version, it really started to come together more and more. But never losing sight of that basic shape that they had started with, and it works well at all sizes because they stuck to that, they stuck to that basic shape.

Alright, so that was a lot of stuff on icons but it's probably the most important thing to get right when it comes to visual design. Let's move on. This is Forced Registration, and for the example, this actually was shown last year. But a lot of apps do this kind of thing where they give you two options. You open the app and they ask you to sign up or sign in and a lot of people hit the Home button and delete the app icon. People hate this which is why it's mind-boggling to me that it still happens, but it still does.

So let's look at a case study. This was an app called Fondu. They used to be in App Store, they're not anymore, they've been acquired by Airbnb. So all the stuff I'm going to show that they did obviously was very successful for them, but they used to make you sign up. It's a social networking food app.

And they realized that weren't getting the uptake in people signing up and registering because they would just do what I said, they would leave right away. They didn't know the value of the app. So instead, they completely went away and redesigned their app to show a few screens right off the bat, where you can see something about the features and understand what purpose this product serves, and only when you got to the end of it where you given the choice to sign up or to sign in.

But even with that, they allowed a third choice which was to continue forward and get a taste-- this is a nice little bit of copy-- and you can use public features of the app, and so you really would get a sense for why this app had value, what was interesting about it. And I recommend that if you're in a similar situation, you should do the same thing. You want to allow people to try before they buy.

As a result, they had a 42 percent increase in registration shortly after they made these design changes. As we talked about, they eventually got acquired, so do what they did and allow people to use your product rather than forcing them to registrater right off the bat. All right, so that was forced registration.

The next pitfall is Tiny Controls. Now, this is how we could have designed the WWDC app. We could have made text smaller, we could have made the rows smaller, little date switcher at the top, all the buttons and the nav bar, but instead, this is what we actually shipped.

Things are-- have normal metrics, they're a lot easier to tap. If you have greater density and really small tap targets, it's hard to aim so that slows you down as you're pointing your finger towards the screen, it makes you more conscious of what you're doing. So while you might see more stuff on screen at one time, your app becomes harder to use.

It's much easier when you have really easy to tap targets. You have to design your products for a fingertip. I'm surprised when I see some apps that have these really small tap targets and things that are crammed together. It looks like it was designed for someone who has a cursor.

So as you'll see, if you might read on the HIG, we recommend that controls are 44 points tall, and you'll see that over and over again in the controls that we have. Now, this number, 44 points, this goes back, this isn't new to iOS 7 even though I'm showing an iOS 7 screen right here. The metrics for a lot of our controls have stayed the same because the size of our fingers have stayed the same. So you'll see it over and over again. Nav bar 44 points, toolbar 44 points. Even the little callout for the map is 44 points.

Now, if you have additional space like we did for calendar in iOS 6, make your controls bigger, it just makes them easier to tap. And we've updated calculator and now these controls are bigger still, so they're even easier to tap. And some apps you use when you're moving around.

This is a Cycling app by Strava, it allows you track your ride through GPS, and you want to be able to start and stop this while you're on your bike and while you're moving. So this button that they have for doing that is 120 points in diameter. It's really easy to tap. I wouldn't be surprised actually if the tap area is bigger than the size of the button.

And lastly, when you're evaluating whether or not a control is large enough, test it on your device. There's no substitute for that, you can't make this decision just sitting at your desk and tapping the interface of the phone. Go outside, walk around, use it as an opportunity to do something healthy, stretch your legs, get some fresh air, give your eyes a break, maybe hold a cup of coffee in one hand and try to use your phone, and see how that works for you. Think it'll be educational. All right, the next common pitfall is Hard-to-Read Text. Now, this is how our WWDC app could have looked if we were cruel and insane.

[laughter] But why is text hard to read here? Well, it's hard to read because the colors are too saturated, they're too bright. The font that I chose, it's not bad per se, but it doesn't work at a small size, that script font, it's way too small, can't make that out.

This would have really stoked the rumor mills about the new design of iOS 7. [laughter] We probably should have done it. So this is something a little bit more plausible, right? I see some stuff more like this on a common basis and the problem is just low contrast.

A good metric to use is that the contrast between text and background should be at least 50 percent, maybe 60 percent in brightness which is kind of a hard thing when you're talking about different colors like red against yellow or something like that but if you were to desaturate your image and then measure the colors of gray, that's the kind of delta you want between the color values. So this is the actual design for the WWDC app and you can see here the text is basically black and the background is almost totally white. So it's really easy to read and, of course, the fonts are a nice, legible size.

On Wednesday, I talked about this screen in the context of type and I want to bring it up again because for one thing, while there's a lot of different sizes of type and weights of type, which is really important for establishing, communicating information hierarchy, calling out which things are more important than others, it's all the same typeface.

And that adds to a sense of coherency, it all fits together. We didn't just throw a script font in here. Now, I really recommend that you do the same thing. You can mix and match typefaces, that's actually an extremely difficult thing to do. I don't do it 'cause I don't think-- I usually don't think it's very successful. I don't know how to pull it off very well.

So we have all these different styles of type and again, another plug for dynamic type 'cause that's how all of this was made. This is really good way to go. If you use this, you're going to have great results. Now, the other thing is we have large blocks of text they have mailed from both the 6 and 7 here. And previously, we would recommend as a baseline that your fonts are 15 points or higher if you have large blocks of text that people are going to need to read for a while.

Now, that's changed a bit. We can't just say make it 15 points. Now, with dynamic type, it's all scalable. So these really mean, what size of body text? But this is the default size which is large and as you can see, the font size is larger than what we have before, and that's something that we talked a lot about on Wednesday which is the importance of legibility and I think even what we were doing before, our minimum size for fonts, for body fonts, was too small and the decision was made to up it just because it's so much easier to read.

Now, another important thing about text is that you want to have alignment. Alignment provides structure. It's the key to making an app UI feel aesthetically balanced and organized, easy to look at. But beyond that, it makes it easy to scan text and find what you're looking for. This UI is static now but a lot of times, when you're looking at this, you're swiping it quickly and you're scanning for text, you're trying to make out, you know, I'm looking for text from Paul Brennen or Michelle Humphrey and you have to be able to see that even as it's moving. Alignment is the key to that.

And another important about text, again, you'll see a left alignment, it's very clear, just like before, is breaking up your content. Don't just slam stuff together because you want to cram more stuff on the screen, onto the screen. You need to break up the text the people are seeing.

It helps you to see connections between disparate lines of text. So these phone numbers are grouped together, so I understand that whole areas about phone numbers which is separate from FaceTime, separate from sending a message or looking up someone's address on the map. Negative space is the key to that. Use it well, use it liberally and if it's not enough, use separator lines to even-to draw even clearer separations between different lines of texts.

And again, test on a device. The reason why I'm bringing it up now is because when I'm talking about contrast, when you look at something indoors, it's really easy to see all of the nuances of the different shades of color. When you walk outside, things are very different, colors just compress into each other, becomes hard to tell that there's differences. So you really want to make sure that you're evaluating if you have sufficient contrast by walking outside and not at night but at 2:00 in the afternoon, when it's really bright and sunny.

And also, there's a lot of great tools available for helping to look at UI and analyze things. LiveView is one of the oldest, it allows you to just take a design and send it to a device. Skala View is a great tool. xScope Mirror has a lot of pixel levels instrument measuring stuff. Screenshots Journal also awesome. All right, next Ambiguous Alerts.

So we've all seen things like this, maybe we had it in an earlier version of our app just for kind of debugging and testing and sometimes this app makes it through to the final app and this isn't helpful at all. You have no idea what's going on. This isn't a real one. I've changed the names to protect the innocent. This is a classic, again, this is real alert that's-- has existed. What are you suppose to do here? [laughter] Catch-22.

So be conscious of that. This also, obviously it's funny because, you know, well, you guys all got the joke, but this also demonstrates something really important which is that OK, it's on the left and you never want to do that. You always want the affirmative, the forward moving action to be on the right.

Now, the best alert is no alert. Alerts are really meant to call your attention to something, you know, something that needs your attention and it makes you aware of that by popping up this whole thing in front of you. But oftentimes, that's unnecessary. So if we showed an alert every time mail was able to successfully update its contents, that will get pretty annoying pretty quick. So we just have some status text that tells you when it was last updated. Try to do that. Try to integrate information that's updating and changing into your app UI if you can.

This is from iOS 6. This is a really valid point. When you bring up an alert, label your buttons with the action that they're going to perform. People are using your device-- people are-- we're all using these devices and we're distracted and we get a phone call, we might not be paying a whole lot of attention, we might of skim the question or the message that's in the alert but we have to press the button and that usually focuses our attention a little bit more. So if we read some text about the resulting actions, then it's going to be a little bit safer, it's more of a guarantee that people are going to make the right choice.

And while we're talking about that, we should avoid if at all possible, simple button labels like Yes and No or OK and Cancel. If you can get more specific, please do that. It's really helpful for your users. Now, if you've been paying really close attention on iOS 7, you've actually noticed that that this particular alert has changed.

We added the option to snooze when you get an alert. And rather than cramming too many choices, rather than presenting the user with too many choices right off the bat, you're given two many options, just say OK, or to look at what options are available to you and then and only then do we show Snooze and to View Event. But again, you can see these labels are very specific about what actions they'll perform.

All right, and I already talked this a little bit but put the affirmative action on the right. Now, there's a bit of a disagreement between Apple and Microsoft about what the right approach is to do here, and in fact, sometimes I chuckle when I go to an ATM or I look at a website that has this kind of buttons and I see OK is on the left or Yes is on the left. I know that the designer who made it is using a Windows machine. That's what they're used to. Now you will too.

And I don't know if we're ever going to see eye to eye on this. I hope that Microsoft will come around and see the error of their ways but it's been a couple of decades so I'm not going to hold my breath. So in the meantime, just recognize that the people who are using your apps on iOS are used to a particular button order. They're used to the affirmative actions being on the right, the forward moving action being on the right.

And then finally, sometimes an alert is not the right thing if someone's about to perform a potentially destructive or harmful action. If you delete this photo, it's gone for good. So it's really important that users are aware of the consequence of their actions. So use an action sheet in cases like this.

And be sensitive to the order that you're putting these buttons in. The most harmful, the riskiest action should be at the top, it should be the furthest away from where your thumb is if it's at the bottom of the device, and it should also colored red to give you that reminder, that warning that there might be something harmful.

OK, next up, Out-Of-Place terminology. Now, a big part of making apps, really easy to use, really intuitive for a broad range of users is to not use jargon, not use technical terms. And it's hard for us to remember that because we're still comfortable with that language. We use it all the time and sometimes these terms are-- allow us to speak with precision, clarity amongst ourselves. Not amongst the general population. So we could have called Airplane Mode Cellular Baseband but no one would know what that meant.

Equally, we could have said Add New GPS Indicator to Map, but instead, we just said Drop a Pin, so much simpler, makes sense. There we are. Everyone wave. And if at all possible, avoid referring to the files. iOS tries to obfuscate the underlying file system as much as possible. So in Numbers, they don't talk about untitled.numbers or Create a New File, it's Make a New Spreadsheet.

Next up, avoid Excessive Branding. I see this all the time. I really do. And if you show me your app and it has a logo in it, you're hear an earful about why I think that's a bad I idea because it's usually, the logo is usually placed in the nav bar, right at the top, right where the title should be. So, again, WWDC app. We could have put the logo up there but we don't want to do that. It's a terrible idea because that space is needed for showing a title to tell you what you're looking at, tell you where you are.

My advice when people say, "Hey, you know what we put the logo there because we think it's important for building brand recognition." I said, "That's the wrong approach in iOS." Sometimes you see a logo showing up and you get the sense that people are thinking about their app is though it was a website. And with a website, showing your logo actually serves a functional purpose, utilitarian purpose. People can come to your website from any other place, though a link or wherever and it helps them stay oriented to know that they've gone from one place to another, know where they are.

But that's not the case in iOS. In iOS, someone presses your app icon on the home screen, they saw your logo probably at that juncture and the whole experiences of your brand. And if you're now showing them a logo in place of showing them some information which is going to-- the title, which is going to help them stay oriented and know what they're looking at, then you're degrading their user experience so they're going to have a less positive experience of your brand.

All right, enough about logos. Uninformative back buttons. If at all possible, please label your back buttons with something informative. We don't do this. We're in Settings and this back button just says Back. The error tells me it's a back button. I don't need text to tell me I'm going to go back.

Now, I see a lot of this and a lot of times the explanation is that, well, we don't have enough space to display the title of the parent view, but look at changing the title of the parent view or the child view to make that space because it's a really important way to allow people to have context, to know where they are. All right, there's a connection between the back button and the title of the previous view. And what's more to iOS 7, we have this really nifty animation that makes that connection very clear. So if your back button said Back, this wouldn't work very well.

So, for example, if we just said Back here, we wouldn't know where we're going to back to. We're looking at the info for an event but where would I go back to if I press that button? Now, in actuality, what we have is sets of events. I'm just going to point this out a little bit because there's actually no title in that parent view. It's a segmented control for filtering favorites or just showing every event for the schedule this week.

But it does connect to the tab, the Events tab, so it still makes sense. All right, that was the Back button. Onto the second to last common pitfall which is Confusing Animations. Now I see this all the time. This is Stocks, and when you bring up the settings UI, it animates up, slides up. And when you dismiss it, slides down.

It's really basic, really straightforward. It's symmetrical. It makes sense. So now, when it comes again, we're going to figure it's going to come up from the bottom because that where it seems to have gone to. It's persistence. We imagine it'll still be there down at the bottom. Sometimes, things will slide up and then they keep on going.

Where did they go? Apparently, they're going to fly all the way around the world and come back to the bottom so that they're there the next time. Sometimes, you slide up the Settings and you dismiss it and it just disappears. That doesn't feel right. It feels like they just forgot to do the animation to go away.

Sometimes, bring up Settings and you get something totally different. This is-- I picked this one because Keynote let me do it. And an iris wipe, that might have made sense but it should have come on in the same way. OK, it would have been a really bad idea no matter but you guys get point. And then sometimes, you just get gratuitous animation.

It's distracting. It's unnecessary. All right, enough about animation. So I'm going to end on Inappropriate Styling. Now, there's a lot of apps that have a very distinct visual style for them. They might have some real world materials like wood or fabric and maybe you're making an app that's for high school students who are learning about woodworking, learning about carpentry.

So maybe the appropriate background is a wood, kind of cartoonish texture, it makes total sense. It'd be appropriate. But the key to understanding how to stylize your app appropriately starts with understanding your intention. So in everything I just said right now, I had a picture of who the app was for. I limited it down to particular age group who had a particular set of interests, and I picked a style that was relevant to them. That made sense. It was a logical fit. So let's look at some examples, I think, of appropriate styling.

This is the UI for ProCreate, one of the ADA winners. I feel like I'm shilling for ADA winners. This is an appropriately styled app. It's a wonderful app. Now every aspect, every decision that they made around the design of their UI was done so for a very specific purpose. This is a real tool for real artists and real illustrators to do real work.

And that user base, they have some very specific needs. You want to make sure that your UI doesn't distract from your ability to see all of the great details in the drawing that you're making, so it's dark, doesn't interfere with that, doesn't jump out in front of it.

And I talked about that on Wednesday, deference. This, I think, displays that characteristic, it's deferential to the user's content. And it's got a texture to it but the texture is matte. If they went with something glossy, then they would have these horizon lines in the reflections and it would add to the noisiness of the UI. So it's appropriately styled. Let's look at another example. WWF Together. Beautiful app and the theme of the app is based on origami.

You'd make these origami animals and then you can share those with your friends on Facebook or email or Twitter. And they took that feature, they took that concept and they applied it and used it as the style of everything in the UI. So this menu system, it unfolds like pieces of paper, and the background, it's a little bit hard to see here but it's got this triangle shapes different-- subtly different variations of light gray to really reinforce that idea that this is unfolded origami.

And it totally works. This is an appropriate style and it's totally unique. It made sense, it's original. Really original. So imagine, if WWF Together looked like ProCreate, it was dark serious app. Would that work for the purpose of WWF Together or visa versa? You would want ProCreate to have this bright white origami interface. It'd be really distracting.

So let's look at a specific example of something which would be an inappropriate style. So this is photos from iOS 6. If it had a wood background. Now, at first blush, this might look really pretty. I think it's a nice texture, I mean there's nothing wrong with that texture. It looks awesome.

But it competes with the photos themselves. It interferes with your ability to see clearly the content that you care about. It's not deferential. So the real UI for iPhoto on iOS 6 or for Photos on iOS 6, sorry, just has a plain black background. That's not really a theme per se but it makes it easy to see the photos and that's what's really important.

So, again, you have to think about your intent. Now, that's generally good advice for anything you do and especially with design of your product, but that's just the first step. So, the designers of ProCreate, they probably started saying, "OK, who's our app for?" It's for artists. "But what do they need?" They needed a UI which is functional, efficient, gives them quick access to tools, doesn't distract from the content that they're creating.

Well, what works for that? Dark palette. Let's look at some similar apps, what did they do? What are the characteristics of those apps? So there's a progression of considerations that you have to go through but nowhere in there is an allowance for saying, "I just like wood textures. I think it looks pretty." You have to avoid doing that and think about something which is appropriate for your users. It makes sense for them and your product.

So those are the 10 common pitfalls that I see all of the time in iOS apps. If you can avoid doing these things, you're going to be in really good shape. So, I'm just going to give a plug for the HIG. I'm just really scratching the surface with these 10 pitfalls. There is wealth of fantastic information here which you can use to reference and learn all about how to use controls and what rules to follow, what things to avoid. I really urge you to read it, it can be kind of dense at times.

I know it's not the most approachable document in the world and we're working on that, but it's fantastic. I've been designing for many years. I worked with people who are equally experienced and we're always referencing this document, we're always pointing each other in the direction of some particular passage which gives us guidance about how to do our job correctly.

I have some final thoughts. Actually, I just have one final thought, which is focus. Now, when we were designing the WWDC app, we could have put in all sorts of great features, or all sorts of additional features like the ability for you developers to network with each other or to check the current weather conditions or provide a guide for, you know, restaurants, clubs or whatever in San Francisco, but we didn't do those things because it would've detracted from our core focus which was to add videos and to integrate Passbook.

And we have a team of some pretty capable engineers and designers who are working on this, but despite that, this is hard work. And in order to make those features really work great on the app, we had to concentrate on it and not get distracted by doing all these things.

And that's my advice to you. It's to not bite off more than you can chew. Figure out what your app can be really great at and it's going to just be one thing or two things, and then devote all of your energy to making sure that that's rock solid, that that's a better feature than anyone else in your category.

It's hard work. Some of the things we looked at up here, they're not easy to achieve. In fact, a lot of times, it's important to recognize the limit of your capabilities. Hire a designer to do your app icon. Hire a designer to do your app interface. This is complex stuff to really get right, but if you want to stand out on App Store, if you want your app to be really successful, that's what it takes. So, again, focus on what you can do well and knock it out of the ballpark. That's all I've got. Thank you very much.