What is an effective method for in-page navigation when none of the other pages have in page navigation?

Question

I'm updating a help page that is sectioned and navigated using a list of links at the top of the page. Since there is so much content in the help page it is easy to get lost, and the only way to return to the top is to scroll up or click a "top" link at the beginning of each section. I want to incorporate some better in page navigation, but there are two perceived problems:

1. The rest of the website does not have in-page navigation
2. The website is responsive with a max-width of 950px

The following are screen shots of the top of the page and a section of the page respectively.

My question: how can I add in-page navigation to this page to make it easy to navigate, responsive, and match the rest of the site? Is in-page navigation even the answer?

Here is a link to the site: https://tspace.library.utoronto.ca/help/index.jsp

Answer 1

Let's start with some principles:

• It's ok for the help page to look different. In many cases, it may actually be desirable for help to look different because it (a) provides contextual assurance to users that you are acknowledging their need for help; (b) user flow in help is totally different from user flow for the rest of the site (e.g. in an XBox shooting game, think of how different gameplay UX is from the help UX).

• Be careful of relying on browser search. In-page search is implemented very differently across browsers and devices, and ranges from very convenient to very inconvenient. It's best used when searching long narratives (e.g. a novel) rather than long sectioned pages where there are a lot of different topics, because it's very easy for users to get lost among the myriad topics.

Here are some suggestions, in no particular order:

• Simplify and organize your help section headers (top of page) to make them more scannable. e.g. these headers are much shorter:

  • Registering on TSpace / Adding scholarly work / Creating a community / Why we upgraded / About TSpace structure / Browsing materials

• If you want to keep the long-page format:

  • Make the section breaks in the page more visible to users who are scrolling quickly through the long page (use color, heavier divider lines, and/or hanging indentation). This will help folks move to sections
  • Consider adding floating buttons on the page to allow users to scroll to top, scroll to next/previous section.
  • Consider using sticky section headers like instagram to show where users are (see this demo: http://codepen.io/chrissp26/pen/gBrdo ). You can add previous/next section buttons to the headers.
• If you are prepared to break the page into proper sub-pages:
  • Implement help site search. There are REALLY cheap ways to do this if you guys don't have budget (e.g. google)
  • Implement an absolute or fixed nav bar on the side.

Hopefully that's enough to get you to a mix of approaches that works for you guys.