1
00:00:00,630 --> 00:00:07,220
[Dan Gorgone] From the earliest days of the Web, links have represented places where the user can go next.

2
00:00:07,270 --> 00:00:10,940
But unfortunately, links are not always as obvious as they seem.

3
00:00:11,490 --> 00:00:14,700
[Guil Hernandez] Website navigation is incredibly important in usability

4
00:00:14,950 --> 00:00:18,960
because it gets people visiting more pages in your site.

5
00:00:19,120 --> 00:00:23,450
There are many ways we could do that—of course, there is the top level navigation

6
00:00:23,450 --> 00:00:25,550
and proper stucture—that is very important.

7
00:00:26,020 --> 00:00:29,320
It can't be confusing—we can't have deceiving navigation links

8
00:00:29,320 --> 00:00:33,600
that take you to page that aren't necessarily what you were looking for.

9
00:00:34,460 --> 00:00:40,330
[Gorgone] Usability can suffer when design confuses the common meaning behind historical expectations.

10
00:00:41,150 --> 00:00:47,180
For example, things that look like links, such as underlined text, should act like links.

11
00:00:47,780 --> 00:00:51,020
If they don't, the user is going to be confused.

12
00:00:51,830 --> 00:00:55,040
Well that means recognizing that anything with a button shape,

13
00:00:55,370 --> 00:01:00,170
certain images, and anything else that looks clickable should be clickable.

14
00:01:00,840 --> 00:01:05,280
Otherwise, you're creating an experience that can introduce frustration.

15
00:01:05,560 --> 00:01:07,630
Be sure to make links obvious,

16
00:01:07,860 --> 00:01:11,640
so users know what they can click and where they can go next.

17
00:01:13,150 --> 00:01:16,830
Another common mistake can occur when people create text links.

18
00:01:17,200 --> 00:01:20,870
Sometimes, designers or even the people creating the content

19
00:01:21,320 --> 00:01:23,710
will decide to create a link to something important

20
00:01:24,090 --> 00:01:27,950
and use text in the link that they think sounds interesting or clever.

21
00:01:28,510 --> 00:01:31,810
Maybe they use a cool term that people at their company will understand

22
00:01:32,160 --> 00:01:34,940
or make a funny reference to something in the industry.

23
00:01:35,650 --> 00:01:40,950
Understand that if users don't know what a link does or where it will take them,

24
00:01:41,340 --> 00:01:45,650
if they can't immediately figure out the meaning behind it, they're going to skip it

25
00:01:46,050 --> 00:01:48,900
and they're going to look for something else that makes sense.

26
00:01:49,140 --> 00:01:51,890
Especially on navigation bars and menus,

27
00:01:52,330 --> 00:01:55,620
be sure to stick to easy-to-understand terms.

28
00:01:56,270 --> 00:01:59,080
For example, if you want to show off your portfolio,

29
00:01:59,410 --> 00:02:01,880
link to it with "Portfolio."

30
00:02:02,490 --> 00:02:06,360
If you have products and services, offer a link called Products and Services.

31
00:02:07,480 --> 00:02:10,479
Consider the simplest term that your users will think of

32
00:02:10,479 --> 00:02:13,980
when they're looking for that content and use just that.

33
00:02:14,960 --> 00:02:19,900
Too often, designers will try to inject too much personality or whimsy into their designs,

34
00:02:20,360 --> 00:02:22,370
and it can negatively affect usability

35
00:02:22,870 --> 00:02:25,970
and decrease the chances that the user will stick around.

36
00:02:26,910 --> 00:02:29,510
In addition to offering helpful navigation,

37
00:02:29,510 --> 00:02:32,450
you also want to offer interesting and interactive ways

38
00:02:32,760 --> 00:02:35,910
for your users to explore and engage with your site.

39
00:02:36,750 --> 00:02:40,910
A rotating carousel of images, for example, should be pleasant to look at,

40
00:02:41,110 --> 00:02:44,480
easy to read, and clear on how to operate them.

41
00:02:45,300 --> 00:02:48,740
Using buttons or arrows to control this feature should be intuitive

42
00:02:49,080 --> 00:02:51,720
and the controls should be close to the content.

43
00:02:52,520 --> 00:02:54,700
Now, remember those exit signs that we talked about earlier—

44
00:02:55,520 --> 00:02:59,370
if the visual cues are too far away from the important stuff,

45
00:02:59,370 --> 00:03:01,500
well, the meaning is going to get lost.

46
00:03:02,250 --> 00:03:08,970
In this case, controls that are not next to the carousel could be confused as controls for something else on the page.

47
00:03:10,120 --> 00:03:14,820
Adding functionality from third party sites is an option that many designers choose,

48
00:03:14,820 --> 00:03:19,570
especially when it provides connectivity with popular social media platforms.

49
00:03:20,260 --> 00:03:22,800
Keep in mind that adding any code from the outside

50
00:03:23,140 --> 00:03:28,140
introduces the chance that something could break without you doing a thing.

51
00:03:28,280 --> 00:03:30,950
Social media platforms change their sites all the time,

52
00:03:31,370 --> 00:03:36,120
and with it, the badges or plugins that they provide may change, as well.

53
00:03:37,090 --> 00:03:39,340
With any of these features included on your site,

54
00:03:39,830 --> 00:03:41,550
you must take responsibility for them

55
00:03:41,970 --> 00:03:46,200
and review them on a regular basis to ensure that they still work correctly

56
00:03:46,420 --> 00:03:49,000
and look good within your design.

57
00:03:50,100 --> 00:03:54,100
In the end, it's important to remember balance in your design.

58
00:03:54,450 --> 00:03:57,790
Keep your priorities in mind when assembling everything on your site,

59
00:03:58,340 --> 00:04:00,880
and maintain your focus on the important content—

60
00:04:00,880 --> 00:04:04,850
the products, the features that the main users of your site will be looking for.

61
00:04:05,430 --> 00:04:07,910
Don't overload it with too much stuff.

62
00:04:08,210 --> 00:04:11,220
Always keep in mind what your users want to accomplish,

63
00:04:11,810 --> 00:04:14,220
but don't lose site of what you want then to do, as well.

64
00:04:15,270 --> 00:04:18,220
As such, don't bury the most important features or links—

65
00:04:18,720 --> 00:04:21,950
move them to front and center; make the easy to find.

66
00:04:22,220 --> 00:04:25,330
And reduce the number of clicks it takes to get everywhere.

67
00:04:26,040 --> 00:04:33,190
The easier everything is to find, the better the chances are that users will use your site.