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

Well done!

You have completed UX Design Patterns!

Sign up for Treehouse Back to Library

Dropdowns and Subnavigation

5:33 with Anwar Montasir

In our previous video, we covered Hick’s Law, which states that decision-making time increases with the number and complexity of choices. This means many sites follow the pattern embraced by Apple.com and present only a handful of specific, meaningful categories in the primary navigation. This sounds like a great approach, except that it leaves the question of what to do with sub-navigation. After all, Apple sells a wide variety of computers, iPads, and iPhones. And what about mobile screens? In addition to a logo, search icon, and shopping cart icon, Apple limits its primary content to seven main categories, but that’s too many to comfortably fit across a small screen.

Vocabulary

  • Mega menu: a large, rectangular menu that presents grouped navigation options all at once

  • Sequential menu: a menu that shows only the subcategories of the last selected category

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

    In our previous video, we covered Hick's law, which states that decision 0:00
    making time increases with the number and complexity of choices. 0:05
    Which means many sites follow the pattern embraced by apple.com and present 0:10
    only a handful of specific meaningful categories in the primary navigation. 0:16
    Which sounds like a great approach, 0:22
    except that it leaves the question of what to do with sub navigation. 0:24
    After all, Apple sells a wide variety of computers, iPads and iPhones. 0:28
    And what about mobile screens? 0:35
    In addition to a logo, search icon, and shopping cart icon, 0:37
    Apple limits its primary content to seven main categories, but 0:42
    that's too many to comfortably fit across a small screen. 0:47
    One possibility is to reserve sub navigation until the user 0:51
    clicks a primary category. 0:56
    For example, once I click iPad, Apple presents a sub 0:58
    navigation underneath the primary navigation, 1:03
    with options including iPad Pro, iPad Air, and iPad Mini. 1:07
    The Museum of Modern Art takes an interesting approach 1:13
    to limiting user choices. 1:17
    When I click a primary link like art and artists, a full screen 1:18
    menu invites me to choose a subcategory. This approach 1:23
    allows users to make a very deliberate choice about what to view next. 1:28
    How about drop-down menus? 1:35
    These actually fall into two different categories. 1:37
    Traditional drop-down menus are inspired by menus found in most software. 1:41
    In Firefox, I can check out my browsing history by clicking History 1:46
    in the top menu bar, then choosing a drop-down option. Hovering over 1:51
    recently closed tabs expands a list of tabs I no longer have open. 1:57
    Similarly, the burger nav icon on the New York Times 2:02
    website allows me to hover over a primary category, 2:07
    then choose a subcategory from an expanded list. 2:12
    A second category of drop-down menu for desktop navigation is the mega menu. 2:16
    Mega menus are large rectangular menus that present grouped 2:22
    navigation options all at once. 2:26
    For example, when I hover over the Men category on Nike's website, 2:29
    I see Nike's products organized in the main categories like 2:34
    New & Featured, Shoes, and Clothing. 2:39
    Nike's mega menu approach is impossible on a mobile screen for 2:42
    two reasons: users need to tap rather than hover, and 2:47
    there's not enough screen real estate to fit numerous choices at once. 2:51
    On mobile, Nike switches to a sequential menu. 2:56
    A sequential menu works somewhat like a traditional drop-down, but 3:00
    shows only the options for the last selected category. 3:05
    So once I tap Men, I can no longer choose products in the Women or 3:09
    Kids section unless I tap the All button. 3:14
    Once I tap New & Featured, 3:18
    now I can choose products from that particular category. 3:19
    Compare this sequential menu pattern to the University of Arizona's mobile 3:25
    website, which works more like a traditional drop-down, allowing the user 3:30
    to collapse and un-collapse primary navigation options to see subcategories. 3:36
    Note, when I click a new section like Research, 3:41
    the previously opened section collapses automatically, 3:45
    which saves the user from too much vertical scrolling. 3:49
    When it comes to inviting users to open a drop-down menu, what practice works best? 3:53
    Apple uses two thin horizontal stripes. 3:59
    Nike employs a more traditional three stripe icon. 4:02
    And the University of Arizona adds the word Menu above the three stripes. 4:07
    I've included an article in the Teacher's Notes from a website called Justinmind 4:13
    that examines the burger icon in a variety of contexts and 4:19
    discusses its pros and cons. 4:22
    The most obvious drawback to the burger icon is that it decreases 4:24
    discoverability and adds increased interaction cost, 4:30
    in that the user must tap or click to find the primary navigation categories. 4:34
    I'm looking at Best Buy's desktop site, 4:40
    and here a nav icon is used even on a large screen. 4:44
    I would exercise caution with this approach. 4:48
    If you're not familiar with what Best Buy sells, the homepage isn't making it 4:51
    obvious apart from a few featured electronics and accessories. 4:56
    The most compelling benefit to the burger nav is it saves screen real estate. 5:02
    While a fairly small primary navigation like the Museum of 5:08
    Modern Art's fits comfortably on a phone screen, 5:12
    that's much harder to achieve on a website like Best Buy, 5:15
    that sells thousands of products across more than a dozen categories. 5:19
    Best Buy's mobile site uses a sequential menu that functions similarly to Nike's. 5:24

    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