3

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.

enter image description here enter image description here

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

| improve this question | | | | |
  • When you say in-page navigation, do you mean pagination, or are you talking about a filtering system? A search? What do you have in mind? – Majo0od Mar 18 '15 at 16:18
  • By in-page navigation I mean using links within one HTML file to move around a single page. The page already has this by having links at the top to move around to different sections. I'm looking to alter how this navigation currently exists or completely rethink the navigation. – Courtney Pattison Mar 18 '15 at 16:21
  • Have you thought about having the topic links show/hide the relevant content below each link, similar to an accordian pattern, rather than using anchors? Do you prefer to not rely on Javascript? – Andy Mar 18 '15 at 16:43
  • I did think about that but I want people to be able to search content from the entire page using "find" in their browser. Based on interactions with users, using "find" is how most users find specific answers within the sections. – Courtney Pattison Mar 18 '15 at 16:45
  • Wow that is one gigantic page. Are you guys willing or able to implement help-site search instead of having users use search in the browser? I assume not since you're an educational institution – tohster Mar 19 '15 at 6:05
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.

| improve this answer | | | | |

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.