Chapter 2: Vision, Perception & Aesthetics
Last updated
Last updated
In 1872, a painting was painted. Now, in the 1800s, lots of paintings were painted. But this particular one was an important one—and not just because it’s my favorite painting of all time. This painting is Claude Monet’s Impression, Soleil Levant (Figure 2-1) and I love it, in part, because it embodies the Impressionist movement, one of the most beautiful, and beautifully dysfunctional, marriages of art and science in history. I’m going to spare you the full meandering history of Impressionism and post- Impressionism, but I’d implore you to do some further reading if you’re in any way interested in art, bohemia, or anarchy. What is important to understand is the insight Impressionism gives us into some of our brain’s perceptual processes
Around the same time that Manet, Monet, Bazille, Renoir et al. were hunched in Cafe Guerbois, twizzling fancy moustaches, cursing the memory of Napoleon, and plotting the downfall of the bourgeoisie (the “Batignolles” were reportedly staunch anarchists and bohemians), science was making its first strides into understanding the separation between sensory input and perception, namely that “what we see” is not what we see. While our understanding of the intricacies of perception has become more refined, more rounded, and deeper than these seminal discoveries and theories, the science ‘du jour’ in the late 1800s still rings true: the eye and the retina are only half of the equation when it comes to perception. Without a form of organization and resolution in the mind, the things we “look at” would be perceived as little more than visual mush. Impressionism played to this reality and embodied, to its core, the true nature of human perception. Perception is how we organize our environment, how we take what we “sense” and transform it into what we “perceive”—and it is hugely impacted by our own experiences of the world. What we know, what we expect, and how we feel all influence what we perceive.
Vision is the “bottom-up” sensory process of transmitting light information to the brain. Light is captured, turned into neural signals, and then sent to the brain for processing. The brain then takes these signals and applies some form of order to them— it catalogues, organizes, and contextualizes what we see into objects with meaning and associations; this is perception. And everyone’s perception is different. It’s theorized that varying amounts of this sensory data are lost before they reach the visual cortex, and we actually spend a huge amount of our time mentally filling in gaps, making assumptions, and hypothesizing based on what we receive from our senses.
When you look at Impression, Soleil Levant, what do you see? I see a river; I see a few scattered boats with people in each, some seated, some standing; I see birds in flight over the river; I see a bridge, a sunrise, and the reflection of that sunrise in the water; I see a scene and a moment in time. Remove the romance though, look slightly closer, and it’s really a whole mess of visible brushstrokes. Even now, Monet’s work looks almost unfinished. (At the time, his style was shunned, almost heretic in its brazenness.) Before Impressionism, fine art was on a crusade of realism. Brushstrokes were deft and unnoticeable; the work was aspirational and hyper-realistic; important people were painted in important situations; and the mainstream, at the time, was, quite ironically, rooted in the avoidance of harsh reality through art escapism. The Impressionists sought to bring their own form of realism to art; to bring it down to earth; to paint the peasants and the “bohemes”; to capture moments, not fantasies. Part of this philosophical realism was the principle that to paint these moments—to acquiesce to the ephemerality of natural light, to paint with an obsession for minimizing the number of brushstrokes— was to realize, on canvas, the nature of human perception. To me, Impressionism embodies almost every “modern” thought we have on design through its striving for minimalism and its refusal to patronize.
There's a certain magic to this work, along with the neo- & post-impressionism and abstract art that followed it, and that magic lies in just how well they explore the workings of our mind's eye. When we observe a work like this, we're almost compelled to insert ourselves into it. The soul of an impressionist painting can not be found on the canvas; it's in the mind of everyone who's filed in its blanks. Impressionism and abstract art only truly occur in our minds. We use our past experiences and our knowledge of the world to extrapolate form into meaning, withouth this extrapolation we would see the artwork how we would see the world without perception - as a mess of lines and colour and incoherence. However, by asking us to fill in the gaps, to connect the lines, and to blend the colours ourselves (Impressionism used hard contrasts and vibrant colours often, literally expecting the observer to mentally mix them) Impression leaves room for our own affect, our own emotions - it is exploration on canvas, and it changed art forever.
Creeping further towards modern day now, in his quite excellent book Understanding Comics, Scott McCloud theorises that the more 'iconic' an image is, without losing its meaning, the higher chance that we'll apply to it some of our self, by attaching our own inferences. Similar to the act of observing impressionist art, when we see simple illustrations, we're asked to fill in some blanks, to come to our own conclusions. McCloud uses the term 'iconic abstraction' to denote the level of deviation from real-world form - the premise being simpler, more cartoon-like forms represent higher levels of iconic abstraction from a real object than, for example, a photograph.
While there’s little in the way of empirical evidence for this theory, I do believe it’s a wonderful meditation on just why we’re so enamored with the abstract. Artwork that, without our ability to fill in blanks and create associations, would essentially be discarded as a cacophony of lines and brushstrokes become more than the moment or object it strives to represent. There exists enough conceptual space in these works for us to impart our own ideas and weave the threads of our own stories. I’ve long said (while acknowledging the inherent bias from the fact that some of my favorite humans are illustrators) that illustration is one of the most integral aspects of a modern brand, website or interface, and I think McCloud’s theory and our willing cultural embrace of impressionist and abstract art gives us a hint as to the real power of emotional illustration.
Furthermore, what we “see” when we look at these works actively changes based on our working mental models of the world. Ask yourself this: when looking at Impression, Soleil Levant, how, do you imagine, would your perception of this image change if you were familiar with the river on which it is based? If, as part of your daily routine, you spent every afternoon in the Le Havre port, saw endless sunsets like the one depicted, and attached endless memories and associations to those moments? Conversely, what if you’d lived a life in which you had never seen a boat or even a bridge? How would you make sense of Monet’s work without the requisite mental model? This is the power of abstraction. It nods toward a form that cannot exist without the inferences of our mind’s eye. It’s why we can see the sunset and its reflection in Monet’s masterpiece, or the face in that doorknob we walk past every day, or Jesus Christ burned into our toast. When there is a form to be found, we will usually find it. (See Figure 2-3.) In fact, even when there is no explicit depiction of form, we can always convince ourselves there is.
In modern interface design, our abstract art generally takes form as illustration and iconography. Unlike photography and videography (from herein I'll be referring to both as simply 'photography'), which provide us with a recreation of a moment or object in verism, our more iconic media - illustration especially - leave these 'gaps' in which we can fill in our own stories. When presenting people with simple illustrations and icons, we're not only able to imply meaning with fewer stimuli to process - reducing the overall visual complexity of our work - we're also giving people space to further interpret what they see. There is, too, a fine balance between this 'pseudo-impressionist' approach and a purely contemplative abstract approach. In our work for screens, we tend to lean more towards clarity, and further away from chaos and open-to-interpretation works. How realistic or iconic your representative media (icons, illustrations, photography, videography and animations) should be is as much a brand consideration as it is anything else. Illustration is often more iconic, communicating meaning through a relatively small number of lines and shapes, while photography tends to be more explicit and aspirational and is used heavily in travel, fitness, fashion - essentially anywhere that speaks to our intrinsic desires.
Great photography in this sense can conjure up some powerful emotions. Aspirational photography can play to what is known as mimetic desire - the idea that we don’t really desire something until we see another human doing or using it. We constantly compare ourselves to others, for better and for worse, and seeing powerful, happy and competent people can really hit home emotionally - provided the subjects are relatable enough for your audience. This style of photography, along with the dreaded shock value photograph, should be used consciously and responsibly, or not at all.
Another huge factor, especially with aspirational photography, is that of diversity. If you're using photography in an attempt to uplift and empower, in omitting an underrepresented group, you're making a pretty plain and clear statement that you don't care about that group's members. The whole act of one's relating with a piece of media relies on the ability to find or place a manifestation of one's self within. If your imagery excludes, your potential impact diminishes. That's not to say that by simply adopting a more iconic approach you magically have no commitment to representation, just that the effects are starkest with the explicity of photography. However, if 'further market reach' is the phrase it takes to convince you that representation and diversity matter, then I'd recommend putting this book down, leaving your bubble, and embracing some of the world's cultures a bit. Seriously. Come back soon!
There exists, as lovely as it would be, no simple equation or checklist to help decipher whether an interface is better off using photography, illustration, or a combination of both. One reductionist, but sometimes useful, idea to consider is the notion that photography captures “specific” emotions and moments, while illustration allows for a greater range of potential inference. If we use McCloud’s scale of iconic abstraction and bastardize it a little, on the realistic side we’d have “explicit, single emotion, specific moment” and on the iconic side, we’d have “implicit, varied emotions, ephemeral” (Figure 2-4).
That’s not to say that photography cannot be emotionally ambiguous and abstract and that illustrations can’t be focused or explicit—far from it! Artistic intent and human experience and inference both have a huge impact on these qualities.
The third of our triptych of digital media is iconography. While icons share many features with, and are often technically indistinguishable from, illustrations; they tend to serve a different purpose entirely. Icons exist to simplify messages and actions, or to signify state or tone of feedback and responses. They provide us with a kind of visual mnemonic and a signifier for different ideas and actions that can occur within our interfaces. As a general shortcut, we can view icons as communicating an idea or an action, and illustrations communicating an object or a scene. While this is not always correct, and while we have the rather ambiguous ideas of iconic illustrations and illustrative icons to content with, this heuristic is more often applicable than not. But why icons? Why do they exist, and why are they so integral to our work?
The Gestalt Principles of Perception are a set of guidelines that aim to explain some of the inherent biases and approaches humans apply as part of our environmental perception. If I didn’t lose you in Chapter 1, you hopefully know how important groups and categories are in helping us make sense of our world. Gestalt goes a good way to describe some of the more idiosyncratic ways we process and group perceptual information, or “visual field organization” as it’s come to be known.
Gestalt is to visual design what Disney’s “12 Principles” are to animation and motion design—everyone assumes that everyone else knows them, but everyone who writes about visual processing writes about Gestalt just in case. And thus the cycle continues. It’s important to clarify, too, that these principles are not an all-encompassing “psychology of visual design.” The fact that Gestalt is relatively simple to illustrate and that its principles have quite admirably stood the test of time has led to a rather simplified notion that Gestalt defines perceptual psychology.
Another thing I want to emphasize with Gestalt is that, traditionally, it’s used as a means of informing how we create “harmonious” and well-grouped designs. We’ll explore in detail the idea of harmony in design a little later in this book, but as a free spoiler, harmony is both “necessary” and “boring.” What I’d like to focus on a little more than usual when we think about Gestalt is the yin/yang nature of these principles. By flipping them on their heads, we’re able to see ways of creating visual tension, interesting layouts, and engaging content. We’re also able to explore how “violating” these principles can grab attention. Of course, the yin to this yang is quite simple: we must be operating from a harmonious baseline for this tension to have the desired effect. Breaking the rules in an environment that doesn’t seem to have any gets you nowhere but further down a spiral of chaos. Reference these principles well, use them as part of your tool set when creating your harmonious baseline, and then flip them on their head—when it’s applicable and responsible to do so—if you need to create some interest, guide the eye, or bestow importance on an element of your design.
The principle of proximity states that objects that are closer to each other are seen as grouped. This is probably the universal principle of visual design and goes a good way to informing why whitespace and layout are so integral to harmonious design. Figure 2-5 shows proximity in effect—chances are you’ve naturally grouped these objects based on proximity alone.
In design, proximity informs some of our most basic guidelines. For example, when setting type, ensuring that a heading is closer to the paragraph it introduces than it is to the preceding paragraph (Figure 2-6) enforces the relationship between the two, detaching it from the less-relevant content.
The power of this principle lies in the fact that it allows us to communicate grouping, structure, and hierarchy without adding any extra elements to our designs. Many simpler designs can communicate relationships and hierarchy through proximity alone.
The Principle of Similarity suggests that items with similar appearances and physical qualities will be grouped together. When you look at Figure 2-7, it’s quite likely that you’ll categorize the shapes into vertical columns of circles and triangles.
Even though the shapes are spaced equally and are of roughly the same visual weight, your brain groups them together by their most obvious similarities. In Figure 2-8, however, it’s much more likely you’ll perceive horizontal rows.
In this case, the color (horizontal) similarity is initially far more obvious than the shape (vertical) similarity.
In design, similarity can also help describe why we perceive different-colored words in a body of text as links—by categorizing them by their similarities, we allow them to imply paradigms throughout an interface, such as the text links in Figure 2-9.
This is known as a signifier, and similarity is a key aspect of communicating these paradigms by allowing people to codify and associate these visual properties with potential action and function.
While proximity and similarity encompass many of the basic concepts we use most commonly in design, they don’t fully account for one of the most important: “alignment.” The Principle of Continuity suggests that elements that are aligned with each other are perceived as grouped due to our natural desire to visually “follow through” an element along a specific path or in a specific direction, as seen in Figure 2-10.
The first row in Figure 2-10 shows an extremely common row of elements and, while proximity and similarity have a say in their grouping, possibly the strongest indicator that they’re a group is their alignment along the vertical axis. The second row shows a rather exaggerated misalignment between the elements, making it much more difficult to perceive them as a group.
Continuity can be enhanced with flowchart-style lines or arrows or hinted at with smaller design flourishes should you need to communicate a cohesive group that doesn’t strictly align along an axis. Figure 2-11 shows an example of this; by drawing out a “path” that the eye can follow to connect each element to the next, their relatedness is communicated in spite of their misalignment.
The path itself is also an example of continuity, with the brain perceiving the separate shapes of this path as a continuous line.
The Principle of Common Fate shows that items that move along a similar or shared path are seen as related—an insight that should heavily inform our animation design decisions. A remarkable example of common fate in nature can be observed in the flocking of birds, particularly that of starlings, turning and twisting in unison—appearing as a single unit. Common fate becomes exceptionally useful when we need to group nested items inside an already similar group. In situations like this, where similarity and proximity are important to maintain, we can use common fate to move one group of items along one path and another along a different path. This can be seen in Figure 2-12.
In Figure 2-12, the first row of elements and the second row are visually similar and grouped close together in order to appear connected, yet the different movement of the rows—imagine the top row animating in from right to left, the bottom from left to right— communicates a further intergroup relationship. This approach works really well in indicating a subtle hierarchy among elements of the same type.
Closure is an extremely interesting perceptual trait and used extensively and cleverly in logo and icon design. The Principle of Closure shows that we’ll “fill in” forms that don’t actually exist—provided there’s a “hint” to that form. In Figure 2-13, it’s likely you’re able to perceive the “S” in the word “closure” and the diamond, square, and triangles in the shapes beneath it, even though those shapes don’t actually exist.
While the Principle of Common Region isn’t part of the “classic” principles of Gestalt, it’s a concept of perceptual grouping that is used extensively in visual design. Proposed by Stephen E. Palmer in 1992, the Common Region Principle states that, quite simply, elements that are contained within the same region are seen as grouped. Figure 2-14 shows the same grid of shapes as we saw in Figure 2-7 when discussing similarity, but with alternating rows contained within white rectangles.
Just as we saw when the rows’ shapes’ colors were changed, the common region appears to “overrule” the subtler similarity and quite clearly communicates a row-based organization.
The Gestalt princples are rarely used in isolation, and - while the examples provided are quite cut-and-dry - they're certainly not binary rules, with the only potential outcomes being grouped or ungrouped elements. We'll almost always 'double-up' on our use of these principles - for example, putting similar-looking elements closer to one-another, in the same bounding box, and aligned across the horizontal axis makes use of many of these principles in one layout section. Further, we'll rarely have a single level of hierarchy to communicate - dense interfaces are likely to feature many groups which are, themselves, comprised of smaller groups, and so on. Fortunately, these principles have been shown to be impressively scalable, and can explain groupings far more complex than we're accustomed to showing, or seeing, in even the most complex interfaces.
Like most of the concepts we've explored in this book, Gestalt - along with the broader, expanding principles of visual field organisation - is a tool of cognitive economy, and it further shows how important design can be as a means of preemptively doing some of the brain's processing for it. By understanding how the human mind perceives items to be grouped or distinct, we can ensure that we effectively and intuitively position and move our interface elements to communicate hierarchy and reinforce relationships.
Depending on your focus as a designer, you may have been exposed, to varying degrees, to the concept of 'colour psychology'. Perhaps to the idea that colours themselves can make people feel and think in certain ways. Green and blue are calming, red is exciting and edgy, orange is creative. The misconception that generally gets reported here is that these associated emotions are somehow emotional responses to that colour. This is generally not the case. While these colours can hint at specific moods, they do not themselves possess notable degrees of emotional proclivity. In reality, we'd be pretty useless as a species if our emotional stability was so innately tied to something as ubiquitous and varied as colour.
Chapter excerpt: You've just read (or skimmed!) through an excerpt of Chapter 2: Vision, Perception & Aesthetics from my book, Mindful Design. If you liked it, why not ?
