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 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.
View the interaction | Download (SL2) | Download (SL360)
More tabs interactions:
- Web Style Tabbed Interaction by Phil Mayor
- Storyline 2: Power Teal E-Learning Template by Tom Kuhlmann
- Web Inspired Tabbed Interaction by Trina Rimmer
- Tabz by Przemysław Hubisz
- Simple, Clean Design: Tabs Template by Nicole Legault
- 4-Step Tabs Interaction by Anand Timothy
- Interactive Steps Tabs by Matthew Guyan
- Menu Template by Nancy Woinoski
- 5-Step Action Interaction by Kevin Thorn
- Folder Tabs Interaction by David Anderson
- Six Tabs Interaction Layouts by Montse Anderson
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
More icon-based examples:
- Icon-Based Navigation by Tom Kuhlmann
- iPhone Tabs Timeline Interaction by Montse Anderson
- Tabs Interaction: Meet the Team by Montse Anderson
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
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
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.
Resources
Here are some tutorials and articles that will help you create your challenge demo.
- The Ultimate Guide to Buttons in Storyline 2
- 6 Creative Navigation Examples
- More Than a Dozen Ways to Navigate an E-Learning Course
Last Week’s Challenge:
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.
