Should I repeat the active (selected) navigation (either top or sidebar) title within the page view itself? My current opinion is that it should not repeat as long as the tab that is active is clearly selected. But could this possibly confuse the user or make him feel lost?

An example of a website that repeats their sidebar navigation title within the view page is Zurb Foundation. I believe it works for them because they have more information than just a title.

The two examples below display the repetition:

Top Nav example

sidebar example

enter image description here


There are a couple of reasons why the navigation is being repeated in the examples you gave

  1. Taking the first example,while the navigation does help inform the user, the large heading helps establish the context for the page as he scans the content and the user will not be forced to look at the navigation to figure out where he is. Taking the second example, though the navigation is fairly prominent in the sidebar, since the user will scan from left to right, the reading pattern would be something like this

    Navigation ( I am in Hubs) section --> scan to the right --> The Hub section starts here as highlighted by the main heading. --> Back to the left

This is a common reading pattern known as the F shaped reading pattern and can be illustrated with this image which also shows how the prominence of the heading draws the eyes attention.

enter image description here

  1. Your headings are very important from an accessibility standpoint as they enable users with screen readers to understand the context of the page and quickly navigate between content using shortcuts. Requiring them to rely on remembering the navigation and defining which page they are on will confuse them. To quote this article

When encountering a lengthy web page, sighted users often scroll the page quickly and look for big, bold text (headings) to get an idea of the structure and content of the page. Screen reader and other assistive technology users also have the ability to navigate web pages by heading structure, assuming true headings are used (as opposed to text that is styled to be big and/or bold). This means that the user can view a list of all of the headings on the page, or can read or jump by headings, or even navigate directly to top level headings (), next level headings (), third level headings (), and so on.

  • I feel it's important to say that the F pattern only holds for specific layout/content types and despite being one of the most common orderly patterns, in general it applies less often than not. Many sites will not yield such heatmap and a good visual designer will lead the eye to wherever needed. I think the answer would be as solid without mentioning the pattern. – Izhaki Oct 14 '14 at 20:55
  • I wonder where you got the image from @Mervin - I doubt the page below will actually produce an F pattern! – Izhaki Oct 14 '14 at 20:59

Just to extend Mervin's answer.

Via navigation - sometimes

Bear in mind that users don't always reach a page via the navigation - sometimes they get there from a search engine or a link from another website. If such is the case the in-page heading serves as a bolder, more obvious cue of "where am I?" than the navigation items.

(There is a bit of catch 22 in your top-nav example - on the one hand, the currently selected item should be less obvious, so to denote it isn't clickable as other nav items; on the other, it should be the most obvious, to let users know where they are. That's why some nav items use underline rather than colours, but colour solutions do exist.)

Page per visible nav items - sometimes

Then, you also have to remember that not all website has only pages in the visible navigation - some has sub items, or mega menus where the options are not always seen on screen. This calls for a page heading, and for consistency sake - it needs to be on all pages.

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.