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

  • 4
    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 '16 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 '16 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 '16 at 12:12

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 | |

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 | |

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 | |

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 | |
  • 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 '16 at 12:22
  • I would think patterns were created so resources weren't wasted on 'test everything'. – Rick Henderson Feb 10 '16 at 20:34
  • I totally agree with you Rick. – Phreak Mar 16 '16 at 15:02

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 | |
  • 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 '16 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 '16 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 '16 at 11:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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