1

Often we reason with start pages, and landing pages when it comes to User Experience design. What to put there and what not to. But my question regards content pages, and how much of the available space should be used for content, and how much is needed for navigation elements in a information dense content page.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Is 70% of a Content Page enough to make it readable, or can I decrease/increase without losing readers interest?

  • 1
    What are your goals with this design? – edeverett Aug 5 '14 at 15:27
  • As easy to read as possible without losing navigation control – Benny Skogberg Aug 5 '14 at 15:37
1

I don't think it is possible to give a 'correct' answer, as such thing depends on many variables. For example, do users enter the site in explorer mode, or in task-completion mode?

Anyhow, analytics data such as Average Time on Page (ATOP)can give some guidance for this ratio - the larger the ATOP is, the larger should be the content area.

The existence bias

What I do feel important to mention, is that the question has a strong scent of existence bias - The attribution of goodness to things merely due to their existence. Specifically, the fact that you assume that navigation should take space!

This is obvious as such is the convention on many many pages, but one has to consider that this pattern originated well before the web was what it is today, at times where many of the current technologies were yet to exist.

Enter mobile

I think one of the great things that happened in UX is the boom of mobile interfaces. The fact that screen real-estate is scarce forces you to think differently, think small, and seriously consider what goes where. Personally, I find that mobile-first approach to UX is beneficial, even if I design for desktop only - it is much easier to throw a few well-defined small black-boxes into a big desktop page than turn a big desktop page into well-defined small black-boxes.

Also, the popular-on-mobile hub-and-spokes navigation pattern is far more 'coherent' than the complex network of connections created by the introduction of global navigation.

Anyhow, with relation to your question, consider the following screenshot of a BBC site on Chrome for iPhone:

A screen shot of a BBC page on Chrome for iPhone

First, notice that Chrome utilised a pit-bar, which is unseen in this screenshot due to scroll-down. The pit-bar, where the Chrome menu is, appears 'on demand'.

Also, note the 'Menu' and 'All Sport' menu triggers (and there's even one for 'Football'). Here as well, the navigation will show 'on demand'.

These are just three of examples of many on-demand navigation elements that appear on mobile devices.

And so the question is: why do navigation elements on desktop are always visible rather than be on-demand?

Obviously, the answer for this would be to save the user some physical effort (scrolling or clicking), but is it really worth it on content-rich sites, especially when modern web technologies offer very elegant solutions?

My point is, that by adopting modern technologies, a bit of creative thinking (or phrased alternatively - not accepting historical conventions to be right by default), a better question may be - how do I show navigation on-demand?

1

In this case, convention is on your side. Users inherently expect that they will find navigation on the left or top of a site. By employing contrasting background colors and other emphasis techniques, you can keep your navigation satisfyingly small and users will still have little to no problem finding it.

You can look at this very page for an example. The navigation is towards the top on a blue or black background, separated clearly from the content which takes of the vast majority of the page.

Clarity is the key here and, as long as you follow the conventions employed by most sites that need navigation, your users should have no problem getting around.

1

It depends on your type of application/website you are delivering; Structuring the Navigation with content is very important process in IA. You have to categorize the goal as primary and secondary to display the navigation+content. If you can achieve your goal through displaying 70% content area then why not to use that theme. I would say there is no standard or fixed statement would say for the measurement for the IA.

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.