Hi, I'm Mark Kawano, Apple's User Experience Evangelist. I spent many years as a designer at Apple, and I've also helped thousands of developers improve the design and user experience of their iPhone and iPad apps. From this experience, I've put together a list of tips that address some of the most common design issues I've seen. The tips I go through today will help make your app more useful, intuitive, and beautiful, and this should be your goal.

If you can design your app to have these three qualities, it will be more memorable and more successful. More people will purchase or download your app, talk about it to their friends and family, and they'll be more likely to give it a good review on the App Store. It doesn't matter what type of developer you are or what type of app you're building. The goal should be useful, intuitive, and beautiful.

Tips are split into seven different sections: focus, touch, animation, sound, language, typography, and graphics. And throughout, I'm going to be showing examples of many of the apps that we designed at Apple, and I'll also show examples of apps that other developers built. So let's get started with focus. First, I want to talk about focusing your app. Whatever type of app you're building, whether it's for productivity, media consumption, communication, or entertainment, your app should provide a useful and elegant solution. And the feature set should be focused on whatever problems your app helps to solve.

The reason people love using the iPhone and iPad isn't because they come with every feature in the world. People love these devices because they solve a targeted set of problems in the most innovative and elegant way possible. Similarly, your app should be highly focused on just the tasks that are most important for your users.

In the iOS HIG, we describe a tool called the Application Definition Statement. Essentially, the Application Definition Statement is the answer to two questions: What does the app do? And who will use it? And it should be clear and concise. So let's take a look at an example: an alarm clock for business travelers. Nice and simple. And immediately, you get a mental picture of what the app might look like and what features it will have.

You probably want a recurring alarm so the user doesn't have to set it every day. And lullabies might be a nice way to help some users go to sleep. GPS-based weather, moon phases, or ocean tide charts would be cool. And maybe farm animal sounds as the buzzer might be kind of funny. But after you've listed out your potential features, continually refer back to your application definition statement. An alarm clock for business travelers. As an exercise, let's take a look at what happens when you change just a single word.

Instead of an alarm clock, now you have a weather clock. And right away, a different mental picture comes to mind with a different set of features. Or what if you stick with an alarm clock but change the user? So instead of an alarm clock for business travelers, you have an alarm clock for children. Again, you get a completely different picture of what the app might look like and what features would be appropriate.

But let's stick with our original statement, an alarm clock for business travelers. When we look at the original feature set, it's clear that many items don't directly relate to our application definition statement. Weather information is interesting, but there are several weather apps that have some really beautiful interfaces that would be hard to compete with. And animal sounds and lullabies might be cute, but they probably aren't appropriate for most business users.

Use your app definition statement to refine your feature set to just the most important tasks for the users you've identified. If you try to solve too many problems, people will get confused about what the app is for and it will be extremely difficult to come up with innovative ways to solve each problem. By focusing on just the right set of features, you can ensure that each and every one of them is designed and built in the most intuitive and elegant way possible.

Now I want to talk about focusing your user interface. Your UI should only contain the options that matter most for any given task. As you design each screen, you should ask yourself, "What's important now?" Examine every element and question whether it's really necessary for the user's primary task. In the Photos app, each screen has a clearly defined purpose: choosing an album, or choosing a photo, or viewing a photo.

And there can be controls for other options, but when you look at each screen, it should be very clear what the primary task is. Once you've identified what's important, you can showcase the content that users care about most. Look how the photo fills the entire screen here. Even the controls that do appear are placed on a translucent bar, and after a slight delay, the controls fade away.

Here's the Maps app. There's one bar at the top and one at the bottom, but the map dominates the screen. And here's iBooks. The entire screen is a book page. Just like the Photos app, the controls fade out over time so the user can concentrate on the content that they care about most.

Here's photos on the iPad. Use the bigger screen to make the content look that much better. The fact that the content fills the entire screen makes the iPad one of the best ways to view photos. And here's Maps on the iPad. Notice that there aren't more controls all over the screen. Instead, the bigger map gives you more awareness of the places you want to explore.

And this is Pages from our iWorks suite. This is an app with many features, but the document fills almost the entire screen with just a single command bar at the top. This really allows you to focus on whatever flyer, report, or brochure you might be working on. The features that aren't as important should be placed on a different screen. In Photos, we put all of the sharing options in an action sheet.

If we had tried to put each of these features on the previous screen as additional icons of the command bar, you would see a lot less of the photo. And also the tab targets would be really small and you wouldn't get the nice clear text labels. So look how much nicer that is with just the photo filling the screen.

And on the iPad, you can place additional options in popovers rather than taking the user to a different screen. Many people think that because the iPad is much bigger, all the options will fit in bars along the top and bottom and just be one tap away. But if you do this, you'll create an app that's complicated and confusing. Users won't be able to find commands that they care about most and efficiency will be lost. In photos for the iPad, we placed all the sharing options in a single popover.

And popovers are nice because they're contextual. You can see the commands while continuing to view the content that they apply to. And in Pages on the iPad, we've placed a lot of functionality in popovers. When you tap on an item in the document, the popover updates to provide just the options that make sense for the selected item.

In iBooks, there are display and typeface options and popovers so the book page can fill the entire screen. So that was focus. Remember, focus your app. Create an application definition statement so you can spend your time on a targeted set of features. And focus your UI. Don't overcrowd the screen and expose every feature at once. Instead, showcase the content that people care about most and place secondary options in popovers or a separate screen. When you design for clarity rather than the minimum number of taps, your users will be much more efficient at whatever task they're trying to complete.

So the next topic is touch. Optimizing your UI for the touchscreen is one of the biggest shifts you'll have to make if you've been designing for the web or desktop where there's a keyboard and mouse. It's really important that you design controls with a finger in mind. Having buttons or other controls that are too small is one of the most common problems I see in iOS apps. Imagine trying to use an elevator that was designed to be used with a mouse instead of a finger.

The buttons would be very small and close together, and when you tried to tap one, you'd probably select all the floors above and below the one you wanted to go to. It sounds ridiculous, yet so many apps don't provide controls sized for a finger. In the iOS HIG, we recommend tap targets to be 44 by 44 points at a minimum, and the built-in calculator app is a great reference to follow.

But remember, not all apps are used the same way or by the same people, so it's important to consider the usage. This is the Nike+ GPS app for runners, and it connects to a pedometer in Nike+ sneakers and tracks distance, time, and location. It even gives you audio feedback when you listen to your iPod music to encourage you as you run. And notice how they made the pause button nice and big so it's easy to tap when you're on the go.

And this is an app that plays songs for kids called Kids Song Machine. Since it's targeted at very young children, the exit and lyrics buttons are nice and big. On a touchscreen, it's also important to provide a good amount of space between controls. When you put controls right next to each other, you increase the chance that your users will accidentally tap the wrong item.

Here's Cut the Rope. It's one of the most popular games on the App Store, and it's incredibly addictive and consistently ranked in the top most paid-for apps. And Cut the Rope does a great job spacing the different buttons in the pause menu. Usually, you've paused a game because you were distracted by something. Providing the extra space ensures that you won't accidentally quit the game and lose any progress that you may have made on that level.

And here's Cut the Rope for the iPad. All the same rules about spacing and sizing still apply. The screen may be much larger, but remember that your fingertip is the same size. Users also expect immediate feedback when using a touchscreen. So take a look at the passcode screen.

Every button has visible tap states and other parts of the UI update. When waiting outside an elevator, you've most likely interacted with a button that doesn't provide good feedback. So you press the button and nothing happens. So you press it again and again. Sometimes you keep holding the button down until the elevator arrives. That's a bad user experience. You don't want your users waiting and wondering as they interact with your app.

Remember, the iPhone and iPad's touchscreen doesn't know where your finger is. Unlike a computer that always knows where the cursor is, your app won't be able to provide rollover states or tooltips to indicate when an element is interactive. Designing buttons with shine, texture, and depth will make controls look tappable. Let's take a closer look at the Calculator app. The slight gradient and border treatment on each button makes them look raised. And the area displaying the numbers, which isn't interactive, appears flat.

And notice the way our switch controls look like an actual switch. Right away, users know how to interact with the screen after they turn on the device. Another good way to make controls look tappable is by following standard iOS conventions. So this is the iTunes app. And throughout iOS, we use rounded corners to indicate interactive elements. And chevrons are another convention to let users know they can tap on an item in a list. By using these conventions, you're often able to reduce the amount of visual noise in the UI, and users will recognize these subtle indicators to understand which items are interactive.

If you're designing an immersive game or you just have a UI that's highly themed, make sure the interactive elements stand out from the background. Here's Nova. It's a first-person shooter game with controls surrounding the screen. And they've got everything you need to look around, steer, jump, shoot, change guns, throw grenades, and freeze aliens. And notice how they use a translucent overlay to separate the controls from the background art so you know where to tap.

So those are some great tips for touch. Make sure your buttons are properly sized and spaced on how your app is used. And provide immediate feedback so the user isn't left wondering if a gesture was recognized. Give your controls a tactile look and make sure the interactive elements stand out from the background.

The next topic is animation. Using animation in your app makes it more realistic and engaging. And when done well, animation can provide useful feedback to help inform and educate your users. When a user creates a new note in our Notes app, we use animation to curl back the page like a real notepad.

And when a user deletes a note, the trash lid opens up and the page slides into the trash bin. Not only does this add a heightened sense of realism, but it also helps smooth the transition from one view to another. In the real world, objects don't just appear and disappear, and if you see this in an app, it can be very confusing.

Animation is also a great way to acknowledge a user's action and assure them that something is happening. In the iTunes app, we use animation to let a user know when a song preview is being downloaded, and if they buy a song, an animation lets them know where to find their purchases without forcing them to leave the screen or read a modal dialogue. So let's take a look.

You can see them previewing, and purchasing, and then downloading. Unless you're building a game, it's important that your animation is not gratuitous. The velocity and position of the animation should directly match the user's gesture. In Keynote, when a user moves a slide in the Navigator, we use animation to let them know they've got it. And when they drop it, the other slides ripple away from that area. And because the animation follows actual physics, it makes the experience feel very realistic.

And in iBooks, as your finger slides across the screen, the page curls back and directly tracks the user's movement. Matching the user's gestures really makes you feel like you're turning a real page in a book. Be realistic. If your animation isn't realistic, it can be distracting and confuse your users. If you flip an item to show settings like we do in the Weathers app, users will associate the widget with a physical card. They will assume that there's only two sides to the card, and to view the original content, the card must be flipped back over.

And in the Photos app, the user can pinch a pile of photos to preview what's inside an album. And the actual photos expand out while you pinch. It feels like you're really picking them up and fanning them out on a table. You don't see the same photo twice because that wouldn't be realistic.

So to summarize animation: use animation to smooth transitions and give users feedback about what's going on in your app. And don't be gratuitous. The animation should match the user's gesture as much as possible. And unless your app's a game or game-like, be realistic. Animation, when done well, can make your app much easier to use and really bring things to life.

So now I'd like to talk about sound. It's really a shame that so many developers forget to consider sound when developing their app. Like animation, sound can add a heightened sense of realism to your app and create a much more memorable experience. A great audio cue can help your brain better associate an action with its result.

Those are some familiar sounds to anybody who's used an iPhone. You want to be careful not to rely on sound as your only form of feedback because the user may have muted their device. But when you do utilize sounds to communicate status, you're often able to reduce the visual noise in your UI.

In the real world, you hear sounds all the time when interacting with physical objects. And when you add sounds to interactive objects in your UI, they feel more realistic. For example, when a user changes a value in their standard picker UI, they hear a click at each setting. This subtle but realistic sound reinforces the visual concept that a user is spinning an actual wheel. And in the Camera app, we play a traditional shutter sound when a user snaps a picture.

Not only does this make the action feel more familiar, but it provides useful feedback that a picture was taken and it's being saved to the device. If you're building a game, sound is an absolute must. Playing a game without sound is like watching a movie without a soundtrack. You can do it, but you won't be able to build drama and tap into the user's emotions the same way.

So this is Angry Birds. It's one of the most popular games on iOS, and it's been consistently in the first spot of all paid apps on the US App Store for a long time now. And those of you who have played Angry Birds know how powerful sound design can be. The background music is catchy, but it's really the sound effects that tease and challenge you to conquer levels and seek revenge on the green pigs.

So that was Sound. Don't forget about Sound. Think about how it can be used to provide feedback and status to your users. And if it makes sense, use Sound to reinforce interactive concepts. It's an extremely efficient way to make your app stand out and be remembered by users.

Having clear language is one of the easiest things you can do to make your app more usable. Yet so many developers gloss over this area just like sound. Remember, most users aren't as familiar with your app's features or the technologies that support them. When using an app that has clear, natural language, you don't even think about the text. But when you use an app with ambiguous or overly technical wording, the first thing that you often say is, "This app is too complicated." An easy tip to remember is to label buttons by their resulting action.

When you get a text message, the buttons in the alert are clearly labeled "Close" and "View." There's no ambiguity about what either of these buttons do, even if you don't read any of the other text in the alert. If you just label buttons "OK" and "Cancel" or "Yes" and "No," users will always have to read the entire text, and it will be much easier for them to accidentally select the wrong option. Here's the alert confirmation sheet for deleting a photo. Because the buttons are clearly labeled, the user doesn't need any extra text in the sheet. Just delete photo and cancel. Nice and clear.

It's also important that the navigation bars at the top of the screen are clearly labeled. And this is especially helpful if your app has a deep hierarchy or many screens that the user might navigate to. Avoid placing your logo at the top of every view. This is a common mistake a lot of developers coming from the web make. Users won't be able to clearly identify the screen they're on and it will get very confusing as the user navigates around. There are also a lot of apps with two bars, one for the logo and a second for the nav bar and back button.

This not only limits the amount of content that can be displayed, but it also makes it harder to navigate in and out of levels. Remember, users launch the app from your icon. They didn't stumble upon the screen from a search engine or other web link. And the best branding for your app is to create an experience that's great for your users. So label your nav bars.

It's also important to label back buttons by the name of the screen that they go to. Remember, this is a mobile device and a user might have received a phone call or been distracted by something else after getting to this screen. In these scenarios, it's really nice to have a visual cue of where the user came from.

The fact that it's a left-pointed button in the upper left corner already indicates to users that it'll take them back, so just labeling it with the word "back" isn't that helpful. And you want to be clear and concise with your labels. It doesn't matter if the full name of the previous screen doesn't fit in the back arrow. You just need to give users some sort of clue of where that button will take them.

This is a screen from our iPod app. Look how we just used the word "more" in the tab bar and "edit" in the nav bar. We use these labels in several of our built-in apps. There's no need to add extra words and say "more items" or "edit display view." Because these controls are in a consistent, logical place, we're able to have nice, short labels that tell the user all they need to know.

Most users care about getting stuff done. They aren't as interested in what technology is used in your app. So make your language understandable to your target users. Here in our Settings app, you can turn Airplane Mode on and off. And this could have easily been labeled something like Disable Cellular Baseband Radio. But most users wouldn't know what that meant. And also in Settings, we have Wi-Fi networks. We don't say anything such as 802.11 N, G, B, or A, or SSID. Just Wi-Fi networks, something that all users can understand.

In the Maps app, we say "drop pin," not "add new GPS indicator to map." Just "drop pin," because that's what the interface is doing, and that's what will make sense for users. And throughout iOS, we abstract the underlying file system. We talk about sharing photos or playing songs or watching videos.

And when we do talk about files in our Numbers app, we simply refer to them as what they are-- spreadsheets. Nowhere will a user see a command like new numbers file or something labeled untitled.xls, just spreadsheets or the title of the spreadsheet. Remember that the goal is to use terms that make sense to users.

So that was language. Make sure you have helpful labels in your buttons and other controls. And keep it simple and make the text clear and concise. Use language that your users will understand. These are some simple rules that will go a long way towards making your app easier to understand and to navigate.

So now onto typography. Once your language is clear, you need to make sure that the actual text is legible and beautiful. So here we have our built-in mail app. When you're browsing through messages in your inbox, the thing that you care about most is who the message is from. So the sender is listed in big, bold text. And as you scroll through messages, the sender's name remains clearly legible.

The message's subject is right below the sender's name. And since this information is important, it doesn't have the same visual weight. However, it is more important than the message preview, which is a lighter gray text. If the subject and message preview were the same color, it would be really hard to tell that there are different bits of information.

But by visually distinguishing them, there's no need for an extra text label on each line, such as subject: or message preview:. Another alternative would have been to make the message preview a smaller font than the subject or a different typeface or color altogether. If we did this, it would be visually busy and too hard to read. When there are too many different typefaces or font sizes in a small area, the most important text won't stand out.

All this text is left aligned so as the user browses their messages, they can keep their eye in one area and quickly find what they're looking for. Proper alignment really helps make the text easier to read. When you don't have items aligned, the user is forced to read every word on the page and their eye will have to zigzag across the screen.

Even though this is a standard list view, lots of thought and consideration went into the design. When you design your list views and other screens with lots of data, spend the time to make sure the information is organized in a way that makes sense and the text is easy to read.

So while the Mail app gives you a good reference point for what we consider legible, you must adapt type sizes for how your app is used. In the Maps app, where we display turn-by-turn directions, the fonts are much bigger because we assume the user is on the go. And in the Stocks app, the user might be checking their portfolio under a table in a meeting or at a restaurant, so you want to make the text very easy to read.

If the user has to scroll to see additional items, that's fine. Fitting all the content in one screen really isn't important. Scrolling is one of the most intuitive gestures in iOS, and users won't mind scrolling to see additional items. However, they'll get quickly frustrated if they have to squint to read something or physically bring the device closer to their face.

If your app is highly themed, the typeface should match the rest of the UI. In Notes, we use a handwriting font since the app looks like a real notepad. And using the default Helvetica and a highly immersive game like Cut the Rope wouldn't feel as playful as the custom font that they've embedded. But if you saw either of these fonts in the Mail app, they would feel really out of place. If you do use a custom typeface, just make sure that all the text remains very legible.

So those were a few tips to help you improve the typography in your app. Make sure the text is easy to read in all usage scenarios. And make it appropriate. Good typography and information design often goes unnoticed, but it really makes a huge difference in the overall beauty of an app. So remember, screen densities vary. You need to test for legibility on every device your app supports. The iOS simulator isn't a good enough tool to let you know whether your text is legible.

So last but not least, we have graphics. One of the best ways to wow your users is to build rich graphics that give a sense of realism to your app. Take advantage of the fact that when a user launches your app, the iPad or iPhone can turn into whatever you want it to be.

And when you mimic high-end, expensive materials, the perceived value of your app will go up. Here we see the built-in Voice Memos app. It's a beautiful studio microphone where every detail has been paid attention to, even the light source and the shadow behind it. And underneath, there's even a realistic level meter and Chrome buttons to control it. And you can tap on the microphone just to test it. Lots of details were paid attention to here.

This is the Compass app. Here you can see some polished wood and some brass fixtures. So when you hold it in your hand, it feels like a real compass as you move around in different directions. So here's a metronome app from Steinway and Sons. And you can use it to keep track of the rhythm and tempo when you're practicing an instrument.

Because they're using really expensive looking wood and the bottom area looks like a precise tool, it would feel right at home on top of one of their fancy grand pianos. So this is Hipstamatic. It's an app that comes with all sorts of filters to give your photos a vintage look.

And their app looks like a real toy film camera made out of plastic. On the back, it's even got a film slot, a flash switch, and a viewfinder to compose your shot. Every pixel was paid attention to here. This is Notes on the iPad. Just like the iPhone, it looks like a real notepad. But in landscape view, it's sitting on top of a nice executive leather binder.

If there was just a standard list view on the left side, the whole association with a real world object would be diminished. When you model your app after an object, you need to go the full distance and make sure every pixel on the screen feels authentic. And this is Mathboard, an app that mimics a classroom chalkboard to help students learn basic arithmetic.

They really paid attention to every detail, from the different chalk colors to the wood trim to the eraser. And they even left some chalk residue on the slate to make it really feel like you're in a classroom setting. And here's a really great app called DJ that looks like a real set of turntables. Right away, you know how to interact with the app.

The records really spin, and the fader and level meters are right where you'd expect them to be. This app lets DJs feel right at home mixing music from their iTunes library right on their iPad. So not all apps have real-world objects to get modeled after. And depending on what your app is used for, it's not always appropriate.

Still, your users will appreciate it if you put the time into the graphics and layout. Most of the functionality in our Weather app could have been built using standard list views, but the use of custom graphics makes it more useful and engaging. And many people I know add cities to their iPhone right when they get it just to see the graphics.

And here's a cookie baking app from Martha Stewart. This could have easily been a list or grid view of cookie names. Instead, all of the recipes are showcased as photos on what their design team calls the cookie runway. And as you swipe in either direction, you can see more and more cookies. And when you tap on one, it zooms up and you can view the recipe. They've done a great job making users want to interact with this app.

If you're utilizing Game Center, try to integrate the leaderboard and achievement screens with the theme of your game. Astronut is a fun arcade game where you try to jump from planet to planet and explore the galaxy. As you can see, it's got a futuristic space-age UI. And since the standard green felt of Game Center would feel really out of place inside this app, they've customized the leaderboard and achievements to fit right in in outer space.

And here's Flight Control on the iPad. This is an Apple Design Award winning game where you act as an air traffic controller and try to land planes on the runway. They've incorporated the Game Center achievements with the rest of the UI and made it look like a pilot's logbook.

It's absolutely critical that your app has a beautiful icon. Your icon gives users the first impression of your app and right away they'll judge how much care and consideration you put into the overall experience. On the App Store, users are much more willing to purchase and download an app with a better icon if there are several other similar apps.

Designing an app icon is a specialized task, so I recommend hiring a professional designer if you don't have the proper experience yourself. The app icon should give users a clue of what your app does. It doesn't need to be literal or even match the UI of the app itself. It just needs to relate to the general functionality of what your app does.

Our YouTube icon looks like an old wooden television set. And when you see this icon, you automatically assume that it's an app for watching videos. It doesn't matter that you watch user-submitted videos rather than television programs. What's more important is that users associate the graphic with a concept they're familiar with.

The iPod app icon shows a click wheel iPod, even though it's really the iPhone or the iPad that's going to be the device playing the music. However, the graphic is so recognizable that it immediately clues the user of what the app's functionality will be, accessing your iPod library.

Most iPhone and iPad users have downloaded many apps from the App Store. To stand out on the springboard, your icon needs to be instantly recognizable. Using bold colors and limiting the complexity will help make sure your app stands out, even if it's placed inside of a folder where a user has to page between many different screens. If you use too many shapes and try to do too much, it won't read well at the small size.

Here's the icon for Things. This is a great task manager app, and it's also an Apple Design Award winner. The big check is clearly visible, and it's easy to find when swiping through pages of apps on the device. The bright blue color matches their app's branding, and the concept of a check references a common to-do list.

Instagram's icon looks like an old instant camera. This is another app that lets users apply vintage film effects to their photos. But this app lets you instantly share the photos with your friends. And their icon uses basic shapes and has distinct colors, but doesn't look overly complex, even though when you look at it closely, there's quite a bit of detail inside.

Cosmos Spin is a fun and addictive game where you spin a little character around a planet eating all kinds of objects. And their app icon simply features the main character. They didn't try to incorporate all of the really beautiful artwork you see when you play the game. If they did, it would be too busy and wouldn't read well at the small size. Instead, it's nice and simple, and by placing the character at a slight angle, it gives a sense of playfulness. So that was graphics.

Whatever type of app you're building, whether it's a serious productivity tool or an immersive game, your users will appreciate it if you spend the time and effort to create engaging graphics. And when it makes sense, consider adding physicality and realism to your app so it makes a great first and lasting impression. And have a beautiful app icon. Not only will more users download your app, but they'll probably end up using it more as well. So in each of these topics, I covered a lot of material, and I want to leave you with some final thoughts.

Ultimately, your goal should be to make your app useful, intuitive, and beautiful. And hopefully you can use many of the tips I went over today to get started with this goal. I've only touched the surface of designing for iPhone and iPad, and there's so much more ground to cover. The first step for anyone is to read the iOS HIG.

Finally, it's really important to not sacrifice quality for anything. Every part of your app, from the feature set, to the text labels, to the app icon, needs to be polished. And the performance needs to be great. If your app is confusing or has features that are buggy, hold off from releasing it until these things are fixed. If you don't address these issues and instead release your app before it's ready, users won't wait for you to fix them with an update.

They'll simply delete your app. So that's it. I've shared many design tips to help make your iPhone, or iPad app, really great. Be sure to go above and beyond what your customers expect, and do everything you can to delight and impress them. Use these tips to design a product that you're really proud of, and that stands out from the crowd.