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?
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:
What’s in the menu?
Are all menu items accessible or only those that have been visited?
Is the menu too big for the screen and need to be collapsed?
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.
Adobe Captivate 9, 2017 and 2018’s TOC (i.e. the “Table of Contents”) is often, although not always, an essential navigation tool to a lesson template. Between the application’s Preferences and the application’s TOC Settings, a developer can customize the TOC to a degree. For instance, you can toggle between “Overlay” and “Separate”. The “Overlay” setting presents the TOC to the user as a slide-out feature on top of the presentation. The “Separate” setting positions the TOC next to the presentation, forcing the contents to offset to the right or left.
Here’s an example of a generic course (provided by Captivate for learning purposes) using the TOC’s “Overlay” setting:
The TOC in this example slides back and forth from the left edge of the screen. For out-of-the-box course development, the options provided are fine. For a designer, though, they are thoroughly frustrating. This TOC covers up the branding? That’s not ideal. The TOC also feels attached rather than integrated, and rather haphazardly positioned at the top corner.
Designers typically customize products based on the client’s established branding and specific needs for a course. After a period of information gathering, a designer will hone in on an appropriate look-and-feel. Captivate does not visibly support such a level of customization. Some standard customizations include a TOC fully-integrated into a presentation that also contains branding logos, background artwork, text, and special interactive elements.
What about negative space? Look again at that screenshot above. Everything is tight and heavily layered rather than open, comfortable and simple to scan visually. With the TOC open, the interface loses its clear hierarchy of on-screen text. The design’s color harmonies and dedicated zones begin to fall apart.
Our tools and environments
First of all, here’s the list of presumed tools and testing environments for this work.
Project: An HTML5-based, SCORM-compliant interactive lesson
Tools: Adobe Captivate 9, 2017 or 2018, Adobe Photoshop CC
Platform: Both Win 10 and Mac
Testing: An LMS like SCORM Cloud
Basic template to download: tbd
Standard design decision #1: Add a logo to your template
A natural location for a logo and any descriptive content about your course is the top left corner. Like so:
If you also decide to make use of the TOC, the cascade of decisions and, thus, problems to solve, begins. Do you choose “Overlay” or “Separate” for your TOC? As shown above in the second example of a generic course, overlaying a logo with a fly-out navigation menu is a sub-par look.
The TOC Settings panel doesn’t provide options for adding artwork to the menu area. What about repositioning the TOC? Nothing available except for “Left” or “Right”. What now? Your problem-solving instincts kicks in… maybe make the background of the fly-out nav menu transparent and move the TOC elements down? Then, even though it is always stacked above, the TOC won’t obscure the presentation.
The best approach is to take this one step at a time. Let’s deal with just the transparency.
Problem #1: You can’t set the menu background transparent
At first glance, the TOC Settings panel provides an “Alpha” field right at the top. You know what that value does? It changes the opacity of the whole TOC. Not the background color field. The whole thing. Why would you want a semi-transparent TOC?
Okay, let’s ignore that field. There must be a way to change the opacity of the various elements of the TOC, right? For some reason, while the TOC Settings “Theme” section provides an editable Background color chip, there’s no option to change its alpha property or to indicate “no background”. Note that there is also no option to add a background image.
Going back to the generic example, here’s the TOC Settings panel side by side with the TOC preview:
First, figure out which TOC elements the color chips control, because the titles aren’t immediately obvious.
Next, concentrate on making one color chip transparent. Wait, what? As mentioned above, there’s no alpha field available. No “no background” option. But there is an option to change a color chip to a gradient. And within the gradient palette? An alpha property field.
Solution #1: Use gradients
Start with the “Default Entry” color chip, since it takes up the most space. Change the “Paint Bucket” icon to the “Gradient” icon, click the left color bucket of the gradient’s color ramp and change its alpha from 100% to 0%. Repeat the process for the right color bucket.
The TOC Preview now shows the “Background” color chip color through the newly-transparent “Default Entry” color chip.
Along the way, to verify your changes are working, feel free to reset colors, since the end goal for most of the color chips is complete transparency. Here the “Background” color chip has been changed to a bright pink for clarity:
The current goal is obvious — eliminate all the colors, including the hot pink of the menu’s background.
As you cycle through the various color chips, setting each to show a gradient, and setting both ends of their gradient ramps to an alpha of 0%, you might find Captivate to be a little touchy. It doesn’t always take the edit. Always double and even triple check your work. In some cases Captivate will seem to refuse to accept a gradient of 0%. In these cases temporarily use 1%. Note that sometimes Captivate doesn’t even initially accept the switch to gradients. If this happens, simply go in and reset all the chips again. After multiple passes your choices will stick.
Along the way you will notice that the “TOC Outline” color chip is a little different than the others. Use the “no outline” option here.
At some point all the color chips, except for the background, will be transparent…
Finally, set the background to transparent, as well. Don’t panic if the TOC Preview doesn’t show the TOC as transparent…
When you run a preview of the course in a browser you’ll find that the menu is transparent:
Clearly the design of this particular course, provided by Captivate a few years ago, is not ideal for showing the value of a transparent menu.
Our goal is a little more evident if you use a custom layout with a dedicated zone for the menu:
And this is the custom layout with the menu containing most of its color chips set to transparent gradients:
As you can readily see, this is an example of the domino effect one decision can make. You’ve achieved a transparent menu, but what about the width of the menu, the positioning of the elements, the spacing between them, the scrollbar, the expand/collapse button, the search magnifying glass icon, and that yellow menu item?
On top of all that, what if you are building higher resolution training? The example above is 1100px by 627px. The example below is 1920px by 1080px.
Suddenly the text is too small. Also note in this new example the additional frame and drop shadow. Small graphic changes intended purely for aesthetic purposes like this have negative consequences not easily solved within the “locked box” of an application like Captivate.