Designing Custom Table of Contents Menus in E-Learning #182

Table of Contents in E-Learning #182: Challenge | Recap

Create a Custom Table of Contents to Help Learners Navigate Through the Course

Today’s authoring tools make it easier than ever to customize how the menu looks and where it’s placed in the course player. But there will be times when designers want to move beyond the default menu options and design their own course menu.

While DIY menus take longer to design and implement, they’re worth the time if they help learners get more from their training. And that’s what this week’s challenge is all about.

Moving Beyond the Default Player Menu

Storyline’s menu options on the Player Properties window allow you to control how the player menu appears in your published course. This is a classic table of contents–style menu that provides all the functionality most courses need.

Using a Table of Contents Style Menu

When you want even more control over your menu design’s fonts, colors, graphics, bookmarking, and types of menu information, you’ll need to create everything yourself. The good news is: tools like Storyline make this really easy!

Challenge of the Week

This week, your challenge is to share an example of a custom table of contents menu. What other types of information can you include in your TOC that go beyond learner progress?

You don’t need to build out a real project this week. Use placeholder slides and content to allow more time for your custom table of contents menu.

Last Week’s Challenge:

Before you lay your e-learning cards on the table, take a look at the interactive “choose your own adventure” examples your fellow community members shared over the past week:

Choose Your Own Adventure in E-Learning

Choose Your Own Adventure in E-Learning RECAP #181: Challenge | Recap

Looking forward to seeing what you bring to the table this week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

85 Comments

Nancy Woinoski
Hero

3 years ago10/23/17 at 4:25 am (UTC)

Ok, I'll get the ball rolling on this challenge. Here is my entry this week. https://360.articulate.com/review/content/6f5aa05b-5f1e-4460-b07f-4bd030813833/review

3 years ago10/23/17 at 4:36 am (UTC)

Clean and simple. Nice work, Nancy!

Joanna Kurpiewska

3 years ago10/23/17 at 11:57 am (UTC)

I believe there are a lot of cat lovers in our e-learning community so here is a table of contents dedicated to you! Let me know how your sugar levels are after viewing this ;) http://demo.wolflearningconsulting.com/TableOfContents/story_html5.html

Tram Nguyen
Joanna Kurpiewska

3 years ago10/24/17 at 2:13 am (UTC)

The layout looks so clean and clear. Love it!

3 years ago10/24/17 at 9:36 am (UTC)

This is cuteness overload :)

almost 3 years ago10/25/17 at 4:24 am (UTC)

Super cute <3

ricky snodgrass

3 years ago10/23/17 at 3:07 pm (UTC)

This challenge couldn't have been better timed for me! I have been playing with contents slides to allow users to navigate through activities at their own pace and in their own order. If you want to know more about these slides please check out my blog post here http://rickysnodgrass.co.uk/elearning-hero-182-contents, contact me on their if you want the files two. I have two for you this week : Selector 1 - Hover contents slide – No fancy stuff, plain and simple, looks beautiful and links through to other content. https://goo.gl/vq49Yv Selector 2 - Suggested order, tracks progress and can quite easily lock a final activity down to the variables that already exist. https://goo.gl/4HkZUz

Angela Conrad

3 years ago10/23/17 at 5:58 pm (UTC)

I created a custom menu for a comic-style course some time ago, so I'll share that here for this week's challenge: http://service.insperity.com/service-technology/ELH/182/story.html

3 years ago10/24/17 at 9:39 am (UTC)

Very creative!

3 years ago10/24/17 at 5:45 pm (UTC)

Love this one!

almost 3 years ago10/25/17 at 4:27 am (UTC)

Clean and effective...loved it

Stephanie Harnett
Hero

3 years ago10/23/17 at 9:03 pm (UTC)

Here is a left side menu bar for a recent project - top left is a slide out menu, a progress meter and a timer for question response. https://360.articulate.com/review/content/ef7c1fb6-374e-4155-aaf0-9482e14353dd/review

Pooja Bais
Stephanie Harnett

3 years ago10/24/17 at 8:23 pm (UTC)

Hi Stephanie, I liked the performance meter style of evaluation. But I was able to turn the meter left or right and rig my performance. Is it intentional?

3 years ago10/24/17 at 8:51 pm (UTC)

Good eye Pooja! I deleted a bunch of elements, voiceovers, slides, etc. to post this as a sample from a real project. One of those elements was a transparent rectangle that overlays the meter so it can't be manually manipulated. I uploaded a new demo version with that element back in. : )

almost 3 years ago10/25/17 at 4:11 am (UTC)

I really like this Stephanie. How did you do the glow on the next button?

almost 3 years ago10/25/17 at 2:07 pm (UTC)

I placed 2 copies of the next button in a layer on top of each other. The bottom copy is 50% transparent and the top is normal. The top one has an entrance and an exit fade of .75 and the timeline is 1.5 seconds long. Two triggers were added to the top copy to change the state to hidden when the entrance animation completes and a second trigger to set it to normal when the exit animation completes. A roundabout way to create a flashing effect. : )

almost 3 years ago10/25/17 at 2:14 pm (UTC)

I am going to try this, it really looks good. I have attempted a flashing effect on some of my stuff but your version is so much better.

Pooja Bais
Stephanie Harnett

almost 3 years ago10/25/17 at 5:03 pm (UTC)

Thanks for sharing, Stephanie. Can't wait to play with the concept!

Will White
Stephanie Harnett

over 2 years ago02/23/18 at 3:53 pm (UTC)

I'm not exactly sure why this works but it's amazingly simple and looks really good! Thanks for sharing!

almost 3 years ago10/25/17 at 10:22 am (UTC)

Really nice design Stephanie!

Stephanie Harnett
Hero

3 years ago10/23/17 at 9:42 pm (UTC)

Here's another I did a while back. I created a short demo to show how the course map, progress and navigation work. http://youtu.be/9zWA9Zj9ba8

Ashi (Neha) Tandon

3 years ago10/24/17 at 11:56 am (UTC)

Hola, Here's a quickie from my end: http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1bt73j5jbp5ogfk1hl81qis1e7b9/story_html5.html Source File: https://community.articulate.com/discussions/building-better-courses/elh-182-freebie

Training Specialist

3 years ago10/24/17 at 6:20 pm (UTC)

Here's a version of an icon based menu I used for a recent forklift training. I've pulled out all of the content slides and used placeholders to keep it simple for the challenge. https://360.articulate.com/review/content/aa5ad545-5f51-48fb-8047-292090d84dc1/review

Pooja Bais

3 years ago10/24/17 at 8:36 pm (UTC)

I created a honey comb style menu with honey jars as reward for completing the sections. :) http://chilp.it/790070d

almost 3 years ago10/25/17 at 4:35 am (UTC)

Beautifully done with a good message...loved it :)

Pooja Bais
Ashi (Neha) Tandon

almost 3 years ago10/25/17 at 5:12 am (UTC)

Thanks, Ashi!

almost 3 years ago10/25/17 at 7:17 am (UTC)

Nice honey comb design, Pooja And the healthy habits are super important!

Pooja Bais
Joanna Kurpiewska

almost 3 years ago10/25/17 at 11:55 am (UTC)

Thanks, Joanna! And you dropped a serious cuteness overload with those kitties! Clean design moreso!

Patricia Heijmen

almost 3 years ago10/25/17 at 11:14 am (UTC)

Hi, i created a signpost menu with a little bird. http://www.e-w-i.nl/challenges/challenge182/story_html5.html

almost 3 years ago10/26/17 at 12:02 am (UTC)

Very cute Patricia

almost 3 years ago10/26/17 at 1:19 pm (UTC)

Thanks Nancy!

Charles Hamper

almost 3 years ago10/26/17 at 5:43 pm (UTC)

Here's a table of contents that I've rebuilt in Storyline from a physics CD ROM that I worked on in the late 1990's. http://montereymotiongraphics.com/physics/

almost 3 years ago10/29/17 at 12:43 am (UTC)

Hey Charles! Great seeing you around the challenges. Hope all is going well. I really enjoyed your TOC example. The hover preview is a nice touch. Recap updated: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#CharlesHamper

almost 3 years ago10/30/17 at 2:45 pm (UTC)

Thanks David! I'm still lurking with good intentions!

almost 3 years ago10/30/17 at 5:38 pm (UTC)

Good to hear, Charles! You've shared some of my favorite examples over the years.

Jon B
Charles Hamper

almost 3 years ago11/09/17 at 10:36 pm (UTC)

That embedded video looks like the Dinosaur CD-ROM that came with a lot of Windows computers back in the mid-late 90's. 3D interactive models and I think it had some games. Am I remembering right?

Haluk Ünal

almost 3 years ago10/30/17 at 1:40 pm (UTC)

Hi everyone. this demo is arabic learning for turkish people. https://360.articulate.com/review/content/0256984d-abf0-49c7-b934-cb197714247e/review

almost 3 years ago10/30/17 at 6:09 pm (UTC)

Welcome to the challenges Haluk! Thanks so much for jumping in and sharing your creative TOC example. I really like the visual menu design you shared. I've updated this week's challenge recap to feature your great example: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#HalukUnal

Tania Vercoelen

almost 3 years ago10/30/17 at 9:51 pm (UTC)

Hello! I have created a table of contents designed for mobile content http://www.taniavercoelen.com/ELHchallenge_182/story_html5.html Here is the source file: http://www.taniavercoelen.com/ELHchallenge_182/ELH%20182.story

almost 3 years ago10/30/17 at 10:13 pm (UTC)

Fantastic example, Tania! Thanks for sharing your source files. I've updated the challenge recap to feature your example and download: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#TaniaVercoelen

almost 3 years ago10/31/17 at 3:25 pm (UTC)

Hello David, Was my entry below to late to be included?

Eric Quarrell

almost 3 years ago10/31/17 at 5:42 am (UTC)

Hello Everyone! I know this might be late for this weeks competition, but I told myself after this years DevLearn conference that I wanted to get more involved in the eLearning community. So here is my submission. I created it based on a fake outdoor product company. If anyone has any questions on the scripting/variable work, please don't hesitate to ask, I am happy to share! https://360.articulate.com/review/content/15539da9-3bc2-4762-afb9-9fdd99065780/review

almost 3 years ago11/12/17 at 11:49 am (UTC)

Welcome to the challenges, Eric! I really like the design theme you came up with for your TOC/menu. Nicely done. I updated the recap to include your example: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#EricQuarrell Hope to see you around future challenges.

parama banerjee

almost 3 years ago11/01/17 at 5:15 pm (UTC)

Hello Everyone. I am Parama and very new to the e-learning challenges. This is my first challenge and have created a TOC with Elucidat website on corporate training. Any feedback on the same is highly appreciated. Please follow the link to get into the challenge. https://learning.elucidat.com/course/59f89c6c448c4-59f9fffd9da54

almost 3 years ago11/12/17 at 11:50 am (UTC)

Welcome to the challenges, Parama! I've updated the challenge recap to include your example: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#ParamaBanerjee

Rachael Vergara

almost 3 years ago11/01/17 at 6:15 pm (UTC)

Hello everyone, I am new to the submission process, but here is my second challenge. I used a library. http://s3.amazonaws.com/Elearning_Challenges/Table%20of%20Contents%20-%20Storyline%20output/story.html

almost 3 years ago11/12/17 at 3:18 pm (UTC)

Welcome to the challenges, Rachael! I like the library design concept in your example. I've updated the recap to feature your demo: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#RachaelVergara

Douglas Audirsch

almost 3 years ago11/02/17 at 6:42 pm (UTC)

Here is a project I'm working on. I deleted most of the content to cut down on the size, but I wanted to share my attempt at creative navigation. I was working in PowerPoint but I wanted the user to be oblivious to that fact. I wanted them to get so caught up in the interaction that the tool was invisible. https://s3.amazonaws.com/aws-website-trainerdougsportfolio-tkczz/elearning/powerpoint/DesktopExample.pptx

almost 3 years ago11/12/17 at 3:24 pm (UTC)

Cool example of the overhead desktop view. I've updated the recap to include your example: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#DouglasAudirsch If you like, you can add your example in the Desktop Office challenge: https://community.articulate.com/articles/desktop-office-theme-templates

Aman Vohra

almost 3 years ago11/03/17 at 7:02 am (UTC)

Hello Everyone, Here's my submission: Created a custom UI with a fully functional menu that tracks and stores users progress. Have a look: https://www.linkedin.com/pulse/new-user-interface-custom-menu-tracks-users-progress-aman-vohra/

almost 3 years ago11/12/17 at 3:27 pm (UTC)

Great work as always, Aman! Recap updated: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#AmanVohra

almost 3 years ago11/13/17 at 4:13 am (UTC)

Thanks a lot David, your comments inspire me to create more and more e-Samples :)

Kimberly Leigh

almost 3 years ago11/03/17 at 3:13 pm (UTC)

Simple navigation example, but includes scrolling animation on list of topics. https://s3.us-east-2.amazonaws.com/kimsportfolio/eLearningChallenge182/story.html Additional Example: https://s3.us-east-2.amazonaws.com/kimsportfolio/eLearningChallenge182B/story.html

almost 3 years ago11/12/17 at 3:31 pm (UTC)

Cool use of motion paths for the looping effect! I've updated the recap to feature your example: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#KimberlyStroughWingo

Mallory Holder

almost 3 years ago11/03/17 at 7:32 pm (UTC)

These are all so creative! I've enjoyed looking through them all. I have a question for an admin (or anyone who can help)...how does one submit a challenge? I know it says to post a link in the comments, but how do you upload to create a link? Is this something only available for 360? Or do you upload it to an outside source? I'm just a little confused. I've looked through some posts for a hint but have come up short. If I'm just missing something, please let me know. Thanks in advance!

almost 3 years ago11/08/17 at 1:34 pm (UTC)

I was asking myself the same question.

almost 3 years ago11/08/17 at 1:54 pm (UTC)

I signed up for http://s3.amazonaws.com account (which is free until a certain amount of storage is used) and downloaded Cloudberry Lab for Amazon. Some people have their own website, or they use Articulate 360. I hope that helps.

almost 3 years ago11/08/17 at 1:57 pm (UTC)

Thank you for your help. I'll look into this. :)

Kev Man
Rachael Vergara

almost 3 years ago11/08/17 at 6:33 pm (UTC)

And how does one use Articulate 360 to post here?

Kimberly Leigh

almost 3 years ago11/06/17 at 7:43 pm (UTC)

Simple animated navigation example, includes topic list. http://kimberlystrough.com/eLearningPortfolio/eLearningChallenge182B/story_html5.html

Omie Drawhorn

almost 3 years ago11/06/17 at 10:47 pm (UTC)

Here is my belated entry! https://360.articulate.com/review/content/678bbee8-83e3-4fc4-abb6-6f34ee9f4c43/review

almost 3 years ago11/12/17 at 3:36 pm (UTC)

Thanks for sharing this week, Omie! I always enjoy your examples. I've updated the recap to feature your cool demo: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#OmieDrawhorn

Evangelos Neochoritis

almost 3 years ago11/07/17 at 9:08 pm (UTC)

And finally my first challenge submission! This is an example of a gamified table of contents. I hope you enjoy it;) http://s3.amazonaws.com/Table_of_Content_Template/Table%20of%20Contents%20-%20A%20Gamified%20Example/story.html

David Anderson
Author
Evangelos Neochoritis

almost 3 years ago11/12/17 at 4:13 pm (UTC)

Welcome to the challenges, Evangelos! It was great meeting you last week in Utrecht. I added your cool menu example to the recap: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#EvangelosNeochoritis Hope to see you in future challenges!

almost 3 years ago11/13/17 at 7:14 am (UTC)

Thank you David! It was great meeting you too and attending your workshop. Great stimulant for motivation and ideas! Challenge #184 on the way.

Eileen Meliksetian

almost 3 years ago11/09/17 at 1:22 pm (UTC)

Hi all. Great entries! Adding mine into the mix. This (short) demo shows a custom table of contents users can choose to open or close. It also provides a content map for the workflow and identifies where the learner is in the process. For this demo, step 1 (Import Video) is functional. http://s3.amazonaws.com/EbmDemo/Projects/Weekly%20Challenge%20182/story.html

almost 3 years ago11/12/17 at 4:21 pm (UTC)

Hi Eileen! Thank you so much for sharing your example in this week's challenge. I really liked your use of a pop-out menu for the table of contents. Recap updated: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#EileenMeliksetian

Richard Watson
Hero

almost 3 years ago11/09/17 at 6:18 pm (UTC)

Way behind on the challenges! Here is my submission for this challenge. A droplet in a sea of other amazing submissions! http://bridgehillls.com/designing-custom-table-content-menus-e-learning/

almost 3 years ago11/12/17 at 4:26 pm (UTC)

Dials, flyout menus, and water colors! Lots of cool ideas going on in your example, Richard. Glad to see you in the challenges. Here's a link to the updated recap: https://community.articulate.com/articles/table-of-contents-design-examples-in-elearning#RichardWatson

Designing Custom Table of Contents Menus in E-Learning #182

Create a Custom Table of Contents to Help Learners Navigate Through the Course

Moving Beyond the Default Player Menu

Using a Table of Contents Style Menu

Challenge of the Week

Last Week’s Challenge:

New to the E-Learning Challenges?

Related Content

Show Us Your Custom Navigation Menus for E-Learning #79

A Week in Review: October 23, 2017

Course Starters: Construction Theme E-Learning Templates #183

85 Comments