|
|
|
@@ -0,0 +1,287 @@ |
|
|
|
<!doctype html><!-- This is a valid HTML5 document. --> |
|
|
|
<!-- Screen readers, SEO, extensions and so on. --> |
|
|
|
<html lang="fr"> |
|
|
|
<!-- Has to be within the first 1024 bytes, hence before the <title> |
|
|
|
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> |
|
|
|
<!-- The viewport meta is quite crowded and we are responsible for that. |
|
|
|
See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> |
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|
|
|
<!-- Required to make a valid HTML5 document. --> |
|
|
|
<title>Clues for software design in how we sketch maps of cities (archive) — David Larlet</title> |
|
|
|
<meta name="description" content="Publication mise en cache pour en conserver une trace."> |
|
|
|
<!-- That good ol' feed, subscribe :). --> |
|
|
|
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> |
|
|
|
<!-- Generated from https://realfavicongenerator.net/ such a mess. --> |
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> |
|
|
|
<link rel="manifest" href="/static/david/icons2/site.webmanifest"> |
|
|
|
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> |
|
|
|
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> |
|
|
|
<meta name="msapplication-TileColor" content="#f0f0ea"> |
|
|
|
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> |
|
|
|
<meta name="theme-color" content="#f0f0ea"> |
|
|
|
<!-- Documented, feel free to shoot an email. --> |
|
|
|
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> |
|
|
|
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<script> |
|
|
|
function toggleTheme(themeName) { |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-dark', |
|
|
|
themeName === 'dark' |
|
|
|
) |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-light', |
|
|
|
themeName === 'light' |
|
|
|
) |
|
|
|
} |
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme !== 'undefined') { |
|
|
|
toggleTheme(selectedTheme) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow"> |
|
|
|
<meta content="origin-when-cross-origin" name="referrer"> |
|
|
|
<!-- Canonical URL for SEO purposes --> |
|
|
|
<link rel="canonical" href="https://interconnected.org/home/2021/03/31/maps"> |
|
|
|
|
|
|
|
<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"> |
|
|
|
|
|
|
|
<article> |
|
|
|
<header> |
|
|
|
<h1>Clues for software design in how we sketch maps of cities</h1> |
|
|
|
</header> |
|
|
|
<nav> |
|
|
|
<p class="center"> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="https://interconnected.org/home/2021/03/31/maps" title="Lien vers le contenu original">Source originale</a> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">There’s a remarkably simple notation for sketching cities, and I think it points at a better way to design software.</p> |
|
|
|
|
|
|
|
<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">A notation for describing a city</h3> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Kevin Lynch was <q>an urban planner who carried out pioneering work on people’s urban cognitive maps from the 1950s.</q></p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">And:</p> |
|
|
|
|
|
|
|
<blockquote class="bl bw1 pl2 b--light-red ml0 italic i"> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">As a planner, Lynch was interested in analysing the urban form, and in particular identified the criterion of the ‘legibility’ of a cityscape which he defined as ” the ease with which its parts can be recognized and can be organized into a coherent pattern”</p> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">… His method involved externalising the ‘mental images’ that city-dwellers have of their cities, through interviews and sketch-mapping exercises.</p> |
|
|
|
</blockquote> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">(From these <a href="http://homepages.phonecoop.coop/vamos/work/lecturenotes/sun/LectureNotes/Env4_EnvCog/environmental9.html">lecture notes on the work of Kevin Lynch</a>.)</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">This shared “mental images” is the subject of Lynch’s book <a href="https://en.wikipedia.org/wiki/The_Image_of_the_City">The Image of City</a> (1960) (and it blew my mind when I read it in - checks notes - 2003).</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80"><strong><a href="https://www.researchgate.net/figure/Lynchs-mental-maps_fig2_309728517">Here’s an example of one of Lynch’s maps: Boston.</a></strong></p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">What you’ll see from that map is that it’s totally recognisable as a city, and you could totally use it to navigate, but it’s also what you would scribble on the back of a napkin. It’s also way more memorable. If you gave me a glimpse of Boston from Google Maps and asked me to sketch it for someone else, I can’t imagine it would include any of the salient details. But given a Lynch map, I bet I could pass on the most relevant bare bones, just from memory.</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">So Lynch has managed to capture what is essential about maps for (a) understanding, and (b) communication.</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Lynch’s insight is that these scribbled maps use a notation of only five elements. From those earlier lecture notes, there are:</p> |
|
|
|
|
|
|
|
<ul class="list ph0 ph0-ns bulleted-list"> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">Paths: <q>They may be streets, walkways, transit lines, canals, railroads.</q></li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">Edges: <q>They are the boundaries … shores, railroad cuts, edges of development, walls.</q></li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">Districts: <q>Districts are the medium-to-large sections of the city … which the observer mentally enters “inside of”.</q></li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">Nodes: <q>They may be primarily junctions, places of a break in transportation, a crossing or convergence of paths … [or] a street-corner or an enclosed square.</q></li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">Landmarks: <q>They are usually a rather simply defined physical object: building, sign, store, or mountain. Their use involves the singling out of one element from a host of possibilities.</q></li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Out of these five elements, you can build an “image” (in Lynch’s terminology) of the city.</p> |
|
|
|
|
|
|
|
<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Do Lynch’s elements have a neurological underpinning?</h3> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Landmarks</em> grab my attention, for this reason: they come up in <em>Mind Hacks,</em> in a chapter about memory and the hippocampus.</p> |
|
|
|
|
|
|
|
<blockquote cite="https://www.google.co.uk/books/edition/Mind_Hacks/K6bjvFUcedgC" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Mind Hacks" data-title="Hack #89: Navigate Your Way Through Memory (p304)"> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">We know that the human brain has specialized mechanisms dedicated to remembering landmarks, and that (interestingly) this region and those nearby seem to be responsible for giving humans and other animals a sense of where they are in space. Brain images of people navigating through virtual environments has shown that <u>even if we don’t consciously recognize something as a landmark it still triggers a response in this specialized part of the brain.</u></p> |
|
|
|
|
|
|
|
</blockquote> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80"><em>(Quick plug: <a href="https://item.jd.com/13054358.html">Mind Hacks is now available in Chinese!</a> Check out the 11 second product video with perky music on that page. That brings us up to 7 translated editions, which feels pretty special.)</em></p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">So what I find intriguing is that we, us humans, appear to have a “landmark sense” that we all share.</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Which is why, I guess, you can follow directions to go down the street and turn left at the fountain, and if you pass a cathedral then you know you’ve gone the wrong way – because such a landmark would certainly have been mentioned.</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">The question is this:</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Do Lynch’s other elements also have neurological underpinnings?</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">And a follow up: If so, how could that be useful?</p> |
|
|
|
|
|
|
|
<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Your memory resets when you walk through a door</h3> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">The reason I ask is because of the Doorway Effect, which is something that happens also in physical space and not outdoors but indoors: <q>Memory was worse after passing through a doorway than after walking the same distance within a single room.</q></p> |
|
|
|
|
|
|
|
<blockquote cite="https://www.scientificamerican.com/article/why-walking-through-doorway-makes-you-forget/" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Scientific American" data-title="Why Walking through a Doorway Makes You Forget"> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">… some forms of memory seem to be optimized to keep information ready-to-hand until its shelf life expires, and then purge that information in favor of new stuff. Radvansky and colleagues call this sort of memory representation an “event model,” and propose that walking through a doorway is a good time to purge your event models because whatever happened in the old room is likely to become less relevant now that you have changed venues.</p> |
|
|
|
|
|
|
|
</blockquote> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">What’s especially intriguing about this study…</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">The Doorway Effect appears for real doorways. But ALSO: <q>It doesn’t seem to matter, for instance, whether the virtual environments are displayed on a 66” flat screen or a 17” CRT.</q></p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">So, to review the precarious stack of speculation that I’m on:</p> |
|
|
|
|
|
|
|
<ul class="list ph0 ph0-ns bulleted-list"> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">there are shared neurological underpinnings for how we understand space, and - in theory - an abstract system of space “elements”</li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">in at least one situation, there is a correlation between how we move through space and how we mentally organise information</li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">“moving through space” doesn’t need to be physical, but can be triggered by abstract representations.</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Which provokes two thoughts:</p> |
|
|
|
|
|
|
|
<ol> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">If landmarks and doorways, then what is the full set of elements, and are there automatic memory operations for all of them?</li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">How abstract can these spatial representations be, and can we use them in software?</li> |
|
|
|
</ol> |
|
|
|
|
|
|
|
<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">What should Wikipedia or Notion do?</h3> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Given there’s an explosion in software to accrete and organise knowledge, is the page model really the best approach?</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Perhaps the building blocks shouldn’t be pages or blocks, but</p> |
|
|
|
|
|
|
|
<ul class="list ph0 ph0-ns bulleted-list"> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">neighbourhoods</li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">roads</li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">rooms and doors</li> |
|
|
|
<li class="measure-wide f6 f5-l lh-copy black-80">landmarks.</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Or rather, as a knowledge base or wiki develops, it should - just like a real city - encourage its users to gravitate towards these different fundamental elements. A page that starts to function a little bit like a road should transform into a slick navigation element, available on all its linked pages. A page which is functioning like a landmark should start being visible from two hops away.</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">It would be interesting to investigate exactly what the minimal level of physical appearance is required to trigger the automatic behaviour of loading/resetting human memory and associations.</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Like, following a hyperlink might not activate the neurological automation.</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">But what if there was a zooming out animation, or a change in colour, or the old page slid off to the side?</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">What’s the minimum you need to trick your brain into believing that you’re moving around an environment?</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">And could design features as simple as these make tools like Notion, Roam, Obsidian, Evernote and other note taking software, Wikipedia, etc, <em>radically better</em> for organising, navigating, sharing, and internalising knowledge, for individuals and for teams? If so, can you imagine the efficiency gains and the new ideas that could emerge?</p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80"><em>Hippocampus ergonomics.</em></p> |
|
|
|
|
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">It would be worth a research lab and a year or two, I think.</p> |
|
|
|
|
|
|
|
<p><hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white"> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">One final and quite literal idea: Could Lynch-style maps be generated automatically, and could this be an interface to Google Maps?</p> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">This paper believes this is possible: <a href="https://www.sciencedirect.com/science/article/pii/S0264275118309776">A computational approach to ‘The Image of the City’.</a></p> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Although: <q>Out of the five elements, landmarks were found most challenging to extract.</q></p> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">My guess is that landmarks can’t be extracted from maps because they’re reliant on the visual field, approaches, other nearby potential landmarks, and so on. You would need to train an artificial landmark sensor in a machine hippocampus, perhaps giving it access to Street View and getting feedback data from humans on the spot asked to point at their nearest landmark.</p> |
|
|
|
<p class="measure-wide f6 f5-l lh-copy black-80">Computationally producing Lynch maps would also allow for the <em>reverse</em> process, which is to give a robot car directions in the same way you would a person: down the street, left at the big building, follow it till the end and we’re the second on the left.</p></p> |
|
|
|
</article> |
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<footer> |
|
|
|
<p> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use> |
|
|
|
</svg> RSS</a> • |
|
|
|
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use> |
|
|
|
</svg> Pro</a> • |
|
|
|
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use> |
|
|
|
</svg> Email</a> • |
|
|
|
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use> |
|
|
|
</svg> Légal</abbr> |
|
|
|
</p> |
|
|
|
<template id="theme-selector"> |
|
|
|
<form> |
|
|
|
<fieldset> |
|
|
|
<legend><svg class="icon icon-brightness-contrast"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use> |
|
|
|
</svg> Thème</legend> |
|
|
|
<label> |
|
|
|
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="light" name="chosen-color-scheme"> Clair |
|
|
|
</label> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</template> |
|
|
|
</footer> |
|
|
|
<script> |
|
|
|
function loadThemeForm(templateName) { |
|
|
|
const themeSelectorTemplate = document.querySelector(templateName) |
|
|
|
const form = themeSelectorTemplate.content.firstElementChild |
|
|
|
themeSelectorTemplate.replaceWith(form) |
|
|
|
|
|
|
|
form.addEventListener('change', (e) => { |
|
|
|
const chosenColorScheme = e.target.value |
|
|
|
localStorage.setItem('theme', chosenColorScheme) |
|
|
|
toggleTheme(chosenColorScheme) |
|
|
|
}) |
|
|
|
|
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme && selectedTheme !== 'undefined') { |
|
|
|
form.querySelector(`[value="${selectedTheme}"]`).checked = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const prefersColorSchemeDark = '(prefers-color-scheme: dark)' |
|
|
|
window.addEventListener('load', () => { |
|
|
|
let hasDarkRules = false |
|
|
|
for (const styleSheet of Array.from(document.styleSheets)) { |
|
|
|
let mediaRules = [] |
|
|
|
for (const cssRule of styleSheet.cssRules) { |
|
|
|
if (cssRule.type !== CSSRule.MEDIA_RULE) { |
|
|
|
continue |
|
|
|
} |
|
|
|
// WARNING: Safari does not have/supports `conditionText`. |
|
|
|
if (cssRule.conditionText) { |
|
|
|
if (cssRule.conditionText !== prefersColorSchemeDark) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} |
|
|
|
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) |
|
|
|
} |
|
|
|
|
|
|
|
// WARNING: do not try to insert a Rule to a styleSheet you are |
|
|
|
// currently iterating on, otherwise the browser will be stuck |
|
|
|
// in a infinite loop… |
|
|
|
for (const mediaRule of mediaRules) { |
|
|
|
styleSheet.insertRule(mediaRule.cssText) |
|
|
|
hasDarkRules = true |
|
|
|
} |
|
|
|
} |
|
|
|
if (hasDarkRules) { |
|
|
|
loadThemeForm('#theme-selector') |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
