Neuroscience and Information Design

Idea Journal #3

Can Neuroscience Reveal The Formula For Good Design?

Many have always held true to the idea that design involves many imperceptible qualities and ideas that are unique to each designer, but Dutch designer Merel Bekking has a different theory. She’s come up with an experiment to find the “perfect” design by scanning people’s brains to determine the aesthetic qualities they respond most favourably to.

In collaboration with scientists in Amsterdam, Bekking used an MRI scanner to determine people’s preferences when it comes to shape, colour and material. 20 volunteers were shown 252 images which consisted of five different textures: wood, paper, plastic, steel and stone. They were then exposed to eight shapes: round, organic, square and rectangular, presented open or closed. Finally, they were shown ten colours and four different types of paintings that depicted various scenes.

Of all the various combinations; the results showed that our brains respond most positively to objects that are red, plastic and formed in closed organic shapes. Bekking added that the results were surprising because they contradicted what individuals thought they liked. “It shows that design is subject to context and that people think they like something, but maybe they prefer to give socially desirable answers,” she explained.


Neuroscience

Neuroscientists focus on the brain and its impact on behavior and cognitive (thinking) functions. They also investigate what happens to the nervous system when people have neurological, psychiatric, and neurodevelopmental disorders.

The history of neuroscience

The ancient Egyptians thought the seat of intelligence was in the heart. Because of this belief, during the mummification process, they would remove the brain but leave the heart in the body.

The earliest writings on the brain were found in the 1700 BC Edwin Smith Surgical Papyrus. The word “brain” is mentioned eight times when describing the symptoms, diagnosis, and likely outcomes of two people who had head wounds — compound fractures of the skull.

Alcmaeon (Around 500 BC) — varying views on the brain began to emerge in Ancient Greece. Alcmaeon, believed to be a student of Pythagoras, wrote that the brain is where the mind is; he was probably the first person in history to express the idea in writing. Hippocrates soon followed, saying the brain is the seat of intelligence.

Aristotle (384–322 BC) — a Greek philosopher and polymath, went slightly off the mark by saying that the brain is a blood-cooling mechanism and that the heart is the seat of intelligence. He argued that humans behave more rationally than animals because our larger brains cool down hot blood, thus preventing hot-bloodedness.

Herophilus and Erasistratus (circa 300–240 BC) — Herophilus of Calcedonia, a Greek physician, and Erasistratus of Ceos, a Greek anatomist and royal physician, are known to have made considerable contributions to brain and nervous system anatomy. Unfortunately, their writings were lost — we only know about their contributions through secondary sources.

Galen of Pergamon (129–200) — a Greek anatomist who worked in Rome, said that the cerebrum was where the senses were processed because it is soft, while the cerebellum controls muscles because it is denser than the brain.

The invention of the microscope allowed for new research in many branches of science.

The microscope (1590s) — probably invented in the Netherlands in 1590, allowed for a much deeper understanding of the brain.

Golgi (1843–1926) — During the late 1980s, Gamillo Golgi an Italian physician, pathologist, and scientist, used silver chromate salt to show what single neurons looked like.

Santiago Ramón y Cajal (1852–1934) — a Spanish pathologist, histologist, and neuroscientist, took Golgi’s work further and formed the neuron doctrine: a hypothesis that the neuron is the functional unit of the brain. In 1906, Golgi and Cajal were jointly awarded the Nobel Prize in Physiology or Medicine for their extensive works and categorizations of neurons in the brain.

Hermann von Hemholtz (1821–1894) — toward the end of the 19th century, von Hemholtz, a German physician and physicist, with a group of other scientists, demonstrated the electrical excitability of neurons, and how the electrical state of neighboring neurons were affected by an electrically stimulated neuron.

Pierre Paul Broca (1824–1880) — a French physician, surgeon, anatomist, and anthropologist, worked on patients who had brain damage. He came to the conclusion that different regions in the brain were involved in specific functions.

John Hughlings Jackson (1835–1911) — an English neurologist, through observations of patients with epilepsy, worked out how the motor cortex was organized while watching seizure progression through the body.

Carl Wernicke (1848–1905) — a German physician, anatomist, psychiatrist, and neuropathologist, believed that certain parts of the brain were responsible for understanding and uttering language.

Neuroscience during the twentieth century and today

From the 1950s onward, the scientific study of the nervous system made huge advances, mainly because of the progress achieved in other and related fields, such as computational neuroscience, electrophysiology, and molecular biology.

Neuroscientists were able to study the nervous system’s structure, functions, development, abnormalities, and ways it can be altered.

The major branches of modern neuroscience

The following branches of neuroscience can be broadly categorized in the following disciplines (neuroscientists usually cover several branches at the same time):

Neuroimaging is used by medical professionals to diagnose and monitor brain conditions.

  • Affective neuroscience — in most cases, research is carried out on laboratory animals and looks at how neurons behave in relation to emotions.
  • Behavioral neuroscience — the study of the biological bases of behavior. Looking at how the brain affects behavior.
  • Cellular neuroscience — the study of neurons, including their form and physiological properties at cellular level.
  • Clinical neuroscience — looks at the disorders of the nervous system, while psychiatry, for example, looks at the disorders of the mind.
  • Cognitive neuroscience — the study of higher cognitive functions that exist in humans, and their underlying neural basis. Cognitive neuroscience draws from linguistics, psychology, and cognitive science. Cognitive neuroscientists can take two broad directions: behavioral/experimental or computational/modeling, the aim being to understand the nature of cognition from a neural point of view.
  • Computational neuroscience — attempting to understand how brains compute, using computers to simulate and model brain functions, and applying techniques from mathematics, physics, and other computational fields to study brain function.
  • Cultural neuroscience — looks at how beliefs, practices, and cultural values are shaped by and shape the brain, minds, and genes over different periods.
  • Developmental neuroscience — looks at how the nervous system develops on a cellular basis; what underlying mechanisms exist in neural development.
  • Molecular neuroscience — the study of the role of individual molecules in the nervous system.
  • Neuroengineering — using engineering techniques to better understand, replace, repair, or improve neural systems.
  • Neuroimaging — a branch of medical imaging that concentrates on the brain. Neuroimaging is used to diagnose disease and assess the health of the brain. It can also be useful in the study of the brain, how it works, and how different activities affect the brain.
  • Neuroinformatics — integrates data across all areas of neuroscience, to help understand the brain and treat diseases. Neuroinformatics involves acquiring data, sharing, publishing, and storing information, analysis, modeling, and simulation.
  • Neurolinguistics — studying what neural mechanisms in the brain control the acquisition, comprehension, and utterance of language.
  • Neurophysiology — looks at the relationship of the brain and its functions, and the sum of the body’s parts and how they interrelate. The study of how the nervous system functions, typically using physiological techniques, such as stimulation with electrodes, light-sensitive channels, or ion- or voltage-sensitive dyes.
  • Paleoneurology — the study of ancient brains using fossils.
  • Social neuroscience — this is an interdisciplinary field dedicated to understanding how biological systems implement social processes and behavior. Social neuroscience gathers biological concepts and methods to inform and refine theories of social behavior. It uses social and behavioral concepts and data to refine neural organization and function theories.
  • Systems neuroscience — follows the pathways of data flow within the CNS (central nervous system) and tries to define the kinds of processing going on there. It uses that information to explain behavioral functions.

To investigate recent developments in the fields of neuroscience, visit the Medical News Today neuroscience section.


Neuroscience and Design Thinking

IDEO

Design Kit PDF



Information design and the brain



D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Introduction

Read more tutorials.

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of official and community-developed modules.

#Selections

Read more about selections.

Modifying documents using the W3C DOM API is tedious: the method names are verbose, and the imperative approach requires manual iteration and bookkeeping of temporary state. For example, to change the text color of paragraph elements:

var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "white", null);
}

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, you can rewrite the above loop as:

d3.selectAll("p").style("color", "white");

Yet, you can still manipulate individual nodes as needed:

d3.select("body").style("background-color", "black");

Selectors are defined by the W3C Selectors API and supported natively by modern browsers. The above examples select nodes by tag name ("p" and "body", respectively). Elements may be selected using a variety of predicates, including containment, attribute values, class and ID.

D3 provides numerous methods for mutating nodes: setting attributes or styles; registering event listeners; adding, removing or sorting nodes; and changing HTML or text content. These suffice for the vast majority of needs. Direct access to the underlying DOM is also possible, as each D3 selection is simply an array of nodes.

#Dynamic Properties

Readers familiar with other DOM frameworks such as jQuery should immediately recognize similarities with D3. Yet styles, attributes, and other properties can be specified as functions of data in D3, not just simple constants. Despite their apparent simplicity, these functions can be surprisingly powerful; the d3.geoPath function, for example, projects geographic coordinates into SVG path data. D3 provides many built-in reusable functions and function factories, such as graphical primitives for area, line and pie charts.

For example, to randomly color paragraphs:

d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

To alternate shades of gray for even and odd nodes:

d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});

Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (d) to selection functions. With the default join-by-index, the first element in the data array is passed to the first node in the selection, the second element to the second node, and so on. For example, if you bind an array of numbers to paragraph elements, you can use these numbers to compute dynamic font sizes:

d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });

Once the data has been bound to the document, you can omit the data operator; D3 will retrieve the previously-bound data. This allows you to recompute properties without rebinding.

#Enter and Exit

Read more about data joins.

Using D3’s enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.

When data is bound to a selection, each element in the data array is paired with the corresponding node in the selection. If there are fewer nodes than data, the extra data elements form the enter selection, which you can instantiate by appending to the enter selection. For example:

d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });

Updating nodes are the default selection — the result of the data operator. Thus, if you forget about the enter and exit selections, you will automatically select only the elements for which there exists corresponding data. A common pattern is to break the initial selection into three parts: the updating nodes to modify, the entering nodes to add, and the exiting nodes to remove.

// Update…
var p = d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();

By handling these three cases separately, you specify precisely which operations run on which nodes. This improves performance and offers greater control over transitions. For example, with a bar chart you might initialize entering bars using the old scale, and then transition entering bars to the new scale along with the updating and exiting bars.

D3 lets you transform documents based on data; this includes both creating and destroying elements. D3 allows you to change an existing document in response to user interaction, animation over time, or even asynchronous notification from a third-party. A hybrid approach is even possible, where the document is initially rendered on the server, and updated on the client via D3.

#Transformation, not Representation

D3 does not introduce a new visual representation. Unlike Processing or Protovis, D3’s vocabulary of graphical marks comes directly from web standards: HTML, SVG, and CSS. For example, you can create SVG elements using D3 and style them with external stylesheets. You can use composite filter effects, dashed strokes and clipping. If browser vendors introduce new features tomorrow, you’ll be able to use them immediately — no toolkit update required. And, if you decide in the future to use a toolkit other than D3, you can take your knowledge of standards with you!

Best of all, D3 is easy to debug using the browser’s built-in element inspector: the nodes that you manipulate with D3 are exactly those that the browser understands natively.

#Transitions

D3’s focus on transformation extends naturally to animated transitions. Transitions gradually interpolate styles and attributes over time. Tweening can be controlled via easing functions such as “elastic”, “cubic-in-out” and “linear”. D3’s interpolators support both primitives, such as numbers and numbers embedded within strings (font sizes, path data, etc.), and compound values. You can even extend D3’s interpolator registry to support complex properties and data structures.

For example, to fade the background of the page to black:

d3.select("body").transition()
.style("background-color", "black");

Or, to resize circles in a symbol map with a staggered delay:

d3.selectAll("circle").transition()
.duration(750)
.delay(function(d, i) { return i * 10; })
.attr("r", function(d) { return Math.sqrt(d * scale); });

By modifying only the attributes that actually change, D3 reduces overhead and allows greater graphical complexity at high frame rates. D3 also allows sequencing of complex transitions via events. And, you can still use CSS3 transitions; D3 does not replace the browser’s toolbox, but exposes it in a way that is easier to use.

Show your support

Clapping shows how much you appreciated Pedram Rafie’s story.