3

I'm writing an online textbook (link) that's organized into many sections and subsections, and I've currently got it in a basic Wordpress template with an accordion menu on the left side:

enter image description here

This works, but it doesn't leave enough width for the content (especially some of the tables), and I want to move it up to a horizontal position at the top of the page. What's the best layout for this? What are some examples of sites with a similar amount/structure of content that do navigation well? Everything I can find seems oriented towards very different types of content.

EDIT: Thanks for the responses so far. I'm persuaded that a horizontal menu on top is a bad idea. I think I'll try to shorten the menu items in the left column and get a few more pixels of width that way, and maybe reformat some of the tables too. If that still doesn't work, I'll think about 100% width and/or making the menu retractable, as suggested.

To elaborate a little, i see three main use cases:

(1) a user who starts on the front page and wants to browse around.

(2) a user who googles a specific subtopic and lands right on that page, and may or may not browse other pages from there. (this is most of current traffic, but the site's not really done yet.)

(3) a user who starts on the front page and wants to go through all the content in order, probably in multiple visits and/or by printing it out.

User (3) obviously needs the table of contents least, and user (1) needs it most. I don't see a practical way to discriminate among them, though -- except by steering user 3 to a PDF or some other format...?

Improve this question
1
  • I would say you need to take a step back from the problem and look at how users use the content. Presenting a text book page by page on the web is not the best use of web. Providing hypertext, a good search, a way to get an overview and an index are all useful tools. In addition you need a way to navigate to the next and previous page, this is almost more vital than the left hand navigation.
    – Stewart Dean
    Mar 1, 2013 at 17:43

2 Answers 2

Reset to default
5

Vertical left-hand navigation is a common convention for this use case.

Users will already be familiar with the navigation as you currently have it organized, so I would hesitate to consider removing it simply to gain more screen real estate.

I think there are some optimizations to your current interface that would help to maximize the available space without making the navigation harder to use:

  1. Make your page 100% width. I see in your current example that the site is responsive however you are setting a max width which prevents the page from being 100% wide on larger resolution displays (I'm on 1280x1024 which is fairly average). If you allow the page to expand to fill up that space if it is available, you will have more room on the page for content.
  2. Allow the user to hide the navigation or change the width of the navigation. Your user needs to be able to view the navigation when they need it, but they don't need it all of the time. This need can be met by giving them control over when and how they see the navigation.

Here are two examples of interfaces that demonstrate both of these principles:

Adobe Reader:

Adobe Reader Interface

MSDN Developer Library:

MSDN Developer Lirbary

The drawback of using horizontal navigation is that you are not going to have nearly enough room to adequately show all of the content you currently have. You would need to introduce a mega-menu which would require the user to activate it just to browse. It would cover the content, which would make browsing/searching through the content difficult. I haven't tested this, so your results may vary, however I would be very surprised if a horizontal mega menu tested better than the current convention of left-hand navigation as illustrated in the two examples above.

Improve this answer
6
  • "Make your page 100% width" I disagree with this because it can lead to very long text lines which make it more difficult to read.
    – obelia
    Mar 1, 2013 at 17:56
  • What would you recommend as an alternative?
    – Charles Wesley
    Mar 1, 2013 at 18:00
  • As an alternative to 100% width, maybe something like the Adobe screenshot you've included. That is, constrain the content width to some fixed value, but dock the resizable navigation outside of that.
    – Roddy of the Frozen Peas
    Mar 1, 2013 at 18:10
  • The challenge there is where the width of content elements like tables or figures is unknown. There is probably a cut-off width whereby you can stop expanding content width once you have exceeded the max-width of the tables/figures. How you know what that is would require context-specific study
    – Charles Wesley
    Mar 1, 2013 at 18:12
  • @CharlesWesley - I think elements containing text should be limited to around 60em.
    – obelia
    Mar 1, 2013 at 18:58
1

For displays too narrow to display the tables in comfortable width you could use the whole page width for the content. Just offer clear links to overview pages and to next/previous chapters. I don't have any specific examples to offer, but in my experience this pattern has been used in quite a few html books.

While it can be useful for users to offer navigation to pages on the same level, it is not in any way mandatory, if you offer links(and people are still fluent in using back button).

Improve this answer

Your Answer

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

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