5 amazing insights from human psychology you can use in Web design

15 min read

If I were to recommend just one book on Applied Psychology for a visual or a UX/UI designer, it’d be 100 Things Every Designer Needs to Know About People. This little book is pure genius because it summarizes some important insights on psychology that can come handy when designing visual flows and interactions on web, mobile, and in print. Below are five most valuable insights I would like to share with you. Enjoy!

1. Our brain has a special part just for recognizing faces

Psychology: The so-called fusiform face area, or FFA, is a special part of the brain near amygdala - the emotional center - and outside the visual cortex. Its sole purpose is to recognize human faces. It does so by bypassing the brain’s regular interpretive channels, and helps identify faces more quickly than objects, like an express line at the airport.

Design Takeaway: People react to faces faster than anything else. Especially impactful are faces that look straight at us and that are close-ups.

Examples: Below is the website of Tony Robbins, one of my most favorite personal and professional coaches. The banner picture won’t leave anyone indifferent. It certainly reflects his charisma, professionalism and a deep level of understanding of human psychology.

Faces can be different, too. There are happy faces, surprised faces, and there are fragmented faces that are floating around and interact with us. This brilliantly executed idea is seen on the Female Fatale Studio website.

2. Danger, Food, Sex, Faces, Movement, and Stories get the most attention

Psychology: We have already talked about faces but there are other things that capture our attention as well. There are three distinct layers to the brain. The newest layer, the neocortex is where logic and reasoning resides. Below that is the mid-brain, the emotional processor. The oldest layer, or the reptilian layer, is primarily focused on survival, food and sex. It constantly scans the environment asking “Can I eat it?”, “Is it dangerous?”, “Can I have sex with it?”, “What’s new?”. This brain actually perceives all the incoming information - aural and visual. That’s why we just can’t stop noticing food, movement, faces, sexual images, and stories.

Design Takeaway: Use videos and moving images to get attention, as well as images of food and close-up faces. Tell a story whenever you can, especially when presenting boring and factual information.

Examples: Besides the dynamic yummy sushi platters above - inspired by my passion for sushi, a perfect example of both, storytelling and a movement is Active Theory website. It’s a creative agency specializing in websites, apps, installations and VR/AR experiences, and you can definitely become engaged immediately, thanks to a beautiful interactive Unity scene.

Active Theory Website

3. Nine percent of men are colorblind

Psychology: Most of the genes for recognizing color are on the X chromosome. So, if a man inherits genes with color deficiency/blindness, he will be colorblind since he only has one X chromosome. Colorblindness makes it hard for around 9% of males to distinguish between reds, yellows and greens.

Design Takeaway: If the website has mostly male visitors, using a banner image with solid green background is probably not the best option. Same goes for the green logos, of course. In fact, one should avoid red, green and blue, giving preference to shades of brown and yellow. It’s tough when your branding identity has nothing to do with nature or health, but in this case the best advice is to run your website through the color blind test. I use Toptal and am satisfied with it.

Examples: Below is a comparison between how a Whole Foods website looks to a person who is not color blind and color-blind (with a variation called Protanopia). While there is not that much control over the color of the products, the banner image can be changed to any fruit or plant that is not red, green and blue. A lemon will work. Changing the logo is more problematic in this case, of course.

Next let’s look at an example of a work around. The Starbucks brand can be viewed as both, green (because of the relaxation it implies) and brown (the color of coffee). By the way - did you know that the original Starbucks logo was dark brown? As you see from this comparison, the website looks still okay to a color blind person. The darker green header translated into the color of grass (and still looks somewhat green). The banner is grayish-brown slightly resembling coffee.

4. Sustained attention lasts around 10 minutes

Psychology: Between 7 and 10 minutes - that’s how long the typical attention span is. Then people tend to take a short break and do another 7-to 10-minute activity.

Design Takeaway: When designing a website we should always keep in mind that we have at maximum 10 minutes to keep people engaged. If we need to sustain attention for longer that that, new and novel information needs to be introduced. Videos and online tutorials should not exceed 7-10 minutes as well.

Example: I appreciate how Mailchimp, an online email marketing tool, sustains website visitors’ attention by introducing a series of sections, each with a clear CTA button and a CTA header. This structure along with much white space help users go through the information and find the relevant one quickly.

5. Peripheral vision is used more than central vision to scan the environment

Psychology: From the evolutionary standpoint, when our ancestors were not yet the apex predator, noticing a lion stalking from the side was literally a matter of life and death. Those with poor peripheral vision didn’t survive and, as a result, didn’t pass on their genes. Based on the experiments by Dimitri Bayle where he placed fearsome objects in peripheral vision, amygdala reacted with the emotional response almost twice as fast when people observed them with peripheral vision. There was also another research made by Larson and Loschky where people were shown images of a kitchen or a living room. First they were shown and image where the outside of the image was obscured, and then - when the central part was obscured. The research found that if the central part of the image was missing, people could still identify which room it is but not the other way around.

Design Takeaway: People use peripheral vision when they look at a computer screen which scans the page and helps decide what the page is about. The best advice is to make the peripheral information clearly state the purpose of a website. Also, if we want our visitors to focus on the center of the website, we should avoid putting any distracting elements or animation in the peripheral area.

Examples: We all know examples of peripheral vision at work - and that is the online ads that are usually placed to the sides of the websites. Blinking and colorful, they inevitably attract our attention. Below is another example of moving the information from central vision to peripheral - website of Studio Rotate, a branding agency. The outer circle here is almost identical to the images that were used in Larson and Loschky’s research!

The five insights I mentioned is just a small glimpse of what psychology has to offer for designers. There is so much more, and I would love to share it with you in my next blogs posts.