Whale
Interface

Initial sketch
The Whale Hunt website was developed as an experimental interface for storytelling. Given an epic real world story, with lots of content and lots of metadata, how can the narrative be faithfully retold? The project presented a number of interesting design problems, including: how to present a large set of photographs (3,214) online while keeping download times relatively brief; how to express both the topography of the entire narrative and the ways in which any single moment fits into that narrative; how to extract and reveal the many substories occuring within the context of the larger story; how to convey the many feelings experienced on the hunt (boredom, fatigue, curiosity, excitement, exhaustion, sublime beauty); and more generally how to restage an epic real world experience on the Internet. The resulting Whale Hunt interface is described in more detail below.

Timeline

Heartbeat Timeline

Running along the bottom edge of the screen is a timeline, representing the entire whale hunt trip, beginning with the taxi ride to Newark airport and ending with the butchering of the second whale, seven days later. The timeline is pictured as a medical heartbeat graph whose magnitude at each point corresponds to the photographic frequency (and thus the level of excitement) at that moment. The position of the presently visible photograph is indicated by a glowing red bar. Moving the cursor along the timeline causes the bars to spread and contract organically, allowing the viewer more easily to isolate a single moment in time. Applying constraints (described below) causes the timeline to change shape, as various substories are isolated and revealed.

Harpoons

Harpoon buttons

Immediately to the left and right of the timeline are two harpoon heads, which are buttons that cause a shift to the previous or next photograph, respectively.

Date & Time

Date & Times Menus
In the top-right corner, the date and time of the currently visible photograph are displayed. The day, hour, minute, and AM/PM can be individually specified, using dropdown menus that appear on rollover. If constraints are applied (described below), only times that have matching photographs will be clickable.

Filmstrip

Filmstrip

The 3,214 images are conceptually represented as a long horizontally scrolling filmstrip, which corresponds in sequence to the heartbeat timeline mentioned above. The background color of each spot on the filmstrip is the average pixel color of the photograph at that position. Clicking the timeline or the harpoon buttons causes the filmstrip to scroll to the requested point. As the full resolution images load, lower resolution pixelated versions appear.

Metadata

Metadata

Below the timeline is a row of small text and icons, indicating a variety of metadata about the currently visible photograph. In addition to the date and time the photo was taken, also listed are the cadence of the photo (what was the level of excitement at that moment), its average color, its context (where it was taken), its concepts (what ideas are represented in the photo), and its cast (who is pictured in the photo). Rolling over the icons causes explanatory labels to appear.

Captions

Captions

Captions

In the bottom right corner of the screen is a button that toggles captions on and off. Captions provide short textual commentary explaining the currently visible photograph.

Constraints

Constraints
Centered atop the screen is a small icon of a Bowhead whale. Clicking this icon opens the constraints panel, which can be used to isolate various substories occuring within the larger narrative. The types of available constraints include: cast (who is pictured in each photo), concepts (which ideas are represented in each photo), contexts (where was each photo taken), cadence (what was the level of excitement at the time the photo was taken). Multiple constraints can be combined to shape different substories. For instance, one could isolate the story of "blood and vehicles on the Arctic Ocean, involving Simeon and Crawford". The different constraint types are described in more detail below.

Cast

Cast

The cast constraints allow the viewer to filter photos that contain certain people, incluing: Abe, Ahmakak, Andrew, Crawford, David, Edward, Howard, Joe, Jonathan Josiah, Kat, Ransom, Ron, Rony, Samuel, Simeon, Walter, the 1st whale, and the 2nd whale.

Concept

Concept

The concept constraints allow the viewer to filter photos that reference certain ideas, including: blood, boats, buildings, food, games, kids, Moby Dick, paperwork, prayer, sleep, timelapse, tools, vehicles, whales and wildlife.

Context

Context

The context constraints allow the viewer to filter photos that were taken in certain places, including: New York City; airplanes and airports; Barrow, Alaska; the Patkotak family house, the Arctic Ocean, the Patkotak whaling camp and the Ahkivgaq whaling camp.

Cadence

Cadence

The cadence constraints allow the viewer to filter photos based on the excitement level at the time the photo was taken. The five cadence levels include:

Mosaic

Mode buttonsIn addition to the basic Whale Hunt interface, allowing for the viewing of individual photos, there are three visualization modes, which allow high-level browsing of the entire data set, revealing trends in coloration and photo frequency. These modes are accessed using buttons in the bottom-right corner of the screen.

Mosaic

Mosaic

Mosaic buttonMosaic mode shows all 3,214 photos simultaneously, arranged chronologically in a large colorful grid. This mode reveals coloration patterns in the photographs over time, signaling the changing environment from New York City, to airplanes, to Barrow, to the Arctic Ocean. Any photo can be clicked and selected.

Timeline

Timeline

Timeline buttonTimeline mode displays all 3,214 photos as small colored boxes, arranged chronologically. Each column represents a single 30-minute period, the height of the column indicating the number of photographs that were taken during that period. This mode reveals the changing pace of photography over the course of the trip, showing the range of experience, from the thrilling to the dull. Any colored box can be clicked to select its corresponding photograph.

Pinwheel

Pinwheel

Pinwheel buttonPinwheel mode is similar to timeline mode, displaying all 3,214 photos in chronological order, separated into 20-minute segments. The height of each segment indicates the number of photographs taken during that period of time. Any colored box can be clicked to select its corresponding photograph.

Typography

Initial sketch
The Whale Hunt interface uses a custom typography system, developed for this project, in which each letterform is bisected by a whaling harpoon.