1
00:00:00,000 --> 00:00:04,114
[MUSIC]

2
00:00:04,114 --> 00:00:07,200
Let's now talk about navigation.

3
00:00:07,200 --> 00:00:12,980
What is navigation, why is navigation
important for your website?

4
00:00:12,980 --> 00:00:16,820
And how do you we provide navigation
information on your website?

5
00:00:16,820 --> 00:00:22,264
So, these are the question that we will
try to answer In this particular lecture.

6
00:00:23,746 --> 00:00:27,058
The first obvious question
that comes to your mind is,

7
00:00:27,058 --> 00:00:30,500
why do we need to have website navigation?

8
00:00:30,500 --> 00:00:34,680
As you realize,
most websites are no longer single pages.

9
00:00:34,680 --> 00:00:37,840
Of course,
there do exist those single page websites

10
00:00:37,840 --> 00:00:42,500
like your professor's webpage In
your computer science department.

11
00:00:42,500 --> 00:00:47,450
But most websites usually
contain more than one page.

12
00:00:47,450 --> 00:00:52,080
As we have seen with our confusion
website that we are building,

13
00:00:52,080 --> 00:00:56,300
we already have added a second
page called aboutus.html page.

14
00:00:56,300 --> 00:01:01,100
Now the way we navigated to
the aboutus.html page was to

15
00:01:01,100 --> 00:01:06,259
explicitly type that into
the address bar of our browser.

16
00:01:06,259 --> 00:01:11,300
But that is a very inconvenient
way of navigating to your website.

17
00:01:12,380 --> 00:01:17,685
It would make a lot more sense to
provide an intuitive means for

18
00:01:17,685 --> 00:01:21,125
the users to navigate to your website.

19
00:01:21,125 --> 00:01:26,535
This intuitive means could be provided by
many different approaches, the navigation

20
00:01:26,535 --> 00:01:32,972
bar being one of the most common
methods of indicating this information.

21
00:01:32,972 --> 00:01:37,342
So, we'll look at several common
ways of providing navigation

22
00:01:37,342 --> 00:01:41,392
patterns on typical websites.

23
00:01:41,392 --> 00:01:46,656
In this context, you often hear people
talking about information architecture.

24
00:01:46,656 --> 00:01:51,458
The information architecture begins
with the structure of the system,

25
00:01:51,458 --> 00:01:55,879
with respect to the way the information
is organized, labelled.

26
00:01:55,879 --> 00:02:01,340
And navigation is provided through
the content or through this information.

27
00:02:01,340 --> 00:02:05,240
Now information architecture,
by itself, is a whole big field.

28
00:02:05,240 --> 00:02:09,375
It is beyond the scope of this course
to cover information architect.

29
00:02:09,375 --> 00:02:14,475
But, in case you are interested
in organizing and

30
00:02:14,475 --> 00:02:18,145
providing information to users through,
for example,

31
00:02:18,145 --> 00:02:23,067
websites, then I have provided you with
some links in the additional resources

32
00:02:23,067 --> 00:02:27,727
that you can go and
read for further knowledge.

33
00:02:27,727 --> 00:02:30,317
But in any case,
when you're designing a website,

34
00:02:30,317 --> 00:02:35,887
it is important to understand the need to

35
00:02:35,887 --> 00:02:41,697
design the information navigation
structures within your website.

36
00:02:43,930 --> 00:02:48,970
And this organization of information
within your website also dictates

37
00:02:48,970 --> 00:02:53,545
what kind of navigational aids
you provide on your website, and

38
00:02:53,545 --> 00:02:57,280
based on how that
information is organized.

39
00:02:57,280 --> 00:03:02,300
Typically, a website would be organized
in some kind of a tree structured or

40
00:03:02,300 --> 00:03:04,630
a hierarchical fashion.

41
00:03:04,630 --> 00:03:07,359
And that automatically dictates to you

42
00:03:07,359 --> 00:03:11,913
how you would design navigational
support within your website.

43
00:03:11,913 --> 00:03:16,737
The use of a navigation bar,
breadcrumbs, and

44
00:03:16,737 --> 00:03:22,405
other means of navigation are very,
very essential for

45
00:03:22,405 --> 00:03:29,760
enabling users to be able to see
various parts of your website.

46
00:03:29,760 --> 00:03:35,150
When you visit most websites you will
often look for the navigation bar.

47
00:03:35,150 --> 00:03:40,080
This is some kind of a bar that is
typically attached at the top of

48
00:03:40,080 --> 00:03:45,570
the website, or sometimes at the bottom
of the website, or sometimes on the side,

49
00:03:45,570 --> 00:03:50,865
that provides you with sufficient
pointers towards the kind

50
00:03:50,865 --> 00:03:56,365
of information that you
can access on this site.

51
00:03:56,365 --> 00:04:01,095
So your navigation bar will typically
contain links to various pages that

52
00:04:01,095 --> 00:04:04,615
form part of your website.

53
00:04:04,615 --> 00:04:09,425
So a typical navigation bar,
how do you go about designing this?

54
00:04:09,425 --> 00:04:13,085
When you design a typical navigation bar,
you should obviously

55
00:04:14,360 --> 00:04:19,500
keep in mind some dos and don'ts
about how you design navigation bars.

56
00:04:19,500 --> 00:04:23,870
First is that you use user-friendly and

57
00:04:23,870 --> 00:04:28,960
simple terms within your navigation
bar to indicate the various links

58
00:04:28,960 --> 00:04:34,900
that the users can follow within
your website to reach information..

59
00:04:34,900 --> 00:04:37,070
You should provide
a standardized navigation, so

60
00:04:37,070 --> 00:04:41,090
that wherever the user is
within your website hierarchy,

61
00:04:41,090 --> 00:04:46,590
they'll always know how to go back to
the homepage, how to go to the next,

62
00:04:46,590 --> 00:04:50,760
previous, or up and
down the hierarchy of some sort.

63
00:04:50,760 --> 00:04:54,670
So indicating the location of the user

64
00:04:54,670 --> 00:04:59,910
within the hierarchy of your
website is very, very useful

65
00:04:59,910 --> 00:05:04,790
to provide a user-friendly way
of navigating your websites.

66
00:05:04,790 --> 00:05:09,345
Also, there are some standard
conventions that people follow

67
00:05:09,345 --> 00:05:12,365
when these navigation bars are designed.

68
00:05:12,365 --> 00:05:17,515
Typically, when you have
the logo of your website or

69
00:05:17,515 --> 00:05:23,832
your company included in your navigation
bar, a click on these logos or

70
00:05:23,832 --> 00:05:29,177
a home button should take you back to
the topmost level of the hierarchy or

71
00:05:29,177 --> 00:05:33,711
the home page of your website,
typically the index.html page.

72
00:05:33,711 --> 00:05:38,817
Some of the don'ts that you should keep in
mind is that you should not have too many

73
00:05:38,817 --> 00:05:41,457
choices in your navigation bar.

74
00:05:41,457 --> 00:05:43,225
How many is too many?

75
00:05:43,225 --> 00:05:48,470
If you find that navigating using your
navigation bars is too cumbersome,

76
00:05:48,470 --> 00:05:52,240
then that means that there are too
many options on your navigation bar.

77
00:05:52,240 --> 00:05:58,010
Provide a reasonable set of choices within
your navigation bar so that you can

78
00:05:58,010 --> 00:06:04,659
indicate the directions that the user can
follow in navigating through your website.

79
00:06:05,880 --> 00:06:11,230
And when you use these navigation
elements in your navigation bar,

80
00:06:11,230 --> 00:06:17,090
don’t use generic labels,
use meaningful labels.

81
00:06:17,090 --> 00:06:22,159
For example,
if you put a label named product in your

82
00:06:22,159 --> 00:06:28,630
navigation bar, people will be confused
about what you mean by product.

83
00:06:28,630 --> 00:06:32,650
Or say, if you put a service in your
navigation bar, they may be confused.

84
00:06:32,650 --> 00:06:34,780
What kind of service are you providing?

85
00:06:34,780 --> 00:06:38,790
It will be more meaningful to
give a more descriptive term

86
00:06:38,790 --> 00:06:43,710
In your headers in your navigation bar.

87
00:06:43,710 --> 00:06:46,380
Yet another means of
providing navigation for

88
00:06:46,380 --> 00:06:50,030
users is to provide what
is called as breadcrumbs.

89
00:06:50,030 --> 00:06:55,895
These are typically provided
somewhere in that page,

90
00:06:55,895 --> 00:07:00,737
typical towards the top
edge of the webpage,

91
00:07:00,737 --> 00:07:04,954
closer to the heading of that webpage.

92
00:07:04,954 --> 00:07:10,513
The breadcrumbs sort of indicate
some kind of a navigational

93
00:07:10,513 --> 00:07:16,255
hierarchy within which you're
currently In your website.

94
00:07:16,255 --> 00:07:21,595
So this provides a secondary
navigation option for your website.

95
00:07:21,595 --> 00:07:26,185
So this could be placed somewhere
below the primary navigation.

96
00:07:26,185 --> 00:07:32,082
It may indicate the hierarchy of
pages through which you have gone.

97
00:07:32,082 --> 00:07:36,687
And the current location may
be highlighted specifically in

98
00:07:36,687 --> 00:07:38,727
the breadcrumb there.

99
00:07:38,727 --> 00:07:43,708
So various ways that
people can use breadcrumbs

100
00:07:43,708 --> 00:07:48,588
include providing a path based navigation.

101
00:07:48,588 --> 00:07:53,558
Say, for example, if you have a user
going through a set of steps in order to

102
00:07:53,558 --> 00:07:59,358
complete a task on your website, say for
example, reserving a airline ticket.

103
00:07:59,358 --> 00:08:04,780
Then you could use a breadcrumb
approach for indicating to them

104
00:08:04,780 --> 00:08:09,880
what step the user is currently
on in the sequence of steps.

105
00:08:09,880 --> 00:08:14,320
Similarly, if you are providing
your location based navigation for

106
00:08:14,320 --> 00:08:18,460
hierarchical approach within your website.

107
00:08:18,460 --> 00:08:23,785
So, what level of hierarchy you are in and
what is the upper part towards

108
00:08:23,785 --> 00:08:29,680
the root of your hierarchy, so that
could be indicated by your breadcrumbs.

109
00:08:29,680 --> 00:08:35,092
Your breadcrumb could also be attribute
based, meaning that you provide a set

110
00:08:35,092 --> 00:08:40,754
of choices indicated in your breadcrumb
for the user at the current point of time.

111
00:08:40,754 --> 00:08:45,032
A typical front-end UI
framework provides many

112
00:08:45,032 --> 00:08:49,840
other ways of providing
navigation on your webpages.

113
00:08:49,840 --> 00:08:54,555
These include tabs, pills,
pagination, dropdowns,

114
00:08:54,555 --> 00:08:59,210
accordions, tags, and
SchrollSpy, and Affix.

115
00:08:59,210 --> 00:09:04,447
We'll look at some of these in
a bit more detail as we go through

116
00:09:04,447 --> 00:09:10,614
the various lessons in the modules
that follow this particular lesson.

117
00:09:10,614 --> 00:09:11,114
[MUSIC]