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.
Navigation Styles
Loading...
En provenance du cours de University of California, Irvine
Best Practices for iOS User Interface Design
177 notes
University of California, Irvine
177 notes
Cours 3 sur 6 dans Specialization iOS Development for Creative Entrepreneurs
À 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.
Rencontrer les enseignants
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner 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.
© 2018 Coursera Inc. Tous droits réservés.
