Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

UX Design Patterns

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Primary Navigation

6:22 with Anwar Montasir

When it comes to primary navigation, most websites offer a common set of features. I’m looking at The New York Times, a news website; Powell’s Books, a shopping website; and Sierra Club, an environmental non-profit. All three sites feature a header with a prominent logo in the upper left or top center. Clicking the logo returns the user to the homepage from any place within the site. All three sites also feature navigation tabs inviting users to browse major content categories. Website headers often feature smaller utility links, such as a shopping cart or the opportunity to log in. And many websites include a way to search in the header, although the Sierra Club doesn’t offer that feature.

Vocabulary

  • Affordance: the properties that suggest what can be done with an object.

  • Hick’s Law: the time it takes to make a decision increases with the number and complexity of choices.

  • Serial Position Effect: users tend to best remember the first and last items in a series.

Treehouse Courses

Further Reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    When it comes to primary navigation, most websites offer a common set of features. 0:04
    I'm looking at the New York Times, a news website, Powell's Books, 0:11
    a shopping website, and Sierra Club, an environmental nonprofit. 0:17
    All three sites feature a header with a prominent logo in 0:23
    the upper left or top center. 0:27
    Clicking the logo returns the user 0:30
    to the homepage from any place within the website. 0:33
    All three sites also feature navigation tabs inviting users 0:38
    to browse major content categories. 0:43
    Website headers often feature smaller utility links such as a shopping cart or 0:46
    the opportunity to log in. 0:52
    And many websites include a way to search in the header, 0:54
    although the Sierra Club doesn't offer that feature. 0:57
    One interesting characteristic these three primary navigations have in common 1:02
    is that no special effort has been applied to the links to suggest their affordance. 1:07
    Affordances are the properties that 1:14
    suggest what can be done with an object. 1:18
    When users encounter text hyperlinks within an online article, 1:22
    the hyperlinks are a different color than the body copy, and frequently underlined. 1:26
    These are the affordances that indicate what action the user can take. 1:32
    By clicking this link, a new page will load. 1:37
    But the links in the primary navigation at New York Times, 1:40
    Powell's, and Sierra Club aren't colorful or underlined, 1:45
    and they don't especially look like buttons. 1:50
    The primary clue users have to the function of these 1:53
    links is their placement on the page. 1:57
    In other words, all three websites have embraced the common design pattern for 2:00
    primary navigations when designing their layout. 2:06
    This is a good example of how design patterns evolve over time. 2:10
    I'm looking at what both amazon.com and apple.com looked like in the early 2000s. 2:15
    And you can see that their navigations were styled to look like 2:22
    literal folder tabs. 2:27
    Compare that to the current versions of Amazon and Apple, and 2:28
    you'll see that the number of visual cues suggesting these 2:33
    are primary navigations have been greatly reduced. 2:37
    Don't forget, this is something to test on users. 2:41
    If it's not obvious your top links function as a primary navigation, 2:44
    add affordances until their function becomes more obvious. 2:50
    Apart from on-screen placement, what rules dictate the design of 2:54
    primary navigations? The first is Hick's law, 2:58
    which states that the time it takes to make a decision 3:06
    increases with the number and complexity of choices. 3:09
    Reducing the number of options facing the user and 3:14
    breaking tasks into smaller steps are great ways to reduce cognitive load. 3:18
    I would argue Apple's current navigation does a far better 3:24
    job of respecting Hick's law than Amazon. 3:28
    We see no more than a handful of primary categories, and the category 3:31
    names are specific and familiar to anyone aware of Apple's branding. 3:36
    Amazon's primary navigation, on the other hand, looks so 3:42
    overwhelming that I'd much rather search than browse. 3:46
    It's also worth considering the serial position effect, which states 3:55
    that users tend to best remember the first and last items in a series. 4:01
    Sierra Club not only designed its most critical link, Donate, 4:06
    as a call to action, but it also made the link more memorable by placing it last. 4:11
    My next two recommendations for 4:18
    reducing cognitive load in primary navigations are often violated. 4:20
    Keep navigation labels consistent from page to page, and 4:26
    highlight the link corresponding to the current page. 4:31
    Of all the sites we've seen in this video, 4:35
    only Sierra Club follows every rule I've listed. 4:39
    Apple comes close, but rather than highlight the current link, 4:43
    they've dimmed it a bit. 4:47
    The effect is so subtle that I would imagine most users miss it. 4:49
    On the opposite end, the New York Times replaces the top navigation 4:54
    with a sub navigation pertaining to the current section. 4:59
    The main navigation moves to the side of the page toggled 5:03
    by clicking the burger menu icon. 5:07
    What do you think about this approach? 5:10
    Could frequently changing the navigation prove confusing to users? 5:12
    When collapsing these sites for mobile, 5:19
    most replace the navigation with a burger icon, triggering a drop-down menu. 5:22
    We'll discuss the drop-down navigation design further in our next video. 5:29
    When it comes to mobile application design however, many apps use a tab bar pattern. 5:35
    Tab bars are kept at the bottom of the screen near the user's thumb and 5:41
    contain between two to five links of primary importance. 5:46
    For example, The New York Times mobile app reduces the number 5:50
    of primary choices to just three: Today, For You, and Sections. 5:56
    The rules for mobile app tab bar navigation vary a bit depending on 6:02
    the platform, as Apple and Android each have their own sets of guidelines. 6:07
    I've included links to Treehouse's course on Apple's Human Interface Guidelines 6:12
    and Android's Material Design in the Teacher's Notes. 6:18

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up