0:23
The first obvious question that comes to your mind is,
why do we need to have website navigation?
As you realize, most websites are no longer single pages.
Of course, there do exist those single page websites
like your professor's webpage In your computer science department.
But most websites usually contain more than one page.
As we have seen with our confusion website that we are building,
we already have added a second page called aboutus.html page.
Now the way we navigated to the aboutus.html page was to
explicitly type that into the address bar of our browser.
But that is a very inconvenient way of navigating to your website.
1:12
It would make a lot more sense to provide an intuitive means for
the users to navigate to your website.
This intuitive means could be provided by many different approaches, the navigation
bar being one of the most common methods of indicating this information.
So, we'll look at several common ways of providing navigation
patterns on typical websites.
In this context, you often hear people talking about information architecture.
The information architecture begins with the structure of the system,
with respect to the way the information is organized, labelled.
And navigation is provided through the content or through this information.
Now information architecture, by itself, is a whole big field.
It is beyond the scope of this course to cover information architect.
But, in case you are interested in organizing and
providing information to users through, for example,
websites, then I have provided you with some links in the additional resources
that you can go and read for further knowledge.
But in any case, when you're designing a website,
it is important to understand the need to
design the information navigation structures within your website.
2:43
And this organization of information within your website also dictates
what kind of navigational aids you provide on your website, and
based on how that information is organized.
Typically, a website would be organized in some kind of a tree structured or
a hierarchical fashion.
And that automatically dictates to you
how you would design navigational support within your website.
The use of a navigation bar, breadcrumbs, and
other means of navigation are very, very essential for
enabling users to be able to see various parts of your website.
When you visit most websites you will often look for the navigation bar.
This is some kind of a bar that is typically attached at the top of
the website, or sometimes at the bottom of the website, or sometimes on the side,
that provides you with sufficient pointers towards the kind
of information that you can access on this site.
So your navigation bar will typically contain links to various pages that
form part of your website.
So a typical navigation bar, how do you go about designing this?
When you design a typical navigation bar, you should obviously
4:14
keep in mind some dos and don'ts about how you design navigation bars.
First is that you use user-friendly and
simple terms within your navigation bar to indicate the various links
that the users can follow within your website to reach information..
You should provide a standardized navigation, so
that wherever the user is within your website hierarchy,
they'll always know how to go back to the homepage, how to go to the next,
previous, or up and down the hierarchy of some sort.
So indicating the location of the user
within the hierarchy of your website is very, very useful
to provide a user-friendly way of navigating your websites.
Also, there are some standard conventions that people follow
when these navigation bars are designed.
Typically, when you have the logo of your website or
your company included in your navigation bar, a click on these logos or
a home button should take you back to the topmost level of the hierarchy or
the home page of your website, typically the index.html page.
Some of the don'ts that you should keep in mind is that you should not have too many
choices in your navigation bar.
How many is too many?
If you find that navigating using your navigation bars is too cumbersome,
then that means that there are too many options on your navigation bar.
Provide a reasonable set of choices within your navigation bar so that you can
indicate the directions that the user can follow in navigating through your website.
6:05
And when you use these navigation elements in your navigation bar,
don’t use generic labels, use meaningful labels.
For example, if you put a label named product in your
navigation bar, people will be confused about what you mean by product.
Or say, if you put a service in your navigation bar, they may be confused.
What kind of service are you providing?
It will be more meaningful to give a more descriptive term
In your headers in your navigation bar.
Yet another means of providing navigation for
users is to provide what is called as breadcrumbs.
These are typically provided somewhere in that page,
typical towards the top edge of the webpage,
closer to the heading of that webpage.
The breadcrumbs sort of indicate some kind of a navigational
hierarchy within which you're currently In your website.
So this provides a secondary navigation option for your website.
So this could be placed somewhere below the primary navigation.
It may indicate the hierarchy of pages through which you have gone.
And the current location may be highlighted specifically in
the breadcrumb there.
So various ways that people can use breadcrumbs
include providing a path based navigation.
Say, for example, if you have a user going through a set of steps in order to
complete a task on your website, say for example, reserving a airline ticket.
Then you could use a breadcrumb approach for indicating to them
what step the user is currently on in the sequence of steps.
Similarly, if you are providing your location based navigation for
hierarchical approach within your website.
So, what level of hierarchy you are in and what is the upper part towards
the root of your hierarchy, so that could be indicated by your breadcrumbs.
Your breadcrumb could also be attribute based, meaning that you provide a set
of choices indicated in your breadcrumb for the user at the current point of time.
A typical front-end UI framework provides many
other ways of providing navigation on your webpages.
These include tabs, pills, pagination, dropdowns,
accordions, tags, and SchrollSpy, and Affix.
We'll look at some of these in a bit more detail as we go through
the various lessons in the modules that follow this particular lesson.
[MUSIC]
Jogesh K. MuppalaAssociate Professor
