10 PSYCHOLOGICAL PRINCIPLES TO DESIGN WITH

Design is most effective when executed with knowledge of psychology. Knowing how people react to visual stimuli allows the crafting of an effective design, with out psychology you are guessing. Psychology itself is a vastly fluctuating and massive subject, but that doesn’t mean you need a PhD to use it in your design. There are simple psychological principles you can use to improve the effectiveness of your design even without knowing the theory behind it.

While there are hundreds of relevant principles, the following ten can be used to improve the aesthetic quality, usability and comprehension of your designs.

1. Visceral Reactions

The first emotional reactions originate in the central nervous system. These reactions influence our behavior on a subconscious level, meaning we don't realize they are influencing our behavior.

You may consider yourself self-aware and in complete control… well I’ve got news for you, you’re not. For centuries cognition has tricked on humans into believing their actions are completely thought-out and preplanned. Modern psychology says otherwise. Much of human behavior is still rooted and influenced by our “old brain,” the part of our mind controlling the survival instincts that kept our ancestors alive (Weinschenk, Nuero Web Design, 2009.) The old brain reacts much faster than conscious thought and is triggered anytime we’re exposed to a representation of food, shelter, danger or reproduction. These reactions are called “visceral reactions” as they originate from the central nervous system (Norman, Emotional Design, 2005.)

Not only are old brain signals faster than conscious thought, they influence us with out our knowledge (ie: visceral reactions are subconscious.) Ever love a design  but have a hard time explaining why? Chances are you had a visceral reaction and your old brain reacted to the visuals positively. Because visceral reactions are rooted in our genetic makeup, the responses are fairly consistent across all cultures, genders and demographics. As a result, visceral design produces very predictable reactions.

Visceral design is broad enough that it could (and probably will) have a blog post dedicated to it. To keep things short I recommend using design elements that could represent any of the old brain triggers. Specifically use elements that could represent survival, threat or reproductive opportunities (sex sells.) For example, you could use an aqua blue that is similar to fresh water, bright colors that are reminiscent of fruit or a clean open design similar to a safe environment.

2. Cost-Benefit Analysis

Form fatigue is a common example of the cost-benefit problem. The energy cost in filling out a long form often outweighs the perceived benefit of doing so.

Related to visceral reactions is the cost-benefit principle which surmises behavior is regulated by the perceived difficulty of a task in relation to the perceived reward (The Journal of Neuroscience, 8 April 2009, 29(14): 4531-4541.) Basic human behavior can be summed up in two patterns: opportunity seeking and threat avoidance. For example, your body is hardwired to seek out energy dense food, which is why calorie dense foods like french fries and chocolate are harder to resist than lettuce. Because the fuel for energy (food) used to be a scarce resource and took energy to obtain, we have developed an uncanny drive to conserve energy where possible. Our ancestors survived by limiting their energy usage to activities that would provide high benefit.

Despite the centuries of evolution between our nomadic relatives we exhibit much of the same behavior. Subconsciously we are always evaluating the potential energy expenditure for a given activity and our perception of the reward of doing so. On the web this means if a task appears to have a high energy cost, users are unlikely to complete it unless the reward is of high value. The most common example of this is form fatigue. Long forms take a notable amount of energy to complete. Users who will receive something valuable in return for filling out the form are more likely to go through with the task. If the user is just looking to get information about a product or service they will likely abandon the process and find a website that requires less effort.

Remember that energy expenditure is not limited to physical activity. Mental activity can be just as taxing (although in a different form.) Requiring frequent decisions, hunting, memorizing, learning or contemplation will slowly drain the user’s energy until the cost of proceeding outweighs the benefit of completing their task.

3. Hick’s Law

I originally covered Hick’s law in my post about 10 Laws to Design By. Simply put, the law states that more option one is exposed to the longer it takes to make a decision (Hick, On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4:11-26, 1952.). Many claim they would like more options in a decision-making scenario, but their behavior illustrates the contrary. The difficult in making a decision actually increases with additional options and in extreme cases it’s so hard we’ll opt not to decide at all.

The classic example is a study that tested the effect of jam options at a busy grocery store. The study used a jam tasting display with two configurations. One with 24 different jams and the other with only six.  They found with the 24 option display, 60% of people passing tried the jam and  3% of them purchased. With the six jam display, a lesser 40% of people stopped but almost 30% purchased (Iyengar, Shena S. and Mark R. Lepper 2000. When choice is demotivating: Can one desire too much of a good thing?. Journal of Personality and Social Psychology.79:995-1006). When faced with 24 different jams, the nuances between them all made it too difficult to select. With six jams it was easy to determine which one tasted best and more purchased as a result.

Hick’s Law directly relates to the cost-benefit principle. The more options a user must pick from — be it navigation, products or images to look at — the more energy it takes to make a decision. Eventually the energy required to make the decision becomes so large the benefit of making it doesn’t seem worthwhile.

On the web, Hick’s Law tells us to keep options to a minimum. This applies for everything, including content on the page, navigational elements, images, etc… Anything that on the page gives the user another option of something to read, focus on or click. Removing everything unessential reduces the amount of unnecessary options and makes user decisions easier.

4. Gestalt Psychology

It only takes a little exploration into cognitive psychology to smash the illusion that we have a strong grasp of the world around us. It seems our brain loves to take shortcuts and make assumptions all the while reassuring ourselves that everything has been well thought out. The most nefarious of examples are the Gestalt Principles. Developed by german psychologists in the 1920s, the principles describe the ways that our brain assumes unification or relatedness to visuals based on proximity and whitespace. For example, visuals in close proximity are perceived as related when not necessarily be the case. Another example is that of similarity, where elements that look similar are considered to be related and elements that look different unrelated  (Humphrey, G. (1924). The psychology of the gestalt. Journal of Educational Psychology.)

Elements grouped in close proximity are seen as related.

Beyond proximity and grouping, the principles include similarity, continuance and figure ground perceptions. Gestalt principles are complex enough where I could write a post about them specifically (and probably will,) so if you want to know more it’s time to do some research on your own. Otherwise just know that people will make assumptions about what they see and find meaning in visuals that might not be there. Ultimately it’s critical to be intentional about what appears on the page and how it’s treated.

5. Pattern Matching

Despite the low detail, most will recognize this shape as a dancer. The form is matched to preexisting patterns of what dancers look like.

Pattern matching (or pattern recognition) is the way we process everything we see from people’s faces to the written word. When visual stimuli enters our eye it immediately starts a chain reaction in the brain. We subconsciously hunt  hunting for anything similar to the current stimuli that we have experienced in the past. If the stimuli is matched to a preexisting pattern we recognize what we are seeing, otherwise the stimuli is perceived as being new. This process goes beyond recognizing forms and colors, it also triggers any cognitive associations with the pattern being matched.

Look to the figure on the right, how do you know the silhouette is a dancer? Despite the lack of detail the shape fits a pattern matching dancers you have previously experienced. Now reflect on your thought process upon seeing the image, did your mind wander to previous experiences, encounters and feelings surrounding dancers? This is the pattern matching system at work.

Pattern matching also influences how familiar something feels. The more often you see something the more patterns you have stored and easier related patterns are  to identify. When patterns are easily matched they feel familiar or  “normal.” Unmatchable or difficult to match stimuli feels foreign and can even be unsettling. While drastically different these new visuals are actually more memorable, at least at first. Like anything else, repeated exposure dulls the “shock” value of the stimuli eventually making it feel ordinary as well.

6. Facial Recognition

One of the most active form of pattern matching that occurs is facial recognition. There is no pattern that we recognize that has the impact of the human face. We are a socially driven race, well demonstrated by the rise of social networks and the role of social organization in human evolution. But before there were computers, smart phones and text messages most interactions occurred faced to face.

Human interactions are just as likely to bad as good. As a result, we evolved with a semi-conscious ability to read  faces. This technique is only effective because many facial expressions are involuntary. While you can put on a smile despite being sad, there are tiny muscles in your face that reveal your true feelings. There was a time where predicting the intentions of others was the difference between avoiding a threat and walking into danger.

People are instinctively drawn to the human face for two reasons. First to first identify another human. Second, to read the persons facial expressions to determine if they are friend or foe. The more aggressive the facial expression the more attention it receives, demonstrated by a study where participants eyes were typically drawn to unhappy faces in a sea of people (Facial Expressions of Emotion: Are Angry Faces Detected More Efficiently? Cogn Emot. 2000 January 1; 14(1): 61–92.).

Not only are we drawn to peoples faces, we read their expression and interpret their mood. We are most adept at recognizing angry faces as they represent a potential threat.

Related to web design, the use of faces can draw attention or set a mood. People will naturally identify with images of people over objects, landscapes or abstractions ( Neilsen, Eye Tracking Usability, 2010.) Furthermore the expression of the depicted person will influence how the user feels about the website. Someone happy and smiling will convey a sense of welcome where a picture of sad, starving children will convey sorrow and desperation. The more authentic the photo, the more effective it will be… this means drop the stock photography and be very intentional about what photos you take. Users will pick up on the emotions of those depicted, so avoid photos of people looking uncomfortable at all costs. This requires effort as the average person feels self-conscious when being photographed.

7. Social Influence

The influence of others extends far beyond facial expressions, there are specific actions that have predictable influences on human behavior.There was a time where being able to work together provided greater avoidance of threats and more opportunities for food and reproduction. As a result, the basic “systems” of human interaction still exist in our DNA. In the article Persuasion in Design, author UX Designer Elisa del Galdo references the six universal principles of social influence. These principles are hardwired into the human psyche, developed as a necessity to human survival.

As described in her article, the six principles are:

• Reciprocation: We are compelled to return favors, often in greater value than the original.
• Authority: We trust experts and those of high status or power.
• Commitment/Consistency: We want to act consistently with our commitments and values.
• Scarcity: The less available a resource, the more we want it.
• Liking: The more we like people, the more we want to say yes to them.
• Social Proof: We look to others to guide our behavior.

Smart designers can use these concepts to influence users toward desired actions. Giving away free information or tools can be used to persuade users to volunteer their contact information via the reciprocity principle. Signs of authority or expertise can increase perceived trust. Low inventory numbers might indicate scarcity and move someone to purchase sooner than they would otherwise. It doesn’t take too much creativity to identify powerful ways to design using social influence.

8. Selective Disregard & Change Blindness

You see and notice everything that happens around you, right? Well you might be surprised. Our brain does a surprisingly good job of tricking us into thinking we absorb everything we see, but we often miss things that happen right in front of us. This phenomenon is called Selective Disregard and happens out of necessity as it’s impractical (and arguably impossible) to process every visual in our peripheral vision (Nielsen, Eye Tracking Usability, 2010.)

Just walking down the street you are exposed to millions of visuals that could demand your attention, but unless they are necessary your mind filters them out as if you never saw them. If you are looking for Main Street any street sign will catch your attention and be processed. If you know where you are going the signs will enter your field of vision only to be ignored because they are unnecessary. This phenomenon is known as selective disregard, the process where your mind proactively ignores anything deemed irrelevant.

This most obvious example of selective disregard is banner blindness, where users have become so accustom to ignoring online advertising they couldn’t tell you if the website they surfed five minutes prior had ads or not. Selective disregard applies to more than just advertising, users often gloss over anything that doesn’t appear related to their task at hand. Sometimes users will miss key elements because designers have strayed from convention. Because the search form doesn’t look like a search form the mind ignores it and continues on. For usability sake, all elements should be clearly labeled and follow conventions matching the users expectations.

The more extreme brand of selective disregard is change blindness. Change blindness occurs when the state causes blindness of large and obvious changes. As discussed regarding the cost-benefit principle, our mind does all it can to conserve energy. One way it conserves energy is assuming nothing has changed unless it’s there is a clear indicator otherwise. There are a few really funny and interesting demonstrations of Change Blindness on YouTube.

In the javascript laden, non-refreshing web of today change blindness is a thorn in any designers side. If something changes on your page you better make it obvious, less you brave the scorn of frustrated users. Always remember that small loading GIFs and flashing content might not be enough and when in doubt, make changes painfully obvious.

9. Progress Disclosure

Ever get the feeling that learning increases in difficulty with age? Think again, learning is difficult regardless of age. Storing information is a high energy, high focus process.  The process in which we convert stimuli into stored memories is complex, influenced by hundreds of factors. You don’t need to fully understand learning theory to be a great designer, you just need to know that to conserve energy, people prefer to recognize information rather than store and recall it (ie: learn it.) Furthermore, when learning is required, most people have a limit to the information that can be absorbed in one sitting. This means if you overwhelm someone with too much information their eyes are likely to glaze over and their attention diverted elsewhere. Remember that sinking feeling in your stomach when you visit a website with a seeming endless page length? That’s the overwhelm I speak of.

This doesn’t mean you should opt to reduce the amount of information on a website, after all… content is king, right? Rather you should present information in such a way that it’s easier to absorb. Progressive disclosure is a presentational method that does just that. It’s technique where information is given to the user in small bites with the option to learn (or disclose) more if desired. This prevents information overwhelm and ultimately leads to more effective websites.

Some argue against more clicks citing the infamous “Three clicks rule,” but pay no mind as Neilsen debunked it ages ago (Neilsen, Prioritizing Web Usability, 2006.) Instead focus on small digestible chunks of content with a strong scent towards more information (where necessary.)

10. Dual-Coding Theory

Instructional design is rarely mentioned amongst discussions of web design despite its overarching relevance. With the rise of web applications, web designers often find themselves as stand-in instructional designers. But even outside of direct instructional design, there is value to be learned from the study. One of the most relevant (in my opinion) is Dual-Coding Theory. Published in 1986, the theory explores the relationship between memory and learning through verbal and non-verbal channels. The theory stipulates two cognitive systems, one that deals with verbal stimuli (words, spoken language, etc…) and another for processing imagery.

Which is easier to process? The all text version or the combination of visuals and text?

The key takeaway is that people learn and remember best when presented with both forms of stimuli, verbal and image based. As explored in a previous post on mental processing, most people can comprehend image based messaging faster than verbal. When imagery and verbal communication is combined, the greatest level of retention is achieved. In today’s text-heavy web Dual-Coding means a shift in design methodology. Rather than simply designing the layout and “framing” the content, designers need to start contributing to the design of content itself. Whether you are including diagrams, videos, infographics or relevant photos, clients need assistance in providing the second channel of content.

In Summary

There is no better approach for improving your design than gaining a better understanding of the people you are designing for. There is little practicality in dissecting every psychological principle relevant to design, but understanding a handful of key concepts can be a powerful gateway into designing with psychology in mind. The concepts listed in this post should be enough to keep you in the right mindset when designing and (hopefully) motivate you to learn more.