Data visualisation "gurus" promote the importance of keeping things simple. They remind us that our primary purpose is to communicate. They deride the use of flashy, over complicated devices which are intended to impress. Then, with no sense of irony, many devote sections of their books to "The Gestalt Laws of Perception" (or variant phrasings of this).
I wasn't sure what to make of this at first. It reminded me a bit of advertisements which use the device of a man in a white coat to imply that the effectiveness of a product is scientifically proven.
So what relevance does "Gestalt" have to the design of business intelligence dashboards?
Firstly "Gestalt" itself is a branch of Psychology. It is usually said to have been founded by Max Wertheimer (1880-1943), Wolfgang Kohler (1887-1967) and Kurt Koffka (1886-1941) although earlier influences are also cited.
The word "gestalt" is German, translating roughly as "shape" or "form" or "pattern". Gestalt Psychology is interested in how an overall whole is perceived. A therapeutic approach has been developed out of this. But it is the insights into the cognitive processes of perception that interest us for design purposes.
The recognition of the "phi phenomenon" (by Max Wertheimer around 1912) was an early element in the development of Gestalt ideas.
Switching a series of static lights on and off in succession can create the appearance of movement.The animated gif image illustrates this. Sixteen individual "lights" have been set to go on and off in sequence. Our brains interpret the pattern as a single dot moving in a circle.
This is the basis of animation. The zoetrope and other similar 19th century inventions use this effect.
The tagline of Gestalt - a quotation from Kurt Koffka - is that "the whole is other than the sum of the parts" (this is different to the sometimes misquoted "the whole is greater than the sum of its parts", which is a definition of synergy)
The Gestalt Psychologists went on to define a set of "Principles" or "Laws" of Visual Perception. Both these words sound a little grandiose to me so I prefer to call them "effects". While worrying about words, it is also worth noting that the terminology used to describe the effects varies a bit between different writers. There is even some inconsistency regarding how many "laws" there actually are. None of this really matters. It is the visual effects described that we need to understand. The vocabulary is secondary.
Similarity
This is the effect in which similar things are perceived to be related.
Distinctions can be based on different attributes including colour, intensity, shape, orientation, size
Proximity
This is the effect in which things which are close together are perceived to be related
Connection
This is the effect in which things that are connected are perceived as being related
Enclosure
This is the effect in which things which are enclosed are perceived as being related.
This effect is sometimes alternatively called the law or principle of "segregation" or of "common regions".
In the illustration, the enclosure is achieved using a line. It can also be achieved in other ways, for example with a contrasting background tint.
Common fate
This is the effect, also called "synchrony", in which elements moving in the same direction are perceived as being more related than elements that are stationary or that move in different directions.
This effect obviously makes sense in animated figures rather than in static ones.
Experience
In the illustration, the enclosure is achieved using a line. It can also be achieved in other ways, for example with a contrasting background tint.
Common fate
This is the effect, also called "synchrony", in which elements moving in the same direction are perceived as being more related than elements that are stationary or that move in different directions.
This effect obviously makes sense in animated figures rather than in static ones.
Experience
This is the effect in which our past experience directs our perceptions. Having had our attention drawn to the same block of 9 squares in the preceding five illustrations, we look to these squares again for a relationship (even though in this case there is nothing different about them).
This effect is not one of the original Gestalt "laws" as such but it is important.
Experience can be that created within our interaction with the dashboard, report or presentation itself. It can also be shaped by context, such as the "house style" of an organisation or the conventions of a culture.
In addition to all of these, our unique individual life experiences will also come into play. We are more likely to recognize something if we have seen it before.
Continuation
This is the effect in which things arranged in a line are perceived as being related
Addition of two sets of squares either side of the original figure creates the impression of a continuous line through it
Closure
This is the effect in which we tend to fill in the gaps to complete shapes.
(see K.Koffka, Principles of Gestalt Psychology (1935) p.167)
Stronger examples, often used by other writers, are provided by the triangle illusion first produced by Gaetano Kanizsa in 1955 or the well known panda image used in the more recent WWF logo
This is the effect, usually referred to as "figure/ground relationship", in which we try to resolve things as being either objects or background. In the left hand illustration we probably resolve the image as being a dark grey square (the object) on a paler background.
The second image is able to be resolved the other way round i.e. into a large grey square with a small square hole in it. The overall structure of the two illustrations is the same. The fact that the overall page has the same background colour as the little square which influences our perception.
This effect is less predictable than the previous ones. There can be what is sometimes called "unstable" resolution in which the perception switches to and fro between two different versions. The work of M.C.Escher provides many examples where this is entertaining when done deliberately. Accidentally creating this effect, however, runs the risk of becoming distracting.
OK....so what?
Most of the "Gestalt" effects described above are very familiar. We understand them intuitively. When written down, or otherwise presented back to us, they can seem like a statement of the obvious.
Why, then, do we often appear unaware of them when designing our tables, graphs and dashboards?
Probably this is partly because our design decisions can be influenced by other strong factors too, such as the desire to impress (egocentricity) , assumptions about how things are supposed to look (conformity), or the default settings in Excel (popularism)
It is partly also because the interplay between the different effects is not so immediately obvious. There is a loose hierarchy based on the relative strength of the effects in combination:
Proximity is generally stronger than Similarity
Connection is generally stronger than Proximity and Similarity
Enclosure is generally stronger than Connection, Proximity and Similarity
Closure can be stronger than Proximity
The individual effects can also be applied in different intensities. This can have an impact on their interplay.
Once you understand the nature and interplay between these effects you can use them to create deliberate visual hierarchies. These will ensure that the information stands out appropriately in your tables, graphs and dashboards.
This understanding will also help avoid situations where the wrong choices result in things being harder to read than they need be.
The various books and articles listed below contain useful examples and further discussion.
So where did I used to go wrong?
When I look back now at some things that I used to do I can see I was often applying some quick formatting - particularly to tables - which was inharmonious. At the time I probably thought I was making the table (whether in Excel or Word) look "smart" and "professional". I allowed the apparent neatness to obscure the fact that I was making it harder work for the reader.
A typical example would have been to apply a "hierarchy" of thick and thin boxes to the entire table something like:
In terms of the Gestalt effects, I can see that I have used Enclosure - one of the strongest effects - around practically every cell in the table.
With the Gestalt effects in mind, and removing the over-precision in the data, the following is an alternative view of the same table:
This may not be to everybody's taste - possibly not even to mine - but it does illustrate how some Gestalt effects can be employed.
The "zebra stripes" use Similarlity (or arguably a form of Enclosure) to group individual month data together. Some purists would argue against "zebra stripes", saying that the use of white space between the rows can achieve as good an effect. I'm not entirely convinced
Proximity is used to group the four Expenditure columns together. This is further enhanced by the use of the horizontal line over the sub-headings, which is a form of Connection. The subheadings are further joined to their data through the Continuity effect. Similarity of font size is used to distinguish the three Expenditure subheadings from the Expenditure Total and the other columns.
By toning the base font colour down from black to gray, I can then use black for emphasis. The contrasts allow the "bad" month to stand out clearly (I am wanting to draw attention to this)
The table does not need a box drawn around it as the Closure effect already defines it as a block
References and further reading
Principles of Gestalt Psychology, K.Koffka, 1935. This is a substantial work by one of the founders of the Gestalt movement. It can be found online. Most dashboard designers will probably skip this one.
Information Visualization. Perception for Design, Second Edition, Colin Ware, Elsevier. 2004. This is a detailed and wide-ranging book. Gestalt laws are covered in the section "Static and Moving Patterns" starting at page 189.
Now You See It: Simple Visualization Techniques for Quantitative Analysis, Stephen Few, Analytics Press, 2009. A very good book generally. It is more focussed on "pre-attentive attributes" than on Gestalt effects per se.
Show Me the Numbers: Designing Tables and Graphs to Enlighten, Second Edition, Stephen Few, Analytics Press, 2012.
Chapter 5 covers "Visual Perception and Graphical Communication" and the Gestalt principles are discussed explicitly in pages 80-5.
See also link for a short discussion on visual hierarchies
Information Dashboard Design: Displaying data for at-a-glance monitoring, Second Edition, Stephen Few, Analytics Press, 2013.
Chapter 5 covers "Tapping into the Power of Visual Perception" and the Gestalt principles are discussed explicitly in pages 87-91. This is probably the best known of Stephen Few's books and is essential reading for anybody interested in dashboard design.
Dashboards for Excel by Jordan Goldmeier and Purnachandra Duggirala (2015). Apress.
The chapter "What is visual perception and how does it work?" includes a section, pages 36-45 "Our bias towards forms: perception and Gestalt psychology" which expands upon the material covered here. This is a really useful book, which has tips and tricks that would take you years to discover for yourself
Data at Work: Best practices for creating effective charts and information graphics in Microsoft Excel (Voices That Matter) Jorge Camoes. Kindle Books. 2016
https://www.amazon.co.uk/Data-Work-practices-effective-information-ebook/dp/B01DYIPZF4
Section Two "Visual Perception" covers the "Gestlat Laws" between locations 1453 to 1556
The Functional Art: An introduction to information graphics and visualization (Voices That Matter) by Alberto Cairo. Kindle Books. 2012.
https://www.amazon.co.uk/Functional-Art-introduction-information-visualization-ebook/dp/B0091SXDOM/ref=sr_1_2?s=digital-text
Gestalt is covered in the section 'The Gestalt School of Thought and Pattern Recognition' starting at location 1655
Design Principles: Visual Perception And The Principles Of Gestalt, Steven Bradley, Smashing Magazine.March 28th, 2014 (link)
This effect is not one of the original Gestalt "laws" as such but it is important.
Experience can be that created within our interaction with the dashboard, report or presentation itself. It can also be shaped by context, such as the "house style" of an organisation or the conventions of a culture.
In addition to all of these, our unique individual life experiences will also come into play. We are more likely to recognize something if we have seen it before.
Continuation
This is the effect in which things arranged in a line are perceived as being related
Addition of two sets of squares either side of the original figure creates the impression of a continuous line through it
Closure
This is the effect in which we tend to fill in the gaps to complete shapes.
(see K.Koffka, Principles of Gestalt Psychology (1935) p.167)
Stronger examples, often used by other writers, are provided by the triangle illusion first produced by Gaetano Kanizsa in 1955 or the well known panda image used in the more recent WWF logo
Simplicity
This is the effect in which we will tend to resolve complex images into the simplest possible forms. For example, the shape in the illustration will most likely be perceived as two overlapping squares
This effect is a core concept in Gestalt and was originally called the "Law of Prägnanz" also referred to as "Good Figure".
Object or background
This is the effect in which we will tend to resolve complex images into the simplest possible forms. For example, the shape in the illustration will most likely be perceived as two overlapping squares
This effect is a core concept in Gestalt and was originally called the "Law of Prägnanz" also referred to as "Good Figure".
Object or background
This is the effect, usually referred to as "figure/ground relationship", in which we try to resolve things as being either objects or background. In the left hand illustration we probably resolve the image as being a dark grey square (the object) on a paler background.
The second image is able to be resolved the other way round i.e. into a large grey square with a small square hole in it. The overall structure of the two illustrations is the same. The fact that the overall page has the same background colour as the little square which influences our perception.
This effect is less predictable than the previous ones. There can be what is sometimes called "unstable" resolution in which the perception switches to and fro between two different versions. The work of M.C.Escher provides many examples where this is entertaining when done deliberately. Accidentally creating this effect, however, runs the risk of becoming distracting.
OK....so what?
Most of the "Gestalt" effects described above are very familiar. We understand them intuitively. When written down, or otherwise presented back to us, they can seem like a statement of the obvious.
Why, then, do we often appear unaware of them when designing our tables, graphs and dashboards?
Probably this is partly because our design decisions can be influenced by other strong factors too, such as the desire to impress (egocentricity) , assumptions about how things are supposed to look (conformity), or the default settings in Excel (popularism)
It is partly also because the interplay between the different effects is not so immediately obvious. There is a loose hierarchy based on the relative strength of the effects in combination:
Proximity is generally stronger than Similarity
Connection is generally stronger than Proximity and Similarity
Enclosure is generally stronger than Connection, Proximity and Similarity
Closure can be stronger than Proximity
The individual effects can also be applied in different intensities. This can have an impact on their interplay.
Once you understand the nature and interplay between these effects you can use them to create deliberate visual hierarchies. These will ensure that the information stands out appropriately in your tables, graphs and dashboards.
This understanding will also help avoid situations where the wrong choices result in things being harder to read than they need be.
The various books and articles listed below contain useful examples and further discussion.
So where did I used to go wrong?
When I look back now at some things that I used to do I can see I was often applying some quick formatting - particularly to tables - which was inharmonious. At the time I probably thought I was making the table (whether in Excel or Word) look "smart" and "professional". I allowed the apparent neatness to obscure the fact that I was making it harder work for the reader.
A typical example would have been to apply a "hierarchy" of thick and thin boxes to the entire table something like:
In terms of the Gestalt effects, I can see that I have used Enclosure - one of the strongest effects - around practically every cell in the table.
With the Gestalt effects in mind, and removing the over-precision in the data, the following is an alternative view of the same table:
This may not be to everybody's taste - possibly not even to mine - but it does illustrate how some Gestalt effects can be employed.
The "zebra stripes" use Similarlity (or arguably a form of Enclosure) to group individual month data together. Some purists would argue against "zebra stripes", saying that the use of white space between the rows can achieve as good an effect. I'm not entirely convinced
Proximity is used to group the four Expenditure columns together. This is further enhanced by the use of the horizontal line over the sub-headings, which is a form of Connection. The subheadings are further joined to their data through the Continuity effect. Similarity of font size is used to distinguish the three Expenditure subheadings from the Expenditure Total and the other columns.
By toning the base font colour down from black to gray, I can then use black for emphasis. The contrasts allow the "bad" month to stand out clearly (I am wanting to draw attention to this)
The table does not need a box drawn around it as the Closure effect already defines it as a block
References and further reading
Principles of Gestalt Psychology, K.Koffka, 1935. This is a substantial work by one of the founders of the Gestalt movement. It can be found online. Most dashboard designers will probably skip this one.
Information Visualization. Perception for Design, Second Edition, Colin Ware, Elsevier. 2004. This is a detailed and wide-ranging book. Gestalt laws are covered in the section "Static and Moving Patterns" starting at page 189.
Now You See It: Simple Visualization Techniques for Quantitative Analysis, Stephen Few, Analytics Press, 2009. A very good book generally. It is more focussed on "pre-attentive attributes" than on Gestalt effects per se.
Show Me the Numbers: Designing Tables and Graphs to Enlighten, Second Edition, Stephen Few, Analytics Press, 2012.
Chapter 5 covers "Visual Perception and Graphical Communication" and the Gestalt principles are discussed explicitly in pages 80-5.
See also link for a short discussion on visual hierarchies
Information Dashboard Design: Displaying data for at-a-glance monitoring, Second Edition, Stephen Few, Analytics Press, 2013.
Chapter 5 covers "Tapping into the Power of Visual Perception" and the Gestalt principles are discussed explicitly in pages 87-91. This is probably the best known of Stephen Few's books and is essential reading for anybody interested in dashboard design.
Dashboards for Excel by Jordan Goldmeier and Purnachandra Duggirala (2015). Apress.
The chapter "What is visual perception and how does it work?" includes a section, pages 36-45 "Our bias towards forms: perception and Gestalt psychology" which expands upon the material covered here. This is a really useful book, which has tips and tricks that would take you years to discover for yourself
Data at Work: Best practices for creating effective charts and information graphics in Microsoft Excel (Voices That Matter) Jorge Camoes. Kindle Books. 2016
https://www.amazon.co.uk/Data-Work-practices-effective-information-ebook/dp/B01DYIPZF4
Section Two "Visual Perception" covers the "Gestlat Laws" between locations 1453 to 1556
The Functional Art: An introduction to information graphics and visualization (Voices That Matter) by Alberto Cairo. Kindle Books. 2012.
https://www.amazon.co.uk/Functional-Art-introduction-information-visualization-ebook/dp/B0091SXDOM/ref=sr_1_2?s=digital-text
Gestalt is covered in the section 'The Gestalt School of Thought and Pattern Recognition' starting at location 1655
Design Principles: Visual Perception And The Principles Of Gestalt, Steven Bradley, Smashing Magazine.March 28th, 2014 (link)
No comments:
Post a Comment