03 b-maps&diagrams

Prepared by:

Paul Kahn – Experience Design Director

February, 2013

Media Lab, Aalto University

Helsinki, Finland

Maps, Diagrams and TimelinesINSPIRATION FOR INTERACTIVE DESIGN

Goals of this presentation

• “Too much information, not enough space” is not a New Problem

• There are many solutions throughout the history of design

• What makes design work is in the user’s mind

• Whether you work on murals, monitors or mobile phones, inspiration can be found in the underlying principals of good design

2

What is a map?

3

La Carte est un secours que l'on fournit par les yeux à l'imagination .The map is an aid provided to the imagination through the eyes.Henri Abraham Châtelain, Atlas historique, 1705

The map is not the territory.Alfred Korzybski, Science and Sanity, 1933

In fact what is meant by information – the elementary unit of information – is a difference that makes a difference.Gregory Bateson, Form, Substance and Difference, 1970

What is information?

Henri Abraham Châtelain, Map of Canada or New France 1719

Maps That Visualize Networks: Link-Node Diagrams

Peutinger Table• 3rd Century Roman road chart

Erhard Etzlaub Romweg map• Intended for travelers between Northern Europe

and Rome in 1500

Some modern Link-Node Diagrams

5

Towns and Roads in Roman Territory, 3rd Century

Maps & Diagrams | August 2012 | 7

Peutinger Table

User-Centered Features:• Icons represent services available on the network• Distance between locations on the same road• Remove space between cities not on the same road

England (left) and France (right), Pyrenees (bottom)

Erhard Etzlaub’s Romweg

11

• Designed for the pilgrimage year 1500

• Representing the road network connecting Northern Europe to Rome

• The map is oriented from the North Sea in the foreground to the Mediterranean Sea at the top.

Circles & Dots

• 9 dots from Lubeck to Hamborg

= 75 miles

• 14 dots from Hamborg to Bremen = 126 miles

Cold War orientation of Europe and Asia (TIME Magazine 1952)

13

Holtzbrinck Web Map by Dynamic Diagrams (1999)

14

NorthAmerica

GermanSwissAustrian

UK

Australasia, S. America, Africa

LinkedIn InMap

16

The Bush Money Machine: Spheres of Influence (Wash. Post, 2004)

Karl Rove

18

Try to avoid connecting everything to everything…

Deforming space to present information

19

Turgot map of Paris engraved by Bretez and Lucas (1734-39)

• Isometric projection of streets & architecture: one vertical scale

• Widen streets to expose street names & flatten land to expose buildings

• Separate size scales for the city and the river

My office

My office

Isometric + Picture Plane

Transportation networks: maps or diagrams?

27

Harry Beck’s London Underground map (1933)

• The disappearance of above-ground details

• Stretching and compressing space to improve legibility

• Distorting geographic information to fit a regular grid

London Underground (1920)

London Underground (1933)

31

The Real Underground (2004)

• Animation created by Sam Rich for the London Transport Museum.

32

Eisenhower Interstate System: Realistic Geography

33

Eisenhower Interstate System by Chris Yates (2007)

34

INTERSTATE: THE U.S. Interstate System by Cameron Booth (2010)

35

Metaphor Maps

The exterior shape of the map exists as a metaphor in the mind of the viewer.

French & German national stereotype maps of Europe (1870)

• The map as geographic metaphor containing ideas

36

37

Europe from the French perspective (1870)

38

Europe from the German perspective (1870)

Metaphor Maps

Fritz Kahn “Man as an Industrial Palace” (1920s)

• The human body as a diagram

• Homunculus (little man) as vector/actor

• Explaining biological process through mechanical metaphor

39

40

Man as Industrial Palace animated by Henning Lederer

41

Invention of the Timeline

Joseph Priestley’s invention of the timeline (1765)

• History: alignment of cultures, categories and chronology

• Biography: alignment of lifespan and chronology

Alfred Barr’s Art History (1935)

• Timeline + influence vectors

42

43time

geog

rap

hy/cu

lture

44time

geog

rap

hy/cu

lture

Joseph Priestley: biographical timeline

45

46

47

48

Customer Journey Timeline

49

Data Journalism:Olympics Race Against History (New York Times 2012)

50

Techniques used

Metaphor

Olympic pool as inverted data grid

Alignment

Swimmer’s horizontal position = year of race

Swimmer’s vertical position = time converted to distance from fastest

finish

Information overlay on the data grid

Spotlight on individual swimmer in lane (year)

Time barriers as horizontal lines (1 minute, 48 seconds)

51

52

Contact Information

Paul Kahn

Experience Design Director

[email protected]

Mad*Pow

Portsmouth | Boston | Louisville

www.madpow.com