[MUSIC]

iOS enables you to have lots of different ways of providing interaction elements for

a user.

One of the categories of interaction elements goes by the general idea of bars.

These are horizontally oriented interaction elements that typically have

buttons on them with which a user can interact to change your app and

to provide input to your application.

I'd like to walk through the different kinds of bars that are standard within iOS

and talk about their functionality and how they are intended to be used.

And to give you a little bit of code insight to how you build these things.

And in this, what we will see is we will see the implementation of some of

the principles from the human interface guidelines.

See how those get realized in Xcode itself.

So iOS Bars, that's the subject of this lecture.

The different bars that we're gonna look at are the Status Bars,

Navigation Bars, Toolbars, Tab Bars, the Search Bar and the Scope Bar.

We'll go through them one at a time.

And I'd like to start with talking about Status Bars.

The language is kind of important because as you look in the human interface

guidelines, as you look in the documentation for

the different functions that are associated with Xcode.

You'll see them called pretty consistently and

for me, sometimes it's hard to remember that when someone says Status Bar,

they mean a very specific kind of interface in iOS.

They don't just mean a bar that provides status generally,

they mean a very specific one.

And the one they're talking about in this case is what you see

at the top of interfaces that specify the carrier that you're associated with.

Verizon, AT&T, O2, ones that are in other countries,

Digicel in Haiti, all kinds of different carriers you might run into.

That's specified in the Status Bar, you typically have the time specified

in the Status Bar, some kind of battery indicator.

And then you have various sorts of state indicators here,

for example this do not disturb indicator.

On the left, you see that the Status Bar has been implemented in dark text in order

to support being displayed on top of a light background.

On the right, you see the Status Bar has been rendered in light text so

that it can be shown in a dark background.

These are two different ways,

two different flavors of Status Bars that you can have and you have to manage

that as an app developer specifically to make sure that it looks good.

So what you can do when you work with the Status Bar

is you can either set it at one time for your entire application.

And you do that by going into your UIApplication code and you have to

make a modification to your Info.plist file in order to say that I intend

to set the styling of my Status Bar in one place throughout my entire application.

That's fine if you have kind of a simple application but it's not terribly hard,

actually, to correctly set your Status Bar within each view controller and

this is the common pattern.

This is the way that makes a little bit more sense if some views,

you're gonna show dark content, and some views you're gonna show light content.

And so what you can do is you can set the Status Bar coloring and

styling on a per view controller basis.

Now when you do that, what you do is you do it programmatically, and when I say do

it programmatically, I mean you're gonna write code that sets the styling of it.

And the way you do it is you do it with a callback function using

a common delegate pattern.

Here's an example of Xcode,

and what we've done here is we've created a basic interface element here.

And we have given it a dark background and the place where we've given it a dark

background is over here where it says dark background,

see if I can get that accurately enough.

And when I have a dark background I want to have a light status bar.

So in order to access this in order to change it from its default,

the default cases that it's dark and so

usually you have to handle this if you have dark content.

What you have to do is on view load, you need to call a method that has been

implemented in the superclass called setNeedsStatusBarAppearanceStyle.

Let me see if I can get that better.

SetNeeds go over writing it accidentally, sorry.

Anyway, it's this one right here.

setNeedsStatusBarAppearanceUpdate.

When you call that, you're going to tell your application

through your view controller that you want to change the status bar.

That will give the rest of the iOS interface the information it needs in

order to re-render it.

And when it gets that message, it's gonna call your app back,

your view controller back.

And the function that it's gonna call is going to be preferredStatusBarStyle.

So you have to implement that if you want to change the color.

And here I've made, that just simply has to return one of two values.

Either UIStatusBarDefault or UIStatusBarStyleLightContent.

I wrote the little code here so that you can see clearly what's happening.

If your background is light, then you want to return UIStatusBarStyleDefault.

The default is to have dark text.

If your background is dark and

you want to have light text, then you return UIStatusBarStyleLghtContent.

So that light content, that's a little confusing because what that means is that

the status bar content is light colored, it's not the background content.

So if light background is false, meaning that this variable that I've

specified here, if light background is false,

If light background is false and we have a dark background and

we want a light carrier status, in which case, we need to return this value.

If you do that, then you will get the effect that you want for that color.

So some other things about Status Bars, so now up here you see that I'm using

a light Status Bar to render clearly over my big face there.

A couple things about Status Bars.

In this current generation of iOS in the 9.0 series,

when the Status Bar is rendered, it's rendered transparent and so

it's layered on top of any content that you put behind it.

So this requires a little bit of careful thinking.

For example, you wanna be careful with what you put in your background.

Because if you put a button on your interface, for

example this one that says click on me, and you're not careful, and

it gets rendered underneath the Status Bar.

You're gonna have a conflict when the user goes to click on your button,

it's actually gonna get intercepted by the Status Bar instead and

the user will have a hard time clicking on your content.

Plus, it's just hard to read because your button is being

overlaid with the content of your carrier readout.

So you wanna be careful with your content,

both that it doesn't get confused with that Status Bar, but also so

your users aren't inclined to click on the Status Bar for the wrong reason.

Now, the common metaphor for clicking on the Status Bar is that it's gonna take you

to the top of whatever document you're looking at.

So that's the common pattern for clicking on a Status Bar, and so

you don't wanna have other buttons that confuse that.

So there are a couple ways that you can handle this.

For example, you can explicitly place a UIView,

which is 23 pixels high, that represents this height here.

In this case what I've done is I've created a UIView with a white background

and I've placed it specifically on my canvas to go behind the Status Bar, and

in this case, the Status Bar is dark.

And, I've done that to make sure that whatever content I display behind it

doesn't confuse the carriers.

That's one way that you can do it.

The other way that you can do is you can resize your UI element so

that it doesn't overlap the status bar.

So in this case, I've made sure that my picture only

goes up to within 23 pixels of the top of the user interface.

And that gray color that you see in the background is the background color

of the base canvas.

So there are two different approaches.

One in which I put a explicitly put an element to go behind the status bar, and

one in which I make sure that my content doesn't go too high.

In both cases that's too ensure that,

the click on me doesn't get confused with the carrier.

But in general, having the status bar over my picture isn't really a problem.

All right, so that is Status Bars.

Next what I wanna do is I wanna look at Navigation Bars.

Navigation Bars show up in a lot of different view controllers and

here I'm gonna show you a master detail one.

But what I wanna focus on is just the bar part of it, which is the navigation bar.

So that's this portion at the top that's labeled master there.

Navigation bars are translucent so they're not transparent.

And it may not be entirely possible to see in this rendering on the screen.

But the color the of the bar behind master is picking up some of the color

from the green background in my image and that's showing through a little bit.

And again that gets back to these high level aesthetic

principles of suggesting the content that's behind it.

The Navigation Bar itself can be light or dark like Status Bar.

It's a little easier to implement that.

It can also be tinted in that you can give it a little bit of color in order to match

the branding or the aesthetic experience of your application.

By default you find these at the top of your View Controller.

And if you use the Navigation Controller,

they'll be put there automatically for you.

The idea and what they enable is,

they enable the user to move through an information hierarchy.

And so, you're familiar with this kind of pattern maybe from web

browsers that enable you to go backwards.

Well that's what the navigation bar enables you to do too.

It provides the support for being able to move through multiple view controllers,

and have a way to get back to where you were, and that information hierarchy.

And it supports some functionality like changing the title.

So here's an animation showing that process happening,

give it a second to load up here.

Mm, there we go.

Okay, so here I'm clicking a pulse button.

That's not part of the navigation functionality.

It's just to show you that you can put functionality in it.

I create some elements in this view controller and then I delete them.

But that's the part that the navigation controller is responsible for.

Moving you to a detail, and then providing that arrow to go back.

So here, I'll run through it again.

I'm going to delete one.

That's not part of the navigation view.

What's part of the navigation view is when you click on the detail,

you go to a new place.

You see that back arrow to master.

And when you click on that, you go back.

So that Navigation Bar at the back top, the part that comes by default,

is about moving forward and backward through content.

And then you can add the plus and the done.

If you want to have additional functionality up there.

Okay that's the navigation bar.

So the next one I want to look at is the toolbar.

Now you have to be careful when you think about the Toolbar

with respect to the Tab Bar because if you don't understand what they're used for

you might use them in the wrong situations.

So let's talk about a Tool Bar first of all.

Now, the semantics of the Tool Bar, and by that I mean the thing that a Tool Bar's

supposed to be used for, is you're supposed to put buttons and functionality

into the Tool Bar that modify the content that's being shown in the current view.

So things that manipulate the content, that change the content,

that edit the content.

The Tool Bar itself is translucent like the Navigation Bar.

It picks the color from things behind it.

It can light or dark depending on what kind of content you've got.

And it can also be tinted to show a particular color.

It's as part of a style guideline,

it's shown at the bottom of iPhone applications.

So if you have an iPhone application that would be down here,

but on iPad applications, it can be optionally up at the top here.

Now the important thing though that I want you to get out of this is that toolbars

are used to modify content.

Let's look at an example of what I mean by that.

Here you see set of Tool Bar icons.

These are system buttons, and we talked about this in the previous lecture.

These are the buttons that should only be used for

the particular task that they're associated with.

And because of that, when it comes time to add buttons,

you don't add buttons according to what they look like,

you add buttons according to what their functionality is.

So you'll choose a button and the button you'll choose will be the camera

button for example, or the trash button or maybe you'll have an add button.

And these each have specific ideas about what they are supposed to be used for.

If you want to find what they are you can look

in the Apple Human Interface Guidelines to see that oh, okay, when you hit organize

and you can see what organize is meant to be used for is to move or

route an item to a destination within the app, such as a folder.

Okay, so that is what its supposed to be used for, not to be used for

any sort of task that might be represented by a file icon.

Okay, so Tool Bar Is used to modify content.

So if you look at all these things, there are things like sharing the content,

taking a picture to create content, composing new content, searching for

content, adding content, throwing away content, organizing it,

replying to the content like an email, refreshing the content.

Or these are some media buttons for playing or fast forwarding content.

If we put them into an example application here, here's an example of building

a Toolbar into the application, we can see some of the ways in which

these different processes end up getting implemented, all right?

So let me go ahead and play this animation for us.

First of all, the Toolbar is found down in our object library.

We select it and we drag it and we place it on the bottom.

In order to make sure it stays there, I'm going to give it constraints for

the left and right side at the bottom.

Add those constraints.

The next thing I'm going to do is I'm going to add some Toolbar

items to that Toolbar.

And, they're going to show up as items.

And I'm gonna use something called a flexible space, which is going to separate

them across and distribute them equally to make sure that there's enough space

that users don't click on them and so that aesthetically they fill up the space.

Now here's an example of me selecting a Toolbar item and

choosing its icon based on its functionality.

You can see that when you get the selection up here,

you have to pick it up here.

What you pick is not the picture, but you pick what you want it to do.

So trash, and organize, and the next one here, add.

Okay once they're there I can select that toolbar and I can color it.

I can give it a tint color.

So here I'm gonna select a color.

I'm gonna start by making it yellow.

That yellow's a little too bright for me so I'm gonna go ahead and

pull up the color we own.

I'm gonna give it something that's a little bit more subtle.

And in this way, what I've done is I've created a toolbar.

I've added three items to it.

There are items that reflect a change in the content.

So the things that happened here are the things that are going to be

affected by those icons.

Then when I run it in the simulator, you can see that the Toolbar

has been placed on the bottom according to constraints.

The icons have been flexibly spaced across, and they have a nice tint to it,

assuming that the rest of my application makes sense with that tint.

All right so if that's what Toolbars are used for

we use Tab Bars in a different way.

Tab Bars are used for changing the view itself that is presented to the user.

So here's an example of a Tab Bar.

If you weren't careful, you might think that it was used for the same thing.

They're similar.

Some of the ways in which they're similar is that they're also translucent,

they can be light or dark, and they can be tinted, but

these contain buttons that modify the view.

So rather than thinking about this as buttons that change the content,

they're buttons that present entirely new views to the user.

And this is also communicated to you as a developer

through the choices of buttons that are available to you.

The toolbar's located on the bottom.

You can typically have up to five tabs.

I'm sorry, the tab bar is located on the bottom.

Gosh, I use, I gotta be careful about the language.

This is a tab bar, tab bars modified the view.

These tabs are the equivalent of the buttons that we saw on the toolbar.

They are placed on the bottom.

Our convention is to use no more than four.

And if you have five, the fifth one should be a more icon that will bring up

additional functionality, not totally unlike the hamburger menu icon.

You can disable the functionality associated with these buttons, so that,

although they're present, they're grayed out, so it's clear to the user that,

whatever functionality isn't enabled at the given time.

And, these tab bar buttons can also be badged, and by badged, I mean you can get

a little number icon indicating that there's some work associated with it.

So, for example, if you have emails you might badge an email icon to indicate how

many emails you have,

how many photos you have to process, how many notifications you have.

That's the little,

typically red number that's placed on top of these tab bar icons.

All right, so when you have this and you animate it.

You can see here I'm clicking between two different views.

Now these are just two images but they're an image of Wesley,

the local office dog and myself.

And these aren't modifying the content, these are actually

choosing two different views, and this may not be the best example because really

what it should be showing is entirely different sets of information, and that's

a little bit more clear when you look at the kind of icons that are available.

So tab bar icons are chosen the same way, not by the picture but by the action.

And you can see that the kind of actions that are here reflect changes in views

rather than changes in the content.

So, for example you can pick favorites.

This would select whatever favorites you have.

Music or icons, content or videos.

Whatever favorite things you have.

You might select a history of different actions that you've done.

You might select most viewed.

You might have a search functionality which brings up a new view which is all

about searching.

Or top rated.

And you can see each of these have semantic meaning as well.

And when you select you select by the name.

But just being by virtue of the kinds of things that are associated with

tab bars you can see that the intent of a tab bar

is different than the intent of a tool bar.

System buttons of course, should only be used for associated tasks.

So as tempting as it might be to use one of these icons for

some other kind of functionality besides contacts.

For example, you might want to use that picture of a person for

something other than bringing up a list of contacts.

If in the future that icon changes,

that icon will change to something that's consistent with the idea of contacts.

But maybe if you wanted to use it, you were using a meaning that was different

associated with that picture, when it gets updated, you'll be out of luck.

Okay.

So that is our status bar.

That's our navigation bar, our tool bar, and our tab bar,

and we talked about how those are different.

Next, let's talk about our search bar.

Search bar is pretty sophisticated.

The metaphor that it supports is consisted across many different apps.

And the idea, the semantics behind it.

The intention for

it, is that it's for accepting text from users to be used for searching.

Okay. That's not any rocket science.

But it can be tinted like our other ones, and

you can see here I've actually tinted it yellow.

I hope that's coming across in the recording.

It can have a prompt in it, and it can have placeholder text.

This is the prompt up here, and this is the placeholder text.

And it just provides a common interface, a common visual langauge for doing search.

Let's see.

So, there are more things that you can add to the search bar, and

that actually kind of forms its own class of bars called the scope bar.

So, the scope bar goes ahead and modifies the search bar.

And what that is is that's this thing, right here.

That's called a scope bar.

That is the scope bar.

And it modifies our search bar up here.

So go ahead and see if I can play this animation so

that you can see how it interacts.

So what I've done here is I've turned on all of the different optional elements for

a search bar, including the scope bar.

So what the scope bar does is it's intended to filter the search.

So when you type something in, in this case, if this is a professor search.

You type a name to search for

as indicated by the prompt by that's indicated by the placeholder text.

And if you want to search over all faculty, you click all.

But if you just want to look at computer science faculty,

you click at computer science faculty.

So we can look at that here.

It's a filter for the search.

All right, let's see if I can run the animation so

you can see all the different built in ways that we get interaction.

Of course you specify your placeholder text here,

you specify your prompt here, you can specify the tint for the color here,

and if you wanna turn off translucency you can do that there.

And then each one of these optional things, for example, the cancel button,

And the scope bar itself can be turned on in the option section.

And then the titles for

the different kinds of scopes you want are indicated here.

Now of course it doesn't do the functionality for you.

Actually executing the search requires code but you get a whole lot of

the interaction with the different bars without having to do any work.

All right.

So this is the scope bar.

It modifies the search bar.

And in search, you can add a bunch of functionality.

For example, recent searches, cancel, prompts, titles, and scoping.

So, in summary, there's several different bars that you can use in iOS

interface design A bar is a horizontal region of functionality

that has a bunch of interaction that's already been pre-built for you.

Using the right one is really important for

having consistency with other applications and for leveraging the muscle memory and

interaction mental models that users already have.

And the most important one to make sure that you understand coming out of this

lecture is the difference between the toolbar and the tab bar.

And how the toolbar is for manipulating the content itself, whereas the tab bar

is for switching quickly between two different view controllers.

Okay, thank you for your attention.

That's all I have for this lecture.

[MUSIC]

Bars

Best Practices for iOS User Interface Design

Meet the Instructors