Show Us Your Creative Menu Navigation Examples for E-Learning

E-Learning Menus and Navigation #79: Challenge | Recap

Intuitive navigation is an important element in e-learning design. Course designers who stick with default player menus usually don’t have to worry about user interface (UI) design since player manages the navigation.

One reason rapid e-learning became so popular with instructional designers is because the tools generated the course menu, freeing IDs to design content rather than program course menus. If there’s a downside to prebuilt menus, it’s that they encourage linear, click-and-read courses.

Custom navigation menus, like those often used in nonlinear courses, can permit learners to jump around the course as they choose. But moving beyond traditional menu navigation means course designers need to think more like UI designers.

To jumpstart this week's challenge, I’ve rounded up some creative navigation examples your fellow community members have shared.

Game Navigation

Video game consoles, traditional board games, and tablet-inspired menus are excellent ways to seek inspiration.

Game Navigation

Game Center Template by Tom Washam

Tabs Navigation

Tabs are the most popular type of menu navigation we see in courses. They’re highly customizable and can be created using a variety of shapes and styles. If you go with a tabs menu, please cross-post in the tabs challenge.
Tabs Interactions by Montse

View the interaction | Download (SL2) | Download (SL360) 

More tabs interactions:

Icon Navigation

Icons and graphics are another popular approach to course menus. When used consistently, visual buttons can remove the need for on-screen button labels. If you’re looking for tips on building your own icons, check out last week’s icon e-learning challenge.

Flat Design Portfolio by Paul Alders

Flat Design Portfolio by Paul Alders

More icon-based examples:

Animated Menus

This mobile-inspired menu includes bookmarking features to indicate completed lessons and a collapsible menu to free up slide space.

Storyline 2: Animated Menu by Jeff Kortenbosch

Storyline 2: Animated Menu by Jeff Kortenbosch

More examples of mobile-inspired menus:

Map Navigation

Similar to the icon-based navigation, map themes are a creative alternative to text-based menus. Nicola shared a branching example based on a village illustration.

Learning Village Branching Navigation

Learning Village Branching Navigation

More examples of map navigation:

Challenge of the Week

This week, your challenge is to:

  • create a custom menu example for an e-learning course
  • share your favorite UI design tip for building custom navigation menus

You can design any kind of menu navigation you like. The focus this week is more on navigation ideas and concepts. Don’t worry about putting together a highly polished menu or interaction.


Here are some tutorials and articles that will help you create your challenge demo.

Last Week’s Challenge:

Graphics and Icons from the Articulate Community #78

E-Learning Challenge Recap #78: Challenge | Recap 

Wishing you an easy-to-navigate week, E-Learning Heroes!

New to E-Learning Challenges?

The weekly 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.

Jackie Van Nice
Michael Hinze
Nancy Woinoski
Dianne  Hope

This is the reason I have a "Project Playground" - waiting for a challenge that matches something I've been working on! I've been designing a notebook template which absolutely focusses on navigation, although the design would also fit into a previous challenge - I just haven't finished it yet. I've revisited the project and there's a lot of design stuff that I think is worth sharing at this point. I haven't looked at the template for a while, but hopefully I'll be able to finish it to share as a free download for this challenge. I remember to navigation took me a long time to perfect! Here's the link to the page in my Project Playground where I set out the process I used to create the design and share some visual images on what the final design will look like. Expand

Tim Slade
Wilson Santiago
Adrienne Tange
Rachel Barnum
Stephanie Finn

Thanks :) MIDDLESBROUGH COLLEGE DISCLAIMER: Privileged/Confidential information may be contained in this message and may be subject to legal privilege. Access to this e-mail by anyone other than the intended recipient is unauthorised. If you have received this email in error or are not the intended recipient (or responsible for delivery of the message to such a person), you may not use, copy, distribute or deliver to anyone this message (or any part of its contents ) or take any action in reliance on it. In such cases, you must destroy this message and notify the sender immediately. Middlesbrough College employees are forbidden to make any sexual, racial or otherwise defamatory statements, infringe or authorise infringement of copyright or any other legal right within any communication.... Expand

Paul Alders
Linda Lorenzetti
Daniela Slater
Daniela Slater
Daniela Slater