4

Keep in mind that there is a GLOBAL navigation that sits above the top of this page. The screenshot you see is the top left of the page. Below it is where the page's content sits.

The question is— which option provides better usability?

I think the first option is less redundant and shows the hierarchy of information much better. The second option is more redundant—even confusing—and makes the hierarchy of content less clear. In fact, it even might suggest that Projects and Project Names are sub-sections and not breadcrumbs.

To me, option one is the clear winner, but a fellow visual designer does not think so.

Option 1 Option 1

Option 2 Option 2

Improve this question
3
  • 5
    Welcome to the site, Bosco. You appear to be asking two different questions: (1) whether to place the page title before or after the breadcrumbs, and (2) whether to include the current page in the breadcrumbs. In this Q&A format, where one best answer is expected to get voted to the top, it usually works best to ask one question per post. (Otherwise if response answers one question well but the other poorly, it's not clear how to vote on that post.) You may want to consider editing your post to contain one question (and moving the other question to another post).
    – Graham Herrli
    Feb 9, 2016 at 5:18
  • 2
    In order to make the breadcrumbs look more like breadcrumbs, I'd change the forward-slash to a >
    – Yvonne Aburrow
    Feb 9, 2016 at 9:10
  • We really cannot give you valid answer because we don't see the rest of the page. And to tell you it really does not matter where exactly do you put them, as long as you provide enough space between the breadcrumbs and other elements.
    – Kristiyan Lukanov
    Feb 9, 2016 at 12:12

5 Answers 5

Reset to default
4

I would put the breadcrumbs above the page title (with some whitespace between them, or with the breadcrumbs on a different colour background). And I would include the page name in the breadcrumbs (as a non-link).

This article by Jakob Nielsen about breadcrumbs (old, but still good) includes the page name in the breadcrumb trail.

Improve this answer
2

Okay so it seems that both patterns seem to work. Though I strongly believe Option 1 has less of a signal to noise ratio. Ultimately, I think testing them in the context of the application is what will matter. I revised the Breadcrumbs a bit to make it more clear whats going on.

It would be nice to see some good examples of where this has been used. @monomeeth mentioned you've seen this on intranet sites. Any public facing sites you can think of?

revised breadcrumb and title

Improve this answer
2
  • Live example of breadcrumbs though not exactly as you are trying to make:legacy.wlu.ca/homepage.php?grp_id=293
    – Rick Henderson
    Feb 16, 2016 at 2:10
  • I agree with your point on signal to noise ratio. For certain pages such as the example above (and especially for static pages), adding the page title on the breadcrumbs is not that distracting. But for pages with LONG titles, the breadcrumbs become unwieldy. Imagine if the page is about this real-life paper: "The impact of professional isolation on teleworker job performance and turnover intentions: Does time spent teleworking, interacting face-to-face, or having access to communication-enhancing technology matter?" For mobile screens, long breadcrumbs consume huge screen space as well.
    – alds
    Aug 12, 2020 at 9:48
1

I've seen both approaches used. Many intranet sites traditionally used the approach in Option 1. And today many SharePoint sites use the approach in Option 2.

From my experience it doesn't really matter. Users will quickly work out what's a page title, a breadcrumb, or both. And this really gets down to personal preference, as both options will offer the exact same functionality.

Improve this answer
0

Both options are ok, if talk only from the UI point of view. When it comes to usability, you should keep in mind that there are some patterns which you shouldn't ignore or deviate from.

The usage of the breadcrumb menu as in Option 1, is the common pattern, so you should stick to it. If you choose Option 2, you will create a disruptive pattern, which will be confusing for the user, and thus the performance of your user, on your website, will decrease.

For more information, read this article regarding the UX patterns. The price of not using UX patterns. You will find that using Option 2 will not be such a good idea.

So, to answer your question: stick to Option 1.

Improve this answer
4
  • Agggh, No, wrong answer. The real answer is "we should test that and then propose a winner". Now you're just guessing. Its a good thing you've read some UX article, tho.
    – Kristiyan Lukanov
    Feb 9, 2016 at 12:22
  • 2
    I would think patterns were created so resources weren't wasted on 'test everything'.
    – Rick Henderson
    Feb 10, 2016 at 20:34
  • I totally agree with you Rick.
    – Phreak
    Mar 16, 2016 at 15:02
  • What is the difference between a UI point of view and a usability point of view? :)
    – drabsv
    Apr 28, 2021 at 10:56
0

I suggest the first option is better.

The reason for that, is the way users scan the page. Users will usually scan with "F" pattern. In the F pattern, the first option give the user an idea where she is and then the title.

Also, users are used to the first pattern where breadcrumbs are just below the header.

Improve this answer
4
  • You are opposing yourself. First you say option 1 is better because of some hypothetical F scan pattern, and then you say, but users are more familiar with the second option, and because of that option1 is the preffered choice? You really have no idea about usability.
    – Kristiyan Lukanov
    Feb 9, 2016 at 12:18
  • 1
    The F pattern is a real thing (eyetracking studies have shown that users scan the page in a scattered way that looks like an F), but I don't see how it applies to breadcrumbs as suggested here - if the choice is between breadcrumbs with a plaintext page title or without one (nor does it particularly apply to the positioning of breadcrumbs above or below the header). nngroup.com/articles/f-shaped-pattern-reading-web-content
    – Yvonne Aburrow
    Feb 10, 2016 at 9:07
  • Thanks Yvonne for the help. Kristiyan, I have added a reffrence to an article that describes the F patern.
    – Tal Yaron
    Feb 10, 2016 at 11:20
  • @ Kristiyan Lukanov how would you set the test for this case?
    – drabsv
    Apr 28, 2021 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.