1 00:00:00,000 --> 00:00:04,620 [MUSIC] 2 00:00:04,620 --> 00:00:11,032 When it comes to primary navigation, most websites offer a common set of features. 3 00:00:11,032 --> 00:00:17,092 I'm looking at the New York Times, a news website, Powell's Books, 4 00:00:17,092 --> 00:00:23,063 a shopping website, and Sierra Club, an environmental nonprofit. 5 00:00:23,063 --> 00:00:27,832 All three sites feature a header with a prominent logo in 6 00:00:27,832 --> 00:00:30,378 the upper left or top center. 7 00:00:30,378 --> 00:00:33,482 Clicking the logo returns the user 8 00:00:33,482 --> 00:00:38,092 to the homepage from any place within the website. 9 00:00:38,092 --> 00:00:43,011 All three sites also feature navigation tabs inviting users 10 00:00:43,011 --> 00:00:46,295 to browse major content categories. 11 00:00:46,295 --> 00:00:52,246 Website headers often feature smaller utility links such as a shopping cart or 12 00:00:52,246 --> 00:00:54,328 the opportunity to log in. 13 00:00:54,328 --> 00:00:57,828 And many websites include a way to search in the header, 14 00:00:57,828 --> 00:01:02,206 although the Sierra Club doesn't offer that feature. 15 00:01:02,206 --> 00:01:07,756 One interesting characteristic these three primary navigations have in common 16 00:01:07,756 --> 00:01:13,560 is that no special effort has been applied to the links to suggest their affordance. 17 00:01:14,560 --> 00:01:18,124 Affordances are the properties that 18 00:01:18,124 --> 00:01:22,438 suggest what can be done with an object. 19 00:01:22,438 --> 00:01:26,607 When users encounter text hyperlinks within an online article, 20 00:01:26,607 --> 00:01:32,152 the hyperlinks are a different color than the body copy, and frequently underlined. 21 00:01:32,152 --> 00:01:37,021 These are the affordances that indicate what action the user can take. 22 00:01:37,021 --> 00:01:40,694 By clicking this link, a new page will load. 23 00:01:40,694 --> 00:01:45,272 But the links in the primary navigation at New York Times, 24 00:01:45,272 --> 00:01:50,226 Powell's, and Sierra Club aren't colorful or underlined, 25 00:01:50,226 --> 00:01:53,972 and they don't especially look like buttons. 26 00:01:53,972 --> 00:01:57,058 The primary clue users have to the function of these 27 00:01:57,058 --> 00:02:00,410 links is their placement on the page. 28 00:02:00,410 --> 00:02:06,217 In other words, all three websites have embraced the common design pattern for 29 00:02:06,217 --> 00:02:10,042 primary navigations when designing their layout. 30 00:02:10,042 --> 00:02:15,111 This is a good example of how design patterns evolve over time. 31 00:02:15,111 --> 00:02:22,551 I'm looking at what both amazon.com and apple.com looked like in the early 2000s. 32 00:02:22,551 --> 00:02:27,166 And you can see that their navigations were styled to look like 33 00:02:27,166 --> 00:02:28,859 literal folder tabs. 34 00:02:28,859 --> 00:02:33,423 Compare that to the current versions of Amazon and Apple, and 35 00:02:33,423 --> 00:02:37,813 you'll see that the number of visual cues suggesting these 36 00:02:37,813 --> 00:02:41,693 are primary navigations have been greatly reduced. 37 00:02:41,693 --> 00:02:44,874 Don't forget, this is something to test on users. 38 00:02:44,874 --> 00:02:50,053 If it's not obvious your top links function as a primary navigation, 39 00:02:50,053 --> 00:02:54,633 add affordances until their function becomes more obvious. 40 00:02:54,633 --> 00:02:58,865 Apart from on-screen placement, what rules dictate the design of 41 00:02:58,865 --> 00:03:06,108 primary navigations? The first is Hick's law, 42 00:03:06,108 --> 00:03:09,396 which states that the time it takes to make a decision 43 00:03:09,396 --> 00:03:14,935 increases with the number and complexity of choices. 44 00:03:14,935 --> 00:03:18,728 Reducing the number of options facing the user and 45 00:03:18,728 --> 00:03:24,518 breaking tasks into smaller steps are great ways to reduce cognitive load. 46 00:03:24,518 --> 00:03:28,608 I would argue Apple's current navigation does a far better 47 00:03:28,608 --> 00:03:31,649 job of respecting Hick's law than Amazon. 48 00:03:31,649 --> 00:03:36,953 We see no more than a handful of primary categories, and the category 49 00:03:36,953 --> 00:03:42,451 names are specific and familiar to anyone aware of Apple's branding. 50 00:03:42,451 --> 00:03:46,839 Amazon's primary navigation, on the other hand, looks so 51 00:03:46,839 --> 00:03:50,977 overwhelming that I'd much rather search than browse. 52 00:03:55,566 --> 00:04:01,106 It's also worth considering the serial position effect, which states 53 00:04:01,106 --> 00:04:06,391 that users tend to best remember the first and last items in a series. 54 00:04:06,391 --> 00:04:11,075 Sierra Club not only designed its most critical link, Donate, 55 00:04:11,075 --> 00:04:16,898 as a call to action, but it also made the link more memorable by placing it last. 56 00:04:18,398 --> 00:04:20,336 My next two recommendations for 57 00:04:20,336 --> 00:04:26,682 reducing cognitive load in primary navigations are often violated. 58 00:04:26,682 --> 00:04:31,386 Keep navigation labels consistent from page to page, and 59 00:04:31,386 --> 00:04:35,899 highlight the link corresponding to the current page. 60 00:04:35,899 --> 00:04:39,160 Of all the sites we've seen in this video, 61 00:04:39,160 --> 00:04:43,062 only Sierra Club follows every rule I've listed. 62 00:04:43,062 --> 00:04:47,323 Apple comes close, but rather than highlight the current link, 63 00:04:47,323 --> 00:04:49,036 they've dimmed it a bit. 64 00:04:49,036 --> 00:04:54,194 The effect is so subtle that I would imagine most users miss it. 65 00:04:54,194 --> 00:04:59,140 On the opposite end, the New York Times replaces the top navigation 66 00:04:59,140 --> 00:05:03,414 with a sub navigation pertaining to the current section. 67 00:05:03,414 --> 00:05:07,676 The main navigation moves to the side of the page toggled 68 00:05:07,676 --> 00:05:10,314 by clicking the burger menu icon. 69 00:05:10,314 --> 00:05:12,681 What do you think about this approach? 70 00:05:12,681 --> 00:05:19,082 Could frequently changing the navigation prove confusing to users? 71 00:05:19,082 --> 00:05:22,482 When collapsing these sites for mobile, 72 00:05:22,482 --> 00:05:29,095 most replace the navigation with a burger icon, triggering a drop-down menu. 73 00:05:29,095 --> 00:05:35,301 We'll discuss the drop-down navigation design further in our next video. 74 00:05:35,301 --> 00:05:41,887 When it comes to mobile application design however, many apps use a tab bar pattern. 75 00:05:41,887 --> 00:05:46,621 Tab bars are kept at the bottom of the screen near the user's thumb and 76 00:05:46,621 --> 00:05:50,632 contain between two to five links of primary importance. 77 00:05:50,632 --> 00:05:56,419 For example, The New York Times mobile app reduces the number 78 00:05:56,419 --> 00:06:02,773 of primary choices to just three: Today, For You, and Sections. 79 00:06:02,773 --> 00:06:07,380 The rules for mobile app tab bar navigation vary a bit depending on 80 00:06:07,380 --> 00:06:12,763 the platform, as Apple and Android each have their own sets of guidelines. 81 00:06:12,763 --> 00:06:18,340 I've included links to Treehouse's course on Apple's Human Interface Guidelines 82 00:06:18,340 --> 00:06:21,620 and Android's Material Design in the Teacher's Notes.