Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

03 b-maps&diagrams

680 views

Published on

Published in: Design

03 b-maps&diagrams

  1. 1. Maps, Diagrams and TimelinesINSPIRATION FOR INTERACTIVE DESIGNPrepared by:Paul Kahn – Experience Design DirectorFebruary, 2013Media Lab, Aalto UniversityHelsinki, Finland
  2. 2. 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
  3. 3. What is a map?La Carte est un secours que lon fournit par les yeux à limagination.The map is an aid provided to the imagination through the eyes.Henri Abraham Châtelain, Atlas historique, 1705The map is not the territory.Alfred Korzybski, Science and Sanity, 1933What is information?In fact what is meant by information – the elementary unit ofinformation – is a difference that makes a difference.Gregory Bateson, Form, Substance and Difference, 1970 3
  4. 4. Henri Abraham Châtelain, Map of Canada or New France1719
  5. 5. 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
  6. 6. Towns and Roads in Roman Territory, 3rd Century
  7. 7. Maps & Diagrams | August 2012 |7
  8. 8. 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
  9. 9. England (left) and France (right), Pyrenees (bottom)
  10. 10. Erhard Etzlaub’s Romweg• 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. 11
  11. 11. Circles & Dots• 9 dots from Lubeck to Hamborg = 75 miles• 14 dots from Hamborg to Bremen = 126 miles
  12. 12. Cold War orientation of Europe and Asia (TIME Magazine 1952) 13
  13. 13. Holtzbrinck Web Map by Dynamic Diagrams (1999) UK German SwissNorth AustrianAmerica Australasia, S. America, Africa 14
  14. 14. LinkedIn InMap 16
  15. 15. The BushMoney Karl RoveMachine:Spheres ofInfluence(Wash. Post,2004)
  16. 16. Try to avoid connecting everything to everything… 18
  17. 17. Deforming space to present informationTurgot 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 19
  18. 18. My office
  19. 19. My office
  20. 20. Isometric + Picture Plane
  21. 21. Transportation networks: maps or diagrams?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 27
  22. 22. London Underground (1920)
  23. 23. London Underground (1933)
  24. 24. 31
  25. 25. The Real Underground (2004)• Animation created by Sam Rich for the London Transport Museum. 32
  26. 26. Eisenhower Interstate System: Realistic Geography 33
  27. 27. Eisenhower Interstate System by Chris Yates(2007) 34
  28. 28. INTERSTATE: THE U.S. Interstate System by CameronBooth (2010) 35
  29. 29. Metaphor MapsThe 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
  30. 30. Europe from the French perspective (1870) 37
  31. 31. Europe from the Germanperspective (1870) 38
  32. 32. Metaphor MapsFritz 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
  33. 33. 40
  34. 34. Man as Industrial Palace animated by HenningLederer 41
  35. 35. Invention of the TimelineJoseph Priestley’s invention of the timeline (1765) • History: alignment of cultures, categories and chronology • Biography: alignment of lifespan and chronologyAlfred Barr’s Art History (1935) • Timeline + influence vectors 42
  36. 36. geography/culture 43 time
  37. 37. geography/culture 44 time
  38. 38. Joseph Priestley: biographical timeline 45
  39. 39. 46
  40. 40. 47
  41. 41. Customer Journey Timeline 48
  42. 42. 49
  43. 43. Data Journalism:Olympics Race Against History (New York Times2012) 50
  44. 44. Techniques usedMetaphorOlympic pool as inverted data gridAlignmentSwimmer’s horizontal position = year of raceSwimmer’s vertical position = time converted to distance fromfastest finishInformation overlay on the data gridSpotlight on individual swimmer in lane (year)Time barriers as horizontal lines (1 minute, 48 seconds) 51
  45. 45. Contact Information Paul Kahn Experience Design Director pkahn@madpow.com Mad*Pow Portsmouth | Boston | Louisville www.madpow.com 52

×