Okay, so good morning. I'm Mark Kawano, Apple's User Experience Evangelist. Today I'm going to be talking about designing user interfaces for the iPhone, the iPad, and the Mac. And before I get started, I just want to play a video of one of our recent commercials. So let's watch. This is what we believe. Technology alone is not enough. Faster. Thinner. Lighter. Those are all good things. But when technology gets out of the way, Even magical. That's when you leap forward. That's when you end up with something like this.

All right, isn't that great? It's one of my favorite Apple commercials. So when technology gets out of the way, everything becomes more delightful, even magical. And while this was a commercial for the iPad 2, this is a belief that permeates everything that we do at Apple, right? From our retail stores, to the hardware, to the software and cloud services.

When we design products, our goal is to enable our users to learn, work, play, or communicate in the most intuitive and delightful way possible. And when you design your app, this should be your goal as well. Remember that it's not about technology that you have under the hood. It's not about how impressive your feature list sounds.

And it's also not about how pretty your screenshots look. Those are all important, but what your users really care about is what your app enables them to do. How it makes them feel when they're using it. And that's what you need to think about when you're designing the UI of your app.

So many of you know just how challenging it can be to design a really great user experience. Some of you might have apps on one of our app stores already and are just wondering how to improve the UI. And others of you are working on an app for the first time and just want to make sure the design is just right. So today I'm going to be covering some content that will help you improve the design and UI of your app, whether it's for the iPhone, the iPad, or the Mac.

Now, it would be impossible for me to cover every single UI situation you're going to face when designing your app, right? We could spend all week talking about just UI design. And covering all the different topics is not my intention, right? The content that I've put together today comes from my experience designing apps at Apple, but also from working with hundreds of developers from all over the world to help them improve the design and UI of their apps.

So if there's just one thing that you take away from my talk today, it should be this, that each device is unique. So many developers don't consider the unique characteristics of each device when they're designing their app. So many of the iPhone and iPad apps that I see have interfaces that are kind of best suited for the web, right? And their features make more sense on a desktop. And lots of the Mac apps that I see are using old computing paradigms from the 80s and the 90s. And so when you design your app, you need to make sure you're considering the unique characteristics of each device.

To help you do this, what I'm first going to do is review the device characteristics of the iPhone, the iPad, and the Mac. I'm going to talk about the different ways that people use each device and how you need to really let this impact the UI of your app. And after I review the device characteristics, I'm then going to provide some detailed design tips that will help you get started with the UI of your app. OK, so let's get started.

So first let's talk about the iPhone. As you know, it's got a 3 and 1/2 inch screen, weighs less than 5 ounces. And this makes the iPhone extremely portable, right? And so you see iPhones everywhere, right? Walking down the streets, in line at the grocery store, or at the bank, restaurants, meetings, everywhere.

Think about all the places you've used your iPhone, right? When you design an app for the iPhone, you need to always take into account its extreme portability. iPhone apps need to be simple. You just don't have time to be waiting and learning a complex and confusing user interface.

And iPhone apps need to be quick. Users should be able to complete their tasks really fast and move on, right? And users need to know that they can rely on the data in your app wherever they are. So your app needs to be reliable as well. And they don't want to be surprised when they're navigating different parts of the user interface.

Now the iPad. So like the iPhone, the iPad is portable, right? It's a very portable device. But it's not pocket sized. What's unique about the iPad is its 10-inch multi-touch display. It's beautiful, right? The iPad is really unique because it's so light and thin. When you hold it, it actually feels like you're just holding a screen.

You don't even think about all the advanced technology and computing power behind it. And so when you design an app for the iPad, you need to always think about how to take advantage of this large 10-inch multi-touch display. And so your app needs to be highly visual. The layouts, the typography, the graphics, they need to be beautiful.

It should be immersive. Users spend longer periods of time using an iPad app and your app should account for this. And it should be realistic, right? The 10-inch screen is great for representing real-world objects that you're able to actually interact with with both of your hands on the multi-touch display. And it should be flexible. Remember that there's no right or wrong way to hold your iPad.

So Macs come in all different sizes from our 11-inch MacBook Air to the 27-inch iMac. So your app also needs to be flexible on the Mac, right? This is definitely going to affect the way that you design a Mac app. People love using Macs because they're so visually appealing, right? We pay so much care and consideration into every interface element on the Mac. And when you design your app, it needs to feel right at home.

In Lion, we've got lots of new support for full screen apps. And every app developer that's working on a Mac app needs to think about how to take advantage of full screen and what this means for your users. And there's a lot of new multi-touch gestures in Lion as well. And we really think that these new multi-touch gestures are going to fundamentally change the way that people interact with their Macs. And so in your app, you need to really think about what this means.

Okay, so when you design your app, really consider the unique characteristics of each device. If you're designing for the iPhone, make sure that you're always taking into account its extreme portability. It needs to be fast. The UI needs to be simple and it needs to be reliable wherever you are, right?

And if you're designing for the iPad, take advantage of that large multi-touch display. Don't just treat the iPad as another type of screen. It's really a unique device. It's not just a place to view websites or a smaller computer. It's an iPad. It's really special. Take advantage of it.

And then on the Mac, if you're building an app for the Mac App Store because you want to reach more customers and really get in front of a lot of people, you can't just take your existing web app or an app that's been designed for a PC. Or other platform and just put it on the Mac App Store and expect to have success. You really need to think about OS X, the most advanced desktop OS, and how Lion's going to affect the UI of your app.

Okay, so let's now go into each of the different devices and talk about some design tips that you can use in the UI of your app. So let's start again with the iPhone. And when the iPhone first came out, there were some major paradigm shifts in UI design, right?

And the multi-touch screen was a large reason for this. There's no longer any abstraction between what you're seeing on the screen and the input device. You're able to just reach out and touch objects, direct manipulation, right? And so we've seen some amazing things come out from developers, many of you in the room, right? So many great apps. But when you design an app for the multi-touch screen, you need to remember to always make the controls fingertip-sized.

One of the most common problems, probably the most common problem that I see on iPhone apps are buttons and controls that are designed for a cursor. They're too crowded and small and it makes them really hard to tap. So imagine you're on an elevator and they had buttons designed for a cursor instead of a finger, right?

And you're in a rush and you get on and it would be really hard to press the right floor. It would take a lot of time and effort to just get the floor that you wanted to go to. If you were in a hurry, you might end up pressing all the buttons above and below the floors that you wanted to go to. It would be very frustrating, right, because you just want to get to the place and move on.

And I know this sounds ridiculous, but so many iPhone apps have this same problem because they weren't designed with a fingertip in mind. And in the iOS human interface guidelines, we recommend a minimum tap target to be 44 by 44 points. And the built-in Calculator app is a great reference to follow, right? The buttons are nice and easy to tap, and there's adequate spacing between each one.

But remember that iPhone users are always on the go. So you need to vary the control size based on how your users are interacting with your app. So this is the Nike Plus GPS app. And if you haven't used it, it's a great app. It's for joggers and it lets you track the time, distance, location. Connects to a pedometer in your Nike Plus sneakers. And it even gives you audio encouragement if you're listening to music on your iPod.

And notice how they've made the pause button nice and big in the center of the screen, right? It's way bigger than the 44 by 44 points that we recommend because it needs to be easy to tap when the user is jogging. In your app, really think about the different ways that your users are going to interact with it and make sure that you make the buttons and controls adequately sized.

Don't just test your app on the iOS simulator or in your office and see, oh, is it easy to use here? Really go out, put a development build on a device, go out in the real world the way that people are going to be using your app, and that's how you're going to know it's easy to use.

So you also need to streamline navigation in your app, right? Unless you're building some type of adventure game, don't make the path to information feel gimmicky or challenging. Users want to be able to access the content quickly and get tasks just done right away. So a great way to streamline navigation in your app is to use swiping. And you guys are all familiar with swiping.

So this is the weather app. And we use swiping because it's a very fast way to get to different data sets. So in the weather app, you can just swipe between different cards. And you're moving between cities. And because we're relying on a gesture for the navigation, we're able to fill up the entire screen with just content. And so when the user launches an app, They see exactly what they want right away. So many of you are using swiping in your apps or thinking about using it. So I want to go through some tips about swiping.

And sure, all the items are equal, right? So in the weather app, everything that you swipe between are cities. And sure, they may be in different order because where you live or the different places that you go to, but they're all cities. If you add different types of objects to the things that you're swiping between, it can get very confusing for users, right? So say you were going between a bunch of documents, then all of a sudden you got to a folder of documents or something else altogether, right? So make sure all the different items are equal.

Make sure the content doesn't scroll. So when you're swiping on the iPhone, it actually feels a lot like you're physically kind of shuffling a deck of cards. You're moving cards, you know, just kind of -- and that metaphor gets lost if the content scrolls beyond the screen. Another reason you don't want to have content scroll is because you should provide visual indicators. And the most common, easiest way to do this is to provide those paging controls underneath the swipeable object. And this lets users know that they can swipe, right? Those little dots underneath.

And if you really don't want to provide those paging controls, those dots underneath, you need to think about another way to let users know that they can swipe. You need some other type of visual indicator. So maybe consider using, showing whatever's to the left or to the right of the currently selected item. And that's what we do in iMovie and some of our iWork apps.

And so look how nice this looks. It's a beautiful screen, so it lets you choose the different movies that you're editing. And not only does it look good, it's a really fast UI, right? Because you're able to see that large movie poster and then the name of the movie above and that great billboard.

You're a lot less likely to select the wrong movie, then have to go back out to an unhelpful list of file names, you know, tap on something, go in, load the movie, right? So this is a great way to really show the content. And we couldn't provide the paging controls here because there's commands underneath. So we show a little bit of whatever's to the left or to the right of the selected item.

So now I want to talk about tab bars because they're another great way to streamline the navigation in your app. And Tab Bars are great for managing complexity when you have a little bit more of a lot different types of data, right? It's not all equal. So you're able to manage different data sets. And you're all familiar with Tab Bars.

So they're in lots of our built-in apps and they're also in a lot of your apps on the App Store. But so many developers that I meet with just get confused about some of the small nuances about how Tab Bars should work, right? They're almost used in too many different ways. They're overused. And so I want to go through some different rules about Tab Bars.

So there should only be one tab bar at the highest level of your app. If your app has so much different data that you're thinking about using multiple tab bars in different parts of your app, the first thing you need to do is just think about how to simplify that data set.

Get it down to the most important items. If you're really not able to simplify the data set and you still think, I need a tab bar in this part of the app and a different one there, you should really think about-- or you should use a different navigation system altogether, probably lists.

If you put multiple tab bars in your app, users are going to get very confused because they're not going to know where the top level is. They're not going to know how to get from one section to the other. Some tab bars have some items and other tab bars have others.

So just one tab bar. And tab bars should be mostly permanent, right? Almost every screen of your app should have a tab bar if you're going to use it. Users are going to look for this control to get around the different sections. Now it's okay to remove the tab bar if you need to maximize screen real estate, say for viewing content, viewing a photo, or watching a movie, reading a news article, something like that. But if you remove the tab bar, it should always be the last leaf of your data hierarchy, right?

It's important to provide good icons and labels in your tab bar. So the labels need to be concise and clear. There shouldn't be any redundancy in them. Users should be able to read them and right away know what's going to be in that item. And the icons should be really distinguishable, right? Each of them should have different shapes so the user can really know what's in the difference by quickly looking down there.

And if you have tabs such as featured or favorites or most viewed, any of the ones that we provide icons for in UIKit, you should use the standard icons from UIKit. Users are accustomed to seeing those icons. This is a lot less work for you. And there's not going to be any confusion about what's in those tabs.

And one of the great features in iOS 5 is that you're able to now customize the look of tab bars, right? You're able to customize the look of lots of other controls as well. But tab bars are one of the great ones to customize. So many developers that I've met with just have customized their tab bars. They've rebuilt the entire tab bar control for their app.

But when they rebuilt it, when they customized it, they weren't able to get all the nuances of exactly what users are expecting, right? So sometimes the selection state isn't completely visible or some of the other behaviors, such as tapping on the selected items to go back to the parent item of that tab, just doesn't work. It gets really confusing.

But now in iOS 5, you can customize that look. So it doesn't necessarily need to be black, right? And if you don't like the selection color, you're able to change it. You want to be cautious here, but it's a great feature if you want to really match the aesthetic in the rest of your app and still use standard controls.

There should only be five visible items in a tab bar. So another reason that I've seen a lot of developers customize tab bars is to make them scroll, right? They have more than five items and for whatever reason they don't want to use the more tab. And so they create a tab bar that scrolls and you can see more and more items. And a scrolling tab bar is really problematic on the iPhone because users on the go have a really hard time swiping versus just tapping in that same small area at the bottom of the screen. And so they often make mistakes.

So there should only be five visible items and use the more tab when you have more items that you want to fit in. Prioritize which items make sense. Make those the first four tabs and then implement the standard more button. And if you really want to avoid using the more button just because you can't figure out which are the right four items to go in front, again, consider a different navigation model. Tab bars might not make sense for your app. Don't force them in there. Lists are probably what you want to use.

So let's talk a little bit about lists. And lists are great. They're another simple way to streamline that navigation in your app when you've got lots of different items or just a few that fit on the screen. You can make them very visual lists. And we use them in apps like Settings, right? And when you have items that are similar, you're able to group them together and group lists. So they're great.

It's very easy to read. Unfortunately, a common trend that I've seen lately are apps that have a springboard of icons as their main navigation. And so you launch the app and you just see this icon. And it's very jarring for users. They just came from the iPhone's home screen where they have a whole bunch of icons. Now they're in this other app that's got another whole bunch of springboard of icons that the user has to deal with. And it's confusing.

And it's also really slow. Because on the iPhone home screen, it's really fast to tap on it to find apps because you've customized the look of that. You've installed most of those apps or there are apps that came with the phone as well. And you're just used to staring at them all day. You set them up. And you don't even read the labels underneath. You just look at the icon. You tap that app and you're in.

But no matter how good your icons are in your app, users aren't going to be as accustomed to seeing them. And so what they're going to have to do is read the labels underneath each icon. And then their eye is going to have to zigzag across the screen. It's just much slower. So avoid using a springboard of icons in your app for the main navigation.

Look how much easier this is to read, right? The user can just kind of look down, they can see the icons and the labels, and just literally look and find the item that they're looking for. Remember that the point of your navigation is to allow your users to get to content quickly. So this is Mint's app. And Mint is a great app for managing financial information. You can set it up with different bank accounts, credit card accounts, different investments that you might have. You can even track a monthly budget for yourself.

And what they've done is they've provided a custom list view because for them, an overview of all the different information in your app was way more important than just a single item, right? So a tab bar wouldn't have made as much sense. And when you go into one of those items, they wanted to use the full screen for that specific item, whether it's an account or investments, right? And so they didn't want that tab bar to be permanent like it should be.

They've also gone the extra step of putting important content right into the list view itself. So again, the content is right there. If you see maybe a low balance or something is wrong with one of your credit card charges, you can just tap on that item right away. It's really fast.

The text is nice and legible as well. On the iPhone, you need to make sure that the text is really easy to read for your users wherever they're going to be using your app. This is the Stocks app. Look at how big and easy to read the numbers and ticker symbols are. User might be checking their portfolio under a table in a meeting or in a restaurant.

So when you design your app, if you need to increase the font size and then it forces content to move beyond the fold, right, it's not in the viewable area and the user has to scroll, that's fine. Don't worry about trying to fit everything up there. On the iPhone, users won't mind scrolling to see additional data, right? It's one of the most intuitive gestures on the iPhone. It's one of the first things you learn after tapping, right? You know how to scroll with your thumb.

Users will get really frustrated, however, if they have to constantly squint to read the data in your app or bring the device closer to their face. What they'll often do then is just close your app down and say, "Okay, I can't read this. I'm busy. I'll just check when I get back to the office." And if they're doing that, you've missed the whole point of an iPhone app, right? It's got to be portable. So make sure everything's easy to read.

You want to plan for slow internet connections. Design your app to feel fast. Many of your users are going to be on slow cellular networks. And you shouldn't make your app feel like a web page. Take advantage of the fact that you're building a native iPhone app. And so when a user interacts with an element on your screen that's going to require a network load, you should immediately transition to the screen that's going to load that data. So you get that nice animation right away, immediate feedback. And then that's where the progress indicator should tell them, OK, now we're waiting for some data.

If you just stay on the initial screen when the user taps, it feels a lot like just a website, right? And a lot of users won't even notice that progress indicator that you put on the screen. And so they'll continue tapping on that network load and maybe even slow it down, right? So really think about how to make your app feel fast. And a lot of times that's just providing immediate transitions. It really breaks down the load time of the internet, because something happens right away. It feels faster.

and plan for no internet connections, right? Your app should feel useful. And again, don't make it feel like a static web page. This is the NPR News app. This is a great app for reading all the content that's on NPR. And what they do, when you load it, it actually loads all those top stories into the background. It first loads the text, and then it loads the photos afterwards. And it caches all of that, right? And so they were thinking about intermittent internet connection. So they first get the text, then they'll go through and get photos for each story.

And so if you're maybe reading the news on your morning commute on the train and you go through a tunnel and you lose the internet connection, you're still able to tap on any of these articles that you've never tapped on before and read that article, right? That's really useful.

They really thought about the extreme portability of the device. And so in your app, think about what your users might want to do when they're offline. So put your app in airplane mode and really think about what the user could benefit from. Okay, so that was the iPhone. Remember to always design for the extreme portability. Make sure that the UI doesn't feel cluttered and confusing. And then it's easy to get to all the information that you want to get to very quickly.

Okay, so now let's talk about the iPad. So, like the iPhone, the iPad is extremely portable, right? But it's not pocket-sized. What I said earlier was the iPad's unique screen is what you need to always think about when you're designing for it. So if you're bringing an app from the iPhone to the iPad, there's a lot of new considerations to think about. What used to just fill the entire screen of an iPhone doesn't even fill a section of the split view or a popover on the iPad. And this 10-inch screen makes the iPad great for consuming content. So viewing photos or reading magazines.

Watching movies. Because it's 10 inches and you hold it so close to your face, it's actually a very intimate viewing experience. It feels a lot like watching a television that's on the other side of the room. But with the iPad, you can reach out and touch that content.

And those of you who've made a FaceTime call on the iPad know how intimate this experience can be, right? It feels very different from an iPhone FaceTime call, right? Because of the large size of the screen. - But when the iPad first came out, a lot of critics were saying, "What's so special about the iPad? "Isn't it just a big iPod touch?" You've all heard this. It's just a big iPod touch, right? So I wanna read you a great quote.

Calling it an iPad, a big iPad touch, is like calling a heated swimming pool a big bathtub. So both have hot water, but it's the size that defines the way that you use each one, right? Because the bathtub is so small, it's a very utilitarian thing, right? You use it to clean yourself or maybe to relax. It's very personal.

The size of the swimming pool completely defines the way we use it. We use it to exercise or to play. It's a place we interact with other people. Similarly, the size of the iPad defines the way that we use it. It's very different. For one thing, both of your hands can fit on the iPad screen. Data entry is much faster.

And the iPad's great for representing real world objects. So this is drums in GarageBand. And I hope many of you have had a chance to play with this app. It's a lot of fun. And you're able to just kind of tap on the drums. It feels all realistic. You see all the movement. And it's great. We could have done this on the iPhone, but it wouldn't have felt the same.

So when you're designing for the iPad, always take advantage of that screen and make sure you're showcasing content. Don't just fill that screen with unnecessary controls and all the features that you may have cut out from your desktop app because now they'll fit on the screen. You still need to think about how to showcase the content. So this is Pages. This is an app from our iWork suite, right?

And it's an app with lots of features. But notice how much the document just fills the screen, right? There's just a single toolbar at the top. No matter how many features your app has, you should always try to provide all the commands in a single toolbar. And put it at the top of the screen so it pairs well with the OS status bar. And it doesn't feel like there's a window or frame around all the content. And also, it's much easier when a keyboard slides up where the content needs to scroll that the user doesn't need to worry about that control bar kind of moving around.

So this is an app called Architizer. This is a great app. It's a free app on the App Store. And it's an app that lets users view different architecture projects from all over the world. And Architizer actually had a website before the iPad came out. They still have a website. And it allows you to view these different projects that different architecture firms are submitting, these gorgeous photos.

But when the iPad came out, they completely rethought the design for this device. And so you no longer have the paging controls around the website. There's no all this extra different sets of data that's surrounding these photos. You just use your finger and swipe. And as you swipe, you just see more and more photos of these gorgeous architecture projects. They really rethought the design for the iPad.

Once you've thought about how to showcase the content in your app, you should think about how to enhance the interactivity. Remember that it's not just about extra features in the iPad. So in the Photos app, we took a lot of time to think about how to make interacting with your photos a lot more fun and natural. We didn't just add in all this extra stuff. We really thought about the transitions and how the users were going to interact with the content.

This is our choice. This is an interactive book from Al Gore. And our choice won an Apple Design Award last night. It's a really fun book to interact with. And the content, again, fills the screen here. And so when you're using our choice, there's no table of contents.

You're easily able to just move the different photos and the text. You're able to pinch, flick, swipe your way around. And it looks great. And it's fast to get to the different places that you're looking at, the different chapters or the different pages. Or infographics or whatever it may be. And it's also a lot of fun.

This is Flipboard. This is an app that many of you are familiar with. And this is an app that lets you consume different internet feeds. So you can set up your Facebook or Twitter account or just follow other RSS or other news sources that are on the web.

And they really rethought this whole concept for the iPad. So they took the design and said, you know, what makes the most sense on this device or what do we want users to experience on this device? And it feels a lot like a magazine reading experience. So you're able to just flick the different pages, flip them over. And it's a great way. It's not just this boring old website that you're used to seeing everywhere else and you're scrolling. They really thought about the iPad's design. And in your app, you need to think about how to take advantage of this device as well.

Okay, so popovers. Because the iPad screen is so large, popovers are a great tool because they provide context to the different actions that a user may be doing, right? So this is the Photos app, and so what happens when you have a photo and you tap that action button at the top is we throw out a popover and it provides all the sharing options. And the contextual nature of popovers is great. You're able to see the commands as well as the content that they're applying to right at the same time.

And the popover is pointing right back to the control. And so we use popovers in a lot of different areas in our app, and they're great. So this is Numbers. So like Pages, it's an app with lots of features. But we're able to really just concentrate on the content here, right? There aren't controls all over the place because what we did here is we just provided the options that make sense for the selected item in Numbers, right?

So if you have a chart selected, when you go to the media popover or the media button, a popover comes out. And you just get different chart options. So there aren't all these extra controls, but there's still a lot of functionality in this app. But it looks really simple to use.

We use popovers to display different settings. This is iBook. And in iBooks, again, the user should just be focusing on reading. That's what they want to do. They don't want to look at an interface. But when they tap, the controls show up on screen. And if they tap the display button, they're able to see a bunch of settings. So they can choose different typefaces or other display settings. But when they tap outside of that area, the popover just goes away. And they're back to whatever they were doing. It's really fast.

Remember that there's two types of popovers on the iPad, modal and nonmodal. And nonmodal popovers are what you see in most places. And they behave the way that I just described. When you tap outside of them, they just disappear. They're really fast to use. And so if you're designing a nonmodal popover into your app, don't put a cancel button at the top of it. Users will get confused about what the cancel button is for. They'll think they need to read every single option in that popover because it's going to do something.

And it also just adds visual complexity to the popover where it's not necessary. So the only time you should have a cancel button in your popover is when you use modal popovers, rather. And we use modal popovers when the task's just a little bit more involved. So in editing an event in calendars, this is a task that requires the use of a keyboard or a picker.

And users don't want to lose data if they tap outside of that popover. Right? So again, don't provide a cancel button unless you really need it. And then you should provide a modal popover. But as much as possible, try to provide non-modal workflows. And just use the non-modal popovers. They're a lot faster.

So you always want to provide contextual feedback in an iPad app as well. So this is iTunes, the iTunes Store app. And we use animation throughout this app. So when you want to preview an album, you just tap on it. And the cover art flips around. And there's a list of songs. And if you want to preview one, you tap on the song. It animates to let you know it's downloading from the internet.

Then it animates again to let you know how much is left in that preview. And then if you buy it, it jumps over into the Downloads tab. So you can continue looking at the other songs in that album. We don't force you to go over there. So it's a great way to just inform users about what's going on. So let's take a look. So you just tap it. It flips around.

And then it just hops out. And notice that this animation isn't gratuitous, right? It's actually communicating useful feedback about what's going on in the app. So just don't add animation for the sake of having animation in your app. Really think about the different contexts and how you can provide really meaningful information to your users.

Okay, so take advantage of the fact that when a user launches your app, you can turn their iPad into whatever you want it to be, right? So this is DJ. And this is an app that also won an Apple Design Award last night. It's a beautiful app and it represents a set of turntables.

And they've really added physicality and realism to their UI, right? It looks like a real set of turntables. It's fun to interact with. And if you're a DJ, right away you know what all the different things do, right? There's the fader, the different level meters, you can even move. the needle to different parts of the record.

And so it actually informs the user on how to use it, right? And if you're not a DJ, the beautiful graphics make you want to interact with this app, right? Whenever I've shown this app to somebody who hasn't seen it before, they want to grab my iPad and just play around with it. They want to be the DJ, right?

This is Mathboard. This is an app for children to learn basic arithmetic. And they've mimicked a classroom chalkboard in their app, right? And so they've really paid attention to all the little details here. The entire screen of the iPad looks like a chalkboard, right? So they've got the colored chalk. They even got the wood trim and the eraser up there. And if you look really closely at this app, there's actually chalk residue on the slate, right? So it really feels natural.

This makes the app a lot more fun for learning math to young children, right? So in your app, think about what kind of graphics make sense and what kind of things you can represent in the real world that will help users learn how to use your app. Don't force physicality and realism to your app if it doesn't make sense, right? There are advantages to the digital world and what you can do there. But when you are able to provide physicality and realism into your app, it makes for a really great first and lasting impression.

Okay, so on the iPad, you also need to consider both orientations, right? Users expect to use your app in whatever orientation they have their iPad in when they launch it, right? And you should try your hardest to meet this expectation. So you're all familiar with how mail handles the orientation change, right? It's a split view, and when you go from landscape to portrait, you see more of your message, right? The inbox kind of hides away into a popover, and you can kind of swipe to get it to come out.

If you're using a split view, hopefully you're doing something very similar. It's pretty straightforward. But many developers that I meet with ask me, they say, we want to provide support for both orientations, but it's a little bit confusing. We're not sure what makes sense in our custom UI. So I want to provide some tips on what you should do, what you should think about when you're designing for both orientations.

So remember that users are rotating the device to see more content. They don't want to see different content. Many magazine apps that I've seen, when you rotate them, you see completely different photos or news articles on the screen. And not only is this confusing for users, most people just won't even find that other content, so they'll miss out completely.

And so what a lot of other apps have done then is provide these annoying graphics on the screen, and some of them even animate, telling you, hey, rotate the device now. And if you rely on these graphics to tell users how to hold their device, it means you're out of line with what they're expecting, right?

Don't require users to change orientations. So if you can't provide support for both orientations throughout your entire app, just be consistent and stick with just one. If you require users to turn their device at certain points in their workflow and certain tasks, it's going to feel really confusing. It might feel pretty buggy. They're looking at something and then everything's sideways. Do I turn my head? What's going on? So just be consistent and stick with one orientation if you can't provide support all around.

And maintain focus on the primary content. Remember, you want to make it easy for users to continue doing whatever they were doing when they rotated the device. So if they're reading a news article, they should easily be able to just continue reading whatever part of the story they were just in, right? So really think twice about reformatting content or rewrapping text lines. And if you do need to reformat content, an animation is a great way to provide the feedback about what just happened to it.

And if you are going to use animation, a good tip to think about is really just think about whatever content you have in your app and think about if it was a real world object, what would happen to it with gravity if you were to just rotate it? And that should be the basis of your animation.

Okay, so that was the iPad. Always remember to design for this large 10-inch multi-touch display and treat it like a unique device. So now let's talk about the Mac. So in Lion, we've gone through and updated every control in AppKit. And so if you're using standard AppKit controls in your Mac app, you'll be all set. It'll feel right at home on the new interface.

But if you've customized the UI of different buttons and other controls in your app, and they look old or they mimic some of our old Aqua controls, make sure that you're refreshing your interface. Otherwise, it's just going to feel dated and kind of buggy when Lion comes out, right? We've kind of made a lot of the gradients more subtle. Buttons are flatter. Edge treatments just aren't as strong. And you should really take a look at what we've done to the different controls in AppKit.

A lot of the subtle changes that we've made to these controls in AppKit go a long way to showcasing the content in your app. And so this is something that we definitely learned from iOS and the iPad. Content is really important. And so one of these things that you'll notice is the sidebar icons. They're now monochrome. They're not color. And you need to now provide monochrome, white, transparent PDF icons for your app. And it really makes the rest of the content in your window stand out.

In some of our other apps like Mail, we've also reduced color in the toolbar as well. So content again comes out a little bit more. And a much more noticeable change is that scroll bars aren't visible when you're not scrolling. So there's a lot less attention to different interface elements in a window. It's about the content.

So good tips for designing lists now that scroll boards aren't visible is that you should think about providing nonintegral amount of rows when you can so that data kind of gets cut off in that viewable area. And that way users know that they can kind of just grab their mouse or trackpad and flip to see more.

Design a beautiful icon for your Mac app. This is something that Mac users expect much more than users of other platforms. It gives users their first impression of your app on the Mac App Store. And I'm sure many of you have this situation where you're downloading an app from the App Store and you see the icon and it's okay, but it's not great. And it makes you wonder, how much care and consideration did the developer put into this app? It might be buggy, they didn't think about how to simplify different workflows. So it's really important to design a beautiful icon. And with Launchpad, it's more important than ever before.

If you're coming from iOS, make sure you design a new icon for the Mac. Those rounded square buttons in iOS just doesn't feel appropriate on the Mac, right? On the dashboard or on the launch pad or on the dock. So this is GarageBand. These are both of our icons. But one is clearly designed for the iOS and the other is designed for the Mac. There's a distinct shape so it's easy to find in the user's dock.

And designing an icon is a highly specialized task. So even if you're the type of developer that's designing all the UI yourself and using standard app kit controls and interface builder, you haven't hired a designer to help you out, you should at least hire a designer to design your icon.

So popovers are now on the Mac. They're standard app key control, right? And like the iPad, they're great for managing complexity. In iCal, we realized that users don't often turn on and off calendars. It's not a task that they frequently do. So we put those controls in a popover. This, again, allows the content of the window to really stand out.

We also use popovers in Safari. We replaced the need for the utility downloads window. And this is great because the user doesn't need to manage their interface, right? And the downloads window was always kind of annoying. It kind of popped up, then got hidden behind, but it was peeking through. You'd close some windows and you'd discover it was still open.

Well, with popovers, the user doesn't need to manage their interface. And this is really important because in full screen, these utilities and floating palettes and other things that are around the screen just aren't going to make as much sense in your full screen app. And so popovers are a great way to provide a lot of these controls in your full screen version of your app.

So let's talk a little bit more about full screen. So if your app is about consuming content or creating content, your users are really going to appreciate a well-designed full screen app. Now if your app is kind of a utility type of app that users don't frequently use, maybe it runs in the background, well, full screen might not be appropriate. It's not for every app on the Mac App Store.

But remember that lots of our users are running 11-inch or 13-inch MacBook Airs now. And they're going to want to run every app that they have in full screen. With the gestures, it's just so easy to swipe between them. It's this great controlled experience. So let's talk about some tips for designing your app for full screen.

Think about the user context. So here's preview in full screen. When a user enters full screen for preview, we hide the toolbar by default. Because we thought about what's the user likely to do in full screen in preview? They want to read the document. They're not likely to search for different things or make annotations. In your app, think about what your users are going to do. In Mail, we show the toolbar by default in full screen. Because users are frequently going to need to tap on the different controls up there, even in full screen. right?

Don't remove features. Users will get really frustrated if they constantly have to exit full screen just to complete common tasks in your app. And maybe it's OK to not provide functionality for everything, settings, or setting up accounts, something that you do maybe once or twice in an app. But everything else that they normally do should actually operate in full screen.

Focus on content. This is iPhoto. In full screen, the whole interface gets dark. It really makes the photos and videos in your library just pop out. This dark interface would have felt really out of place in a window because it just wouldn't match any of the other interface elements on OS X. But take advantage of the fact that in full screen, you don't need to match any of that other stuff, right? And so you can use these darker interface controls or whatever makes sense for your app to really have a full experience.

Take advantage of the horizontal real estate. So, Macs come in different sizes as I talked about, 11 inch to 27 inch, but they all have 16 by 9 screen aspect ratios. So, when we redesign mail, we move the messages from above the selected message over to the left to take advantage of this space. And this is a consideration for the window mode of your app as well. But it makes a huge difference in full screen, right, when it's filling that entire screen.

OK, so on the Mac, users also expect the graphics and the whole experience to be really engaging. This is something that's also unique about OS X. So this is photo booth in mind. And those curtains, they look great, and they kind of animate open and close, depending on what you're doing. It sets up this mood for how much fun this app is.

This is versions. This is a utility feature, but it looks great. And the graphics actually tell the user what's going on. The three-dimensional view of the different versions going back into time and space, it's actually helpful. Don't just add over-the-top graphics to your app just for the sake of having them. Really think about how to provide useful feedback about what's going on in your app and kind of setting the mood for what you want your users to kind of think about.

OK, so the last thing I want to cover on the Mac side are gestures. So as I mentioned earlier, we really think that the new multi-touch gestures in Lion are going to fundamentally change the way a lot of people interact with the computer. But you need to be cautious about implementing gestures in your app. So let's go over some rules. Support the standard behaviors. This provides consistency across all the different apps that a user is going to be using on the OS.

And think about the different gestures that make sense for your app. Don't just add all the support for all the new multi-touch gestures in your app because you think it's going to be cutting edge and cool. If it doesn't make sense, users are going to get frustrated. It's going to feel gimmicky. So just think about the ones that make sense.

Think about gestures like accelerated keyboard shortcuts. Every command that you have hooked up to a gesture should have an equivalent UI affordance or keyboard shortcut. A lot of users won't have trackpads attached to their Mac. If you just rely on the gesture alone, you're going to be cutting those users off. Other users might disable the gestures for accessibility reasons. So make sure you don't rely on gestures alone.

Provide responsive feedback. When a user interacts with their touch screen, the screen should update and let them know what's going on. So if you're rotating a photo, the photo should actually rotate so it feels like you're grabbing it. And if you're swiping, items should come in from the left or the right sides.

Be careful about defining custom gestures. Most users won't discover them and they probably won't remember them either. Again, going back to the keyboard metaphor, a custom gesture is a lot like an obscure keyboard shortcut. Users just won't remember about it. Sometimes they'll just discover it accidentally. Like, what just happened there? So be really careful about defining custom gestures. Okay, so that was the Mac. Really take the time to learn about all the new features and the way that we've redesigned the interface for Lion. Make sure that your app feels at home on OS X.

OK, so I know I covered a lot of material today, so I want to leave you with some final thoughts. So at the beginning of the talk, I talked about how each of these different devices were unique. But I hope you now realize that there's a lot of similarities between the different devices, right? Your goal is the same. You're trying to make your app easy to use. You want to showcase content on all the different devices. It should be beautiful. They expect a really engaging experience.

But you need to consider the unique characteristics of each device to accomplish this goal, right? You need to design for a specific device. On the iPhone, you should think about the extreme portability. Think about how to make it fast and reliable. On the iPad, make it immersive. Make it fun. Make the graphics beautiful. And you can use realism to take advantage of that large multi-touch screen.

And on the Mac, think about OS X, all the great features it provides. Think about why Mac users love to use a Mac. And make sure that your app doesn't feel just like another web page or an app from a different platform that was just ported onto the Mac. It won't be as successful as it could be.

And refine your feature set. When you target a highly focused set of features for your app, you're able to ensure that everything's going to work out just right. You can deal with animations, the graphics, different edge cases that might come up in the later part of your development cycle. If you just try to build so many different things, you're often going to need to sacrifice the UI and user experience of different parts of your app.

Think about the different features that we provide in the different platforms that we have, right? So iMovie, Mail, iWork. We have apps on the iPhone, the iPad, and the Mac. And think about which features that we put in there and what makes sense for all the different ways that people use each device that I've been talking about.

And finally, delight your users. Remember that your goal is to enable your users to use your app in the most intuitive and delightful way possible. And I hope you can get started with a lot of the tips that I went through today on your app. So I didn't cover so many different topics on UI. So please make note of my email address.

And get in contact with me later this week or after the show if you have specific questions on the UI in your app. And make note of the human interface guidelines where we keep them on our developer site. And we're working really hard on an update for the Mac OS X human interface guidelines. So stay tuned about that. All right, thanks for listening.