1 of 23

Slide Notes

DownloadGo Live

Interactive Timelines

Published on Dec 10, 2015

No Description

PRESENTATION OUTLINE

Interactive Timelines

by Jessica Sams
Photo by alykat

In which direction is the past?

I researched the evolution of the graphic user interface of the timeline. It turns out that there is no consensus between cultures about the direction of the past.

To the left?

Western cultures tend to follow reading direction and have time flow visually from left to right.

Untitled Slide

This timeline shows time flowing left to right.
Photo by acd111

To the bottom?

This design shows time flowing vertically.

Time flows bottom to top

This design shows time flowing vertically from bottom to top.

To the top?

Sorry, turn your head. This design shows the past at the top, so time is flowing top to bottom.
Photo by Random Retail

Past to the top

Interactivity

In the mid 1990s, several firms started creating timeline graphic user interfaces digitally. These GUIs improved iteratevly, as the competitors tried to outdo each other.
Photo by protozoo

Lifestream

mid 1990s
The navigation in Lifestream was limited to a search bar and the arrow buttons for next and previous.
Photo by inju

Chronographics

The visualization of chronology 

Usability: Learning with virtual environments

  • ages 7-9, and 18+ did great with VE visualizations
  • ages 11-14 were distracted by VE visualizations
Authors of the article Human-Centric Chronographics: Making Historical Time Memorable (Korallo et al., 2014) claim to be the first ones to devise and conduct user experience evaluations on interactive timelines.

Combining

Searching to make my own

I wanted to know if there is any script or software available to help novices make their own timelines. This National Geographic timeline is Flash based and you've got to be a pro to make it.

Dipity's GUI

Not Responsive

Tableau's GUI

BORING

Timeline JS

Responsive & Popular

So I built one

My Google

Timeline JS is powered by my own Google Spreadsheet. I write the text and add links to media. The Timeline JS does the work of displaying the final interactive timeline.

www.jessicasams.com

To test the responsive timeline, I needed to build a responsive web site. The timeline is under the image of the cabin.

Results

  • Logical flow of time and intervals
  • Responsive GUI :)
  • Not accessible
  • Doesn't work in IE lower than 10, or in WordPress
  • Does embed a wide variety of media
I liked the convenience of building a timeline with Timeline JS, but it does have some drawbacks. Please remember to offer accessible options if embedded media isn't keyboard accessible.

Response

  • I created a text version of my embedded slide show.
  • This helps with SEO, screen readers, mobility impaired keyboard users
  • Now my interactive timeline is responsive, accessible, and intuitive

Untitled Slide