1 of 23

Slide Notes

DownloadGo Live

Interactive Timelines

Published on Dec 10, 2015

No Description

View Outline

MORE DECKS TO EXPLORE

PRESENTATION OUTLINE

1.

Interactive Timelines

by Jessica Sams
Photo by alykat
2.

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.
3.

To the left?

Western cultures tend to follow reading direction and have time flow visually from left to right.
Photo by juglar del zipa
4.

Untitled Slide

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

To the bottom?

This design shows time flowing vertically.
6.

Time flows bottom to top

This design shows time flowing vertically from bottom to top.
7.

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
8.

Past to the top

9.

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
10.

Lifestream

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

Chronographics

The visualization of chronology 
12.

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.
13.

Combining

14.

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.
15.

Dipity's GUI

Not Responsive
16.

Tableau's GUI

BORING
17.

Timeline JS

Responsive & Popular
18.

So I built one

19.

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.
20.

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.
21.

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.
22.

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
23.

Untitled Slide

Jessica Sams

https://www.facebook.com/liveonpurpose