How many headings in the table of content in the header?

[deeper]

Hi,
My average page has about five h2 and eight h3.

I want to create a table of content in the header, an unordered list containing the h2 and h3 linking to them below. Small font size, just a bit bigger than for paragraphs. Like Wikipedia articles <snip>.

The whole header will look like this:
A horizontal beautiful picture and next to it an eye-catching logo.
Below this a horizontal navigation, 6 to 10 items.
Below this the h1.
Below this the table of content.

My question now refers to usability and Panda: How many headings in the TOC and how styling them so that the user is not overcharged by the WHOLE header ("first impression"), rebouncing to Google? But as many as possible in order to inform and appeal the user?

My headings have about four to eight words, definitely more than at Wikipedia.

Imagine the Wikipedia article with more words in the headings, with a h1, a horizontal navi and two pice above them: Were 13 headings be too much for you? My users are mainly woman, 30 - 60 Years old.

[edited by: goodroi at 2:18 pm (utc) on Aug 6, 2013]
[edit reason] Please no links [/edit]

[lucy24]

Here's a rough comparison:

On my (desktop) computer, your post contains 17 lines of text. It's smaller and more closely spaced than you would use in a navigation TOC, and it takes up more than half the vertical screen space.

On the other hand: some areas of my personal site use list-formatted navigation that seems similar to what you describe. I don't keep track, but a casual riffle through a few pages suggests the absolute ceiling is around 8 lines, including subheads.

On the third hand: you seem to be working with the pinterest demographic. They don't really have navigation at all, do they? More of an everything-but-the-kitchen-sink dump. Doesn't seem to hurt them.

[deeper]

You are right, the TOC should be visible completely, without scrolling. I guess that's what you want say. I was not aware of this.

Usually this is no problem. As far as I can estimate it due to a test page, up to about 18 headings (h2, h3) could be seen on the average 17-monitor. And I don't think that any page will exceed 18 headings.

But actually my question aimed at the subjective first feeling of the user. He comes from Google and what does he or she see? A header with a normal horizontal header pic and an eye-catching logo nearby to it, then a horizontal navi below (is necessary) and a TOC with many headings below the navi.

Is this all, the whole header "too much" for the user, too much graphically and textual information? Therefore confusing, scaring, overcharging, not clear enough and may the user tempt to rebounce to Google?

There are two ways for me: with or without the h3s in the TOC.
"With" means up to about 18 headings (h2s and h3s) in the TOC, without means up to max. 6 h2s headings.

Looks like this:

Header graphic Header graphic Header graphic Header logo logo logo
Header graphic Header graphic Header graphic Header logo logo logo
Header graphic Header graphic Header graphic Header logo logo logo
Header graphic Header graphic Header graphic Header logo logo logo

horizontal navi horizontal navi horizontal navi horizontal navi

h1 heading h1 heading h1 heading

TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words
TOC with h2 and h3 headings with 4 to 8 words

[lucy24]

18 seems like an awful lot, unless your site is an encyclopedia and that's what people expect to see. It isn't enough for the whole TOC to fit on the screen; the user should also see stuff that isn't TOC.

The word count isn't so much of an issue. 4-8 words is comfortably with a single line, with space left over for visuals.

But wait. Is the list meant to be in addition to a horizontal navigation bar? You don't want it to look as if you're offering the user dozens of ways to be somewhere else ... and no reason to stay where they are :)

You could defer your in-page navigation. h1, picture, preliminary blahblah, and then the list. Then there's something to catch the user's attention when they arrive. Once they've decided that the page has something they want, then show them how to get there.

How far apart are your h2s and h3s on the page? Option C is to start with a list giving only the h2s. And then if a particular h2 has a lot of h3s under its wing, it can have a smaller list of its own. Now at this point I'm working strictly by user intuition. But it seems like you want a unified TOC to show things that the user could otherwise only find by scrolling. If you have several h3s visible on a single screen, they don't need to be separately listed.

[deeper]

"The word count isn't so much an issue".
Don't you think this depends also on the fontsize? With a big fontsize only five headings with 6 or 7 words could "struck you down" visually, I suppose. They may still fill one line but it does completely, with big letters and this may look too "gigantic".

Yes, the list of h2/h3s in the TOC is meant to be in addition to the horizontal navi.
"You don't want it to look as if you're offering the user dozens of ways to be somewhere else ... and no reason to stay where they are."
I know what you mean, but every navi leads to other pages, that's her purpose which every user knows. And in my case the navi leads only to other pages of the same site.
And the TOC only leads below to the content there (using anchor links), staying on the same page. That's also normal behaviour of a userfriendly TOC.

The purpose of a TOC is to show an interesting well-structured overview of the content. Like at Wikipedia. So usually you want it to be seen in the header at once. Only the h1 there may be to sparse.
Defering it and making it invisible to the first impression/view.... hm, usually this is against her purpose, but however may be an alternative.
"But it seems like you want a unified TOC to show things that the user could otherwise only find by scrolling."
Right. On every page the same sort of header design with a TOC.

h2s and h3s are one to five screen heights away from the TOC. There are max. three h3 under one h2.

This is a more precise and more typical header than the example in my last posting (just imagine bullet points instead of dashes and more space between the lines vertically):

Beautiful attracting header pic like a bright sunset + eyecathing logo
Beautiful attracting header pic like a bright sunset + eyecathing logo
Beautiful attracting header pic like a bright sunset + eyecathing logo
Beautiful attracting header pic like a bright sunset + eyecathing logo

horizontal navi horizontal navi horizontal navi horizontal navi

h1 heading h1 heading h1 heading

-TOC with h2 and h3 headings with 4 to 8 words, h2
TOC with h2 and h3 headings with 4 to 8 words, h3
TOC with h2 and h3 headings with 4 to 8 words, h3
TOC with h2 and h3 headings with 4 to 8 words, h3
-TOC with h2 and h3 headings with 4 to 8 words, h2
TOC with h2 and h3 headings with 4 to 8 words, h3
TOC with h2 and h3 headings with 4 to 8 words, h3
-TOC with h2 and h3 headings with 4 to 8 words, h2
TOC with h2 and h3 headings with 4 to 8 words, h3
TOC with h2 and h3 headings with 4 to 8 words, h3
-TOC with h2 and h3 headings with 4 to 8 words, h2
TOC with h2 and h3 headings with 4 to 8 words, h3
TOC with h2 and h3 headings with 4 to 8 words, h3
-TOC with h2 and h3 headings with 4 to 8 words, h2 (no h3s below)