INSIGHTS

Have you ever wished you could get inside the heads of your customers? Guide them to your product with a gentle hand? Show them how great your business is without bragging?

It’s easy. Enter through their eyes.

All human brains have consistent, fundamental functionality, which means that -although we all have varying opinions, ideas, and skillsets- all of us work the same way, deep down. By understanding some of the basics, you can learn to communicate more effectively to everyone…and who wouldn’t want to do that?

Full Disclosure: We won’t be using any psychological “tricks” or “brain hacks” to justify our points here. We’ll be using neuroscience. These aren’t persuasion tactics. In fact, we won’t even touch on how people think. This is about how our brains react and process information before we’re even conscious of what we’re really looking at.

By the end of the article, you’ll understand how certain design principles interact with the human brain, and how to apply those same ideas to sell more effectively online.

Pretty cool. Very useful.

Let’s start with some of the basics.

You, I, and everyone we know has five senses. Right? Actually, we have nineteen. All of them constantly gather information about our environment that we can then use to make sense of the world around us.

That’s a lot of information.

And more than 70% of it enters through our eyes.

So much information about the world around us is coming in through two small points. It makes sense for us to focus on presenting our ideas to the eyes in a way that’s engaging and easy for the brain to digest. At its heart, that’s what good design is.

“The soul, fortunately, has an interpreter – often an unconscious, but still a truthful interpreter – in the eye.” – Charlotte Bronte

Unfortunately, though, most designers don’t understand why good design “works.” To our credit, most of the research explaining how our brains really process visual information and connect it to past experiences is relatively new. If you’re able to get a grasp and stay up-to-date now, you’ll be ahead of the curve.

Let’s review before we get into the nitty-gritty.

  • Fundamentally, all of our brains work in the same way.
  • The vast majority of outside information we gather about our environment comes through the eyes.
  • Understanding even just the basics of how our brains process this visual information will make us better communicators.
  • We can sell better, faster, and to more people by executing simple strategies that gently guide the user toward conversion.

 

The Science Behind Unconscious Decision Making

By now, you know where most of the information about our outside environment comes from. More important, though, is how our brains actually handle it all. According to the Max Planck Institute,

“Many processes in the brain occur automatically and without involvement of our consciousness. This prevents our mind from being overloaded by simple routine tasks.”

That’s an important distinction.

As much as we’d all like to be in control of every decision we make, the conscious part of our brains (the frontal cortex) just can’t keep up. Other parts of the brain take the brunt of the real processing in the background.

When it comes to vision, the amygdala plays the important role. Famous for being the home of the “flight or fight” response, the amygdala is responsible for recognizing unfamiliar external stimuli. It does this by cross-referencing the response and memory of past emotions.

Turns out, the amygdala processes visual information before passing it back to the visual cortex for conscious processing. It’s the gatekeeper between our eyes and our mind.

So, how do we use that to our advantage?

Think about the amygdala as a 24/7, high-tech security surveillance system. Always running in the background, it incessantly scans for anything that may present danger (i.e. a stimulus that doesn’t fit into a familiar pattern). When visual information reaches this part of the brain, it’s processed and tagged with different levels of “Pay attention to this!”

So, if we understand how to trigger different tags, we can start to control the way the brain processes information. Simply put, we can tell a user’s brain “Pay attention to this!” or “Come this way!” … before they’re even aware of what they’re seeing.

Now, we can’t just go along overloading the amygdala with bright, flashy “READ ME!” tags. Depending on the user, they’ll either feel uncomfortable (because the brain is processing the design as too unfamiliar and, therefore, dangerous), or all of the stimuli will be grouped into one big tag and individual components will lose their importance all together.

Those are both bad for the user’s experience and, consequently, for your conversion rate.

 

The Best Way to Inspire New Habits Is Through Unconscious Influences

In his book Bottleneck, {} Richard Epworth explains,

“Our rich experience of “Now” seems millions of times more than we can possibly sense in the present moment. So our “Now” must be almost entirely a construct from our remembered past, with just a little information from what we sense in this moment.”

In essence, the brain receives way too much information to possibly process it all, in real time. That’s why we learn: to establish recognizable patterns that we can reuse over and over again to make sense of the world.

Herein lies a solution to our overstimulation problem with the amygdala. We can use recognizable patterns to establish a “safe environment” for the user’s unconscious mind.

Make the user feel welcome. Build them a world of homeostasis, safety, and security with unconscious visual cues. From there, we can choose to tag our calls to action as “Pay attention to this!”

Boom! Conversions.

Let’s review before we go into how to use design principles to achieve this.

  • Our brains process most of the information from the outside world unconsciously.
  • Visual information is pre-processed by the amygdala.
  • The amygdala “tags” the information with different levels of importance, which we can subtly control.
  • To make the tag effective, we need to establish a “safe environment” in the background so that we don’t overwhelm the user. We do this by using clear, familiar, and consistent patterns.

Note: All of these strategies should be used with the goal of granting the user a pleasant experience. You’ll always get the best results when you act as a guide to your customers’ best interests.

 

Getting Started: Design Principles for the Unconscious Brain

Step 1: Establish a safe, friendly environment with recognizable patterns

Uniform Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.

Regardless of placement or justification, there are clearly two objects with a heading and paragraph. A line connecting each heading to its paragraph establishes a clear separation while consistency in font, weight, and size give them equal importance.  

This may seem obvious, but often times a clear visual hierarchy takes a backseat to our desire to “blow away” our audience. Especially with the ability of modern browsers to handle ever-more complex animations, we need to focus on a clear path that takes the user from “Wow!” to “I’m going to buy this.” Keep font, image, and graphic sizes, styles, and weights consistent so that your user can quickly identify the importance of each element and how they’re connected. You’d be surprised how far a simple line connecting several elements can go.

Complexity can be beautiful, no doubt, but in the case of eCommerce, form’s first priority must be to establish function.

Result: Consistent hierarchy guides the user and inspires trust & authenticity

Symmetry and Order

People tend to perceive objects as symmetrical shapes that form around their center.

Here, even though the center box is a different size and color, the central symmetry creates one, large object and gives added importance to the center, green box.

What happens when we have related content that carry different weights in relation to our goals? We can maintain a homeostatic experience while attributing different sizes/styles to related objects as long as we keep central symmetry.

This principle allows us to group similar objects into one, cohesive “super-object.” Tying back into Uniform Connectedness, practice of good Symmetry and Order can make even the most complex sales funnel easy to understand & navigate for every user.

Result: Maintain a pleasant experience through homeostatic layout principles

Synchrony

Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions

All of these boxes are identical in size and spacing. However, those moving up from the left are perceived as having a different fate than those coming from the top right. This separates them into two groups in the mind of the user.

With the average human attention span dropping to below 8 seconds (less than that of a Goldfish), according to Microsoft, animation has become a popular tool to keep users engaged. It has also become the bane of user experience because it’s so often done poorly.

If multiple objects are related, animate them in the same way! Synchrony is our way of connecting the first two principles to animation. As the web progresses, especially into AR/VR, motion will become more important than ever. Make sure to not overwhelm your user.

For more info on good animation, follow Google’s Material guidelines here (https://material.io/guidelines/motion/material-motion.html#)

Result: Animate related objects in the same way to show they are connected

Tying It All Together

By crafting an unquestionably clear environment for our users, we can use subtle deviations from the above principles to add the “This is important!” tags to our CTAs in a natural, non-threatening way. If we do not set up a friendly environment with a clear path to stroll, the trip toward conversion can become arduous.

None of the ideas in this article will work if you do not establish this clear, familiar space for your user.

Step 2: Guide the user by introducing interesting elements

Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.

All of these objects are the same. However, they’re placed in a way that guides the eye toward the obvious CTA (because of the subtle difference in the drop shadow).

Simple enough. Our attention will be drawn toward contrast; toward the element that is unlike the others in some way. The principle of focal points arises out of the amygdala’s need to quickly identify the unknown to alert us to potential danger.

There is a huge difference between “Ooooo! This is interesting,” and “Ah! Where did THAT come from?” When you fail to establish a clear, easy experience, you’ll need to visually “yell” a lot louder to guide your user toward conversion.

If you yell too loud, you’ll scare them. (Unconsciously, at least).

Subtlety is key here. Good eCommerce design should never trigger a conscious response of fear or surprise. Instead we should gently guide the user through an interesting journey toward a reward: the purchase.

When there is a clear path, slight deviations to the principles in Step 1 will get the job done. Subtle animations, unique colors, or even a small displacement from perfect symmetry will drive conversions and repeat business much more effectively than screaming “BUY NOW” to your customers.

 

Taking It to The Next Level

Congrats! You’ve got the basics down. Of course, if it were that simple, everyone would be a designer.

The trick is combining everything into a cohesive framework that drives conversions.

As you implement neuroscience principles, always keep in mind that the first job of good design is to guide the user through a pleasant, interesting experience that leads them to some type of reward. Most of that decision-making process is going to be done unconsciously by the user.

Make sure you’re setting them up for a successful journey by remembering how their brains work.  

Here are some of my favorite examples:

https://www.wealthsimple.com/en-us/ Clever animations with consistent components make the journey fun and effective

http://seedsandsupply.com/mss/ Compartmentalization and a clear hierarchy make an abundance of animations interesting instead of disorienting

https://www.mendo.nl/ A clear hierarchy makes a complex layout easy to digest

http://carv.ai/ Subtle easing makes animations look more natural as you’re guided through an approachable & clear explanation of a novel product

Wrapping Up

As we’ve seen, by learning a little about the brain, we can be better designers. Just understanding what works is not enough. We need to know why it works in order to build creative solutions that push the web forward.

Keep in mind, design should be a guide and it should work regardless of the user’s age, location, status, or culture. The only way to reach overarching effectiveness like this is by keeping in mind that every human is similar: the way our brains work, fundamentally, is the same for everyone.

By taking the time to understand basic principles of neuroscience, we can:

  • Get more sales
  • Give our customers a better experience
  • Learn a little about ourselves along the way

 

Have you successfully applied these principles in your work? We’d love to see!

Do you need help making your website work for everyone? We’d love to help!

OUR INSIGHTS