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.