Visualize History

(I just turned something like this in, and the pdf is online.)

1 Overview

1.1 Goal of this document

This specification will outline the user interface of Visualize History at the conceptual level, one level above the actual code. Implementation details will be included only when relevant to the structure of the interface.

1.2 User Interface Pieces

The user interface will consist of two main panels, each of which will be broken up into several different logical (but not graphical) pieces. The rest of this spec will be easier to understand after looking at the breakdown in the image to the right.

2 Navigation Panel

2.1 New Session

When a user first arrives at the site, she will see the New Session mode, which will serve as the starting point for a user already familiar with the site as well as provide more detailed information for a first-time user. In the Navigation Panel, the New Session mode will include:

· Popular examples: A list of examples that best demonstrate Visualize History

· Recently Studied: A list of examples that this particular user has recently looked at

· Take a tour: A static link to a step-by-step tour, for first-time users

2.2 Browse

A user will be able to browse history by topic. The topics will be presented as a tree. Only one or two sub-levels will be shown, and the rest will be downloaded from the server as needed (asynchronously). Here is an example of the topic tree a user might see:

• Wars involving the United States
• U.S. Revolutionary Way
• U.S. Civil War
• U.S. Civil War Battles
• World War I
• World War II
• Vietnam War

2.3 Visualizing

The last possible mode, Visualizing Mode, occurs when the user has already started interacting with the application. During Visualizing Mode, the navigation panel will show:

• The topic that the user is currently viewing, including its name, blurb, start- and end-date.
• Topics related to the current topic, which, when clicked, will switch focus to the new topic

Note that the UI for this piece will mimic Browse mode closely, using the topic-tree again

3 Viewing Panel

3.1 New Session

When a first-time user first visits the site, her attention will be on the Viewing Panel as the biggest and centered item, and not on the Navigation Panel. For a New Session, the Viewing Panel will show:

• Intro paragraph: describing what Visualize History is and what it is for
• Getting Started: A few bullet points saying how to start using the application
• FAQ
• Popular examples: the same as previously mentioned

3.2 Visualizing

3.2.1 Map

The Viewing Panel is the core of the application. Once the user starts a topic, she will mostly be interacting with the Viewing Panel and not the Navigation Panel. The Viewing Panel will primarily be a geographic map, loaded at some initial location (say, the United States). It will be draggable in both directions, and you will be able to zoom in and out.

I plan to delegate the entirety of that implementation to the Google Maps API. The API allows for all of the necessary actions through a seemingly simple to use interface.

3.2.2 Nodes

The Nodes will be one of two types of historical data. The first, an event, is what you might think of as history; battles, deaths and proclamations are all events. The other type of node, a region, is again logically named; the area that a proclamation applies to would be a region.

For version 0.1, only one topic will be shown at one time. That topic will be reached by clicking a link, either in the browse window or in the popular examples. When a topic is being shown, all of its children will be loaded into memory. Then, when the topic is changed, the new nodes will be asynchronously loaded into memory.

A node will be displayed as a small icon. That icon will have a text label next to it. When the user mouses over the text, a box will appear, which will include the title of the node, and more detailed information about the node. Clicking on the node will make that node into the topic of focus, in effect “zooming in” on that event.

Eventually, nodes may be differentiated. For example, if 10 nodes belong to three categories, each category might have nodes of a different shape or color. Again, that is easily done through the Google maps API.

Regions will be represented similarly so nodes, except they will be assigned a background color and will be lower on an imaginary z-axis (below in depth) of the event nodes, to allow events to be shown on top of regions.

3.2.3 Time Slider

The crucial piece of the Visualize History user interface will be the piece that controls navigation through time. The dimension of time separated Visualize History from other applications and needs to invent the interface required.

There will be a time slider, as shown in the picture. In the middle of the bar, a smaller bar shows “now”. This now-bar determines which nodes are currently being shown. It can be dragged, stretched or shrunk to change which events are being shown.

The now-bar will have text labels, much like the labels for nodes. When moused over, the labels will show a border, and when clicked they will become editable. A label will show all the relevant parts of the now-bar. For instance, if it has been stretched, the endpoints will each have a label. If it has not been stretched, then only one label will be shown.

The endpoints of the time slider will be fixed for a given topic at the earliest and latest relevant date. They will not be draggable, but to accommodate future UI goals, they will be changeable.

There will also be a small button to “play” time. This will be deemphasized, to emphasize the ability to drag time at any speed and in direction desired. The now-bar will also move by 1/2s to allow for a decelerating effect.

No comments