Hacking the TOC: Why Do It

When building web-based lessons for clients, instructional developers and designers can find themselves looking for more integrated interactive tools, to provide a better user experience. Adobe Captivate provides just such a tool, called the Table of Contents, or TOC, but treats it like an unwanted child, separate and hidden away by default. These posts will show you how to manipulate the TOC so that it appears integrated into a presentation or lesson.

This approach involves more development and QA time, too. It can be a difficult task. Why do it at all?

An object referred to as a “book”, in this case “The Elements of Color” by Johannes Itten
A web-based learning experience has a number of particular navigational challenges because, well, it’s not a book. We are culturally inclined to learn via the interactive tools of a textbook. A textbook is a physical object in physical space with a width, height and thickness that instantly communicates the general amount of information contained within. That information is also easily accessible through the flipping of distinct, tactile pages.

A web-based lesson doesn’t automatically reveal its amount of content, nor does it automatically display the location of that content. The designers and developers of the lesson need to add specific features to address these critical functions or a student can get lost pretty easily. As designers of courses we have to constantly ask ourselves whether the student is at any moment wondering:

  • How far along they are in the lesson
  • How many more slides they still need to access
  • If they will be able to review the material for greater retention at a later date

On-screen user interface tools need to be present to communicate this information. One particular solution for a way-finding challenge like the above is to include a navigation menu as a sidebar. It’s not necessarily an exciting solution, but it’s highly functional. And once we decide to include a menu, we then have to ask the client a bunch of questions, such as:

  1. What’s in the menu?
  2. Are all menu items accessible or only those that have been visited?
  3. Is the menu too big for the screen and need to be collapsed?
  4. If the menu is collapsed, how are their parent containers labelled?

A good learning environment puts the learner first, and an easy-to-use, interactive menu that tracks progress, provides instant navigation and feedback, and appears visually integrated into the environment are all positive steps towards that goal.