Navigation Styles

Loading...

En provenance du cours de University of California, Irvine

Best Practices for iOS User Interface Design

181 notes

University of California, Irvine

Best Practices for iOS User Interface Design

181 notes

Cours 3 sur 6 dans Specialization iOS Development for Creative Entrepreneurs

You will learn to develop sophisticated user interfaces for iOS, with a focus on user interface design best practices, UI animations, and responsive design. You will learn about the key UI widgets, mapping interfaces and view restoration.

À partir de la leçon

The Design Solutions that come with iOS

In week 2, we will discuss the design solutions that come with iOS. We will cover HIG and HCI principles plus learn how to achieve the design. We will wrap up this week with a quiz to test your knowledge on what you have learned this week.

Starting and Stopping26:07

Navigation Styles15:39

Gestures and Touch13:06

Leveraging iOS23:32

Some HCI Principles22:24

Rencontrer les enseignants

Don Patterson
Associate Professor
Informatics and Computer Science
Sam Kaufman
Partner at Gradient

[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]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play