Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
•
0 j'aime•594 vues
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
Recommandé
Contenu connexe
Tendances
Tendances (19)
En vedette
En vedette (17)
Similaire à Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
Similaire à Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn (20)
Plus de Mad*Pow
Plus de Mad*Pow (20)
Dernier
Dernier (20)
Maps, Diagrams and Timelines, Inspiration for Interactive Design - Webinar 2012 - Paul Kahn
- 1. Prepared by: Paul Kahn – Experience Design Director August 28, 2012 Mad*Pow Webinar Twitter: #madpow Maps, Diagrams and Timelines INSPIRATIONFORINTERACTIVEDESIGN
- 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. 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. Henri Abraham Châtelain, Map of Canada or New France 1719
- 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. Towns and Roads in Roman Territory, 3rd Century
- 7. Maps & Diagrams | August 2012 | 7
- 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. England (left) and France (right), Pyrenees (bottom)
- 11. 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.
- 12. Circles & Dots • 9 dots from Lubeck to Hamborg = 75 miles • 14 dots from Hamborg to Bremen = 126 miles
- 13. Cold War orientation of Europe and Asia (TIME Magazine 1952) 13
- 14. Holtzbrinck Web Map by Dynamic Diagrams (1999) 14 North America German Swiss Austrian UK Australasia, S. America, Africa
- 17. The Bush Money Machine: Spheres of Influence (Wash. Post, 2004) Karl Rove
- 19. 19 Try to avoid connecting everything to everything…
- 20. 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
- 24. My office
- 25. My office
- 27. Isometric + Picture Plane
- 28. 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
- 32. 32
- 33. The Real Underground (2004) • Animation created by Sam Rich for the London Transport Museum. 33
- 34. Eisenhower Interstate System: Realistic Geography 34
- 35. Eisenhower Interstate System by Chris Yates (2007) 35
- 36. INTERSTATE: THE U.S. Interstate System by Cameron Booth (2010) 36
- 37. 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
- 38. 38 Europe from the French perspective (1870)
- 39. 39 Europe from the German perspective (1870)
- 40. 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
- 41. 41
- 42. Man as Industrial Palace animated by Henning Lederer 42
- 43. 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
- 46. Joseph Priestley: biographical timeline 46
- 47. 47
- 48. 48
- 49. 49
- 50. Herbert Bayer, World Geographic Atlas (1953) 50
- 51. Data Journalism: Olympics Race Against History (New York Times 2012) 51
- 52. 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
- 53. Thank You! 53 Twitter: #madpow Paul Kahn pkahn@madpow.com @pauldavidkahn Contact Information
Notes de l'éditeur
- Some of these examples are centuries old, some are recent inventions. But regardless of when they were created the most effective are the ones that serves the user’s needs. All of them illustrate ways we can think about, visually manipulate and shape information to make our designs attractive and effective on any form of display, be it a large monitor or a small mobile phone.
- Châtelain, Henri Abraham, 1684-1743. Carte du Canada ou de la Nouvelle France & des découvertes qui y ont été faites, dressée sur les observations les plus nouvelles, & sur divers mémoires tant manuscrits qu'imprimez. -- Scale [ca. 1:12 000 000] (W 110º--W 40º/N 78º--N 39º). -- [Amsterdam : Chez Châtelain, 1719].1 map ; 41 x 53 cm.LOCATION: G3400 1719 C5 RBD Maphttp://digital.library.mcgill.ca/pugsley/Pugsmaps21-25.htmhttp://www.mapsofpa.com/antiquemaps21.htm1719.7 CARTE DU CANADA OU DE LA NOUVELLE FRANCE, & DES DECOUVERTES QUI Y ONT ETE FAITES, Dresseesur les observations les plus Nouvelles, & Sur divers Memoires tantManuscritsqu'imprimez, Tom. VI, No. 20, Pag:82; a map of Canada from Atlas Historique by Henri Abraham Chatelain published in Amsterdam circa 1719 (McCorkle #719.1). It includes virtually all of eastern Canada from Baffin Bay to Chesapeake Bay down to 39d, so all of Pennsylvania is included. A boundary line confines the English colonies to the sea coast; Pennsylvania, Maryland, New York, New Jersey, and New England are named, as well as Philadelphia. There are many other boundaries apparently separating Indian nations. The Great Lakes have their present names except Michigan, which is called "Lac de Ilinois." The map extends west to include the upper Mississippi. An inset at upper left gives some "Remarque Historique," naming Verrazzano, Cartier, la Salle, among others. This image shows only the lower half of the map that includes Pennsylvania. Blank verso, longitude apparently east from Ferro. Scale: 1 inch = 220 miles. Size: 16 x 20 inches. http://www.mapsofpa.com/18thcentury/1719chatelain.jpg
- This contemporary map shows the area of the Roman world represented on the Peutinger table.The colored dots show the large number of locations recorded on the map, and the lines show the roads represented.To represent this area in a portable format, something that could be easily folded and unfolded by an overland traveler, (click) space is compressed into a chart that 21 feet long (click) but only 1 foot wide.This is done by essentially removing the space covered by water – of no interest to a person traveling by land – and reducing the space between the network of roads.
- Click: Here is Canterbury in Southern England separated from the Continent by narrow water.Click: Here is Rennes in Brittany. The dark narrow water below this is the French coast folded up to better show the road and river network.Click: Here is Toulouse in the South of France.Click: Since there are no roads or destinations in the Mediterranean, the sea is a narrow band. And here is Dellys on the Algerian coast.
- Distance from Lubeck to Hamborg = 75 miles = 9 dotsDistance from Hamborg to Bremen = 126 miles = 14 dots
- Network cloudLayout pulls together nodes with most connectionsAlgorithm produces “groups” represented by colorSize of node = number of connectionsEmphasis on border conditions
- “When we understand that slide, we’ll have won the war.”Gen. Stanley A. McChrystal, the leader of American and NATO forces in Afghanistan, April 26, 2010
- We begin thinking about the patterns and elements that we’ll need to create our experiences.
- When placed on a grid or a carpet, Gestalt principles bring individual elements into a cohesive whole. Aligned and grouped items are linked without the need for additional lines.Groups are established by color and proximity on the grid.
- The design can combine different scales and perspectives for different kinds of information.