Lois Wei

Owen Otto

Minakshi Mukherjee

Project Goals

• Allow the user to dynamically select two timelines and compare them

• Each timeline should be visible as a distinct entity, but arranged so that comparison is easy

• May be used so that user’s can facilitate learning by comparing a familiar timeline with an unfamiliar one

Project Goals

This timeline exploratory tool could potentially be used to compare two timelines of similar domains or vastly different domains . For example:

• media history with copyright history

• history of hip-hop with 20th century U.S. history

• your life with your mother's life

• histories by two different futurists

Target Audience

• General (similar to Wikipedia perhaps)

• “Edutainment” – informal education

A Somewhat Similar Project

A similar project is the Hyperhistory timeline.

(Andreas Nothiger, World History Online Vancouver, Canada www.hyperhistory.com)

A Somewhat Similar Project

Downsides to Hyperhistory:

• Information overload (it’s ugly and cluttered!)

• Timelines of interest may be far apart

• Limited domains covered

Challenges

• Convert heavily text-based timeline source data to a visually appealing timeline

• compare two timelines with different time ranges

• selecting what timeline data to prioritize in the display

Timeline Source Data

• History of the film: http://www.infoplease.com/ipea/A0150210.html

• History of ancient Rome: Wikipedia• History of Christianity: Wikipedia• History of the US: World Almanac for kids

Decisions to make in designing a timeline

Timeline data can have categorical groupings (e.g. events, people, historical periods, reigns of different emperors)

Event entries can be "points" or "spans"

So how do we convert heavily text-based timeline source data to a visually appealing timeline?

Event labels can vary in length

Number of events or years included on a timeline can vary drastically

When comparing two timelines, the time range can differ drastically

Our Design

[drum roll]

Both timelines share one line to maximize ease of comparison.

Years are placed on the side of the label closes to the line for easy comparison.

The whole timeline display fits on one screen for easy overview.

Empty circles indicate events that are on the timeline w/o a label in this view

Each timeline’s stuff is rendered in a distinct color so you can tell them apart.

Green is used when both timelines have a point on the same year.

Color key is incorporated into titles

Range selector for changing what’s shown at any one time on the main timeline

Stats about the timeline and what’s currently displayed

The actual line, tick marks, and labels lines are in gray to emphasize the data, not the infrastructure

“spans” are below or above the line, like so

details on demand!

Timeline Design

• Example Timeline (2)– Roman Empire vs. Christianity

Automatic slideshow mode Demo

Automatic slideshow mode• Employed cartoon-style animation

during slide transitions• Technique:

– Rather than the popup windows simply appearing and disappearing, which are sudden and potentially confusing changes, the pop up windows smoothly easing on and off the screen

– The popup windows appear to grow and deform smoothly

• Benefit:– Provide the visual cues necessary to understand what is happening

before, and after that action– Provide enough information for the audience to follow the action

without ever being startled and confused by puzzling behavior– Fully absorbing the user into its world so that her attention may be

devoted entirely to the task– Theatrical effect

• (source: Animation: From Cartoons to the User Interface, Chang, Ungar ’03)

Questions/Comments/Praise

Owen Otto…owen@simsLois Wei…loiswei@simsMinakshi Mukherjee…minakshi@sims

Thanks!!