Interactive Timelines

2016-10-01_18-35-57
Click on the image to view the demo

The Challenge

Interactive timelines for e-Learning – a great topic for weekly challenge #146 by the Articulate e-Learning Heroes team.

Inspiration

I got a little carried away with looking at all of the amazing examples of interactive timelines I found on the Internet prior to starting this design challenge. In particular, designs that stood out for me were ones that were intuitive to navigate and not too cluttered.

Whilst I see value in and enjoy looking at examples others have developed, I find that if a design does not grab my attention in the first few seconds, visually or with intuitive navigation, I quickly lose interest. This is something I always keep in mind when I’m doing my own designs – I aim to capture the viewer’s attention as quickly as possible – leaving them uninspired or even worse, leaving them guessing how to navigate a design is something I try to avoid.

Here are some examples of designs that I used as inspiration for my entry for this weekly challenge. Each of these are well worth taking a look at, but my favourite ones would have to be Histography and the History of Innovation. Histography because the logic behind this is mind-boggling (it leverages off the data in Wikipedia) and the History of Innovation because I think there’s a lot of elements of this design that can be used in other projects.

Delhi Timeline – by Tapan Babbar
September 11 Attack Timeline – by 9/11 Memorial
Rodiana – History and Tradition
Australian History Timeline
Histography
– by Matan Stauber
History of Innovation – by Freightliner
Navigating Responsibly – by Danish Shipowners’ Association (whilst not strictly an interactive timeline, this design could easily be adapted for use as an interactive timeline)
Asiana Airlines Plane Crash Interactive Timeline – by ABC News

And lastly, the Timetoast site allows subscribers to create their own timelines online – I found this quite inspirational and came across this site when I was looking for information on my chosen topic for my design.

The Concept and the Design

One of the main themes of the design across most of the examples I looked at was that a lot of information can be incorporated if you plan this carefully.

I created the opening slide of my demo in Camtasia and imported this into Articulate Storyline as an .mp4 video file. I could have done this in Storyline, but I find Camtasia is great for this sort of thing – and importing video files into Storyline is straightforward and effective.

The rest of my demo was based around using a Master Slide for the timeline dates at the top of the screen. This way, I was able to incorporate interactive elements on four different slides, with three layers for each slide, empowering the viewer to navigate freely to any date on the timeline they choose in any order they choose. One issue with this was that I created “hover” and “selected” states in the Master Slide for each of the dates, but the “selected” state doesn’t work in this context – and once I stopped to think why this would be, it’s quite simple – each of the dates on the top timeline link to another slide, so the selected state can’t be triggered for another slide! The workaround I used was to mask over the text of the date on each slide with a black text box with the formatting I had originally applied to the selected state.

collage2.png

Each slide after the introduction has a “slider” that shows a different layer of the slide as the slider is dragged to each of the dates marked along the slider. I also made each of the dates along the slider “clickable” – just in case a viewer doesn’t realise they need to slide the slider (I made a conscious decision not to include any navigation instructions with this demo, so tried to cover all bases in this regard).

Access to the display the information in the centre of the screen is an additional interactive element. I wanted to incorporate different ways to include and access information whilst being mindful of not over-complicating the visuals or navigation, so developed one slide out completely for this demo. To set this up, I used state changes, some motion paths and lots of triggers to animate elements onto and off the screen and to hide and show other elements.

collage1

The Result

As with any of my designs, I used the development of this demo as an opportunity to expand my knowledge of the functionality of Storyline. Although I’ve used them before, I haven’t explored motion paths too extensively up until now, but spent quite a bit of time experimenting with these here. I found the functionality of being able to trigger a state change “after an animation completes” really, really useful, eg changing the state of an object from hidden to normal after another object has followed a motion path off the screen.

2016-10-03_14-07-36

I think this timeline concept has quite wide application and could be used in a number of other situations such as storytelling, procedures and lifecycles.

If you’re into gamification and/or online games, I came across this one when I was developing this demo – it’s brilliant: http://voyage.anmm.gov.au

To view my demo, click on the image at the top of the page.  Enjoy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s