Guided Tours and Navigation Instructions in E-Learning

Course Navigation Instructions #92: Challenge | Recap

Quick! Name something that frustrates learners.

Okay, stop.

You could probably go on for hours, right? If you want more time, we created a safe place where you can share your own e-learning pet peeves.

Orient Learners with Course Instructions

Anytime designers talk about learner frustrations, course navigation inevitably comes up. Helping learners navigate courses is one of our most popular discussion topics.

I understand why course designers would take player navigation for granted. Today’s authoring tools have standardized a lot of the interface elements like player buttons and course menus. It's easy to assume learners already know how everything works, especially when you’re using the same player design each year.

But learners… they don’t always know how things work, do they?

At some point, one or more learners will open support tickets requesting help getting through their e-learning course. And that’s what this week’s challenge is all about.

Guided Tours in Pinterest

I recently created a new Pinterest account. I really liked their guided tour approach and how they used tooltips to walk users through their website.

There’s a small progress meter in the bottom left corner and navigation buttons on the right. This is just the type of guided tour we can use for course instructions.

Guided Tours in Pinterest

Crumble

Here’s another take on guided tours. It’s a simple solution that uses a clickable caption box to walk users through a website.

Crumble Guided Tour

View Crumble interactive tour

Interactive Screenshots

A freeform approach can be found in interactive screenshots where users navigate the page or screen by choosing which markers to click.

Interactive screenshots are a practical alternative to traditional screencasts because they orient learners with a big-picture view of an application’s interface, then let them drill down into the details for a particular menu or panel.

Interactive Screenshots

View an interactive screenshot example

Challenge of the Week

This week your challenge is to design a guided tour for an e-learning course, website, app, or digital product.

Resources

25+ Free JQuery Plugins For Doing Guided Tours Through A Website: Great roundup of popular tools for creating guided tours.

Interactive Screenshot (Custom): Great alternative to creating screencasts for product and interface overviews. Be sure to check out the interactive screenshot e-learning challenge.

Interactive Screenshot (Markers): Articulate Storyline’s built-in markers are a super fast way to build guided tours.

Player and Navigation Instructions

Do you include navigation instructions for your courses

Introduction to the Articulate Player

How to Use This Course: Discussion thread with lots of examples. Here are a few examples community members shared:

Last Week’s Challenge:

Before you rush off to guide your learners, take a moment to meet your fellow challengers in last week's icebreaker challenge:

E-Learning Icebreaker Games

E-Learning Icebreaker Games Recap #91: Challenge | Recap

Wishing you a guide-tastic 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.

89 Comments
Michael Burns
Miranda Verswijvelen