Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn

496 views

Published on

The map, the diagram and the timeline are an integral part of our interactive design vocabulary. As we confront our next User Experience and Interactive Design assignments, where can we turn for inspiration? What are the information design principles and techniques that great maps and diagrams share? Where did these principles come from? Experience Design Director, Paul Kahn tells all!

Check out the full presentation on Vimeo: bit.ly/OjVsgG

Published in: Design, Spiritual, Education
  • Be the first to comment

  • Be the first to like this

Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn

  1. 1. Prepared by: Paul Kahn – Experience Design Director August 28, 2012 Mad*Pow Webinar Twitter: #madpow Maps, Diagrams and Timelines INSPIRATIONFORINTERACTIVEDESIGN
  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? 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?
  4. 4. Henri Abraham Châtelain, Map of Canada or New France 1719
  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 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.
  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) 14 North America German Swiss Austrian UK Australasia, S. America, Africa
  14. 14. LinkedIn InMap 16
  15. 15. The Bush Money Machine: Spheres of Influence (Wash. Post, 2004) Karl Rove
  16. 16. Vizify visual biography 18
  17. 17. 19 Try to avoid connecting everything to everything…
  18. 18. Deforming space to present information 20 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
  19. 19. My office
  20. 20. My office
  21. 21. Isometric + Picture Plane
  22. 22. Transportation networks: maps or diagrams? 28 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
  23. 23. London Underground (1920)
  24. 24. London Underground (1933)
  25. 25. 32
  26. 26. The Real Underground (2004) • Animation created by Sam Rich for the London Transport Museum. 33
  27. 27. Eisenhower Interstate System: Realistic Geography 34
  28. 28. Eisenhower Interstate System by Chris Yates (2007) 35
  29. 29. INTERSTATE: THE U.S. Interstate System by Cameron Booth (2010) 36
  30. 30. 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 37
  31. 31. 38 Europe from the French perspective (1870)
  32. 32. 39 Europe from the German perspective (1870)
  33. 33. 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 40
  34. 34. 41
  35. 35. Man as Industrial Palace animated by Henning Lederer 42
  36. 36. 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 Herbert Bayer’s diagram of the universe (1953) • Cosmology, geology, biology in a single diagram • Spirals, lines, flows and trees 43
  37. 37. 44 time geography/culture
  38. 38. 45 time geography/culture
  39. 39. Joseph Priestley: biographical timeline 46
  40. 40. 47
  41. 41. 48
  42. 42. 49
  43. 43. Herbert Bayer, World Geographic Atlas (1953) 50
  44. 44. Data Journalism: Olympics Race Against History (New York Times 2012) 51
  45. 45. 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) 52
  46. 46. Thank You! 53 Twitter: #madpow Paul Kahn pkahn@madpow.com @pauldavidkahn Contact Information

×