The Blink of an Eye:

Beginners Guide to Visual Communication.

 Part 3 of 4: Appeal

Ever heard of the Aesthetic Usability effect? It’s a phenomenon where people feel that a more aesthetic design makes a product more accessible and usable than a less visually attractive design. More usable but less attractive designs often get less acceptance and a lower adoption rate than a more appealing but less functional alternative. This may sound counter-intuitive, but that’s just how our brains are hardwired. 

These perception biases are difficult to alter. Much like physical attraction between people, first impressions of design influence our long-term attitudes towards usability and effectiveness. Therefore it is important that we grasp this curious phenomenon and develop design environments that are both visually appealing and maximize usability within our  UIs. Let’s get to the meat and bones of how we achieve this. 

In our intro, we mentioned Aesthetic Usability and outlined how this phenomenon can affect how we perceive visual design, making us more likely to choose an appealing design over a more usable one. In fact, this type of bias can lead to an acceptance and even indifference to minor usability flaws in our UIs. As bizarre as it seems, in user experience, form takes precedence over function every time. So it is important to  design interfaces that are both pretty and practical. 

As DC comics designer and renowned creator of that Bob Dylan psychedelic poster, Milton Glaser once said, “There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.” Attractiveness Bias grapples with our WOW aesthetic predilection. Humans are predisposed to find aesthetically pleasing things more attractive. Conventionally beautiful people are perceived as healthier, more competent, more intelligent, more social, and ultimately, more attractive. These preconceptions are grounded in thousands of years of cognitive evolution and are as relevant and pervasive today as they were for our cave-dwelling ancestors. This  influences our perception of design. The more attractive the design, the more value we ascribe to it. 

There is a caveat, however: much like physical attraction, design appeal is fickle and contingent upon the presence of underlying depth and function. Beautiful design will gain our attention but it cannot hold it if it is not fit for its purpose. This is where Negativity Bias steps in: if we do not reconcile form with function, our users remember the bad elements of our design/UI rather than the good. 

Our advice: design an attractive UI, then take care to ensure that the function matches your design. Ensure that your UI is not merely an attractive veneer but a thing of great value. Don’t be just a pretty face!

In keeping with our examination of cognitive evolution, a closer look at the types of designs that foster a comfortable, stress-free, and safe environment reveals yet another subjective pattern of human behavior called Biophilia. Biophilia supposes that humans are naturally inclined towards spaces and situations that reflect an organic and unimpeded connection to nature. Biophilic design embraces this innate affinity with the natural world by creating designs that support this connection to living organisms and processes.  

            Biophilic design in hospital settings, for example, has been shown to improve recovery and healing rates, reduce stress, and boost staff productivity and morale. By employing a biophilic design, we can provide a welcoming, appealing environment that makes our users feel safe and breeds confidence in our brand. It also instills a sense of connection to our content that makes users glad they found us. 

Let’s take a look at some of the principles at work here and how to turn them to our advantage:

• Prospect and Refuge: Humans prefer situations where opportunity and risk (prospect), and refuge and safety (refuge) coexist. By balancing the tension between an abundance of necessary content/resources, and the affordances to safely navigate them, we can replicate these natural contexts. 
• Organized Complexity:  Research in biophilic design has shown that visually uncomplicated designs with limited information, however sleek the design, can induce feelings of sensory deprivation and anxiety in humans. To counter this, we must strive to design environments that replicate the kinds of repeated patterns and geometric coherence we see in nature.  Take care when using flat and minimalist designs that you do not alienate your audience. Don’t over-distill or reduce information. Instead, reorganize the content to make it clear and appealing. Something as simple as a well appointed navigation bar can provide the necessary means to agreeably traverse an information-rich UI.
• Wholeness: Satisfaction comes when disparate parts coalesce to comprise the whole. Again, this replicates our natural systems, with each area forming part of the overall ecosystem. In design terms, you can achieve the same sense of wholeness through clear navigational pathways between content areas. Customer journey maps with a clear, overriding theme are a good example of this. Smart use of white space can convey both boundaries and connectedness providing ample perspective on the entirety of your content.
• Age and Change: As another element of the natural world, we are reassured by design that reflects the passage of time, demonstrating both consistency and constancy while responding to change. Keep your design and your content fresh with regular improvements, but maintain a theme and clear navigational journey throughout. It may appear that all users hate change, in fact, as Nielsen Norman tell us, they love it! And, it’s good for them – bonus! Mimic the Disney method and design lasting memories, and remember that sudden departures from your existing brand experience can just as swiftly backfire. 
• Material and Cultural Attachment to Place: Design that reflects the cultural and material context of the space it occupies and the audience it hopes to reach is significantly more impactful because the audience feels heard and recognized. McDonald’s recently proved the efficacy of ethnographically-aware design with their customer experience adaptations in India. By adapting to cultural norms, they demonstrated a clear commitment to and understanding of their Indian clientele. Take the time to adjust your tone and content to suit your audience’s expectations and comfort levels. Develop a nuanced design that reflects user identity and subsumes your message into that space. 
• Mystery: In nature, there is little certainty. There is boundless scope for complexity and puzzlement. Humans respond well to design environments that reflect this sense of wonderment. By incorporating a sense of mystery, perhaps with partially hidden visual elements or interesting breadcrumbs to further information, we can create a palpable sense of anticipation and excitement. This mimicry of the denial and reward we find throughout our natural world again speaks to the human experience, beyond mere market segmentation. 

Design and the appreciation of design is hugely subjective. A design jewel to you may be design junk to someone else. Rather than accept that it is the fate of every design to fall or rise at the whim of the user, we can inject some order and certainty into our designs using a mathematical ratio used by philosophers, artists, and designers for thousands of years.

The golden ratio applies scientific principles to achieve a natural, beautiful aesthetic balance between elements. The actual mathematical ratio is 1:1.618033987, represented by the Greek symbol Phi (ɸ) ( Don’t worry, there won’t be a quiz!) 

The easiest way to think of it is by using the Fibonacci Sequence where each number is the sum of the two numbers before it. For example,  0,1,1,2,3,5,8,13,21…and on and on. 

When you apply parallel squares to the sequence and create rectangles, a spiral (called the Golden Spiral) starts to form. This pattern is replicated throughout nature (think flowers, shells, hurricanes). Simply multiply any element’s size by 1.618 to determine the optimal size of the parallel element,  or overlay the Golden Spiral to adjust its placement. Lets see how this natural equation works in visual design:

Typography: A simple rule of thumb using the golden ratio is to sort your content placement according to importance within the golden spiral, starting with the most important text in the largest square. If the font size in your smallest square is 10px, for example,  multiply that number by 1.618 to get a rough guide for your larger sizes.

Graphic Composition: By overlaying the graphic spiral, you can work out where your visual focus should be.  With this method, you can decide how to centralize headlines for maximum impact,  and determine how and where to move other visual and textual elements to ensure the dynamism of your design.

Logo/Favicon Design: Take a look at the logos of some of the best known brands in the market today: Apple, Twitter, Pepsi, Toyota. The common denominator in all their logo designs is their use of the golden ratio to achieve a balanced design that communicates their overall message with ease. 

Again, you can overlay the golden spiral on your design or use the Fibonacci Sequence to form concentric circles that you can then turn into a grid. If it worked for Martin Grasser (Twitter logo designer), it can work for you!  

We often think of color in terms of pure aesthetics, however, color is the most impactful design element at our disposal, reinforcing the organization and meaning of our design elements. Colors can speak to our users in ways that are every bit as powerful as language. They can set the brand mood, tone, and concept, all at the unconscious level. It makes sense, therefore, to familiarize ourselves with the core concepts of color theory and the techniques required to put them to work for us:

Color is Relative: The human eye and brain work in unison to appreciate color, influenced by light shining on the color and the other colors surrounding it. Use the following color combinations to achieve an easy aesthetic beauty in your design:

Adjacent (analogous) colors:

Opposing (complementary) colors: 

Triadic colors (using corner colors from a color wheel with a triangle circumscribed in the middle):

Colors found in nature:

Saturation: Design schemes arranged around nothing but highly saturated colors overwhelm the eye and obliterate vibrancy. Less is more with color; use saturated colors in conjunction with unsaturated colors to provide balance and a vibrant pop. 

  This image contains very oversaturated colors that make it difficult to look at.

This image retains the orange and pink colors from the first image, but surrounds them with less saturated colors, making it more pleasing to the eye. 

The caveat here is that saturated hues do have their place if you want to demand attention. If, however, you want to convey friendliness and professionalism, choose desaturated tones.

Simultaneous Contrast: A neat color trick is to place complementary color combinations of the same value adjacent to each other. The resulting tension creates a striking visual pop. Again, exercise caution here. Use contrasting colors to create arresting visuals but use them sparingly. Too much contrast tires the eye and makes the UX unpleasant.

Numbers and symbolism: Be sparing with color. Too much overwhelms and devalues your content and your message. Limit the palette to the colors the human eye can comfortably process, using no more than 5 colors in any one space. Be mindful that a significant proportion of the population has difficulty with color. Don’t rely on color to impart the entirety of your message and always check the cultural symbolism attached to colors so that they are suitable for your audience. 

Human vision is an amazing ability, allowing us to interpret our surroundings so that we can interact safely and accurately within them, with little conscious effort. However, we are well attuned to nature and the things that occur naturally in our environment, which has significant implications for design. This means that the products we design should attune to and support human visual perception. Otherwise, there is significant potential that our users cannot use our products quickly, safely, or effectively

It never hurts to workshop color choices so your potential customers can give you feedback before your website or new company logo goes live.

In the final part of this series, we will discuss the Design Framework and learn how to make better visual design decisions.