Hi, I'm Mark Kawano, Apple's User Experience Evangelist. In this video, I'm going to go through some tips to help you with the design and user experience of your iPhone or iPad app. The content I've put together comes from my experience designing apps at Apple, as well as my experience working with thousands of developers from all over the world. I will address some of the most common usability issues in iOS apps, and will also show many examples of great user experiences to educate and inspire.

Some of the topics may seem familiar to those of you who have seen some of my previous videos on user interface design. However, this is a brand new talk with a lot of new tips to help any developer create a more intuitive and engaging app. So let's get started. I want to start off by saying that it would be impossible for me to talk about every UI situation you'll face when designing an app. And that's not my intention. Like I said earlier, the content I've put together addresses the most common usability issues in iOS apps.

To get started, I want to talk about the importance of telling a great story with your app. When designing an app, you should always be thinking about the story you're trying to tell. Just like the most powerful stories are able to really captivate an audience, well, similarly, great apps are capable of creating an equally powerful emotional response for its users. I know that when I use a great app, it makes me feel really great, and as a developer or a designer, it's inspiring.

So when you design your app, you should constantly think about what it takes to tell a great story. So to help you tell a great story, there are a few things to think about. First, what will your app do? Think of this as the plot for your story.

It's not enough to just have an app on the App Store. It needs to provide value for its users. Next, who are the users? When you tell a great story, it's important to know the audience you're telling it to. When you design for a specific user group, it will affect every part of the design process.

From the feature set, to the visual design, to the interaction metaphors. And finally, you also need to think about the story's settings. The iPhone and the iPad are mobile devices, and they're not used in the same settings as traditional software or websites. I know that I use my iPhone or iPad throughout the day, wherever I am. Designing a great product doesn't start or end with a list of features or technologies. At the end of the day, people care about how your app makes them feel and what it enables them to do. to do.

And this is why in our ads, we don't talk about RAM, processor speed, or all the other technologies. Instead, we focus on all the great things that you can do with our products. The features and technologies that you include in your app should only be there to support the story you're trying to tell.

And I find it really helpful to envision a 30-second commercial of your product at the beginning of the design process. And this will really help you focus on the most important screens, the most important features, and the overall visual design that you're going to be using throughout your app.

So throughout your design process, always think about how to tell a great story. And above all else, your goal should be to create an experience that enables and delights people. And if you're able to accomplish this goal, I can guarantee it's one of the most rewarding feelings you'll get as a developer.

First of all, entertainment apps should be highly visual. If you're designing for the iPhone, really take advantage of the retina display. If you're designing for the iPad, make sure you showcase the content on the large 10-inch screen. The layout, graphics, and typography, they all need to look great. You're competing with thousands of other apps on the app stores in several categories, and a lot of people are gonna decide to download your app based purely on how good your screenshots look.

Entertainment apps should also be fun. Users typically spend a lot more time in entertainment apps, and the experience shouldn't feel like a chore. This is ShowYou, an app that lets you explore all videos that have been posted to your social graph, whether it's Twitter, Facebook, or your ShowYou network of friends.

And the interface is essentially a big wall of videos that you can browse in any direction. As you move up, down, left, or right, more videos come in, and when something catches your eye, you can just tap on it to start watching. It's a really great, fun experience that doesn't feel so controlled.

Entertainment apps should also be immersive. Think about new ways to utilize the accelerometer and multi-touch gestures. Because you're trying to entertain, you can be a little bit more gratuitous with animation and sound. Compared to utility apps, navigating content can be a little bit more exploratory too. The path to accessing multimedia doesn't always need to be so linear. This is the Biophilia app from Bjork.

She describes the app as an exploration of nature, music, and technology. And as you can see on the main screen, you can explore this three-dimensional galaxy of songs. And choosing a song will load a unique interactive visualization. It's really an amazing audio and visual experience. If you decide to design experimental UI like Biophilia, just be careful not to confuse your users as the fun will quickly turn to frustration. So those were some of the tips I've learned from the app. Here are some key characteristics of entertainment apps. Now, let's talk about utility apps.

By definition, utility apps need to be useful. You can't make the assumption that a strong brand presence is enough of a reason for users to download and use your app. I'm sure many of you have had the experience where you discover one of your favorite brands on the app store. And so you download that app only to discover that it doesn't do anything. Maybe it just provides some marketing content or promotional material. And so usually what happens is you delete the app.

It's critical that your iPhone or iPad app provides some value that goes beyond what they can get from your website. For example, this is the State Farm Pocket Agent app. State Farm is a large insurance company and bank in the US. And when they designed their mobile app, they really thought about what features they could provide that would go above and beyond their mobile website. So bank customers are able to take a photo of the check they receive and directly deposit the funds into their account. And so they're taking advantage of the built-in camera and unique technologies that are available on the iPhone.

And insurance customers also have a personalized copy of their insurance card right in their app. If they get pulled over by the police or get into a traffic accident, they can easily share this information with whoever they need to. So they'll definitely want to keep this app on their device. And if you do get into an accident, this app actually lets you take photos of the scene of the accident and draw out the scene using some of their drawing tools. All of this allows you to file a claim directly in your iPhone app.

You can even mark the damaged part of your car to expedite the claim process. So there's a lot of really useful features that State Farm thought about when they built out their iPhone app. Another characteristic of utility apps is that they need to be efficient. Tasks should be optimized for speed and productivity. The path to information should be clear and direct.

Remember that users aren't as interested in spending a lot of time in utility apps. They want to complete their tasks and then move on with their life. So avoid launch animations and excessive branding. Really, the most effective way to promote your brand is providing a great streamlined user experience that your customers will remember.

And so can you imagine how annoying mail would be if it had a UI like the app Shoyu that I showed earlier or Biophilia that would get really frustrating when you're trying to read your inbox or compose messages to whoever you need to? Another characteristic of utility apps is that they need to be reliable. People need to know that they can count on the information in utility apps wherever they are. And they don't want to be surprised when navigating different parts of the UI. This is Jeppesen's Mobile TC app.

This app replaces all the flight map charts in the cockpit for pilots flying commercial aircraft. So it goes without saying that this app needs to be very reliable. And this is another app that would be really frustrating to use if there was a launch animation or some type of exploratory UI.

So those are some key characteristics of entertainment and utility apps. Entertainment apps should be highly visual, fun, and immersive. And utility apps should be useful, efficient, and reliable. It's important that your UI is appropriate for the type of app that you're building. But I know a lot of apps won't land all the way on one side of the axis or the other. And so if you have a hybrid app like this, just apply these different characteristics to the part of the app where it makes sense. So for example, here's an app like GarageBand that allows you to create and mix songs.

But it's also really entertaining. And so it's a mix of entertainment and utility. And so we applied these different characteristics to the parts of the app where it makes sense. Here in the instrument screen, it's highly visual, immersive, and it's a lot of fun. So you can spend a lot of time noodling around on the instruments. But when you go to edit a track, it's all business. The graphics still look good, but the screen is designed for efficiency so you can mix up your song as quick as possible.

Another example of a hybrid app is iMovie. For those of you who have used this app, you know that when you launch the app, it's a lot of fun. You're taken to the movie theater screen, the neon sign flickers on, and there's this nice sound and animation that lets you really feel like you're going to the movies. And underneath, there's this marquee with movie posters where a user can swipe between the different movies that they've created.

However, when you're editing a movie, the view is a lot more serious. There are multiple levels of tracks to choose from, and the design is optimized to help users edit their movie as fast as possible. We could have continued the metaphor of this old movie theater with film reels and maybe a traditional play button, but that would have gotten really frustrating when you're going to edit an actual movie. The fun part of this app is so you can share your movie with your friends and family, not spend a whole lot of time editing all the different pieces. Now let's talk about how to edit a movie.

Let's get to the second question. What kind of content does your app have? The characteristics of entertainment and utility apps should give you a good idea of how your app should feel to a user, but it's really the content that will play a much bigger role in the overall look and visual design of your app. So what I'm going to do now is go through a bunch of different types of content and give you a good idea of how it will influence the visual design of your app. So first, I'm going to talk about photos and videos.

When you've got photos and videos in your app, make sure that you fill the entire screen. Even if the rest of your app only works in portrait orientation, make sure that you support landscape orientation for watching movies and swiping through photos. This will allow you to maximize the aspect ratio of most media versus the device.

And if the photo or video is part of a book chapter or news article, allow users to pinch on the thumbnails to let the photos or videos fill the screen. This is one of the biggest advantages of these devices over printed media, and so if you're not letting users interact with the device, you're really not doing anything better than what they could get in a book or a newspaper.

If you need to provide caption information or navigation controls, make sure it all disappears with a single tap of the photo. Here we're looking at the Guardian Eyewitness app. And this is a beautiful app for viewing amazing photos from all over the world. And they show caption information and give some tips directly from the photographer on how the photo was taken. And also they've got a sponsor graphic in the lower right corner, and they've got navigation at the top. But as soon as you tap the photo, all the controls hide and the photo just fills the screen. Even the iOS status bar should go away.

People will expect to swipe to navigate between a set of photos. Make sure you don't clutter the screen with navigation arrows or a scroll bar. When people see these interface elements, they'll know that you simply ported a UI from another platform, like a website. And with videos, you should use the native iOS playback controls as much as possible.

I've seen a lot of developers build their own custom playback controls just to be unique or to match the colors in other parts of their app. And while I admit this looks nice, it's usually not an area that I recommend you spend a lot of time in in the development process.

This is a part of the interface that most people won't even notice. When they go to watch a movie, they'll focus on the actual video that they want to play. If they have to relearn where familiar buttons are, they'll get frustrated. When you use the native controls, you'll get proper built-in support for AirPlay and high-speed scrubbing. You also won't have to worry about updating your code for each time we update iOS.

When you do need to surface the UI with photos and videos, you want to make sure that you're reducing any visual noise in the user interface. Use the translucent navigation bars and black buttons and really minimize any color throughout the interface. Here we're looking at the Photos app on the iPad. As you can see, we've really reduced the amount of color in the interface. You never want the chrome to outshine the content. As an exercise, let's take a look at what happens in this app if we put the piles of photos and a nice wood background.

At first glance, it may look nice, and it certainly creates a more memorable UI. Conceptually, it works well as well. The piles of photos look like they're on this nice wooden desk. But the wood is stealing the show, and it makes distinguishing the different photos a lot harder. So look how much more the photos stand out on the black background that we use in the Photos app. Photos and videos are a visually rich type of content, so be really careful that the interface doesn't distract the user.

The next type of content that I want to talk about are large data sets. Essentially, these are apps with a lot of information to manage. Because most data-intensive apps fall into the utility category, it's important that accessing the information is efficient. Use proper alignment throughout your app to help increase legibility. This is very helpful on screens that need to scroll a lot. In Mail, we left-aligned the name, subject, and message preview, and right-aligned the dates. And having this rigid grid makes finding a message a lot easier.

When you have data that requires a label in addition to the value, like we do in contacts, make sure that you right align the label and left align the values. And this allows your eye to again focus on a single part of the screen and track a lot of data.

Another typographic consideration for information dense screens are the typefaces and font sizes that you choose. Rather than mix and match a lot of different typefaces, use subtle shading and font sizes to distinguish different types of information. So in Mail, we used the standard Helvetica New in several sizes. The most important information is the sender, and so we made that a black 17 point bold.

The next important piece of information is the subject, and so that still gets black, but it's 14 point and no longer bold. The message preview is the next piece of information we display, and that shows up as gray 13 point regular. 13 point Helvetica New is the minimum size that you can use in your iPhone or iPad app without making users hold the device closer to their face. And you shouldn't use this small size for body text, as it's tiring to read in more than a line or two. And you shouldn't use this small size for body text, as it's tiring to read in more than a line or two.

And so when we go to show the messages in Mail, we actually use a 15 point Helvetica New, so that's much easier to read with line wrapping and multiple paragraphs. And depending on how users use your app, you may need to increase the font size above 15 point.

Another consideration for information dense screens is that you want to make sure that navigation is easy. And what I mean by navigation here isn't just the movement between different parts of your app, but also for the ability of the user to look at a single screen on your app and find the different pieces of information that they want.

This is the Yahoo Market Dash app. And there's a lot of data on this screen because the user is tracking all types of information on the stock market. But because the Yahoo developers paid careful attention to typography and maintaining a strict grid, it's not overwhelming to look at. And you can pretty quickly locate different pieces of information and just tap on the different informations to get even more details. And I think this UI looks really nice as well.

A lot of developers disregard the importance of visual design when building apps that house a lot of information and text. Just like we saw in the Yahoo Finance, not all data-intensive apps need to use the standard controls. This is the Japanese Major League Baseball app from Genesics. It's called Wonderho Stadium.

And I really like how clean this app looks, so let's take a closer look. You can tell they put a lot of effort into making this app look great. When there's a live game, there's a lot of information that's constantly coming in. Updated scores, stats, news, and different Twitter feeds.

And the subtle custom textures and UI elements never get in the way with that. Bold colors are used with a specific purpose, and text is spaced apart nicely and easy to read. They even use this wood texture in the top chrome to give it a little more visual flair.

But it's subtle enough that it doesn't distract from the data. With data-intensive apps, you need to be very careful about what you're using. You can be very cautious with realism. It's easy for rich graphics to distract from the important content. But when done properly, it can make a really great impression. The next type of content that I want to talk about are apps with minimal data. And this is kind of the opposite as the large data sets, apps that don't have a lot of information to display.

And these are the apps that benefit the most from the use of realism and bold graphics. The built-in compass is a great example of this. The app doesn't have to deal with a lot of information. And so looking like an actual compass really helps users know how to interact with it right away. This next app is Etude from Steinway and Sons.

It turns your iPhone into a metronome to help you stay on tempo if you're practicing the piano. Because the designers mimicked expensive materials, the app feels right at home on top of one of their pianos. The graphically rich UI works well because there isn't a lot of information to display, just the tempo.

Here's another great looking app. It's called Thermo from Robocat. And when you launch it, it's just a thermometer and it's empty. And as the mercury animates up, it shows you what the current temperature is based on your GPS location. Again, this is a rich, highly visual UI that works well because there isn't a lot of information to display, just the current temperature and the temperature of the day before.

Here's DJ, an Apple Design Award-winning app. It's got a gorgeous interface with a realistic rendering of a set of turntables. And again, not a lot of information is presented in this app. Most of the time you spend interacting with the great-looking controls. The next app is Flight Card.

This is a travel app that lets you track flight information. The designers made the UI look like a boarding pass, a really nice looking boarding pass. People might use this app in an airport holding a suitcase in one hand, and the great visual design will really help them find the information they're looking for even in a distracting setting. The graphics are also a lot more fun and memorable than a standard table view.

Here's the Voice Memos app. When you're recording, there's hardly any information to display, so it really benefits from this beautiful rendering of a microphone. But when you need to access your recordings, the UI is a lot more traditional. We could have continued the metaphor and used cassette tapes or a digital recording deck, but that UI would have been a lot less efficient. Make sure you use realism only where appropriate in your app.

I want to revisit the Mail app to talk more about this important point. Mail is an app that we could have created a really realistic graphical UI. There could be envelopes, postage stamps, and animations all over the place for messages flying into mailboxes. But all of that would have been distracting from the content.

Mail has a large data set that's constantly changing. In your app, make sure you're using realism appropriately. It's a great way to make a memorable UI, but you need to make sure you're not distracting the user from the information that they care about. Now let's talk about games. It goes without saying that the graphics need to be beautiful.

But make sure you're consistent. Everything should look great as soon as the user launches the app, even the menus. This is Zenbound 2. It's one of my favorite games on iOS. It's a multi-touch puzzle game with beautiful 3D graphics that you can see here. And as you can see, the menu screens not only look nice as soon as you launch the app, but they're also a lot of fun to interact with as well.

You want to be consistent with typography as well. Make sure the typeface matches the visual style of your game. Just as a handwriting typeface would feel out of place in Mail or the Stocks app, the default Helvetica New feels equally out of place in most games. So make sure you're using something a little bit more fun and appropriate for the visual style that you have in your game.

With games, make sure you customize Game Center's leaderboard and achievement screens to match the visual style. This is Astronut from The Icon Factory. They've made the achievement and leaderboard screens fit right into the visual theme of the game. The default green felt would feel really out of place with the space-age interface that they've created in this app.

Here's another great app with customized Game Center screens. It's Flight Control HD. This is a totally addictive game where you act as an air traffic controller and land planes on different runways. They've decided to actually integrate the achievement screen right into the game's menu. And so when you launch the app, it looks like a pilot flight's logbook. Because they integrated the screen right into the menu, it looks like they built Game Center themselves. Next, I want to talk a little bit more about customization in any type of app.

So a lot of developers ask me about how to deal with the UI in a universal app. Maybe they've got a UI that they're happy with on the iPhone, but they're struggling as they transition to the iPad. Maybe the UI isn't working as well on the large screen. Well, even in a universal app, you want to make sure that you're customizing the UI for the specific device you're designing for.

So here we're looking at the built-in music app on the iPhone and iPad on iOS 5. And as you can see, the artist screen looks completely different on the iPhone compared to the iPad. We're really taking advantage of the larger screen to show the big cover art. But the cover art on the small iPhone screen would really get in the way when you've got hundreds or thousands of artists saved to your music library.

One of the best features of iOS 5 is the ability to customize the look of UIKit controls. In iOS 5, most of the UIKit controls are now skinnable. You can choose custom colors or images to make the native controls perfectly match the theme of your interface. Things like tab bars, nav bars, buttons, and segmented controls can all match the visual style that you want.

Here you can see Game Center. In iOS 4, we had to build all these custom controls to get the exact look that we wanted. A lot of you have had to do the same thing in your apps. But in iOS 5, we were able to throw out all of that custom code and just theme the native UIKit controls to have a really custom appearance.

If you're customizing the UI in your app, make sure you're reading the human interface guidelines. It's a great way to learn about iOS conventions. In fact, everybody designing for iOS should read this document. I like to think of the HIG kind of like a cookbook. At the beginning, there are a lot of tips on how to approach different projects. And in the back, there's all these recipes on how specific controls work.

But just like cooking, when you really get to know why ingredients work well together, you'll be able to create a great dish. Well, when you understand why we use different controls in iOS, you'll be able to go above and beyond what we provide and create appropriate UI for your app. This is a great picture of the HIG that a developer sent to me. It's bookmarked and worn out, and this is what every HIG should look like. OK, so those were some tips to help you define your app's style.

Next, I want to talk about touch. And this is an area that's going to sound familiar to those of you who have heard some of my past UI talks. But this topic is worth repeating. So many apps have controls and interfaces suited for a pixel precise mouse cursor. In your app, make sure you're accommodating for a fingertip.

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. Controls are 44 points tall, and they're nicely spaced apart. And you'll see that we use 44 points throughout iOS. It's not just the calculator. The nav bars and toolbars are 44 points. And you can notice that the controls in the toolbars are a little bit smaller than 44 points, but the actual input area that's going to recognize a touch gesture will be 44 points.

Rows and table views and grouped table views are 44 points. On the iPad, buttons and popovers are 44 points tall. The device is bigger, but the size of the finger is the same. The controls in FaceTime are 44 points tall. Okay, so I could spend all day going through all the apps showing you more examples of 44-point-sized controls, but I hope that I've made my point. In your app, make sure controls are at least 44 points. If your users are using an app in a hyper-mobile workflow, make sure the controls are even bigger. So with the touchscreen, you also need to make sure that you're thinking about gestures, not just touch size.

Here's the built-in weather app. When you launch the app, you're viewing the weather forecast right away. Users can quickly swipe to navigate between the different cities. And by using a gesture, we're able to fill the screen with content. It's a very fast way to move between items. If you use swiping in your app, here are some things that you need to consider.

All the items that a user swipes between should be equal. In the weather app, all cities are the same. They may be in a different order, but they're still all cities. It would be very confusing if the user was swiping between cities, and then all of a sudden they swiped to the settings screen. So make sure that you flatten out the hierarchy.

When a user swipes with their finger, it should feel like they're actually grabbing the item on the screen. I've seen a lot of apps when you make the swipe motion and then a second later the screen animates. While the delay may be acceptable on a desktop website, it feels very unresponsive on a touchscreen. Users will think your app is slow and buggy, so make sure your app is properly tracking the user's finger.

You also need to make sure you're providing some sort of visual indicator letting users know that they can swipe to see more items. Paging controls give users a nice indication that they can swipe and just how much swiping they'll have to do. If those paging dots don't work in your design, consider revealing a little bit of whatever is to the left or to the right of the currently selected item. This way it will always be clear to users when they need to swipe.

You also want to provide visual indicators for scrolling in iOS, since we don't show scroll bars until the user starts to scroll. In all of our built-in apps, we use non-integral rows to provide a little bit of indication there is more information below. When a user sees that last cell cut off, they know that there's more information they need to interact with.

With gestures, make sure you're not hiding key functionality. Not all users are familiar with the fact that you can swipe on a row to reveal the Delete button. And users certainly aren't going to be familiar with any custom gestures that you build into your own app. So you want to make sure that you provide actual affordance for any of the key functionalities. In the case of mail, we provide this Edit button so all users know how to get to this functionality.

So when designing for the touchscreen, make sure your controls are sized for a finger and you support common gestures. But I want to challenge you to go above and beyond that. I want to show you some apps that are completely touch-centric. This is our choice from Push Pop Press. It's an interactive book from Al Gore that also won an Apple Design Award.

Their UI lets users swipe, tap, scroll, and pinch their way around the content. And because they use the standard gestures, there's actually no UI. You always interact directly with the content. And so you've really got to see this app in action to get an understanding of how touch-centric this interface is. So let's take a look.

The designers really paid attention to all of the details here. And I don't know if you noticed, but even when the user was pinching the video, it was still playing underneath their fingers. I want to show another example of a touch-centric app. It's called Stock Touch. Like Push Pop Press, this UI is completely touch-centric.

When you launch the app, you can see an overview of different sectors of the stock market, whether it's financial information, technology, consumer goods. They've broken the stock market into nine different segments. And right away, you can see how the market is performing. The green is showing the stocks that are up, and the red is showing the stocks that have gone down.

And so again, we need to see this app in action to really appreciate how much the touch comes into play in their UI. Mark Kawano The App I love this app because the developers used the touch screen of the iPad to create a really engaging experience for viewing financial information.

And if you're designing a game, take the time to think about how to make it touch-centric as well. I want to tell you about an app called Mike Tyson's Main Event from Rock Live. This is version 1.0 of their game. As you can see, it had a traditional D-pad and buttons that mimicked a console controller. And the game was stuck at 2.5 stars on the App Store. So clearly, there was room for improvement.

In version 2 of the game, they remapped all the controls to gestures. And immediately, they saw the number of users go up by 2.5 times. And additionally, the ratings went to 4 stars. Those of you with apps on the App Store know how hard it is to get your ratings to go up when you get a lot more users. The most impressive thing was that engagement went up as well. Users are now getting to the 12th level of the game instead of the 4th before.

And if you think about it, most of the top selling and popular iOS games that don't use the accelerometer have interfaces that completely revolve around the touch screen, whether it's Angry Birds or Plant vs. Zombies, Infinity Blade or Fruit Ninja. Okay, so that was touch. Next up is animation.

Use animation in your app to help smooth the transitions between screens. In the real world, objects don't just appear and disappear. And if you see this in an app, it can be very jarring. So in the Notes app, we use the page curl animation when you're moving between notes. And when you delete a note, it animates right into the trash can. So these are really helpful for the user as it gives them an idea of what happened on the way to the next screen. And it's also a lot more engaging.

Great native apps feel really fast, and animation is one of the tricks we use throughout the platform to make things feel zippy. When you tap on controls, make sure the app responds right away. If you need to load data from the network, immediately transition to the screen that will load in. Don't just leave them on the same screen and throw up a progress indicator. If they don't notice it, they'll think that their tap wasn't recognized.

Apps that throw up the progress indicator right away that don't transition feel a lot more like a web page than a native app. Use animation to provide feedback in your app as well. We put all the apps in a jiggle mode when you press and hold the app icon. This animation is great because we don't need to display a text alert or other interface element that would get in the way with the operation.

In the iTunes Store, we use several animations to communicate status and let the user know when something is happening in the app. When you buy a song, it jumps into the Downloads tab so you know exactly where to find it. The downloading animation is really nice because it lets you continue previewing other songs in the album without forcing you into a different screen or showing an ugly text alert.

We use animations throughout iOS and it's one of the biggest differences between iOS and our competitors. When you interact with the apps, a lot of time you don't even notice the animations because they feel so natural. But if you were to remove the animations, I guarantee you would notice it. Some interactions would get confusing, the devices would feel slower, and it just wouldn't feel as polished or engaging.

Think about how to use animation in your app to make things feel natural, to provide a more natural experience, to provide feedback to users, and to give them a better idea of what's going on. And if you're in an entertainment app, make sure you use animation to make the app more fun. Okay, so think about how to use animation in your app to make it more intuitive and feel like it belongs on iOS.

The next topic is focus. When you build out your feature set, it's really tempting to add items that you may have thought were cool in another app. Or maybe they sound interesting because they utilize a new technology. But keep referring back to the story you're trying to tell.

When you focus on just the most important features, you'll have more time to polish the overall experience. The key to designing a successful app is to determine just the essential features needed to make it great, and to spend all the time polishing just those. All of the things I talked about earlier, animation, graphics, touch interaction, is hard work, so you'll struggle if you try to do too much.

To illustrate this point, I want to talk about a great iPad app, Penultimate from CocoaBox Design, and it's consistently kept a four to five star rating. When you launch the app, it essentially turns your iPad into a notebook of your choice, and it's got a beautiful UI. This is what Penultimate looked like when it first launched in April 2010. There were three paper types to choose from, but only one pen color and tip size.

The app was lacking several features that other sketching apps had. Yet it remained popular because people loved the clean design, all the little attention to details. There were a lot of feature requests from users asking for all kinds of things. And when this happens, you know you've done a great job. It means people like your product and they want more of it. A mistake so many developers make is trying to build everything at once, right out of the gate. What often happens is a full-featured app that's either too complicated or buggy.

So what Penultimate did is slowly they added the features that people were asking for. In June, they added the ability to choose a few different colors and pen tips. A few months later, they added multi-page selection and AirPrint support. In May 2011, they added a paper shop to purchase different paper types to use in a notebook. And this was great for musicians, designers, writers, and anybody looking for a specific paper background in their notebooks. And even their in-app purchase store looks really great because they were able to focus on just this specific feature.

In September, they added the ability to add photos to a notebook. This has been a feature that people asked for from the very beginning, but they waited this long because they really wanted to nail it. And just recently, they added a selection tool and a few more colors to the app.

Since penultimate originally launched, there have been over 10 feature releases. And as you can see, the overall design of the app has stayed true to form. Sure, there may be one or two more icons here and there, but the mechanics and the same appealing visual design are still there. This isn't a coincidence.

CocoaBox Design carefully examined which features were most important and spent a lot of time polishing each one before they were introduced into the app. In your app, figure out the absolute minimum number of features needed to accomplish your idea. Cut everything else out and really spend your time polishing those features.

So that was focus. Next up is prototyping. This is the last topic I'm going to be talking about, and I can spend an hour just talking about this area. But we're short on time, and I wanted to run through just a few quick tips. The first tip is just to make sure you're actually prototyping your app at the very early stages of development.

Use whatever tool you're most comfortable with. Keynote is a great prototyping tool. The advanced features for builds and the ability to magic move objects between slides let you really play around with different animations. But use any tool you're comfortable with, whether it's Xcode storyboarding, motion, Quartz Composer, After Effects, or even pen and paper.

Further on in the design process, you need to make sure you're testing everything on the actual device. While the iOS simulator is great, it won't give you a good enough idea of how the graphics and text will look on an iPhone or iPad. There are now several great apps to help you test the UI on the device as you design it.

LiveView is one of the oldest, but there is also Xscope from the Icon Factory or ScalaView from Bidjango. When you run the companion apps on the Mac, they will broadcast the UI over Wi-Fi to an iPhone or iPad, and this makes designing really easy. Another good way to do this is using PhotoStream on iOS 5.

Just save PNGs of your mockups to your PhotoStream in iPhoto, and they will automatically show up on your iPad or iPhone, ready to preview the UI. It goes without saying that you need to have a great app icon for your app, and this is a topic that I could talk about in depth. But I just want to give you one quick tip to test how great your icon is. Just put it inside of a folder to test legibility.

When you look at the icon in the small size, you'll be able to tell how distinct the shape and colors are. The best iOS app icons are still distinguishable at the small size. Sure, you won't see all the great details, but icons that get all muddied up are usually too visually complicated even at the large size.

The last thing I want to talk about is something that you should constantly ask yourself, and that is, is it Apple quality? Is your app at the same level as something Apple would release? This is a question we ask ourselves all the time when we're working on our own products, and there's no reason you shouldn't have the same high standards for features, beauty, and intuitiveness.

Okay, so those were just a few quick tips for prototyping. I covered a lot of material today, so I just want to review some of the key points. Make sure you've got a clearly defined style for your app. Take into consideration the type of app you're building and the kind of content you're displaying. Design your app for touch. Everything needs to be designed for a fingertip, and you should support the appropriate gestures. But try to go above and beyond that and build a touch-centric experience.

Use animation in your app to make it feel faster, more intuitive, and more at home on iOS. Always focus your feature set. Determine the essential features needed and spend all of your time just polishing those bits. And make sure you prototype your app from the very beginning. This will help you save valuable time throughout the development process.

And always remember that one of your main goals is to tell a great story. Really think about what your app will enable users to do. Make sure that every part of the experience is delightful. So that's it. Thanks for listening to my talk. Whether you're just getting started with a new app or are updating an existing app, I hope you can use many of the tips that I went through to improve the overall user experience. iPhone and iPad users expect apps to be intuitive and beautiful. When you put in the extra effort to craft a well-designed experience, your app will have a much better chance for success.