[MUSIC] Thinking more about some different kinds of behavior that are associated with a well-designed app, moving from launching and starting and stopping, restarting, as we move from these high level design aesthetics, down into the actual Xcode, we get to another issue of well-designed behavior, and sort of conceptual ways of thinking about human-computer interaction, when it is realized on a mobile application, like an iOS device in a mobile app. The concept that I wanna talk about now is Navigation Styles. There are few navigation styles that are common ways in which people maneuver through applications that are helpful to the user in order to presenting a common familiar experience, but also giving them the ability to have a good mental representation of the abstract data that you want them to move through. The abstract world that you're presenting to them, to accomplish some kind of tasks or to do something fun. So these navigation styles are at a high level, one of the things that enables applications to become invisible user-interfaces. By invisible user-interfaces, I don't mean that you can't see them, and I don't mean that they're not there or that they're small. What I mean is I mean that in a philosophical sense. I mean that it's not that you can't see them, but that these user-interfaces become so effective that they aren't noticed. Well-designed user-interfaces become so good that they become an extension of the user, and the user doesn't realize that they're working with a user-interface, but they're working through the user-interface in order to accomplish something important to them. This idea of working through a user-interface requires you to be someone who knows the platform well, who speaks to metaphors that the user already knows, or ways of interacting that the user is familiar with. And this is why it's important to use common patterns that are familiar from other iOS applications and that derive from the human interface guidelines. Let me just flesh that out a little bit more, that idea of invisibility. If you think about using a hammer, when you're using a hammer and you're hammering in a nail into some wood, or doing some project. If that hammer is functioning correctly, and you're hammering the nail, you don't even think about the fact that you're holding the hammer, it becomes an extension of your hand and your arm as you try and accomplish some building task. The moment at which the hammer head becomes loose though, that's analogous to the user-interface being bad, you immediately start thinking about the hammer and not about the task that you're trying to undertake. If you drive cars, if you have a driver's license and you're able to drive, you may be familiar with this process as well. Because when you first start learning to drive, you're very aware of the car. You're worried about the brake, you're worried about turning and turn signals, maybe if you have a manual shift, you're worried about shifting the car and all these things require you to move your hands and legs, and head, and eyes, in different ways you never have before. But after you've driven a car for a little while, you notice that a lot of things become very routine, you don't think about braking, you don't think about turning the wheel. The car, because it's well-designed, because it's been well-designed over many years of iteration, it becomes an extension of who you are and you drive without thinking about it. You drive without thinking about it unless it happens to be poorly designed. You can't see out the windshield, the tire goes flat, that's not bad design, that's just it breaking, or something else happens. So a well-designed user interface can be like a hammer or like a car, where it becomes an extension of the user. So to do that, one thing that is helpful is to think about different kinds of navigational metaphors or structures that are common, that you can leverage in your app. We talked about three of them. One is Hierarchical, one is Flat, and one is Content-Driven. The first one that I'd like to talk about is Hierarchical navigation. So Hierarchical navigation is when you move through your application as if you were moving through a tree. Going from a node at the top that has many different options, going down a level, choosing from many different options, going down another level until you get to a point at which you can accomplish some kind of task. So you move through all of the different possible tasks by moving from a high level category, to a lower level category, to the lowest level category. It's a very common navigation pattern that users are familiar with. So if you look at it as you work through the Apple interface, and you get to the Settings app, you start on the home screen, and the home screen, in the Apple experience, if you use any of these folders, is a hierarchical interface to start with. So, the first thing that a user might do is click on the Settings app, which will cause the first Settings view controller to come up. And what the user is presented with is basically a long selection of navigation interfaces. And they're now in the Settings page but for the most part they're not at a place where they can accomplish something. You have to drill down and go lower. So you navigate around and you can see that you could choose Do Not Disturb or you could choose General or you could choose Display & Brightness, and each one of those choices would open up another set of options. But if the user goes to General and clicks on General, the application will move into a lower level state or to the next level state where a whole other set of branching options are available to the user. In this case they could choose About or Software Update or Siri to change the settings for those things, those are each branches. But if the user goes to Software Update and clicks on Software Update and moves into that state, Software Update comes up, the application immediately begins to undertake some functionality for the user of trying to check to see if the software is up to date. And if it is or if it isn't, reports on the state of the world. But this movement of going from a high level to lower levels, at each moment having a choice where at the end of the choice is some functionality, is a Hierarchical navigational structure. It works like a hierarchy. That's one of the different ways that you could navigate through it, through a setting. And what it is characterized by is having one choice per screen, meaning once choice among all the different options that you could take. You arrive at your desired screen by following several, one or more, many branches down the tree, not always the same number of branches. And then finally at the end of those choices you access some functionality, and it provides a way for the user to organize their world, find their way back to that functionality. And if you want different functionality, the way you get to the different functionality is you have to go back up the chain, make another choice before you're able to go back down to functionality. Now this may seem so familiar and so funny that it's odd that we're even talking about it, but you bring this out when you talk about this as a pattern, you can see how it can be leveraged in order to provide clarity to a user about the way to move around an application. A second way of moving through an application is through a Flat user interface. So in this example what I'm gonna do is I'm gonna show you a screen cast of moving through the App Store. And I wanna show you how the App Store is a Flat user interface that uses a toolbar at the bottom as a way of navigating through the structure of the App Store. When we first get into the App Store, however, it's gonna look Hierarchical briefly because launching an app is a hierarchical process. Once you're in the app though, navigation becomes Flat, so let's look at that. So notice that almost all of the functionality in the App Store app is available from the main screen, and the way you get to it is by pressing on toolbar icons on the bottom to reveal a new view. You can think of it as a tree, maybe, that just has one level, that you only go in one depth. So when you start from the home screen, and you click on the App Store icon, it brings up the App Store. And on the bottom are the toolbars, and you can see that the blue one, Featured, is what's currently showing. As you click on the other options however, you see that you get the choice of being able to navigate through the different panes that are presented to you. Click on Top Charts on the bottom, and then Explore on the bottom, and then Search on the bottom, and then Search on Updates, and on any one of those screens you get some functionality. But in Updates you can click on Update All, and that's the end functionality. So on the bottom are all the different choices, you rarely drill down, and when you select on those, you can see which one of those options you're in, and you present the view. So this is a Flat navigation style, it's just a different option other than navigation. So another one that's possible is Content-Driven. And Content-Driven is one in which you have some kind of application that doesn't present itself well as Hierarchical or Flat, but which is driven by the content itself as the navigation metaphor. So you can imagine the mapping interface, a map is a Content-Driven sort of navigation. You're not clearly going into different page views through a Hierarchy or through a tab setting, but you're letting the content of the map be the way that you explore different options. Another real commonplace where navigation is driven by the content is in games. Often navigation is just part of the experience in games. And so on the right I'm gonna show you a screenshot of the game Plants versus Zombies to demonstrate how they use navigation, how they graphically show the different steps that you go through as you're proceeding through different levels. You choose a level and that's the navigation step. And it's not clearly Hierarchical, it's not clearly Flat, it's part of the experience and it's fun. So when we launch Plants versus Zombies we go to this navigation screen, you can see that there's this path that we follow, and depending on where you click, there's a lot of different options. The floating islands, or the one that's clicked on there. You briefly pause while it's loaded, and then you bring up this level that you might wanna play. And when you play this level, you leave this level, and you would go on to the next one, or maybe you'd come up and navigate again. So in this case, it's very Content-Driven, it's a different kind of navigation process, or navigation metaphor. Games frequently do unusual things with user-interface design because they're trying to make something not so much about efficiency in getting work done, but about playfulness and having fun, all right. Now in practice, in the real world, rarely are applications all just one of these styles. It's rare to find something that doesn't have a little bit of Hierarchical, a little bit of Flat toolbar, maybe a little bit of Content-Driven interaction, that's okay. A lot of applications are very effective at combining all these different approaches in a way that creates a really good user experience. But having those models in your head is a good resource when you're designing your user experience, when you're designing your user-interface, to think about, well what do I want to use at this point in my app? Do I want to use something else? Is it clear to a user why I would use one or the other. Regardless of which one you use though, there are some commonalities that should be in all the different navigation styles. Because it's fundamentally about navigation through an abstract space, users should always be able to figure out where they are. One way that you can do that is with bread-crumbs. Bread-crumbs is a vocabulary term, it is a term that means that you provide indications on your user-interface about where a user has been and how they got there. On websites sometimes you see this as a series of pages that people have gone through with little greater than symbols next to them as they've navigated down a hierarchy so that they can go back up or jump up several steps so they can find it again. iOS has this built in in the navigation user-interface element itself that provides the bread-crumbs automatically so that you can get back out of a sequence of steps very easily. Regardless of how your navigation style, the flow should always be clear and natural, it should be clear why you're using the navigational interface. Another interface style that we didn't talk about very much is Page Control, this would be like flipping the pages of a book. If you choose that, that should be very obvious about how you're moving through the book, and you want some sort of bread-crumbs like a page number or a slider at the bottom to show a user where they are in this process. A Page Control is like a flat controller where you just have many, many, many different choices so it's easier to display your choices as a scroll bar rather than individual icons. Finally, a user should never get confused about where they are at a given moment in the app. And so controls that are available in Xcode, like the Segmented Controller, and the Toolbar, will as part of the way that they're built will automatically provide some functionality to you as a programmer of highlighting the given segment that you're on, the given tab that you're on, or the given toolbar item that was pressed and what's being viewed at the given moment. One thing to be very careful about is to not confuse the user by giving them multiple ways to get to the same content. So one thing that would be really baffling to users is if you had a tree structure where at the bottom of the tree you could go back up to the top of the tree and start all over again. So kind of more of a graph rather than a strict tree structure. And the reason why that's confusing is because there appear multiple ways to get to the same content, and so it's very hard for the user to form a mental model, a structure or representation of where the needed functionality is in this application. It's much easier to remember a tree than it is to remember an arbitrary connection of pages that sort of wonder around all over the place. You don't know the fastest way to get there, it's very hard to remember. Trees leverage categorization and visual structure in order to help users find their way around. So in summary, an important part of designing a good user-interface so that it is invisible and the user even doesn't notice it's there is choosing the right Navigation Style. Or possibly choosing a good combination of Navigation Styles at different points in your application. That helps a user for becoming disoriented and it forces you as an app designer to think about the user experience and to make sure that you're drawing the right connection between the data and the functionality in the tasks that you're presenting to the user, a the way that the user-interface is designed. Three key primary Navigation Styles in the IOS app are Hierarchical, Flat, and Content-Driven. And like I said, many apps use multiple styles or mixed multiple styles effectively. What kind of Navigation Style are you gonna use in your app? Can't wait to see it, thanks. [MUSIC]
