Beginners Guide to Visual Communication

 Part 1 of 4: Perception

The human eye is naturally drawn to the visual. Visual inputs elicit emotional responses and there’s little the human brain prefers to emotions. The human brain is on a constant quest for visuals because emotions help us create deeper connections to expedite our understanding. We process visual cues and their meaning unconsciously, in the blink of an eye. In as little as 13 milliseconds, our brain can decide where to focus our attention and begins to grasp  the meaning of a visual input. This process is called Fixation and it should form the basis of any good visual marketing and technical communication strategy.

Smart businesses are learning that by harnessing effective communication techniques, they save both time and money. The right visual elements can convey the desired online message, guide emotional reactions to content, and inspire change. In this series, we show you just how this is achieved During our four-part visual communication series, you will learn about the core psychological processes at play in good visual communication and how to employ them. The principles we discuss throughout this series can be applied to any visual medium but are particularly suited to online content delivery. 

1. This four part series includes:
2. Perception: How the physical characteristics of a design environment influence its function
3. Learnability: How good visual design aids comprehension
4. Appeal: Attractiveness Bias and how to leverage it
5. Design Framework: Making better design decisions

Visual perception is the brain’s ability to make sense of the world around us. Whether our professional sphere is technical communications, software development, web design, instructional design, or marketing, we can’t fail to appreciate the power and potential of user perception.

To understand perception, however, we must recognize that seeing is not believing. There are many ways in which our perception, in particular our visual perception, can be tricked. I’m sure we all remember Hag-Lady from our childhoods, and the Muller-Lyer illusion. The Muller-Lyer illusion in particular demonstrates the extent to which culture influences perception. Their Carpentered-World theory shows us that interpretation of visual data varies across cultures, populations, and age ranges.Material culture, and what we see in the designed world around us, has a major influence on our perception.

It is vital, therefore, that any visual communication strategy endeavors to harness the principles of user perception. Let’s take a look at our first visual design principle and discuss its relationship to user perception. 

Affordances are visual cues that signify how users might interact with a UI element. In other words, affordance is the possibility of an object.  It is possible to push a button or to click a screen element or to add text to an input field. These are possibilities afforded to the user. 

There are six types of affordance. Let’s see how to use each to make our visual communication pop. 

Explicit: Tell  your users how to interact with a screen element using language or physical appearance. For example, a raised button tells a user that it is clickable, while an input field with a Full Address label prevents your users from having to search for an area to input this data. These kinds of explicit affordances can provide your users with very simple navigational cues, but bear in mind that most users don’t require you to hold their hand through every step and section of a UI. 

Hidden: Show  necessary interactions once the user interacts with a screen element. Hovering, tool-tips, and drop-downs are examples of hidden affordances. They help to reduce visual complexity and maintain a clean UI while still providing the necessary navigational and informational tools to help your user to find what they need.

Keep hidden affordances to a minimum. You must strike a balance between a simple UI and the means to intuitively negotiate it. Also remember that content rendered for touch screens does not readily lend itself to hidden affordances like split buttons.       

Pattern:  Communicate the function of a screen element through recognized, established conventions. We know, for example, that the narrow banner at the top of a webpage contains clickable navigation elements. We also understand that the main logo or favicon on any given webpage is clickable and will return us to the home page.

Pattern affordances are an elegant means of parsing complex interfaces, with the caveat that you must always step back from your design to assess just how intuitive your affordances really are. Without assessing their intelligibility, we are in danger of providing our users with breadcrumbs on a path to nowhere.  

Metaphorical: Communicate function using recognized real-world visual metaphors. The little envelope icon,  for example, indicates emails, while magnifying glasses usually denote the ability to search a page or site.

In a document viewing app or webpage, a magnifying glass is  a more contextual element, signifying the ability to zoom in on content. The obvious advantage of metaphorical affordances is the speed at which they convey complex interactions and functions. Take care to choose accessible, recognizable metaphors; obscure or overly abstract images may only confuse and alienate your users. 

False: Here the affordance is offering something other than what the user is expecting and, often, doesn’t offer any function at all. As you might expect, false affordances usually occur by accident; a favicon that doesn’t bring you home, a seemingly clickable element that isn’t pushable after all, a greyed out word that seems to afford nothing but may be a link.

There are instances, however, where false affordances are a deliberate design choice. Understating or obscuring a screen function can draw the user’s attention to the rest of the interface or to a particular area that the designer wants to showcase. You must take great care with false affordances to ensure that the trade-off between intuitive expectations and novel design is worth it. Ask yourself, ‘does this affordance still communicate my message?’ If not, kick it to the curb.

Negative: Indicates no affordance at all or the inability to use an affordance at the present time. A grayed out button may, for example, convey the message that an input choice is not available to you or it may be a means to highlight that an input or stage in a procedure is not complete (e.g. the inability to proceed with a form with an incomplete input area). Like false affordances, negative affordances are more often than not a mistake. We recommend that you exercise caution with false affordances and use them only to communicate a missing step or piece of information. Usage beyond this narrow scope gives your users the impression that your UI is rushed, ill conceived and non-intuitive.  

Now let’s take a look at how scale, hierarchy, alignment, proximity and balance work together to influence user perception.  

When writers and designers have not taken any steps to direct the user to the most relevant, interesting, or helpful information, users will then find their own path. In the absence of any signals to guide the eye, they will choose the path of minimum effort and will spend most of their fixations close to where they start reading (which is usually the top left most word on a page of text).

(Nielsen, 2017)

We have long understood that readers of web content tend to scan the material in front of them rather than systematically read it in a uniform and sequential manner. The F pattern, the Gutenberg layout, the layer-cake, and now even the Z pattern, are all examples of how, left undirected, the human eye charts its own course through online information in an effort to acquire the necessary data as quickly as possible. 

Good visual communication techniques, however, allow us to control how our users perceive our content. We have a number of ingenious directional tools in our bag, many of which are guided by Gestalt principles of human perception. These gently chaperone our users through our UIs and orient them in the manner and order we feel best showcases our content. Let’s take a look at some of the most important of these tools.

Scale: Using size, we communicate the relative importance and value of design content. The thinking is that the bigger the design element, the more significance the user l attributes to it. Traditionally, good UIs use no more than three sizes in their design. This is sufficient to communicate scale and importance without confusing the audience and making the UI too busy and unbalanced. 

Hierarchy: A good visual hierarchy enables your user to grasp your message quickly. You achieve visual hierarchy using variations in element and font size, value, color, spacing, and placement.

It is vital that your user doesn’t struggle to understand where they should focus their attention; a clear visual hierarchy guides your users’ eye around your UI in the manner you feel best suits your content. Best practice suggests that you use two to three typeface sizes to tell your users what content is the most important within your information architecture. Alternatively, use brighter colors to draw attention to the most important elements, with muted tones for items that are less significant.

Balance: A satisfying arrangement of design elements presents a sense of balance to your layout, something your users will (often unknowingly) appreciate. The trick here is to imagine an invisible axis, vertical or horizontal, and evenly distribute your design elements across this axis. Elements don’t have to be symmetrical, but remember that the area occupied by your elements is as important as the number of individual elements. No one area of interest should be so busy or visually covetous that it draws your users’ attention away from the other elements of your design. Remember also that your design isn’t limited to a symmetrical or asymmetrical layout: your elements can radiate from a central point. Symmetrical design communicates a calm, static message, while asymmetrical design signals dynamism and movement. A radial design is a dynamic design that always draws the users’ attention back to the centre of the composition. The choice is yours, just take time to hit that sweet spot. 

Alignment: By employing a considered, logical alignment of design architecture, you create a visual connection between related elements. Good visual alignment underpins the previous design principles by satisfying users’ expectations of how to navigate your content through balance and scale. It allows them to form connections and meaning that boosts their appreciation of your content. Again, you employ an invisible prop to guide your design alignment. This time you imagine a line or margin. This line can match to either the edge of a design element (edge alignment) or the centre of an element (centre alignment). Spacing is important here too. Ensure your spacing, particularly as it pertains to text, is consistent and appropriate.  

Using your invisible guideline as your fixed point, you can choose a variety of elements to emphasize your message. Arrows, icons, and glyphs are just a few of the options to align your content and accentuate your design. 

It is often easier to align text to your background than to align the background to the text.  Better still, incorporate your text into your background design to achieve the perfect synthesis of alignment and scale.  

Proximity: A close ally of alignment, the principle of proximity reflects our tendency to perceive elements that are close to each other as a unit. On the other hand, elements that are displayed far from one another are perceived as disparate or unrelated. With the clever use of whitespace, you can signify meaningful groupings. 

In the search bar below, extra whitespace to the left of the search bar signifies that its functionality is different from the other elements.

On a smaller screen, however, without extra white space to separate the search bar from the other elements, shifting it up sidesteps the perception that the elements form a single group. 

As visual communicators and designers, our job is not just to make content look pretty (although this is an important part of it), but to design content that users perceive as readily usable, evoking an emotional response and strengthening brand recognition. 

Users are in a hurry, they don’t want to fumble in the dark for the meaning in your design and they won’t stay to discover it in the first place if you don’t quickly arrest their perception as soon as they discover your content. 

Through the remainder of this series, you will learn:

• how to promote comprehension through visual content design.
• how to maximize usability and accessibility.
• how to harness attractiveness bias.
• how to design a visual framework to guide you through all your design decisions. 

So stay with us for the whole journey, it is worth the ride!