1. Lois Wei Owen Otto Minakshi Mukherjee

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

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

4. Target Audience General (similar to Wikipedia perhaps) “Edutainment” – informal education

5. A Somewhat Similar Project A similar project is the Hyperhistory timeline. (Andreas Nothiger, World History Online Vancouver, Canada www.hyperhistory.com)

7. A Somewhat Similar Project Downsides to Hyperhistory: Information overload (it’s ugly and cluttered!) Timelines of interest may be far apart Limited domains covered

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

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

10. Decisions to make in designing a timeline

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

12. Event entries can be "points" or "spans"

13. So how do we convert heavily text-based timeline source data to a visually appealing timeline? Event labels can vary in length

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

15. When comparing two timelines, the time range can differ drastically

16. Our Design [drum roll]

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

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

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

22. Color key is incorporated into titles

23. Range selector for changing what’s shown at any one time on the main timeline Stats about the timeline and what’s currently displayed

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

25. details on demand!

26. Timeline Design Example Timeline (2) –Roman Empire vs. Christianity

28. Automatic slideshow mode Demo

29. 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)

30. Questions/Comments/Praise Owen Otto…owen@sims Lois Wei…loiswei@sims Minakshi Mukherjee…minakshi@sims Thanks!!