Hello. So I'm Mark Kawano, Apple's User Experience Evangelist, and today I'm going to be talking about iOS User Interface Design. So I'll be going through some tips for UI design on the iPad and the iPhone. Now, as you all know, design is something that we care a lot about at Apple. And when we design products, our customers have come to experience that's intuitive, that's engaging.

That's beautiful and sometimes even a bit magical. And we spend a lot of time and energy making sure that all of our apps that are built into the iPhone and the iPad and that are available on the App Store have these attributes. And I've spent several years as a UI designer at Apple designing products, and so I know firsthand just how much care and consideration goes into every design decision. And I think it really shows, as we've kind of seen in some of these examples.

We've also spent a lot of time and energy on our platform building a really robust SDK. And I hope you've really enjoyed the week so far and have been able to pick up some great tips and learn about all the latest and greatest technologies in iOS 6. But I want to really just remind you for a minute as you're kind of taking in all this new information, you're meeting a lot of new people, learning about great new APIs, new features, new frameworks, that at the end of the day, what What users and customers really care about isn't the technology that you're building your product on. What they're really interested in is what your app enables them to do and how it makes them feel when they're using it. And that's what you really want to focus on when you're designing your app for the iPhone or the iPad.

And on Monday afternoon, we've highlighted some fantastic apps that are on the App Store at the Apple Design Awards, and I hope many of you were able to attend this event. And it really shows some of the amazing user experiences that are only capable or only possible on the iPhone and the iPad. So we highlighted some great apps, such as Bobo Explores Lights, or Paper by 53, National Parks by the National Geographic Society, Jetpack Joyride, DM1, the Drum Machine, and Where's My Water? Now, these apps set the bar for those user experiences that are just unbelievable.

But really, there are so many apps on the App Store that have great user experiences as well. They have great design, great graphics, really innovative features. And as developers, I hope you're constantly going to the App Store and downloading apps, not just in your categories, but all over and seeing what we're featuring, seeing what other developers are really doing that are really raising the bar for these great software experiences.

But as you know, there's also a lot of apps on the App Store that could use some help. You know, maybe the graphics aren't that great, or, you know, the features aren't as innovative as they need to be. Or maybe the UI has just been squished down from a website or a desktop experience.

Well, today what I'd like to do is talk about some of these common design pitfalls that you see a lot in these iOS apps. So I've put together this list, and this really comes from my experience working with thousands of developers from all over the world. And kind of seeing these pitfalls in their apps, in their user experiences, kind of taking away from their idea, from their creation.

And so the list that I've put together is the order that I'm going to go through isn't necessarily an order of importance or how much I see them, but really the order that I kind of approach the app when I'm doing one of the UI reviews, such as, you know, we've got the UI design lab on the third floor. Please go and check that out.

And so when I go through these apps with the developers one-on-one, it starts with the first impression, then kind of playing around with the different features and learning a little bit more about what they're trying to do, what users want to do. And so that's kind of the order that I'm going to go through these pitfalls.

Okay, so let's get started. And the first pitfall I want to talk about is bad app icons. You guys are all probably seen lots of apps with bad app icons. And you know that an app icon is really the first impression that users are going to have of your whole product, your whole experience. It's the first thing they're going to see. They're going to judge your app right away. And if you don't have a great app icon, they're just not going to assume. They're going to assume that you also have great features or a great UI.

So here we're looking at the App Store, and this is if you do a search for recipes. And I bet many of you right away, right just looking at the screen, are starting to make judgments. You're starting to say, well, that app looks kind of interesting. These other ones, you know, I don't know if I'm going to check that out. You know, the App Store is so competitive now. And this is where it all begins. This is where the experience starts.

This is before anybody's read any of the reviews, seen the ratings, seen the screenshots, heard about any of the features. This is just the app icon. So I think it kind of goes without saying that an app, great app icon can play a huge part in the success of your app.

And so, of course, app icons, just like all graphics in your app, need to be beautiful. It kind of goes without saying. But an app icon has some extra responsibility. An app icon also needs to be instantly recognizable. And that's really important because a user is going to interact with your app icon not just on their home screen. They're going to first see it on the iTunes store at various different sizes, depending on what device they're using.

They're also going to see it in places like Spotlight or inside of a folder or in settings or a notification center. And you need to make sure that when you're designing an app icon that it works well at all these different sizes. And so to help you do that, to make sure that your app icons are both beautiful and instantly recognizable, I'm going to go through some tips right now.

So the first tip is just to make sure that you're focusing on a unique shape. If your app icon just has too many shapes or too complicated of a shape, it's just going to be really hard to distinguish at that small size that a user might see it. It will get all muddied up.

And it's just not going to be that memorable. So some of these app icons you're probably familiar with. And I think you can see that they're really great app icons, but the thing that jumps out at you is the shape. That's kind of what really grabs a user's attention.

And there are subtle details in them. There's really nice textures, kind of the fold of the paper, all these great details. But that's kind of supporting that basic shape. And so what you really want to do is make sure that that shape is there, and then you're building in around that.

The same thing with colors. You need to make sure that you're carefully selecting the colors in your app icon. It's best to stick with a limited color palette. Maybe just two or three colors that will really drive home your app icon. Use the colors from your brand, maybe some colors from the interface elements, or if you're trying to represent a physical object, try to do that in a simple way.

Mark Kawano Now you can see here there's a bunch of app icons, great use of color, but it's really just a couple of them that pop out, even though with Instagram there's that rainbow, but it's really just the dark shades of brown and then that dark lens that really create the shape and the colors for this app icon. Mark Kawano So it's really important that you do that. If you just have too many colors, again, it's going to get too muddied up at all those different sizes that a user might see them.

You also want to make sure that you avoid using a photo for your app icon. Photos are too visually distracting. It's hard to have a simplified set of colors and it's hard to have a very well-defined shape. Let's say you were building an astronomy app. It would be really tempting to use this great photo here of the Milky Way and take this photo, turn it into an app icon.

I think it looks okay at this large size. But the user that downloads this is someone that's really into astronomy. They've got a bunch of different apps that are like this. This is not going to be that memorable. And at the smaller sizes, it's really just going to turn into this bluish-purple object that isn't that symbolic.

So instead, really try to focus on some details that you can enhance, simplify the colors. And that's exactly what the designers of the Star Walk app icon did. So they really just took that hue, the purple-bluish hue, simplified it. They simplified it down and then they focused on the constellation. And this is a great app and they really wanted to make sure the app icon represented and created this really symbolic branding element. This is an app that actually won the Apple Design Award in 2010.

And so really try to think about what is that object that you can really focus in and highlight and what are the colors around it that you can kind of just really simplify and really focus on. Okay, the next tip is avoid using a lot of text. Text just typically is a little bit more complex. It's too hard to read at all the different sizes.

But on top of that, the app store is available in so many different countries around the world now. And if you've got a lot of text in your app icon, you're just kind of telling those other countries that, you know, this may not be the type of experience for me.

This is, you know, maybe for that region. And you don't want to cut off access to all these different customers and all these potential markets to make -- that your app icon could be available in. And so I just want to kind of illustrate the first point of just how hard it is to read text in an app icon. So I want to bring up a graphic here. Here we're looking at Fuzz Hair and Makeup Studio. This is, you know, a graphic that's probably designed for a beauty salon, maybe their websites or maybe their, you know, actual signage in the store.

And I think the graphic, you know, looks okay. It's nice. There's nothing wrong with it. And so it would be tempting to just take this graphic, their logo, their identity, and just turn it into an app icon. That would be something that a lot of people have done on the app store. You know, it's the kind of easy thing to do, something that's memorable from people that are going to the app store.

And again, it might look okay at this large size, at 5'12" or, you know, even bigger than that. But it's not going to work well at all the different sizes that a user is going to view it on their device. And you can kind of start to see what happens when it gets really small. You just can't read any of the text. It kind of turns into this blobby type of shape. It's just kind of white with colors. And it's just not really effective as a good app icon.

On the other hand, there's some developers that have done some really great stuff with their app icons. Here's an app called Quip. This is from Glasshouse Apps in Australia. And this is a new Twitter client that was just available on the iPad. Great app for catching up on conversations. And so this is the logo that they've got at the top. They designed this really nice logo, Quip. It's got that Twitter bird in the queue.

And so it would be tempting for them to just take that logo again and then turn it into an app icon, right? But it would look okay at this size. And again, it would start to really fall apart at those smaller sizes. And so what they did was they really focused on some key elements. How could we really emphasize the shape so it's really distinguishable at all the sizes? And we still want to bring in the colors from the branding elements because this is actually some of the colors that they use in their app.

And so what they did was they focused in on just the bird's head. And it really created this nice shape. Used those colors, like I mentioned, from the UI. But it also has that kind of connotation of what the app does because it's got the Twitter bird. And I think it turned out really nicely.

works well with all the different sizes and that's one of the most important things for an app icon. And this is a technique, you know, focusing on a single element rather than just taking your logo, that a lot of companies have done in their app icons. So you can see some of these brands, many of you are probably familiar with these brands. They didn't just take these recognizable logos and put it into an app icon. They really highlighted some, you know, single area of their typeface or their kind of, you know, trademark imagery.

To really highlight their app icon. And so they still have that color palette that's going to kind of call them out and have that branding element. But it's a much simpler shape, you know, either a single letter or, you know, a simple shape that will work well at all these different sizes. And that's so important.

What about the type of app icons where you're trying to represent a physical object? Well, if you're doing that type of app icon, it's critical that you make sure that you're accurately portraying the actual materials that make up that physical object. You need to be really realistic here. So pay attention to the subtle details and textures of fabric or wood or paper or metal or glass, whatever you're trying to represent. Make sure that it looks really authentic.

And so you need to be careful when you're building these types of app icons that you're not just applying the standard gloss. You need to be careful when you're building these types of app icons that you're not just applying the standard gloss. And so when you apply this gloss to these built-in app icons that we have on the device, you can kind of see that actual object kind of isn't as strong of a visual element anymore. It's just a little bit distracting.

So make sure that if you are building your app icon, you're really paying attention to make sure that the gloss is adding value to the actual image. And turning off the gloss is as simple as just checking that pre-rendered checkbox in the project summary tab of Xcode. And then when you submit that gloss, you can see that it's actually adding value to the actual image. submit the icon, we know not to apply that gloss, and everything will look great.

There are some app icons where you want to have gloss where you still want to keep that checkbox selected in Xcode. These are the app icons where you're trying to represent a physical object or you're trying to do something where you selectively want to apply gloss to the actual image. And so you actually bake in that gloss when you're actually creating the app icon in Photoshop or whatever image editing tool you're using.

So as you can see, for example, the YouTube icon, there's gloss on just the glass of the television, but on the wood it kind of falls off because it just wouldn't make sense there. And that's the same thing that we've done with all these other app icons that we've created as well.

So really make sure that you're being true to the materials and really make sure you're not getting distracted by some of the things like reflections and shadows that make up a really great app icon. So the last tip I have on app icons is just to have fun. Be creative.

So developers, you guys have come up with some amazing app icons. And, you know, I just want to highlight some of them. I'm going to show you a few of them. One of my favorites here. This is Route C Pro. This is a great app icon. This is for getting around San Francisco.

This is shaped like a -- or designed like an actual bus ticket if you're used to riding in Muni. Really effective colors. You know, alludes to what it's doing. Really love this app icon. Here's Hipstamatics. This is a famous app icon. They're mimicking the actual toy camera that they've modeled the effects after in their photo app.

Here's Evernote food. This is a great app that made a plate of sushi. Really creative use of this rounded rectangle space. They really kind of thought out of the box, if you will. And to go with the plate of sushi, I thought I'd show you a mug of beer from Brewski Me. And this is a gorgeous icon.

Again, really great attention to detail. You can see all this condensation on the actual mug and the foam. And with all these app icons, really great stuff. And the reason that they work well is not only that they're beautiful at this large size, they actually do follow all of these tips that I went through earlier where they're really highlighting just a few colors, a few simple shapes. And that's really important when you're designing your app icon.

So they wanted to kind of test it around and then they did something more bold. They really wanted to stand out. So they put it on this bright orange background. And they realized the ship was just kind of too small. So they increased the size of the ship, did a bunch of different size explorations there.

And to make the ship as big as they wanted to be, they had to get rid of that outside frame, which was kind of better. It just simplified things even more. And so they were starting to feel pretty good about it. They added some bubbles and you can see those rays coming out of the submarine ship in that bottom right area. you.

The next part of their exploration was experimenting with the background. They simplified things even more and tested it on several different colors. These are the colors that you see when you are playing the game. Going through different levels, you see red water, green water, whatnot. What they saw was that to really highlight the submarine ship, the blue water really kind of set it apart. It has the opposing blue and orange colors.

And it really worked well. And that's where they finally landed. And I think it turned out really nicely. If you look at this icon up close, all these great details, those bubbles, it really looks like you're looking in this kind of underwater graphic. Just the glow around the light, really great attention to detail, really great looking app icon. But like I said, it needs to work at all the different sizes. And that's how you know you've got a truly effective app icon. And that's really what makes this app icon pass that test.

Okay. So there's a lot there to think about for app icons. And that's probably my longest pitfall. So I'm going to go through some of the other ones a little bit quicker. But I really wanted to just kind of take a moment and go through some of these details because it's so important and can play such a big role in the success of your app. So the first pitfall I want to talk about is forced registration. And what I mean by forced registration are app icons that force you to register. You've all seen apps that kind of do this right when you launch them.

They just -- you know, there's two buttons, sign up, sign in. This is not exciting. Users hate this. What they're going to do most of the time is press that third button, the home button on the device. They're going to quit your app. They're going to, you know, delete it.

And they're never going to come back to it. So if you're a user and you actually need registration, it's kind of required, maybe a banking app or even in our WWDC attendee app where we kind of wanted to really limit it to just a limited number of people, well, you know, then it kind of makes sense to have a login wall.

But most apps don't have those requirements. And when you make a user register, you're just kind of saying, you know, they're really motivated. Maybe they will. But who knows? So it's much better to just kind of remove this barrier. So this forced registration when they first started, this was Fondue.

This is an app that lets you discover new restaurants and different things that are nearby you. And then you can kind of take photos and create a journal and rate all those restaurants for your personal memory or just if you want to share those with your friends or the Fondue network.

As most of you probably know, this is a really competitive space. There's a few apps that do something similar to this. And they spent a lot of time polishing the UI, making sure they had innovative features, making sure their performance was great, their database of restaurants was great, so that they were really able to stand out and differentiate themselves from all the other apps that did something like this.

But what they noticed was no one was actually seeing any of that stuff because they would just get to that forced registration and they would just quit the app. So recently they had a big update and they really focused on the onboarding experience. And what they did was they just really wanted to make sure that it just excited people when they launched the app.

So they've got this overview of all the features that a user can kind of swipe between. It's become pretty popular on a lot of apps now. There's four cards that you can kind of see what's inside. And actually, I recommend you download this app because it's pretty cool what they've done with these cards. Each of these screens is actually animated.

And it really just goes that extra distance in wanting to entice the user to actually sign up. But I think the thing that I really liked about this update was what they did on that final card where they said, "Okay, now you know about the features. Here's your chance to sign in with Facebook or you can register with your email if you don't want to use Facebook." But there's also this really important button that they added, which is get a taste. And what get a taste did is just let any user get fully into the app and see how it works. So that's how things work.

They could actually use the GPS to see restaurants nearby, read reviews, even see if some of their other friends or who might have made reviews, if any of their friends are actually using this. And then when you actually go to post a review or you go to your profile tab, that's the area that then they prompt you again to sign up. And after they made this change, the developer called me up and they said, "Well, engagement has gone up by 42% since we made this change.

That is huge in this competitive area." And so I think it goes without saying. And so I think it goes without saying that this was a really important change. And they've also gotten way more positive reviews since they've, you know, really wanted to focus on this first launch experience.

So really avoid forced registration and think about how to get your users into your app as quick as possible so they can see all the work that you put into it. Okay. The next pitfall, tiny controls. So this is a topic that may sound familiar to any of you who have heard some of my previous UI talks at WWDC or at the tech talks or any of the other things that I've done.

But this is a topic that I think is really important. And I think it's really important. And I think it's really important for any of the developer videos we have on UI design. But this is a topic that I need to repeat because still so many developers are designing controls that are just so hard to tap on.

For example, I want to bring up what we could have done with the WWDC app. This is a modified version. And as you know, we've got so many sessions and labs going on. It would be a strong argument to say, well, let's try to show as much content as we can to the user so they don't have to scroll as much. There's just so much data. And so to do that, maybe we'll shrink everything down. We'll take labels off.

We'll make the buttons a little bit smaller than the defaults. We'll make the table view cells that much shorter. And it will be way faster for the users, right? Well, the truth is this is an experience that's going to be really slow because the user is always going to be tapping on the wrong item or they're just going to have to slow down to make sure that they tap on exactly the right item.

And so when you compare this to the UI that we actually shipped in the developer app, you can kind of see that there's not as many sessions and labs, but it's actually going to be a way faster experience because they'll be able to tap on just the right item.

It's critical that you design your UI for a fingertip. Still, there's too many apps that are designing for that pixel-precise mouse cursor. So really think about designing for the fingertip. And in the iOS human interface guidelines, we recommend controls to be a minimum of 44 by 44 points. And the built-in calculator app is a great reference to follow for this sizing.

So the buttons are actually all wider than 44 points. There's nice, adequate spacing between them. And they're all 44 points tall. And it's not just the built-in calculator app that we follow this 44-point rule. It's all throughout iOS. So if you look at the nav bar, that's 44 points tall.

If you look at the toolbar, that's 44 points tall. Now, the buttons and the glyphs in those bars are actually smaller than 44 points because they need to fit in that space. But the area that's actually going to recognize the touch input, that's 44 points, and that's really important. The rows and table views and group table views, they're 44 points.

The buttons in popovers on the iPad are 44 points tall. Now, this is a bigger device, but you're still using your finger, and so you still need to follow all of these rules. The controls in FaceTime are 44 points. So I'm going to stop here. I'm not going to go through the rest of iOS and kind of show you everything. But I really wanted to kind of drive home this point that, you know, go through your app and make sure you're really paying attention to all these details. Make sure that you're designing for a fingertip.

If you're designing an app that is used by different types of people or in different scenarios, you might even need to increase the size from there. Here we're looking at a great app. This is Strava Cycling. Strava has this awesome service for people that ride bicycles where they can find different routes that people are going on and they can track their GPS against time and even compare themselves to other people that have done those same routes.

And so when a user uses this app, they could be wearing bicycle gloves, they could be kind of tired because they just got on or got off their bike, rather. And so when they design that start button that kind of logs the bike ride that you're about to go on, they want way bigger than 44 points.

And so that button is 110 points. And so think about how your users are going to be using your app, what the scenarios are. Are they young? Are they old? What are the different demographics that you need to pay attention to? And make sure your controls are designed for them.

Okay, so that was Tiny Controls. The next pitfall is hard to read text. And this is similar to Tiny Controls. This is another thing I see so often. And that is just text that's really hard to read. Many reasons. This is another version of what we could have done with the DubDub app.

Good thing we didn't do this. But it's got a whole bunch of colors and typefaces to kind of accentuate different types of information. It's just very visually noisy. We've got this gradient that's behind each cell of the table view because we wanted to maybe really call attention to this app and differentiate it.

We wanted to differentiate from other just standard table views. But all of these things just add up to this visually complex kind of mess that you see here. Now, I have seen, to be fair, a few apps that do a little bit better of a job with that gradient treatment where maybe it fits into that background cell. But you need to be really careful there.

Usually a gradient behind the cell of the table view creates this weird effect when you start scrolling because you really have this kind of moire effect, almost like when you're looking at Venetian lines. And you get distracted by the actual background, the chrome. Instead of the actual text that's written in each one of those cells. So you really want to simplify things. You also want to make sure that you're avoiding mixing a lot of typefaces in your app.

Because, you know, the screens aren't that big on the iPhone and the iPad. And it's a really small area of space. Instead, use subtle shading and font sizes to distinguish the different types of information that you want to kind of present to the user. So here we're looking at the Mail app on iOS 6.

And you can kind of see that, you know, we're using the standard UI kit framework for how this gets laid out. And it really is these subtle attention to detail around the font sizes and the shading that really helps the user figure out what the different pieces of information are. So the most important piece of information is the sender that gets this nice Helvetica Noia 17-point bold treatment. It really stands out. The next piece of information that a user might care about is the subject.

So that still stays a Helvetica Noia. But now it gets bumped down a few points on the font size. Still black. No longer bold. And underneath that is the message preview. This is kind of a tertiary piece of information. Sometimes you read it. Sometimes you don't really need to to get to the email message you're looking for.

Still Helvetica Noia. But it's this light gray 13-point. And you can see that, you know, information is laid out nicely. You still know the different types of information even with just the standard Helvetica Noia typeface. Now, 13-point is actually the minimum size I ever recommend you use if you're using the system font. Because anything smaller than 13-point is just going to be too hard to read. Users are going to need to squint or have to bring their device closer to their face. And you don't want to make them do that.

And really, 13-point should only be used for tertiary pieces of information. You know, really, you know, labels or, you know, something like this. They're just getting a small preview. If you need to actually read -- if the user needs to read a lot of text in your app, you need to go bigger from there.

So actually, in mail, when we actually go display an actual message, it's actually 15 points. So it's much more legible for line wrapping. And so if you've got an app where the user is going to be spending a lot of time maybe reading a book chapter or a news article or something like that, you know, make sure that it's really legible.

You also want to make sure that you're aligning text. And again, you'll get a lot of these things for free if you're using the UI kit layouts. And the alignment is really important because it just makes using the app a lot faster, which is really important when you've got these utility apps, your user's trying to get a task done on the go. So when there's that alignment, it creates this nice grid that creates that nice line that a user can focus their eye on and just really quickly skim all of the different data.

You also want to do this when you've got labels in addition to values. You need to make sure that you're right aligning the labels and left aligning the values. And what that's going to do, again, is create that single line for the user to kind of look up and down as they're scrolling or just looking at a single screen and find that piece of information that they're looking for.

I've seen a lot of developers who aren't using UIKit layouts, and so what they're doing is just kind of defaulting and left aligning everything. And it creates this weird zigzag pattern across the screen. You know, there's no grid. There's nothing that's clean there. And every user basically has to read every single line on the screen to find what they're actually searching for. And it's just really slow.

Okay, so that was hard to read text. The next pitfall is ambiguous alerts. Oh, before I actually get to this pitfall, I just want to take a minute and really talk about the importance of testing your UI on the iPhone and the iPad to actually avoid some of those previous pitfalls.

So a lot of times the reason why the controls are so small and hard to tap or the text is hard to read is because in the design process, in the design phase of the development process, the person wasn't adequately testing the actual screen density of their UI. So, you know, the iOS simulator is a great tool when you're actually developing, but now there's a lot of actually wonderful tools that you can use when you're actually in the design phase, before you even start the development phase.

And so there's a bunch of apps that basically launch -- you can use them in your Mac, and you just -- whatever you're looking at, you can just, you know, beam them over to the iPhone or to the iPad using the same wireless network, and that UI will show up over there. And these types of tools are really critical when you're building an app for the different screen densities that actually happen on iOS.

And so some of these tools are great. Live View has been around for a while, and this just is a really great tool for just kind of streaming out over Wi-Fi, everything that's going on. You can even kind of see animations that are happening on your Mac onto your actual iPhone or your iPad app.

There's also Scala View now from Bajango. This is a great tool. It integrates directly with the latest versions of Photoshop. Everything you're doing in Photoshop actually just shows up on your iPad or your iPhone right away. Great tool. There's also Xscope Mirror from the Icon Factory. Now, the Icon Factory, as most of you know, they put out great utilities for development.

And this tool has all these awesome tools for just pixel-precise measurements. So you can really kind of take a look, preview everything that's going on, and measure exactly what might be going wrong. And there's a new one that's relatively -- yeah, it's relatively new on the App Store, just a few months, I think. And it's called Xscope Mirror. It's called Screenshots Journal. This is an iOS-only app.

It doesn't have a Mac companion, so it's not really for previewing exactly what you're working on the Mac. But this is a tool that basically extracts all the screenshots that you've saved to your camera roll on your iPhone or iPad and just presents them in this nice UI.

And then it lets you zoom in on them. And when you're zooming in, it puts this great pixel grid on top of the magnified UI so you can see exactly what's going on on the actual device. So if there's an issue with some aliasing or maybe a non-retina graphic managed to get into the code or into the design, you can kind of call that out. Any little kerning issues, really great utilities. And there's actually so many more utilities that aren't mentioned up here. There's Silk Screen. There's Prototyper.

There's a lot that come out, it seems like, almost every month. So figure out a tool that works well for your workflow. But please, the most important thing is that you're actually testing your UI on the actual device early on in the design process. Okay. So let's get back to the pitfalls. Now we'll talk about the next pitfall, which is ambiguous alerts.

So, many of you have maybe seen an alert like this, right? It's got this cryptic error message, and it's not really helpful at all. It's just annoying. What am I supposed to do? Okay. Or maybe something even worse, something destructive and scary. Are you sure you want to cancel this transaction? Okay, or cancel? What button do I press? What's going to happen? Again, you're probably going to quit this app, and I don't know what you're going to do, right? So, to help you really avoid some of these ambiguous alerts, I want to go through some tips on how to really effectively communicate information in your app.

So, the first tip is actually just to avoid unnecessary alerts whenever possible. So, really try to embed important information directly into the UI of your app where it makes sense. So, here we're looking at the mail app, and what we do in the mail app is we actually show the last time that we were able to hit the mail server. And so, that actually gives the user an idea of what's going on. And so, that's really important.

And this way, we don't need to throw up an annoying alert every time the cellular network loses connection or anything like that. It's just, okay, that's the last time I got my mail. And, you know, really try to think about in your app, what's the important information that you were maybe thinking of just putting into an alert, and think about how to embed that directly into the UI.

You want to make sure that you're using appropriate labels. So label buttons by their resulting actions. Resist the temptation to just use OK and Cancel or Yes and No on all of your buttons in the alerts. Those are just not that helpful. Usually when you see OK and Cancel, you have to kind of map what OK is going to do.

And so you have to read the text, and you have to be very clear with the question. Well, with software, of course, you can put whatever label you want on any different button and really take advantage of that. Here we're looking at the alerts that you get from the reminders. And you can see that the buttons are labeled Close and View.

Remember, alerts are just kind of jarring to users. They kind of come out of nowhere. It's this surprising thing. And they may be doing another task. They may be showing their phone to somebody else, some photos, or browsing the web. They might just really quickly want to dismiss that alert. And so having these buttons clearly labeled Close and View just leaves any of that ambiguity out of there.

Make sure that you're putting the affirmative button on the right. So on iOS and OS X, we've always had cancel on the left and the affirmative button on the right. And this is really important. There's a lot of apps out there that are kind of following the Microsoft convention. They're putting okay on the left and they're putting cancel on the right.

And what that does is it kind of messes with people's muscle memory. So maybe one of these alerts kind of comes up and a user just really quickly wants to dismiss it and they'll tap that button on the right and now it's no longer the okay button or the affirmative button. It's now the cancel button and they may have done something pretty destructive. So really make sure you're following iOS conventions so that users can take advantage of what they've learned throughout the platform.

Okay, so that was ambiguous alerts. The next pitfall is out of place terminology. And this is similar. Again, language is something that's so critical in an app. So you want to make sure that you're really using language that makes sense for people. Remember that most users actually don't care about the technology that you've built into your app. They care about getting something done or having fun. They care about using it. They don't care that you've adopted this technology or all the cool stuff that you and I get excited about. They just want to get their stuff done.

So here we're looking at what we could have done with the Settings app. Here we're looking at Settings in iOS 6. And you can kind of see that if we maybe just didn't spend any time on coming up with good language, we could have gone with these terms. Cellular baseband. What does that mean? Turn that on and off. Or other things. System alerts or other alerts. What's the difference? Right? It would be kind of just confusing. Bluetooth LA. Who cares? That's the technology. Doesn't really matter.

When you compare that to the actual terms that we've used, it's actually all stuff that's very user-centric. You know, do not disturb, airplane mode, notifications, things that actually a normal user that has no technical ability can kind of make assumptions about. Oh, I think I probably know what's in that settings area.

So really spend a lot of time on the language in your app. And we do this, again, throughout the platform. In Maps, we talk about dropping a pin. This isn't add GPS indicator to mapping location. You know, it's just drop a pin. we describe what's going on in the actual interface and make sense to people.

An important thing is throughout iOS, we abstract the underlying file system. This is a new world with iOS. So we don't talk about files. We talk about listening to music or watching videos or viewing photos. And when we do need to kind of reference more of the typical file type of formats in our apps such as numbers from iWork, we talk about them exactly as they are. Again, we just talk about these as spreadsheets. You won't see a command in numbers such as new untitled dot numbers or XLS or anything like that. It's just exactly describing the content that the user is working on, the actual document.

Okay, so that's out of place terminology. The next pitfall, excessive branding. So this is something that I see a lot from a lot of developers that have just come from the web, and that is you see logos everywhere. So let's say we're looking at the DubDub app again, and here you can kind of see that we're excited about WWDC. We all know that you are as well. So let's put that logo on every single screen in our app. Get everyone excited. They'll really know that they're in this app. Well, that's really annoying. You don't want to do that.

Remember that the reason why logos are at the top of every web page is because users kind of need a way to get back to the home page, and they may have done a search and kind of landed at some page deep into your website. And so by having that logo, it just kind of identifies to the user where they are, where they've kind of landed. But on iOS, that's not the case at all. They've launched your app using the actual app icon or by using Siri. And so they know what app you're in.

Use the tips that I just went over for the app icon section to really make a great branding statement there. Within your app, the best branding that you can have is just having a streamlined user experience where users are able to accomplish their tasks. So it's much better to actually label the screens -- label the navigation bar by the screens that they're at.

And this is really helpful if an app has deep hierarchy and there's lots of levels that a user is going to be going up and down, or if there's a lot of screens in an app that kind of look very familiar to the user. And so that's really important. And so that label is really going to let them -- help them identify exactly where they are in the UI.

Okay, so that was excessive branding. The next pitfall is uninformative back buttons. And like excessive branding, this is a pitfall that is actually, you know, very common from developers coming from the Web. And so uninformative back buttons are -- you know, you can recognize them by that back button that's actually just labeled "back." Now that's not a helpful label at all. Everybody knows that that button in the upper left corner that's shaped, you know, pointed to the left, that's going to take them back one level in the hierarchy.

And so if you just use the word "back," you know, you're not adding any value to that label. So you really want to label these by the screen that they're going back to appropriately. Even if the UI -- the label of the screen won't fit into that back button, you need to truncate, that's still way more helpful than just the word "back." So really label these appropriately. Again, this is kind of a metaphor that's come from the Web. In a Web browser, the back button always means show me the last page I was looking at. And so you can tap that and you always know you're going to get back there.

On iOS, it's actually slightly different because it's not going to be the last page you're going to see on the screen that I was looking at. It is taking me back up one level in the hierarchy, but, you know, maybe a modal sheet or something else could have come up in between, you know, me landing on this screen. And so that back isn't actually going to take me just back. So it's much more helpful to actually label this by where it actually goes.

Okay, so the next pitfall: confusing animations. So I've talked a lot about animations in some of my previous talks at WWC and some of the videos that you can get on the developer website. And, you know, it's important. Animations is one of the things that really sets iOS apart from other platforms.

We use animations all over the place to make the experience more engaging, more intuitive, just, you know, a lot more fun. But you need to be careful with animations that you're not distracting from the core user experience, from the core task that a user is actually doing. And so you really need to be careful about how you implement animations into your app.

You're all familiar with the weather app. This is what it looks like and what happens when you actually tap on that info button. It kind of flips the weather card around. And so right away that animation kind of has introduced this concept to the user that this is a card and on the other side are the settings.

Now, if I was to press that done button, I'd expect that card to flip back over, have a very symmetrical animation, and it would make sense. But there's a lot of apps that actually don't do that. They do something weird, you know, so they don't finish it off. And so maybe it flips over and then slides away.

And again, it's one of these things just like with alerts and language that a user is not going to necessarily be able to point out and say, okay, this app was really confusing because they didn't have symmetrical animations. No, they're just going to say, I don't know, it felt weird. It was hard to use. I didn't know what was going on. It was confusing.

So really make sure you've got symmetrical animations. Make sure you're also following, again, standard conventions. I've seen a lot of apps on the App Store that aren't using UIKit. They're kind of doing their own formats. They're using the same formats for whatever reason. And they're trying to mimic a lot of our built-in animations.

But they're not going the full distance and either implementing them right or they're trying to get creative to differentiate themselves. They've ended up creating something that does differentiate themselves but not in a good way. So when you tap on the cell, instead of, you know, pushing everything over, maybe it slides on top.

And again, these animations are introducing these physical concepts to the user. So now the user thinks that possibly all these levels of the hierarchy are stacked on top of each other. So you can't just say, can I just press the back button or can I just swipe anywhere on the screen to get back because everything's stacked on top? You just don't want to leave any of these questions into the user's mind. You know, really stick with animations that make sense. And wherever possible, just when you're creating your animations, just really think about the physics of real physical objects. That's what we do when we're building our animations in iOS.

Okay, so the next pitfall and the last one is inappropriate styling. And so what I mean by inappropriate styling are just apps that have a visual design that's just not appropriate for the type of app or the type of content that the user is kind of consuming. So I want to show you a screenshot of what we could have done with the Photos app. And instead of that black background that you're used to seeing, I've put it on this really nice-looking wood texture. And I think when you look at it, it actually looks okay. It works well. Maybe the photo, the piles of photos looks like it's on this antique desk.

But as you kind of look at it more and more now that it's been up on the screen for a few more seconds, you can kind of see that what's happening is the background is actually way stronger visually than the actual photos. You're taking all the kind of, you know, the visual -- you're taking the attention to the actual background instead of the content that the user cares about. And when you compare this to the black background, which is much simpler, you can see that the user just really pops the photos. It makes the photos center stage.

And it lets the user easily identify what's in each of those different piles. So it's not only, you know, better looking, but it's also more effective. So a really great tip for thinking about the visual style of your app is to really think about the type of app you're building.

And I kind of show this graph a bunch, which is put entertainment on one side and utility on the other. And think about where your app falls on this axis. Because if you figure out where your app belongs, you'll be able to define some key characteristics that you can apply.

It's the visual styling of your app. So entertainment apps, they need to be highly visual, fun, and immersive. But on the other side of the spectrum, on utility apps, they need to be useful, efficient, and reliable. And so to show you an example of each of these apps, I just kind of want to actually go to the app store and show you. Here's Bjork's Biophilia. This is an amazing app in the entertainment side.

Bjork built this app as part of her latest album as a universal iPhone and iPad app. And it's an amazing audio/visual experience. You're not hearing the sound, of course, right now. But when you kind of go in, you're just kind of floating in this 3D galaxy, and you get all these stars, and it's very kind of just experimental. And this is actually the navigation system. So you're floating around these constellations. When you tap on any one of those brightly colored stars, you kind of dive in right into one of the songs or video game type of experiences that she's created.

And in each of these different interactions, there's all these things that you can discover, just tapping or swiping. Or using the accelerometer, depending on the interaction. So a big part of this app is just discovery and figuring out and being delighted when you discover this cool new interaction that they've built in.

And that works really well because this is really definitely an entertainment app. Now imagine this type of UI on the other side of the spectrum with a hardcore utility app like mail. How frustrating it would be if your messages were floating in space and you kind of had to discover things. You know, where's the reply button? If I swipe here or turn -- That would just be ridiculous. With mail, users don't really care about spending a lot of time and kind of having a lot of fun with mail.

Maybe they do, but most of the time they just want to read their messages and kind of move on. Utility tasks are something that users want to get in and out of pretty quickly so they can get to their entertainment apps. So you want to really design a streamlined workflow that really is reliable for them. They know where the buttons are. They're using the standard UI kit Chrome and everything that a user has kind of learned from iOS.

There are some apps that are somewhere in between entertainment and utility. So GarageBand is a great example. So in these types of apps where you've got a hybrid app, apply the characteristics to the parts of the screen where it makes sense. So the instrumentation screen is really visual. It's fun.

It's immersive. And you can spend a lot of time just playing the drums or the guitars or the different keyboards. You can really lose yourself in that task. But on the other side, when you go to actually mix a song, it's a completely different type of UI. The graphics are still really nice looking. But this is a screen that's been designed around efficiency. So you can mix your song as fast as possible.

And if you're familiar with GarageBand on the Mac, it's a very reliable UI. It's something that you're familiar with from that experience. We've done the same thing with iMovie as well. This is another app that's kind of in between on that spectrum. So when you launch the app, it's this fun experience. You get the movie posters from all the different things you've created. There's a nice animation for the neon sign. And you get the sound of everything flickering on.

You know, really fun, immersive experience. But, again, when you go to actually edit a movie, the UI is completely different. It's all designed around efficiency. We could have continued this metaphor of this movie theater and just taken it into the actual editing area. Maybe we would have, you know, celluloid splices and a linear editing machine that you'd be kind of pressing buttons on.

But that really would have gotten in the way of actually editing a movie. The fun part of iMovie is actually sharing movies with your friends through e-mail or uploading them to YouTube. It's not actually editing the movie. So you don't want to necessarily spend a lot of time in that area.

Think about these different types of characteristics, apply these to the screens where it makes sense or to the whole app if your app is on one side of the spectrum or the other. The other thing that you want to focus on when you're designing the style and the visual design of your app is the content. You want to make sure that you're really using realism where it's appropriate and that you're always highlighting the content in your app.

Here we're looking at the built-in compass app. This is an app that doesn't actually have a lot of content. It's actually great that we use realism. We have this wood. It's only a single number, the direction and the latitude and longitude that you're looking at. By actually designing in this realism, that great brass and the wood, it actually gives the user a sense of how to use this app because they just put it in their hand and they move their phone around. It works. It's a lot more memorable than just a number that would just show up on the screen.

Here's an app called Etude from Steinway and Son. This is an app that's a metronome, and so you can use it when you're practicing the piano. And as you can see, there's just a single number, and so they really used realism to kind of create this expensive-looking tool that would fit right at home on a Steinway and Son's piano.

Here's Thermo from Robocat. This is an app that's really fun. You launch it, the mercury kind of animates up the thermometer, and you can see what the current temperature is at the location that you're at based on your GPS. Again, just a single number, not a lot of data, and so they really focused on the visual, the background, the chrome. Essentially, with all of these apps, they've turned the content into the chrome itself because there's not a lot of data coming out there.

Here we're looking at a screenshot from DM1, the drum machine. This is one of the apps that won one of those design awards on Monday. And this is an app that does actually have more data than some of the other ones that I just showed you, but this data is actually static.

It's not moving around all the time like mail where things are constantly changing. And all the content is also text here as well. There's not photos and videos that are static. It's text. And so by using the graphics, they're able to really create this memorable experience, and it looks like a real drum machine. It's a gorgeous app. If you haven't seen this on a Retina iPad, I highly recommend you download it. It is really beautiful.

And here we're looking at the Voice Memos app. This is the built-in microphone that you are all familiar with. Again, not a lot of data, just the audio input, and so we've turned that into an analog meter. But actually, when you go to actually access a voice memo that you've created or saved, the UI is completely different, right? We don't have this continuation of this studio metaphor to access your different voice memos.

We don't make the user put in eight tracks or press chunky Chrome buttons because that would get really frustrating when you've got a lot of voice memos saved in there and you're trying to find exactly the one that you created at a certain time. And so, again, just like I talked about applying the different characteristics to the type of entertainment or utility apps, you want to do the same thing with the type of content that you have and make sure that you're really paying attention to the information density of your app.

OK, so I really want to stress the importance of making sure that you've got an appropriate style for your app. Don't just look at any other app that you think is beautiful and just apply those characteristics to your app. Really think about what makes sense for your users.

Okay, so that was the last pitfall. And there's so much to cover in UI design and the human interface guidelines actually goes into way more detail about all the topics that I just talked about. It's a great resource. This is a photo that a developer sent me of their human interface guidelines.

And I love this photo because it really shows how I imagine all HIGs should look. It's used, it's printed up, it's bookmarked. And it's actually very reminiscent of the HIG that you would see if you're walking around the offices in Cupertino. Because all of our developers and designers are also constantly referencing this document.

Okay, so before I wrap up, I just want to leave you with some final thoughts. So like I said earlier, there's a lot of information that's come up this week. I hope you've had a chance to learn all the greatest new tips and tricks to really get your apps kind of performing better, to make all the technology just feel wonderful.

And we've put a lot of work into our platform to make it really easy for you to build apps. And so you'll hear from a lot of people this week and a lot of just people when you're talking about iOS in general after this week that, you know, designing an iPhone or an iPad app, it's really easy.

It's an easy thing to do. And that's true. We think it is the easiest platform to design an app for. But the truth is designing a great app is extremely difficult. And the reason why designing a great app is extremely difficult. It's not because of some of the stuff that we've covered this week.

It's not about, you know, the coding techniques or the different APIs or the different frameworks. It's not even about most of the different UI tips that I've gone through today or all the great resources that we have in the human interface guidelines. The reason designing a great app is hard is because of all those different decisions you're going to need to make throughout the process and getting agreement by the different team members that you have. And so you really want to make sure that you're spending all of your time.

Focusing your efforts. You want to determine just the essential features in your app and really spend all of your time just polishing those bits. When you try to do too many things in your app, you're just not going to set yourself up for success. Now, I can't think of any app on the app store that is successful because it's got more features than everybody else. But I can think of the most successful apps. And when I look at them, it's because they made the hard decisions about what features not to include, which users that aren't as important to them.

They're the apps that really do one or two things better than everybody else. And if you're able to do that, if you're able to have just one thing or two things that are better than every other app in that space, you're going to really set yourself up for success.

And then you'll be able to build on that and add some of those features in app updates. Okay, so here's my email. Please get in contact with me if you've got specific questions on the UI of your app. And always constantly reference the human interface guidelines. Thank you very much.