E-Tabs

Tag Archive: Gestalt

  1. You and Gestalt should be friends

    Leave a Comment

    Without even knowing it, your brain quite likely functions according to gestaltism. Sounds scary but it’s not! No need to consult a medical professional.

    In an earlier post, we mentioned the “gestalt” of design in passing.  We thought we would explore that a little more in-depth.

    The gestalt (German for “shape” or “form”) theory of psychology holds that the human mind is naturally and unconsciously governed by self-organizing tendencies. To put it more simply, think of the maxim, “the whole is greater than the sum of its parts.” (This saying is actually a variation on German psychology pioneer Kurt Koffka’s original, and perhaps more universal, “the whole is other than the sum of its parts.”)

    “What is a pre-war, German psychological theory history lesson doing in a dataviz blog?” you may rightly be asking. What does gestalt theory have to do with creating effective data visualizations? Well, quite a bit, as it turns out.

    Because before even one byte of data is processed to display on the dashboard, the overriding goal of dashboard design should be to make it as user-friendly as possible for the target audience. It frankly doesn’t matter how relevant or important the underlying data is: if a user cannot find what they need, it defeats the very purpose of having the dashboard at all.

    In fact, good designers – and this is not even limited to the dataviz realm – probably use some aspects of gestalt design principles without doing so consciously. It’s pretty fundamental to how the human mind naturally organizes things. The following are the gestalt principles (or laws) most relevant with respect to dataviz design and design in general. Most of these are pretty common sense and likely already do without thinking about it.

    Closure: Not necessarily related to dataviz design, Closure is still an interesting insight into how our mind works on a subconscious level.  Closure is illustrated by the graphic at the top of this post.  Even though the letters don’t appear as you normally would see them, you have no problem with “closing the gaps” and mentally completing the word.

    Continuity: Very generally, the Continuity principle has to do with how objects are arranged to facilitate a logical and natural workflow. In the context of dataviz design, this obviously is a key consideration for making your users’ interface as “friendly” as possible. For example, if on a multi-page dashboard you feature similar hierarchical data filters with which the user can interact, it’s probably easier for the user to grasp what to do if they’re set up in a similar way across all the dashboards.

    Enclosure: Enclosure is using visible boundaries or borders to group objects. For example, you can section a dashboard canvas into quadrants showing grouped objects by explicitly placing line borders around (or differently-colored backgrounds behind) each quadrant. However, as an alternative, you could also utilize the Proximity principle (see below) by clustering each group of objects closely, while leaving more whitespace between the clusters without explicitly bordering off the quadrants.

    Proximity: When you perceive a collection of otherwise random objects, you perceive those closest to each other as being in some way related, or forming a group. In the image below, there are 72 circles. But by virtue of their spatial relationship, most people “see” the collection as a group of 36 circles, and 3 groups of 12 circles.
    Gestalt_proximity

    Similarity: Rather than mentally grouping objects in proximity to one another, the viewer might also group objects which are similar to each other. In the image below, 36 circles are arranged into a square. However, most people perceive not an overall square shape, but 3 rows of light circles interleaved with 3 rows of dark circles.
    Gestalt_similar

    Symmetry: When two symmetrical elements appear as seemingly unconnected, the mind perceptually connects them to form a coherent pair. The grouping of characters below shows a configuration of various bracket types. We tend to perceive three pairs of symmetrical brackets – even when the individuals are separated by whitespace – rather than six stand-alone brackets.
    [        ] {        } (        )

    Law of Good Gestalt: This overarching principle explains that element objects tend to be perceptually grouped together if they form a pattern that is regular, simple, and orderly. On a subconscious level, the viewer eliminates extraneous stimuli which are unfamiliar or overly complex and the mind perceives meaning which may be prioritized over spatial relations. The law of good gestalt focuses on the idea of conciseness, on which all of gestalt theory is essentially based. This law has also been called the law of prägnanz, a German word that translates to “pithiness” and suggests the concepts of salience, conciseness and orderliness, which are pretty good goals to which dataviz designers should aspire.

  2. Less Is More!

    Leave a Comment

    Less Is More.

    …?

    THE END

    See what we did there?

    OK, that’s a little extreme perhaps, but illustrates the point perfectly:  “less is more” really says it all.  (Our boss, however, told us we need to write more, so…)

    Now let’s talk “less is more” in the context of data visualization design.  There are virtually infinite design choices you can make in combining color, axis formatting, tick-marks, grid lines, plot area, and every other dataviz design element.  We’ve all seen presentations where the creator used EVERY option available (because they could!) and how well that worked out.  Ideally your charts shouldn’t look like a Jackson Pollock wannabe does your PowerPoint decks.

    “Non-data pixels” is a dataviz design term which simply refers to any design element that doesn’t directly tell your data’s story; think in terms of everything that ISN’T or doesn’t directly represent “the numbers.”  The concept is to minimize or eliminate outright from your dashboard “canvas” that which is dispensable.  Now, that can range from the fairly obvious – e.g. do you NEED to use a green-to-purple color gradient for your chart’s plot area, even IF those are your client’s corporate colors? – to the subtle – will using horizontal gridlines every 5% help people understand the numbers any better than every 20 or 25%?  Or, will using NO gridlines at all work?

    Examples of minimizing non-data pixels are things such as: making chart axis lines and gridlines a shade of gray rather than black; same (maybe to a lesser extent) with axis label text or numbers; using fewer or lighter colored gridlines in tabular data visualizations; not using special effect “skins” (e.g. to appear like a reflective glass surface) for chart bars or pie wedges.  You want design elements which enhance your data’s story and not detract from it or distract the viewer.

    We created a dashboard for the end-client of one of our market research clients. The users were research data analysts at a consumer goods company based at several locations across the globe. Our MR client’s proposed design featured their client’s logo prominently on every dashboard canvas, but our design team suggested that since the users were all from the same organization and THEY all knew who they worked for – they all had that in common – such obvious branding wasn’t a necessity.  We instead used subtle color themes based on their corporate colors.  As it turned out, the end-client was very pleased with the overall site aesthetic, and especially with the branding!

    A slight twist on minimizing non-data pixels can be illustrated very clearly in a dashboard populated with columns of data in a table where you want to show – via arrow indicators – variance from a benchmark score.  There are essentially two ways to do this:  you can use an arrow icon for EVERY score on the table – green “up” arrows for scores which are above the benchmark and red “down” arrows for below the benchmark – or, ONLY use red arrows for the below benchmark scores.  Using only red arrows makes it easier for the viewer to process the information at an initial glance, because they’re only looking for one symbol and one color in the table.  If a number’s NOT got the red, it’s above the benchmark.  Less (or, in this case, none) really is more.

    When doing dataviz design we try to borrow a few ideas from Gestalt psychology and how the brain subconsciously makes connections.  For example, if you have certain data objects grouped closely together on the dashboard canvas, the viewer’s mind will naturally make an association that those objects are related somehow.  What this means for design is that you could use physical position as a means of grouping related objects, rather than placing them within, say, a rectangular frame with a colored background (a non-data pixels warning sign).  Using colors in the “right” way of course has its advantages, but by avoiding color in some cases you can also avoid the potential for unintended or conflicting associations in the viewer’s mind.

    We believe that every design decision you make should be for the enhancement of your visualizations; if you ask yourself at every step in the design process, “how does this element / color / feature benefit my client / viewer?” and you cannot easily answer that question, you may want to rethink it.  After all, what you decide NOT to do is every bit as important as what you decide to do.