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

Breadcrumbs

2:20 with Anwar Montasir

When it comes to supporting wayfinding on sites with many levels, it’s hard to find a more effective solution than breadcrumbs. Breadcrumbs are a list of text links representing the current page and its hierarchical ancestors.

Vocabulary

  • wayfinding: making users aware of their current location within the hierarchical structure of a website

  • breadcrumbs: a list of text links representing the current page and its hierarchical ancestors.

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

    If you have a minute, try looking up the word navigation in the dictionary. 0:00
    One definition I like is the method of determining position, 0:05
    course, and distance traveled when getting from place to place. 0:09
    In web terms, this means that navigation 0:14
    isn't just about offering users a way to get around. 0:17
    Web navigation is also about wayfinding or keeping users aware 0:25
    of where they are now. And, if the site is a particularly large one, 0:30
    where the current page lives within the overall hierarchy. 0:35
    When it comes to supporting wayfinding on sites with many levels, 0:39
    it's hard to find a more effective solution than breadcrumbs. 0:44
    Breadcrumbs are a list of text links representing the current page and 0:48
    its hierarchical ancestors. 0:52
    I'm back on Best Buy's homepage, and 0:56
    I'll try clicking on this featured pair of Apple AirPods. 0:59
    You can typically spot breadcrumbs because they're near the top of the page, 1:03
    they're quite small, and an arrow or 1:09
    greater than symbol separates hierarchical levels. 1:11
    In this case, Best Buy demonstrates where these AirPods are found within 1:15
    the overall site hierarchy, within the Audio category under Headphones. 1:21
    Note the breadcrumbs don't represent the path the user actually took 1:26
    to arrive at the current page, but simply the parent category, 1:31
    grandparent category, and so on back to the homepage. 1:36
    Also, note that sites with a fairly flat hierarchy don't benefit 1:40
    from breadcrumb navigation. 1:45
    Breadcrumbs are still useful on mobile as long as they don't wrap on 1:47
    to multiple lines where they could become harder to understand and 1:51
    harder to tap with a finger. Many mobile sites embrace 1:56
    the pattern followed by Best Buy in reducing the breadcrumb trail to 2:00
    include only the parent category. From the AirPods' page, I can use 2:04
    the breadcrumbs to jump back to the headphones page, 2:09
    but visiting the audio category requires additional taps. 2:13

    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