March 31, 2016
  |   Blog, Digital Marketing, Technical Development, UX / CX

The Psychology Behind Good Web Design

As a web designer, your goal is to make things attractive to the user. But have you ever thought about how visual appeal takes its cues from the inner-workings of the human brain, and that we can quantify what actually ‘looks good’?
Web design is truly not just an art, but a science as well. When you dive into the topic of cognitive psychology, the relationships between our senses, our memory, and our behavior start to become clear. How you design a user friendly, visually pleasing website is based on these relationships.
Let’s start with a definition of cognitive psychology:

Basically, it explains how we take sensory inputs from our surroundings and our brain tries to make sense of it all. That leads to an output, which is your behavior or reaction to these inputs.
The physical world can, and does, impact your online experience. Your ability to navigate and make sense of your physical surroundings impacts the journey you take online; This makes the web all the more susceptible to the rules and laws that are true to you in the real world.
When you are navigating a site, if there are visuals or information that conflict with your real world truths, your brain literally cannot make sense of them and you become confused. If you can’t quickly negotiate these simultaneous situations, you are going to leave the site. Because let’s face it, you can’t leave reality.
Allen Baddeley has done extensive research on this idea. We will use his research principles to illustrate how science should drive design by discussing four facets of the working memory: Visuospatial Sketchpad, Phonological Loop, Episodic Buffer and Central Executive.

Visuospatial Sketchpad: The eyes have it

Visuospatial Sketchpad is literally what you see. It temporarily stores information on how things look and allows us to manipulate images in our mind. The visuospatial sketchpad is where we mentally rotate an object to see how it might look from a different angle or when we think about how to drive from one place to another.
Images on our mental note paper are actually all comprised of shapes, called Geons. For example, when looking at a chair, your brain breaks it down into identifiable shapes, that you then construct together, and using your long-term memory, identify it as a chair. It all happens so fast that you don’t even realize you are doing it.
How does this relate to design? Take a look at this picture, what would you do if you came across this object:
Would you know that it’s a chair?
Your brain has trouble making sense of it, because there is no identifiable Geon, or group of shapes.  The same holds true on a web page, if a visual doesn’t map to your real world experience – like when a button doesn’t look like a button – users get confused.
People, and designers, often forget that when browsing, we all bring our past experiences with us, and apply that knowledge to the site.

Designer Impact: Putting that sketchpad to use

That is why it doesn’t work for most sites to put the main navigation at the bottom or left side of the page, because in the past two decades the information labels that people are looking for is always found at the top of the page. When you try to break those deeply established conventions, you are going against what is already formulated in our brains.  That leads to a user’s frustration, and usually ends their time on your site.
But does that stifle innovation?  Should you not try anything new with your site design?
It’s a difference between innovation and reinvention. Innovation is adding value. If you want to reinvent something and break barriers there are ways to do it with minimal repercussions…BUT you have to know your audience. If you are working with a younger demographic, they are likely to be more open to change. Our best advice is to iterate, test, and evaluate.  
The bottom line here is that if you are not following a logical hierarchy of information, or matching to real world expectations, the user will have trouble orienting themselves;  a button should look like a button, icons should be realistic representations of what they are:

Phonological Loop: Can you hear me now?

The Phonological Loop is made of two components : the articulatory control and the phonological store.
The articulatory control is your inner voice and stores itself into working memory by repeating textual information. Think of it this way, as you are reading this blog, are you saying it outloud in your mind? The articulatory control deciphers this ‘audio’ you are creating and stores it in the phonological store to be processed. This information is more likely to be encoded and stored, the more it’s repeated.
The phonological store is where audio information is processed and stuck in your working memory for about 5 seconds. It only accepts things in audio form.

Designer Impact: Using the loop for higher interaction

What’s the relationship to design? If you are presenting textual information and you expect users to try to remember it, try to show it as many times and in as many places as possible before they move onto the next task, or before you ask them to store it in their working memory.
For example, if you have a promo code for free shipping as a banner on the home page, chances are if that is the only place it is, users will get to check out and not be able to remember it because they only saw it -> read it -> heard it one time. You need to show the information numerous times, therefore allowing the user to repeat that information to themselves and reinforce it in their working memory.

Episodic Buffer: Your internal TV

The Episodic Buffer is the “bridge” between the two sensory input systems (above). It’s not actually doing any memory producing work like they are, but is providing the necessary assistance. The episodes it is helping to create are like short video clips, commonly called ‘memories’. Research shows that these episodes are more influential because they are easier for us to retrieve from the depths of our brain. When it comes to eCommerce, users are 70% more likely to purchase a product if they see a product demo video. This creates a positive episode in the user’s mind that is then directly associated with the product itself.

Designer Impact: Ready, set, action!

Designers who incorporate appropriate, exciting UI feedback through fun animations or videos, create enjoyable episodic experiences that users will remember. Doing so will strengthen your message and add to an overall positive customer journey.

Central Executive: The boss

The Central Executive works with the other two systems to engrain all of the information that you are processing in your working memory, into your long-term memory. It functions as a supervisor to the other ‘slave systems’ and controls information flow between them. Remember, these ‘slave systems’ are just short-term storage of specific areas of detail; information heard (phonological) and information seen (visuospatial sketchpad). The central executive works toward building your long-term memory by putting together information from these sources and creating strong long-term memories, stored within the hippocampus, for retrieval later on.

Design: The science of art

External sensory factors, internal processes, and external response are intertwined in ways that we are still in the process of understanding. With so much of our time spent in the digital world, it is not out of the realm of possibility that some of these truths based on what we now consider ‘reality’ will have to change. As UX/UI designers, it’s important to know how to marry the beauty of design with the scientific principles that drive human behavior.  Taking the time to embrace the research behind user experience will only make your job more interesting and more effective.

Ryan Davis
Ryan Davis is a Visual Designer at Blue Acorn iCi, with an eye for marketing and a focus on results-oriented creativity. He also enjoys long walks on the beach and horseback rides and dreams of world peace.
View All Posts By This Author

Subscribe to Our Newsletter

Get the latest insights from Blue Acorn iCi

Let's build something together.