1

Assuming you have a responsive header that always takes up the full width of the viewport (such as the one in https://mailchimp.com), are there any best practices to follow for positioning the navigation menu in this header?

And more specifically, would having the nav menu always hug the right side of the viewport (like in the image) be a bad idea since there is a variable amount of white-space, depending on screen size, between the nav menu and logo?

enter image description here

1
  • Why do people not upvote people much? On the first page of which covers the last 15 hours, there are 3 downvotes and no upvotes. If anyone here has taken the time to answer the question, you should also upvote it and any answers worthy of it. Rember, that's the whole idea behind gamification, to encourage participation to produce useful content. I'm upvoting all good questions and answers. You all should do the same too! Thanks :)
    – Electron
    Sep 30, 2018 at 7:01

3 Answers 3

1

Here is a good article about headers:

I will answer your questions:

  • "People follow certain patterns when they first take in your site. According to Nielsen(...) We focus the most on the top of a website and on the left side from where we briefly scan the main elements in the content area."

  • "The key to an effective navigation menu is to keep it simple. No matter how many content categories you have and how many pages you might need to link together, don’t ask too much from your users."

Short:

  • Always have your Nav-bar on Top (People tend to look on the top of the Page for Navigation) and important stuff on the left.
  • Keep it simple - "(...)what you would like to see in a page. For example, would you like to read something that is squeezed in the page or you rather read something that is well-spaced?" Here is another good site for Whitespace

So, I would switch "Login" with "Sites", so that the first thing, that your users see would be what your site offers.

1
  • well, I don't focus on the (left side) logo when looking for navigation, it's usually subconsciously obvious to me whether the site has a top menu or left side menu and have to pay attention only when the site has both
    – Aprillion
    Jul 6, 2017 at 16:28
1

Assuming you have a centered max-width main content, it might be visually more pleasing to have a centered max-width header content inside a full-width background color element which is common on many sites.

Even though Stack Exchange is only responsive for larger widths and not for smaller, I hope you can imagine the whitespace collapsing up to a min-width point, after which you would need some other menu layout:

enter image description here

1

Typically, in left to right languages, the most fixation occurs in the upper left portion of the screen. Users' attention then tends to form an 'F' pattern as they scan down the page.

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Therefore, placing the core navigational elements in the upper left is often a pretty safe bet.

One point to consider here is that of widescreen monitors. Problems can occur if the core navigation is fixed to the far left or far right of the viewport, rather than being fixed to the side of a central content container (which often has a maximum width of no more than 1200 pixels).

On widescreen or 4K monitors this can become an issue. As the screen becomes wider, the navigation becomes increasingly disconnected from the content on the page. The user has to move their cursor further and further in order to move between the content and the navigation. This can often lead to greater inaccuracy and wasted interaction.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

For more detail, have a look at Fitts' Law which explains the mechanism behind this. https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design

Stackexchange sites are a good example to follow. While the background of the top navigation 'wrapper' extends to the full width of the screen, the navigation links themselves are contained within a central container element with a max width of 1060px. Visually, this helps to reinforce the importance of the navigation while mitigating against the issues presented by Fitts' Law mentioned above.

Your Answer

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

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