All right, well, let's get started. So my name is Mike Stern. I am a user experience evangelist with Apple. And it's my pleasure to be with you today to talk about designing your app for iOS 7. So what I do year-round is I work with developers such as yourself on how to design great apps for iOS.

And as you can imagine, since this summer at WWDC when we announced iOS 7, I've spent a lot of time working with developers specifically on the process of redesigning their existing apps or designing new apps for iOS 7. And through that experience, I've been able to see really up close and get a lot of hands-on experience of where people have difficulties or questions and what are the opportunities of success for designing for this new version of iOS.

And so I wanted to take that experience, draw from that experience, and share with you some observations that I've had of the kind of real-world situations that people have gone through as they've gone through this process. And hopefully I'll be able to anticipate some of the questions that you may have.

So when designing for iOS 7, I think the best place to get started is to consider some of the principles that influenced the redesign of iOS. Now, there are many different principles, but the top three, the most important three, are these-- clarity, Deference and Depth. And if you're interested, I gave a talk at WWDC where we introduced some of these principles when we first talked about iOS 7. And I go into a little bit greater detail there. But for the purpose of today, I just want to recap what these mean.

So clarity is a really simple concept. It's just about being clear. Now, if you think about UI design, at its essence, what UI design is is a form of communication. It's your app communicating with the people who use it and the people communicating with your app. And the best form of communication, the most clear form of communication, is when things are really easy to understand, when information is presented as clearly as possible, when the functions of your app are obvious and intuitive and easy to use, easy to grasp. So for example, here's weather.

The most important piece of information in this app is what the current weather conditions are. And the design of the interface is almost solely devoted to presenting that singularly important piece of information. There's no mistaking what the current weather conditions are. There's other information presented here, too, and it's also very straightforward and easy to grasp. And that's the bar.

Your app should make information and functions as easy to understand and as easy to grasp. How people interact with your app when they launch it. At the very first moment, the app should tell them what this interface, what this app is capable of doing, and how they do it.

Next up is deference. And I think this is kind of a novel concept when it comes to design, somewhat of an unusual and unexpected one. But it's a really critical one. So to define deference, it's basically about having the best possible content consumption experience that you can possibly provide for the people who use your app. It's about taking content and putting it at the front and center of the experience that they're having with your app's interface.

So for example, this is mail. In mail, the content is the email message. And within that, there's text and photos. So being deferential in this situation involves making sure that text was legible. So the whole text size scaling feature was in large part driven by that singular goal. So if you have a hard time reading text at a small font size, you can adjust it to make it more legible for yourself. Photos are now edge to edge. So there's a larger image, meaning you can see more detail within each photo that you look at.

And the navigation itself was designed in such a way that it's visually subdued. So it's not competing for your attention with the content, with the email message. It's sort of the navigation bar, the toolbar, kind of blend into the message, making the message seem as large as it can possibly seem.

And depth is about creating a vibrant and lifelike experience within apps and on the platform as a whole. It's also about using separate informational and functional layers to help people stay oriented within their current context. Now these three principles, these are really important, timeless and universal principles. And they're critical when you're designing something to have objectives and principles like this. To have principles that provide an objective criteria for you to make really great design decisions. The contrary of that, the opposite of that, is to have subjective design making decisions.

So if you were designing in a subjective way, you might ask yourself, how can I make this look cool? Or what can I do that's new and fresh? And it may yield some interesting results. But it's likely to yield results that are trendy and won't stand the test of time.

So when thinking about principles and talking about principles, there's a risk of sounding somewhat academic or you're over-intellectualizing things. And I think it's actually not that true. The best way to approach designing around these principles is just to ask the right questions. So I've prepared some examples for each of these three principles. And there's more questions that you can ask, many more, ones that are specific to the type of app that you're designing. These are good ones to start with.

So for clarity, am I using words that people understand? Do they have the vocabulary to understand the text that's in the interface? Am I speaking clearly? Am I using grammatically correct phrasing? Can people tell what my app does just by looking at it? That's a pretty high bar to set, but it's an important one to keep your eyes on and try to work towards that ultimate goal.

And can people use my app with little or no instruction? Now, sometimes some instruction is necessary, especially with a very complicated application. But your ultimate goal should be to make the app so intuitive to use that people can just guess how to interact with it. For deference, is the interface calling attention to itself? Is it trying to speak too loudly, and therefore, it's kind of distracting? Does the interface compete with content? Again, is it so visually noisy that it's overwhelming your ability to accurately see visual information within the content, whether that's photos or text? And can content be larger and more central to the app experience? Again, these are really basic questions, but they're good ones to ask.

And for depth, do people get lost or confused in my app? You have to watch people using your app and, you know, be really honest about where they're stumbling and then figure out, is the ultimate problem the app interface and the way it's been designed? Can you help address that? Next up, and I think this is really critical, how do my apps spatially relate to one another? It's really important when you design an interface to have a clear spatial model of all aspects of your application.

If you don't have that spatial model of how things are arranged, when people are using your app, they won't have a spatial model of how things are arranged. Meaning, they don't know where they can go. They don't know where they are. And as a consequence, they're going to feel lost and confused, like the first question.

And finally, how can animation provide a sense of continuity? Now, animation is really important for iOS 7. We've used it and we've leveraged it to a greater extent than ever before. And I'm going to go into a lot more detail about some of the ins and outs of animation a little bit later. But I want you to be thinking about that because animation is really important for providing continuity.

So these questions, they're actually very basic and simple questions. But the answers that you come up with to these questions might be very profound. They might take you on a totally different path than the one you had been on before. So it's important to ask these. It's important to ask these at the beginning, when you set out to begin designing an app. But it's just as important to continue to ask yourself these questions as you're designing and as you're developing. That will help you make sure that you're staying on course and make sure that you're continuing to make really good, objective, rational decisions.

Okay, so that's the principles. I want you to keep thinking about some of those principles as we go through the rest of the presentation, because hopefully it'll help provide that framework for some of the things that I'll discuss. So in software interface design, we talk about the look and feel all the time, more than just software interface design, all aspects of design. And that's a really good way for talking about iOS 7 as well. So I want to start with the look.

Specifically, I want to talk about six different things related to the look of iOS 7, starting with app icons. Now, the reason why I want to start here is because no matter what type of application you make, you're going to have to redesign your existing app icon for iOS 7, presuming that you have one.

There's two reasons for this. The first one is that the size has changed. That's pretty basic. The app icons are now a little bit bigger, and you don't want to just stretch existing artwork to fit because it won't quite look right. It's not high enough resolution. The next one, and the more important one, is that the mask shape for app icons has changed. So the contours of those corners are now a bit different.

And that can be a problem for some icons. You see a lot of app icons that do something like this. They have a faux 3D appearance. It's like a three-dimensional tile which has been tilted back slightly. Or they have inner highlights or borders, frames that trace the contour of the mask shape. And if you've done something like this with your app icons, obviously it's not really going to look right with the new mask shape. Those corners are going to get cut off. The faux 3D effect isn't going to be very convincing.

Now, of course, you can just read and draw this stuff to make sure that it's based around the new mask shape. But I think this is a good moment to ask whether these elements are necessary. Many successful app icons don't have those visual adornments. These six icons, these are from a larger set of icons that I had shown at the conference earlier this year.

And I was doing a presentation called Best Practices in UI Design. And actually, these icons were made before I was seven, before it was public. And I held these up as exemplars of icon design for a couple of reasons, because they do a couple of things really well. The first is that they focus on a limited palette. There's not too many colors in each one of these icons. Some of them really just have one key color.

Next, the colors that they choose are vibrant. They stand out. They have life to them, right? And the third is that they focus on a very simple shape. And as a result of those attributes, they reduce extremely well. Or looked at another way, you can recognize them from a very great distance.

And that's important. Those characteristics are also really great because it's easy for people to memorize, to remember what these look like. So these are great icons. And none of them have a faux 3D effect. None of them have an inner glow or specular highlight or frame around the edge.

Okay. Speaking of icons, many app UIs, probably most, I'd venture to guess, have icons in their interface, either as buttons or as status or some other type of label. So chances are your app is going to have some icons. And in iOS 7, all of the icons for all of the apps that we ship were redesigned.

And they're redesigned to match each other. And they're redesigned to match the overall design vernacular for iOS 7. And by doing that, it creates great degree of consistency for the platform. The platform experience is much more internally consistent and cohesive. And the new icon style was designed in large part... because these are the clearest icons that we could produce. Again, that principle of clarity affected everything that was done for iOS 7.

These icons are crisp, they're precise, they're unadorned, icons are drawn using a minimum number of visual details to effectively describe the object that's being referenced. And they're created using simple geometric forms like rectangles or squares, line segments, I'm going to show you how to create a new app that's going to be able to bring you to the next level of your life. I'm going to show you how to create a new app that's going to be able to bring you to the next level of your life. And graphical features, like the lines for the voicemail icon here, are even one-point strokes.

and Selection is represented consistently by their thickening outlines to be two-point strokes, or filling in shapes, whatever is most appropriate for an individual icon. And you can mix and match these things within one app. as with iTunes U. They demonstrate both of these forms of selection. On the left, featured and charts get filled in when they're selected, and on the right, browse and search just have thicker outlines when they are selected.

Okay, so now I've talked a little bit about the characteristics of the new icon set for iOS 7, but what does it actually take to make icons that match this style? So as a designer, I wanted to understand that a bit better myself. And there's really no better way of learning how to match a particular design style than by doing it, than by practicing it. So that's exactly what I did.

So this is the old design that we had for the WWDC app that we released just before the conference this summer. And so I took this and I redesigned it for iOS 7. And I want to walk you through the process that I went through for redesigning each of the various icons that you see in this interface. I'm going to start with the day switcher controls there at the top. These let you go through the various days of the schedule during the week.

Now, if my approach had just been to take the old iOS 6 icon and drop it into the iOS 7 app UI, it wouldn't look right. It wouldn't look really good. The old icon was designed to make it look inset into the surface, or recessed into the surface. And that's not how icons look in iOS 7, or how we have designed them for ourselves, at least. They don't look inset. They don't look like they're raised above the surface and casting a shadow onto it. They look as though they've been printed directly onto the surface.

So the first step was just to remove those visual effects that made it look inset. But that's not quite enough, right? We also tint icons and tint buttons with a key color, which helps people understand that they are interactive or tappable. And I'll talk more about tint colors in a second.

The next step was to look at the shape. Now, this triangle here, this is filled in. And that's an issue, because as I just talked about earlier, we reserve filling in icons to help show selection. But in this situation, this control doesn't actually get selected. So it's inappropriate. We don't want to confuse people by filling this in.

And I needed to pick a new shape. And in this situation, it was actually kind of easy because there's a lot of precedent. We have back buttons. We have back and forward buttons from Safari's browser history. And those are conceptually very similar to the controls that I'm redesigning here. So I just created an image that was based on a chevron and was scaled to be the correct size for the situation that we're using it in. And that was basically it. It's pretty easy. It's pretty straightforward.

This is a different icon. This is the repeat badge, which helps you know that an event is repeating in the schedule. And you can see some of the same characteristics of the previous icon. We have the triangular shape for the arrowheads. But we can see here that we have kind of an outline which is too thick.

So some of the changes that went in here are similar to what we had before. Changed the triangular shape to a chevron and thinned out the lines from the arrow's tail. Next up are color labels, those little color swatches that have the triangular shape on the left or the big circle on the right.

And they were two different icons, actually, because the circles didn't work well on the left and the triangles didn't work very well on the right. And this one was really kind of just a cheat. I just looked at Calendar, which has color labels for its icons. I dropped them into the new design, and I found that they actually worked really well.

In fact, the same circle of color worked very well in both situations because it's much smaller, so it's more repurposable. And these icons, I'll just call out, these are 15-point, I believe, icons, very small circles of color, but they're just large enough to do what they need to do, which is to show you that swatch, that sample of color. No larger, no smaller.

Okay, now last up, and most importantly, are the tab bar icons. Tab bar icons are typically the largest and most prominent icons in any app's interface. And they're persistent because it's a tab bar. It'll stay visible as you navigate throughout the app. So it's really important that your tab bar icons are designed with great care and attention to detail.

So let's walk through these four icons. Now the first two, these were, again, really easy. The process here was to just look for similar icons in other existing apps that we've shipped and just take them, just reuse them, right? So maps and videos, it was easy to find analogs for those two sections of the app and to just use those icons.

And that's perfectly fine to do, right? Now, next up came Events. That one was a bit trickier, a bit more involved. And so let's dive into that. So that's the old icon. And as you can see here, there's some problems with this. The outline is too thick, and it's just not that one point thickness line weight. And the squares represent days. They're also pretty chunky. They're pretty heavy and don't feel light. They don't feel correct for the design language of iOS 7.

The next issue is that the header, it's so large. As I talked about before, when we're showing selection, we want to make sure that there's a great contrast and fill things in or make things thicker. But that header is so thick that it's hard to make this even more filled in.

And finally, those two rings at the top, which represent the metal rings that hold the months of a calendar together, the individual pages of the calendar together, I wasn't sure if they're totally necessary. And this is just a general bit of advice. Every time you're designing icons, you should ask yourself, is every individual element that's in the artwork absolutely necessary for conveying the image that I'm trying to communicate to people? And if it's not, if it's not carrying its weight, if it's not totally necessary, then it should just be removed because it's one more bit of visual noise that people have to process.

So here's the new icon. As you can see, I removed those rings at the top. I didn't think that they were actually necessary. The header was thinned down, so there's much more negative space. There's much more white space in this icon, so it's easy to imagine how it's going to be filled in and more strongly show selection. And the outlines and the dots were all made to be quite a bit thinner.

And finally, this is the icon that represents the news section of the app. And as you can see here, it has some of those same downsides, the same problems. So the icon is almost 100% filled in, so it would be very difficult to have a version of this which is heavier to show selection.

And of course, I could just approach redesigning this icon by outlining that speak bubble shape, but that would look kind of fussy. It wouldn't look really right. And also, it's not designed based on geometric primitives. These are sort of freehand Bezier paths that are used to design every bit of this icon. It's very non-geometric.

The reason why I did that, and the thing I want to impart with you today, is that you should think about the symbology. Let me jump back here for a second. Think about the symbology of the icon that you're using to represent different concepts. If we look at this individual icon here, we see that it has an exclamation mark. So what does that mean? It means urgency. I want to get your attention.

And there's a speak bubble, which translates to this is a message. So if you string it together, I have an urgent message. And the section that it's representing is called news. So yes, conceptually, they kind of match, but it's not a perfect fit. So if we go back forward again.

You can see that ultimately there's a better icon that has a more direct semantic correlation to the concepts that we're trying to communicate to people. Newspaper connects with news. Okay, and then the other attributes. Because it's a newspaper, it actually has a lot of, luckily, vertical and horizontal shapes, a lot of white space inside the icon, so it'll be easy to show selection when you get around to designing that version of it.

So these changes to the icons, they're actually all pretty subtle. They're not big changes. It's not really rocket science here. But collectively, all of these individual changes has resulted in icons which will now allow the WWDC app to family much better with iOS 7, to feel much more at home on iOS 7. All right. Enough about icons. So let's talk about tint colors.

Tim Cutler is really important in iOS 7. I can't stress this enough. The reason why they're important, beyond just allowing you to give a theme or a particular feel to your apps interface, is they help tell people what elements are tappable. They help indicate interactivity. But it's really easy to overuse color.

Lots of apps have lots of interactive elements at all times. And if all of those had a tint color, there would be way too much color. No matter what the color is, it would be totally overwhelming. So to avoid this, you want to mix things up a little bit, maybe use multiple tint colors. So let me explore what I'm talking about. Let me explain what I'm talking about here.

So this is our App Store interface, the App Store app. And as you can see here, it has a blue tint color. And there's a lot of elements on screen that are given that tint color, have it consistently. So it's pretty easy to know what things are tappable.

But not everything is blue. This segment to control in the middle of the screen here is also interactive. But its design, its shape, its form lets people know that they can interact with this thing. So there's no really need to make it blue. I mean, we could have made it blue. But there wasn't a need to do that. And by making it this medium gray color, it helps to break up the screen so it's less monotonous.

And some things don't even need a different tint color. So there's a visual indicator here, the chevron on the right-hand side of the developer name, which lets people know that they can tap this whole line of text and get more information about the developer. So, again, multiple tint colors, other visual indicators are really important to help break up the interface. Now I want to dive into a very specific thing about tint colors, and that is when it comes to the navigation bar. So I've seen a lot of apps

If you can, I would really recommend avoiding doing this. Because when you have longer labels for titles and buttons, they start to bleed together, and it becomes hard to distinguish between things that are interactive and things that are not interactive. Mike Stern It's not a very clear design, because I can't see where one stops and the other begins.

So it's really important to give a distinct color to button items in the back button in the navigation bar to make sure that they look tappable and visually distinct from titles. And if you really want to have white buttons in the navigation bar, that's OK. But do pick a different color for your titles.

Also, if the title is white, don't pick a light blue color or something that makes the buttons look like they're disabled. This is a big issue, and I've seen it so many times. I want to talk to everyone about this and say, please avoid doing something like this. You don't want to make tappable items look like they're disabled. All right, next up, button borders. The removal of button borders is probably one of the most discussed and talked about aspects of the design for iOS 7.

It's really noticeable, right? Getting rid of those borders. That's a big change. And I'll be upfront and say that if you get rid of borders from buttons, it can lead to some issues. So for example, here's the iOS 6 version of the WWDC app, and we see three buttons there arrayed in a vertical stack at the bottom of the screen.

And as this was redesigned for iOS 7, here's how it would look if we just stripped away those borders and gave a tint color to the labels of those buttons. Now, this is okay. It's not terrible. It's not that great either, right? Those button labels seem like they're just kind of floating there without any real structure. They're centered on the screen, and we can all see that. But it just looks loose and a little bit sloppy.

So my approach to fixing that problem was just to put everything in the main view into a table. That left aligns the button labels and puts table row separators between them, which gives them some separation and gives them much-needed structure. And one nice side benefit of doing that is the hit area, the tap target area for those buttons now extends to the full screen. So it's not like you're going to be able to see the buttons in the main view. It's like you're going to be able to see the buttons in the main view. And so that's a big change. So there's actually more space to tap on those controls.

But a more difficult problem is when you have buttons that are side by side with each other. If we remove these borders, it starts to kind of bleed together a little bit. And it's especially bad if we use larger type because we want it to be more legible.

Or we allow these to be -- the size of these to be changed with the text size -- the text scaling feature. And it's really bad if, like in this situation, the button labels are multiple words. And so there's spaces that are dividing the words within an individual label. As you can see here, it's all just bleeding together in one nonsensical sentence. So one solution to this is pretty straightforward, right? Relay out the ZIP. Create more space between the controls. And that can work if you have the space to do it.

Or you can try to figure out if you can have shorter and more succinct labels. I know I'm talking to a German audience here, so this is a bit difficult. But luckily for you, there's other solutions. So this is exactly the situation that we faced with the login screen for the WWDC app. We have register and sign in that are at the bottom of the screen.

And if I just, in designing for iOS 7, took away those borders, Who thinks this looks good? I mean, I think this looks pretty terrible, actually. It's not a severe usability problem. You can kind of see that these are controls, but they look small and a bit lost down there in the middle of the screen.

So this is the design that I actually came up with. I used a group table view. I used individual table rows to present those different controls. I moved the register button down to the bottom of the screen so it's out of the way of the primary flow of entering in your ID and your password and then signing in.

And in fact, most people who use this app, most of the time, don't need to press that register button because they are already registered and they're just logging in again. So this is a better design, actually. And we have the full width of the screen to present the title, the label for each of those buttons.

And one nice side benefit of that is when you begin to enter in your ID and your password, the keyboard comes up from the bottom of the screen and covers the register button because presumably you do not need the register button anymore. So it's a nice, elegant design. And there's a lot of other apps that we ship that have done something like this.

"But is it a button?" So this gets at the heart of some of the discussion, the debate that occurred among designers and developers at large in the design community in response to iOS 7. And the criticism is that without seeing that border, people won't be able to connect it to a real physical world button. And so therefore, they won't know that it's tappable. And so therefore, usability will be diminished. And that's an understandable criticism, I think. It's a legitimate one. But I think it's a bit overblown. So let me delve into why I'm saying that.

The first reason is that a lot of controls that people interact with are in a navigation bar at the very top of the screen or in a toolbar at the very bottom of the screen. And the placement of those controls at the very top and the very bottom is a very strong cue to people using the app that those are interactive elements. Because people have been interacting with mobile apps for quite a while now, there's a really strong set of expectations. That things that are placed in those areas of the screen are interactive. So, that covers some ground.

In addition to that, and again, I know I'm in Germany here, but there's a lot of words in any language which people understand because we see them all the time. We see them on other iOS apps. We see them on Mac apps. We see them on websites. And we know when we see these words that these are probably things that we can interact with. We know that because they're verbs. We know that because they are actions that we understand. They're just that familiar to us. So with text buttons, this covers a lot of ground too, especially if there's a special color applied to those labels.

But there's some situations not covered by those two cases, the location of controls or their label. And by the way, I talked about text, but there's also a lot of images that we understand to be actionable, like plus signs and the share icon. But that doesn't cover everything. So here is the App Store again. And we have prices there listed on the right-hand side. And as I'm sure everyone here knows, that's the way that people download and purchase apps on the App Store.

But without borders around those prices, they just look like they're prices. They just look like they're labels that you can't interact with. Even though they have a tint color, there's some concern that people would still not know to press those things. And as we can all, I'm sure, agree here, it's really important that people who are using the App Store know how to download and purchase apps. So the App Store decided that it was critical that they put a border around those buttons.

So we ourselves, in apps we've made, have made this decision to do that in situations where it was deemed important for the usability of the app. And if you're in the same situation, where you determine that it's necessary to draw a border around a button to make sure that people know it's interactive, then I suggest that you do something similar to this.

Just draw a one-point outline, one-point stroke around the border, or just fill in the button shape with a solid color. Both of those look really good on iOS 7. They match the design vernacular of the platform, and they're effective in making sure that people know that things are tapable.

So if we go back to the WWDC app for a second here, again, this is the login screen that we were looking at before. And I could have treated those buttons in the same way as the App Store did. But to be honest with you, this is actually a better design.

Boxes, lines, and shadows. So part of being more deferential in an app's design is removing the visual adornments that are so common in pre-iOS 7 apps. These adornments are often really unnecessary. They don't improve usability or help things out very much. But if you simply just strip away these visual adornments, it can sometimes leave your app feeling unstructured.

So let me explain what I'm talking about. This is just a fake generic app that I made. But you see a lot of apps that actually have this type of interface. So it's a long scrolling view, and you see a bunch of photos. And then associated with each one of those photos, there's a caption and a timestamp, maybe some comments, some controls for acting on it.

And all of that is grouped together and clustered together by the use of a visual device, by a box which is being drawn around it. In design, we would call it clustering. And that clustering allows these things to come together as one entity and be separated from other unrelated items. And this is actually really important. Without that box, things become really unstructured.

Oh, got ahead of myself. So the problem gets even worse if you make the photos larger so that your app's interface is more deferential by, you know, allowing the content to come more front and center by having a larger photo, as we do in Mail, and as you've seen in a lot of other apps that have shipped for iOS 7.

So one solution to this is to increase the amount of space between each of these elements on the screen. And so that's a bit better, but the obvious downside here is that we're seeing a lot less content. So we're sort of going backwards in terms of deference. We're barely seeing maybe 50% of that second photo. So another solution is to take some of those elements and composite them onto the photos. That really tightens up the design considerably. Now we can see a great deal of that second photo on the screen. But everything is basically really legible.

Now, a lot of great apps have taken this a step further and just put everything onto the photo. And of all the options that we looked at thus far, this is by far the most deferential design. Every pixel on the screen, every bit of visual real estate that you have is devoted to displaying content other than, of course, the navigation bar.

In fact, it's such a tight, such a much more tight design that you can begin to see a third photo at the bottom of the screen that we couldn't have seen before in any of the other design alternatives. So I encourage you to explore this type of direction in your app if you have a similar situation.

Okay, and the last thing I want to talk about, the look of iOS 7. I need to pick up a little bit of time here. Is that one of the most noticeable design changes for iOS 7 is the use of blurring and translucency. So we can see that here at the control center or search results. And I've seen a lot of designers who've enthusiastically adopted this design characteristic as they've redesigned for iOS 7. But I've also seen a lot of apps that have done this for aesthetic purposes only. And that's really not the intention of using blurring and translucency.

So to explain what I'm talking about, here's the login panel for the WWDC app again. And let's say that we looked at this design and we thought, you know, this is really too simple. This is really kind of bare bones, and we wanted to just spice it up a little bit. So let's take a photo that we have. There's WWDC, Moscone.

And we're going to take that photo, we're going to put it into the background, and we'll blur it. And that's going to add some more visual interest. And while that might look more attractive to some, although I don't think it looks very good, it's not a very good design decision.

It's just there for stylistic purposes. It's just there for aesthetic reasons. Blurring and translucency on iOS 7 are used with the intent of improving usability and making the user interface more deferential to people's content. So let me show two good examples of that. Let's bring up the Control Center.

When the control center comes up, it blurs what's behind it. This is important so you can really see the home screen, or whatever your previous context was, coming through the control center. So you feel like you haven't left the home screen. You've just brought the control center up on top of it. We haven't left the home screen. We haven't left the calculator when we bring up the control center.

And I'll just point out too that it doesn't completely cover the background. We're still seeing a sliver of that background there. It's dimmed, but it's in sharp focus. And that contrast between what's blurred and what's not blurred really helps to sell that visual effect of the control center being printed onto this frosted glass material. You need to have that contrast for that effect to work.

So that's improving usability. It's helping people stay oriented in their current context. Now let's look at how blurring is used in the video player. So this is how the video player would look if the backgrounds of these playback control bars were totally opaque and had no translucency. And as you can see here, the video image looks squished. It looks small. It's confined. Doesn't have enough space. And in a video player interface, that's the one thing that you care about. It's the video image and, of course, the sound.

So that's why blurring and translucency are used here. It allows that color and that visual information to come through the interface. And it allows the interface itself to not seem so heavy so that it's not occluding important information from the background. And then blurring is critical here because without blurring, you wouldn't be able to see the controls that are being presented to you.

So that's the intention around blurring and translucency. Other uses of blurring and translucency really, again, are just there for eye candy. So again, coming back to the login screen, the use of blurring and translucency does nothing here to improve usability or make the interface more deferential to content.

Okay. So that's the look of iOS 7. Now on to, I think, what's the more interesting part of this talk, which is the feel of iOS 7. Animation is a key aspect of what defines iOS 7. iOS 7's user interface is highly dynamic. Animation is used to establish and to reinforce hierarchy. Interactions like scrolling your messages is a playful experience, feels physically realistic.

And interfaces like this one for the home screen seem to have real depth. The icons float above the wallpaper. There's distance between those two layers. And two big technological innovations have enabled this shift towards using more animation. Dynamics and motion effects. Dynamics is essentially a physics-based engine for animating different views.

It's what enabled the camera bounce interaction on the lock screen. With dynamics, views can respond to gravitational forces. They can collide with each other. They can snap to specific points on the screen. They can be pushed by external forces. Objects, views, can have... You can control properties like friction, density, elasticity, and other properties.

And motion effects is what enables that home screen parallax effect and the realistic movement of alerts and Safari tabs in a convincing three-dimensional space. And a big reason for this is to make iOS feel more lifelike, to feel more realistic. Now, realism previously used to be conveyed through visual effects, like highlights and shadows, textures, reflections. But that approach to establishing realism has its limits.

Realism in iOS 7 is conveyed through kinetic realism. iOS 7 feels more lifelike because of the way things move in response to your touch, in response to how you hold the device. Now, how things feel is tremendously important. Let's put aside software interface design for a second and just talk about our experience with the physical world and physical products. Let's take an iPad, for example. What do you know about an iPad? You learn a few things based on how it looks. You can tell what its color is. You can maybe tell something about its material properties and how big it is.

But you learn much more when you hold an iPad in your hand. You feel its weight. You feel that it's light. You feel the materials as you move your finger across the surface of it, so you know how they're finished. You know what it's made of. It doesn't warp in your hand, so you know that it's durable. You know that it was designed and manufactured with great care and attention to detail.

When you press a button, pressing a physical button is really important. It should be a very satisfying experience. It shouldn't have too much resistance, but it shouldn't be too easy to press either. When you press a button, it shouldn't shift around, feel loose. It should just kind of go right in and out. And because of that, because of that tactile experience that you have when you interact with an iPad, you learn about its quality. You learn about its true nature, its real characteristics. Thank you.

So more than ever, we're able to consider some of those same factors when it comes to software interface design. Dynamics and motion effects have really enabled this shift in UI design. Conveying a sense of kinetic realism is going to be a key differentiator for next-generation apps. And I encourage you to explore these things, to play with animation and dynamics, motion effects. They'll help your app to stand out. But it's important to use these tools wisely.

And we've all seen animations that are completely and totally superfluous. And animation for the sake of animation gets old really quickly, while animations that improve usability will stand the test of time. So with that in mind, I've put together nine guidelines to keep in mind when thinking about the feel of iOS 7.

Now, the first one is that sometimes animations are not helpful. They're not appropriate. Pressing a button can be an example of that. When you tap on a button, you want it to highlight immediately so you get instant confirmation that you pressed the button that you had intended to press. If it took time for the button to respond in its highlight, the app would feel sluggish and unresponsive. You wouldn't get that instantaneous confirmation.

Okay, so show restraint. Next up, animation is really great at keeping people oriented. So in the real world, if we're looking at this box here on the left-hand side, it doesn't suddenly disappear from the left and appear over on the right. That would be teleportation. Teleportation's awesome, and maybe it'll exist one day, but it doesn't exist now. So if things moved in that way in the real world, we'd be really freaked out. It would feel very strange and unnatural. In the real world, we watch that box move from one location to another.

But as simple and as basic as that is, a lot of user interfaces don't act this way. We'll go from one screen to the next, and we may have certain objects that are on all of those screens, but they just move to different locations on the screen or have different size or appearance. We don't see them move.

So let's see this principle in action. Here's the Photos app. And I'm going to tap on one of these photos in a second. And we'll watch that transition when I do. Press that photo and it just scales up right in place. Gets bigger, it centers on screen. And that transition, it's very quick and it's very kind of obvious and intuitive that it does that, but it's really important.

It improves usability because I immediately know after tapping the photo that the one I'm looking at is the same one that I had intended to look at. I don't even have to think about it, I don't have to be conscious about it or cognitively just check, am I looking at the right thing? It just happens immediately.

And when we go back to the grid view, we see that animation is reversed. It scales right back down. And we see the photo that we were looking at has now taken its place among the other photos in the grid view. And so we're immediately oriented in place, and we can move on to the next photo and the photo after that. And that's just as important for the usability of the Photos app. I was there. So let's imagine a different type of animated transition. Let's say we use a slide transition.

So we don't get that immediate and important usability benefit. We're not really totally sure that this is the photo that we had intended to press. There's no confirmation. And again, just reversing that, So this is a really simple but powerful UI animation concept. That same type of direct scale up and scale down transition was used all over iOS. From the home screen to calendar to the home screen to the desktop.

to the multitasking UI. This is really consistent. Works really well. It's very effective. Now, spatial relationships. Because we live in a three-dimensional world, two-dimensional computer interfaces can feel pretty flat. iOS 7 uses animation to create a sense of physical space. The best example of this is the multitasking UI. Let's watch that animation occur. What's going on here? I wanted to understand this a bit better. So I created this little animation. Now we're looking at Weather App. We're going to go into the multitasking UI.

And as we do, we feel like we're stepping back from the weather app, and that's the reason why we can see some of these other apps that are near it. When that, through that animation, we get a sense of a spatial relationship with the various apps that are currently running. We feel a sense of distance and proximity. Things are closer or farther away.

Not only that, we get a sense of a spatial relationship between the applications, and that they're ordered based on recency. And again, having that spatial model and imparting that spatial model on the people that use your app is really important to do. Animation is a powerful way of creating these spatial relationships for an interface, specifically because it's a really natural way for us to understand what's going on, and it makes it more memorable.

Animations are also a really fantastic way of providing feedback to people using your app without needing to display status text or alerts. So let me share a couple of really good examples of this. First up is the focus and exposure indicator from the camera app. Now let's look at what's going on here. There's three parts of this animation.

This indicator does three really important things. By first appearing and then scaling down, it's telling you it's locking on a specific part of the image to reference for setting the exposure and focus. And because it's scaling down, it feels like it's getting more precise, which is a good thing. We want it to be precise.

When it stops scaling, it quickly pulses, and then it fades away. By pulsing and fading away, it's telling you that it's completed the process of focusing and setting the exposure. and that it's ready for you to now take a photo. So that's a lot of information which is communicated through a very simple and quick animation.

Next up, let's talk about the lock screen. So when you enter in your passcode, but you do so incorrectly, it animates. sort of shakes his head no and says, "No, that's not the right password. I'm going to clear out the gibberish that you just entered in here, and I'm going to let you try again," all without saying a word. So as many of you know, this animation was initially debuted on the Mac platform, and it was so successful there that it was brought over to iOS. Again, an animation which is elegant and improves usability in this way is going to stand the test of time.

Animation is also really great at focusing our attention. We are predisposed to fixate on and track moving objects. We can't help it, right? It's in our nature. That is why animation is so good at drawing our attention to a specific area of the screen. Animations are a powerful way of notifying us that something requires our attention and telling us where we should be looking at now. So, for example, the left-to-right highlight of the slide to unlock control on the lock screen draws your attention to the single most important part of this interface, which is the instructions for how to unlock the screen and proceed with using your phone.

Now, how you animate something is really important when focusing people's attention. You may have multiple elements moving at once, and so to draw people's attention to a specific part of the screen, you should be cognizant of the fact that elements that animate that are bigger are going to draw your attention more than ones that are smaller.

So I'm going to play this animation again. This is what happens when you tap on the unified search field in the Safari app. And what you'll see is inside of the search field, it kind of scales and morphs a little bit. But your attention is drawn down to the bottom part of the screen because the bookmarks animating in and the keyboard sliding up, those are much bigger animations, much more noticeable ones. And that's great. For this-- situation, because that's where you want to be looking at next. Let's watch that again.

Now, I mean, I don't know about you, but my attention is brought to the keyboard, which totally makes sense. That might not be the situation in your app. So if that's the case, where you happen to have larger elements that are taking people's attention away from where they should be looking, stagger the ending time of animations. The last animation, the last thing animating, is probably going to be the one that's attracting your attention.

Okay. So when something animates, when we watch something move, not only can you track the object better, but you get a sense of what it's made of. And in iOS 7's built-in apps, you'll find a lot of views and objects seem to squish and bounce when they move.

Consider that lock screen bounce for the camera. When the screen drops down, it bounces off the bottom edge of the screen. The lock screen appears to be made of some kind of elastic material, and it's colliding with the surface, which is rigid and immovable. It's solid. So let's let it go.

These physical behaviors are what makes iOS 7 feel more lifelike. Dynamics can help you add these sorts of subtle touches to your app's interface. But before you start writing a single line of code, consider the emotional response that you want to elicit. Even with a simple drop animation, a lot can be expressed just by how objects move.

So perhaps you have an app that's really serious and you use the same type of animation that we just looked at. Well, it might not feel appropriate to have a playful and bouncing animation. It might feel a bit out of place for something that's so serious. Instead, this box should feel as though it's heavy and dense, rigid, so it barely bounces at all. Maybe it shouldn't even bounce. It just drops to the bottom and lands there.

Let's consider a different type of app. Maybe you're making an app for children and you want something which is just over the top, fun and playful. Those other two are kind of boring. Maybe it shouldn't fall linearly. It should bounce around a little bit and slide into place. That's much more fun. Or maybe you're trying to convey a sense of technical sophistication. So when we let this go, All right.

It's not -- we don't just drop the box onto the ground. We're lowering it with care. And when it gets close to the ground, it's pulled and snaps right into place. It feels very precise. Finally, maybe you're trying to go with something that has more of a light and ethereal feel. So when we let this box go, it floats down. gets pushed up, then finally comes to rest. All right, these are just a few examples. There's a lot of stuff you can do with animation that gives a sense of what this simple white square is made of.

Now, this is probably pretty obvious, but it's worth pointing out anyway. Speed is really important when it comes to animation. People don't want to feel like they're waiting for an animation to complete. We'll just let that finish there. As a general guideline with UI animation, you want to try to keep animations under a second, if possible.

It's OK to take a little bit more time in some situations. In fact, this animation took about two seconds. But that was the shortest time it could be to complete that animation and still feel natural. And the box had quite a distance to travel. Now, also, animations can be too quick.

Overly fast animations don't give you enough time to process what's going on. It can feel just like a bug, basically. So keep in mind also that animations start to feel slower the more times we see them. So when you're coming to making final decisions around the timing of an animation, make sure you defer that decision as long as possible. You really want to live with animations for a while before you make those final decisions.

Now, in the real world, objects don't tend to move at a perfectly even rate of speed. So when things move-- and then we call that easing, you know, slowing up and slowing down. So when things move without easing, they can seem really unnatural. It's useful to consider why something is moving in the way that it is when it comes to thinking about easing. So even if something moves like this without any ease in or ease out, that can make sense if we imagine that it's on this conveyor belt.

But typically that's not the case. Usually some type of easing is helpful and welcomed when it comes to UI animation. So let's look at a simple ease out animation. So this is going to move really quickly right away and then slow into place when it comes to a stop.

And it has a really different feel to it. We understand the physical dynamics of why it's moving and why it's slowing down in the way that it is. To me, it suggests that this block is being pushed by some external force. It's invisible, but it's still acting on the block.

Let's consider an ease in. That has a different feel to it. To me, it suggests that this box is being attracted to an invisible magnet and stopping because it's colliding with a wall. Or the magnet. And then there's a combination of ease in and ease out. So why is the box moving the way that it is? Maybe it has some wheels. It's driving itself there and has to speed up and slow down when it gets to its destination. And things start to get more interesting when you begin to chain these animations together. So here's two ease outs in a row. Pull back, go forward.

All right. So we understand why things are moving in the way that they're moving, even if we can't see the forces that are acting upon them. Now finally, some words of advice about motion effects. You want to be subtle with motion effects, specifically the use of motion effects for parallax. Motion effects are what allowed us to accomplish this effect on the home screen, to have that real sense of depth. But it's really easy to overdo this effect, so you want to proceed with caution.

Now, we imagine what's going on with Parallax. We have these different layers which have some depth between them. And if they have too much depth between them, if objects are too far or too close to us, when we move the device around, they're going to swing around wildly.

All right? Swinging things moving around wildly on the screen is typically not such a good thing for a user interface. So with motion effects, a little bit of depth is going to go a long way. So we bring those layers closer to each other, and we still have a great sense of depth, but things aren't going off screen immediately.

You can also put some things above the surface and below the surface so you get a lot of relative movement between layers, but not in relation to the screen. And if things are really important and you want to make sure that they're staying in a fixed location, then put them on the surface and move other elements behind them to give that sense of depth while still maintaining elements in the consistent location.

So Dave DeLong, the next session, which you guys will be about to go through, is going to go into a lot of detail about motion effects. All right, so just some quick final thoughts. Just keep in mind that everything I talked about, all these guidelines, are really a foundation for how to approach designing for iOS 7. What you do for your app will vary.

Each app is different, and so what's appropriate for each app is different. What works well for one doesn't work so well for the other. And keep in mind that the best designs are the products of tremendous experimentation and iteration. It takes hundreds, if not thousands, of iterations to come up with a truly great icon or layout or animation.

And also remember that design is a process of discovery, so try out a lot of different ideas and executions of those ideas until you find the one that's just right. And most importantly, simplify, simplify, simplify. If something isn't critically essential for your app's interface, cut it. That's going to give you more time to focus on the features.

The ones that you retain, the ones that are the most important, so you can do the best job designing those limited set of features and make a truly great iOS 7 app. Thank you very much for your time, and I'll turn it over to the next speaker. Thank you.