A site we’re building has a number of long pages and so within our web team we’ve been discussing the use of jump links to make it easier to navigate within those pages.
To be specific, we are looking at the practice of placing a list of jump links at the top of a page as a table of contents for that page.
Overall, I feel that this improves the usability of long web pages and in his article, Avoid Within-Page Links, Jacob Nielsen agrees (although up to a point).
How Long is Long?
We try to apply web design principles consistently across our sites, and to this end I am trying to come up with some guidelines for the use of jump links as tables of contents.
We’ve determined that they should be used when you have a long web page. But what constitutes a long web page? Is there a certain number of words beyond which a page becomes ‘long’? 750? 1000?
I haven’t been able to find anything written on the length of web pages, so I’d be really interested to hear what people think.
I would say that word count is not the best measure but rather number of screens at some reasonable screen resolution. If you format 1000 words as paragraphs it takes far less space than does a combinationn of bulleted lists paragraphs, pull quotes etc.
a secondary consideration would be how many headings am I linking to – jump links may not make as much sense on a page with a main heading and 2 subheadings as they do on pages with many subsections.
I agree with Steve – the links should show for content more than x screens below the visible canvas. Perhaps you can do this with js? Output a full list of jump links, then measure the displayed canvas size, measure the total length of the page and the point of each title, then hide the links that are within viewable distance of the top…
Some people may want all the content on one page so they can print the material easily.
I think it depends on the content and the expected use of it. If you know that individuals will only want bits and peices, it is best not to use jump links and break it up into chunks and create a navigation system for those pages.
Something like Ajax could be a solution but may result in accessability problems, and the back button usability issue.
I would suggest not using a word count to determine the length of a page but rather a target resolution. For instance, I would suggest your standard page height to be 768px.
That being said, there have been many sites (don’t have linkage handy) that have formatted their whole site in one page with navigation using jump links.
I’ve used the moo.fx package to create elegant scroll to effects where the page essentially slides to the next anchor. The script works well and is very light weight.
For a site I work on, we made the decision that for certain key pages (news on the homepage, directions for submitting an audition on video) to make a table of contents of jump links. This was because important information was ‘below the fold’ and we were getting way too many questions that could have been easily answered by reading the full page — apparently our userbase is not big on scrolling.
If something critical on the page comes 2 or 3 screens down, that’s when a jump link became very appropriate — and our non-scrolling users seem to agree.
All – thanks for the thoughtful feedback. Given the number of variables at play (screen resolution, browser window size, text size, number of headings on a page) I’m finding it hard to come up with a guideline that doesn’t sound like a best guess.
That being the case, after some more discussion we’ve decided to always add jump links to our pages and then to remove jump links from any pages that are clearly too short to warrant having them.
Combined with the use of this “fragment highlight script”:dorward.me.uk/software/frag/, I think we have a reasonable standard to follow.
I’m not convinced that a given number of screens based on target resolution is a resonable measurment for when a jump link should be used.
For example, if I were visiting a website article that contained a series of lists and paragraphs, and I continually had to click on jump links on pages where there were more lists (and hence, more white space), I would get annoyed.
But then again, I guess I’m not exactly sure what the answer is, but whatever it is, it has to be consistent.
Keep in mind that the browser sees no difference between page to page links, and jump links, and that means that the various browser controls will be affected…
The back button will move to the previous position on the same page before the user clicked on the jump link.
The history menu will fill with multiple sections of the same page.
*Aaron* – I’m only talking about adding a list of jump links at the top of a page to each of the sections on that page. You certainly wouldn’t *have* to use them at all to navigate the page.
*Sholom* – interesting point. This is true, but is it a bad thing? I’m not aware of this being a problem as far as usability is concerned.
I’ve never noticed a user have a problem as far as using the Back button is concerned, but there again I haven’t been looking specifically at this issue before.