I'm working on a revamp of an existing project where the non-mobile site navigation takes up about 40% of the page area. Obviously this is far from ideal.

Although I recognize and appreciate that each project is different, I'm having a hard time finding even generalized best practices concerning the ratio of space given to site navigation vs. page content. Are there any guidelines or best practices considered standards?

  • 1
    This is one of the many areas where you're just not going to find documented best practices or standards. You might find a company has published guidelines in a publicly available style guide, but that's going to be specific to their menu, their content, and their users. A better approach here would be to present what you have (in the form of a wireframe/screenshot), decscribe the specific UX problem in the form of a question, and let the community offer answers in the context of fundamental principles of design and usability.
    – dennislees
    May 11, 2016 at 16:26
  • Like @dennislees said, it's impossible to tell. I'll add to what he accurately mentioned: it doesn't depend on design considerations, but mainly on IA (Information Architecture) needs, and once you define that, you can design on top
    – Devin
    May 11, 2016 at 17:19
  • I can appreciate what dennisless and Devn are driving at, as my initial thoughts were that this question would likely be dependent on site-specific considerations. Due to the nature of the work, I'm likely not able to share a screen shot or wireframe that provides enough information to be useful in asking a specific question. Nor, for that matter, have I actually taken a stab at a re-design. My curiosity was based more on whether or not there were any best practices, rather than for this specific project, as a means to support my argument that a re-design is needed.
    – denveruxer
    May 11, 2016 at 18:37

2 Answers 2


Just so that you can have a clearer idea about the reasons for the comments, think about two different types of websites, one is mostly informational (i.e. lots of text, images, etc.) while the other is transactional (i.e. lots of workflows, buttons and call-to-actions).

Lets look at the informational site first. If your content is mostly short snippets of information split into many pages then there will be a bias towards a higher navigation to content ratio. But you can easily change this by using a different container or structure for your content (e.g. accordion). If you are looking at the ratio from the perspective of the physical viewing space on the screen versus the logical viewing space for the entire page (i.e. including the scrolling or swiping you can do), then that ratio will change. You can also reduce the navigation space on mobile by the use of a collapse menu icon.

On the other hand, in a transactional site ideally you will want separate and discrete steps for the transactions, so you may not have so much control over this. However, if you stick to good content design practices you will find that the IA is simpler and easier to present nicely, thus saving the amount of space that the navigational elements should take up. But you do have to account for the fact that page navigation elements will take up additional space on the page.

Therefore, it is not easy to say what the best ratio should be, but that you should start with good content design practices and then you'll find that what you are left with is going to be the optimal solution (or close to it).


I've never heard of such a thing.

Ask yourself, how complex is the navigation on the site? How much sideways navigation will there be? how much content does the site have?

If you need to have lots of text and images the user has to read go for smaller navigation, nowadays you can even hide it behind a menu icon.

If you need the user to have constant acces to the navigation, like he'll probably be jumping around Like on this web often it can take up more space.

But yes,

each project is different

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.