Using Interactive Timelines to Present Sequenced Information in E-Learning Design #315

Interactive Timelines in E-Learning #315: Challenge | Recap

Timelines are a great way to present sequenced information in a single interaction. You can provide historical info to learners and walk them through processes, one step at a time. They display how events took place over time in a digestible way. 

In most cases, timelines use click-and-reveal events to reveal dates and milestones. And for the linear nature of timelines, that’s a reliable way to approach timelines.

But just about any event can be used to trigger timeline events. Below are two recent examples of non-traditional timeline design concepts.

Using Scrolling Panels for Timelines

In this vertical timeline interaction, Kimberly Eng uses a scrolling panel to hold her timeline graphic. I like this approach because scrolling panels are generally used to present large blocks of text that are too long to fit on the slide.

Using Scrolling Panels for Timelines

View the example | Kimberly Eng

Using Dial Interactions for Timelines

Here’s another example that puts a different spin on timeline interactions. By combining two dial interactions using the same variable, Gerry McAteer shows how combining multiple dials with a single variable can be used to reveal dates and milestones. This is a fantastic design concept for timelines.

Using Dial Interactions for Timelines

View the example | Download | Gerry McAteer

Challenge of the Week

This week, your challenge is to share an example that demonstrates how interactive timelines can be used in e-learning.

NOTE: Your entry can be anything from a rough concept to a polished example. The challenges are open to everyone, regardless of experience or skill level. If you need technical or creative help with your project, please ask in our forums and reference the challenge number you’re working on.

New Entries Only!

We hosted the first timeline challenge more than four years ago. To keep things fresh, we’re asking that you share only new examples this week. You’re more than welcome to re-work a previous example.

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you make time for this week’s challenge check out the interactive map examples your fellow challengers shared over the past week:

Interactive Maps in E-Learning #314

Interactive Maps in E-Learning #314: Challenge | Recap

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.

235 Comments
Jodi Sansone
Jodi Sansone
Stefano Craba
Ron Katz
Amy Palian
Amy Palian
Kimberly Eng
Molly Fisher
Gunjan Bhattacharjee

Another day another challenge, got a lot to learn this time. Started off with layers, half-way through realised, setting up the triggers was becoming complicated. Turned each layer into a slide again to have the desired effect (well almost)! Here it is, the time line of Social Media. Have included the ones that I have used so far, there are a lot more that can be added yet. Something for the community here, I so wanted to create a 360 animation, can it be done? If yes how? Wanted to created a 'drawing effect' for the lines used here (maybe together with a rectable for the text), is it something possible to do in articulate. Help me out here. Well, here is the demo link: https://bit.ly/3qNJ4Ou As always please comment below if you have any feedback that can make this t... Expand