Four psychology principles every UX designer should know

the brain

There’s a darn good reason that there are so many PSYCHOLOGY+UX articles floating around. User experience design has its conceptual roots in cognitive and behavioural psychology.

Even though you no longer need to be a psychologist to be a user researcher, if you’ve arrived at a UX career through a path in visual design, you might be missing out on some core psychology knowledge to help you make better design decisions.

Let’s start with a brief background.

Though the concept of human-centered design has gone by many names over the years (human factors, usability, human-computer interaction, user experience design), this philosophy and methodology largely took hold during World War II.

Because of military necessity, human factors and ergonomics psychologists in the US rigorously studied the limits of the human brain and body and designed airplane cockpits with improved safety and usability. The design goals were to minimize human error.

Oh, and me? That’s the kind of work I did a few years ago when I decided to get a PhD in Human Factors. I researched surgeons instead of pilots, but the idea was the same. This was before I knew that UX was all the rage, which would marry my loves of human-centered research and product design. In my eyes, UX took what Human Factors stood for, but added a little more fun to it.

Now that I’ve personally worked with many different professionals in different industries, I have a handle on some principles of human psychology that I believe all UX designers should know, but probably don’t. Not pseudo-psychology like “how the color green makes people feel,” but real, scientific principles to elevate your UX design practice.

1) Proximity-compatibility principle

Despite being a tongue twister, the idea is very simple. The proximity-compatibility principle states that within a display or screen, items should be grouped together when they are related to a common task.

This design principle evolves from a basic Gestalt visual principle. (A quick spark note: The Gestalt philosophy suggests that humans perceive a whole that is “greater than the sum of its parts,” meaning our brains are heroes at making sense of complex visual input.) According to the Gestalt principle of proximity, we perceive grouped objects as more related than objects that are spaced farther apart. Easy, right?

As a UX designer, go a little deeper and consider how the proximity among items influences not only how a display looks and feels, but also the user’s task flow.

For example, look at how Eventbrite uses white space to group ‘compatible’ information together, in close proximity. The pricing information and ticket link are located together because those items are integral to the same task: buying a ticket. The event date, time, and calendar are placed together because it’s likely that while users are examining event details, they also want to access their personal calendar.

eventbrite event page example

By grouping related, compatible information, you help the user naturally progress through your interface.

2) Continuity principle

The continuity principle suggests that when elements are visually arranged on a line or curve, we perceive them as related or connected. This perception can even override other strong visual grouping features like color.

continuity principle

Image from Smashing Magazine

The continuity principle matters in UX when you are arranging elements on a page. On Amazon, we perceive the rows of books to be related because they are arranged in a continuous line. The user understands that she is looking at an organized list of items curated by Amazon algorithms.

rows of books on Amazon.com

On the other hand, Pinterest-style blocks have variable heights. The arrangement of non-straight rows conveys a less-cohesive arrangement of items. This design feels like more of a scattered corkboard than an orderly filing cabinet, which is perfect for viewing a user-curated assortment of sources and ideas.

rows of products on pinterest

Users probably perceive Pinterest lists as less interrelated than Amazon lists, even though they never consciously think about it. The two designs visually communicate different psychological meanings for different purposes.

In your own UX designs, think about how you can use continuous or non-continuous lines to communicate relationships within information.

3) Focal point principle and visual hierarchy

Our visual attention is drawn to items that stand out from the rest of the environment. You can thank our expired caveperson needs, like scavenging for food and avoiding predators, for that. You can use the focal point principle to your design advantage by guiding visual attention to the most important page elements.

Designers intuitively understand focal points very well. UX designers should also think about focal points as a way to make an experience easier, to make pages super scan-able while avoiding overburdening the user’s brain.

Notice that the Blue Apron homepage contains “Sign Up” and “Sign Up Now” buttons that are orange and rectangular, in contrast to the blue logo, borderless navigation links, and white tag line.

blue apron homepage

Orange is effective here because the colour and shape of the buttons visually contrast with the rest of the navigation. If a user wants to sign up for Blue Apron, he’ll have no trouble figuring out how, which certainly translates to sales benefits for the company as well. And the two similar-looking orange buttons achieve the same goal, which is important for clarity’s sake.

As a UX Designer, consider how you can employ focal points to guide users to accomplish their goals. Besides colour and contrast, you can use size, shape, typography, or motion to guide visual attention.

Of course, limit your intended focal points to only the most important items, or users will feel overwhelmed.

And speaking of overwhelmed users, how do you organise large amounts of information to be easily digestible? Use a visual hierarchy. Humans naturally perceive the biggest or most attention-grabbing items to be most important, so you can use visual differentiators to create an organisation of information, from highest order to lowest order.

Newspaper editorial designers are really good at creating a visual hierarchy. Historically, pre-Twitter, passers-by on the street needed to quickly scan front pages in a newsstand to decide whether to buy a paper. Readers can rapidly digest a lot of information thanks to headlines or images providing a focal point, and subheadings giving a visual hiearchy outlining the important stories.

4) Hick’s Law

This final psychology principle is actually classified as a “law” because there’s a mathematical formula involved (fancy!) In the 1950s, psychologist William Edmund Hick identified that the time it takes for a person to make a decision is dependent on how many options they are given.

What does this mean to UXers? To make things easier on the user, limit the number of options provided. On an app or website, if users face too many options without a clear path, their tendency may be to quit and move on.

If you’ve ever eaten at a Cheesecake Factory restaurant, you recall their massive menu. Although I don’t have data to support this, I suspect that it takes customers an inordinately long time to decide what to order. “Do I want crabcakes? Avocado toast? Pizza? A cheeseburger? Hibachi steak? Fish and chips? Chicken enchiladas? Pasta carbonara?” There are pages and pages of options, spanning several cuisine categories. And that’s not even including the cheesecake.

appetizers on a menu

Luckily, by this point, customers have probably committed to sitting in a restaurant booth. And luckily for the business, the tasty, overindulgent calories keep them coming back for more.

But what about digital experiences? Don’t make the TOO MUCH mistake with your designs. Chances are you want your interface to feel more like a menu for Five Guys burger restaurants.

five guys menu

I’m not saying that you have to toss out pages and features, but if you organize decisions in a way that makes sense, you can keep users on board. That means prioritizing things (see #3!) and opting for simplicity whenever possible. Think: clear categories, logical flow, nothing extraneous.

There is a very thorough article on Hick’s Law that was recently published on the Interaction Design Foundation website if you’d like to read more examples.

I wholeheartedly believe that all of psychology plays into UX design, from visual perception to social psychology and behavior. The more you understand how people think and feel, the better you can create positive, helpful, delightful experiences. What do you think? Are psychology principles really worth knowing in UX design?

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

Photo credit: recombiner via Visual hunt

Becca Kennedy
Becca Kennedy is a Human Factors Psychologist and cofounder of Kennason, a UX consulting company in Upstate New York. Say hello on Twitter: @becca_kennedy

7 Responses to “Four psychology principles every UX designer should know

  • the five guys menu is the most confusing and stressful thing, specially when you order for many people

    • Tom Lloyd
      Tom Lloyd
      4 weeks ago

      I’d agree that it can be confusing—though the layout is good, it’s annoying to change the toppings in each order as there are so many to choose from (making you choose between subtracting ones you don’t want vs. adding ones you do). Also the fact that their “little” burger is the normal size one 🙂

  • hartpartnersltd
    4 weeks ago

    Nicely written. You’re right, too many “UX” people are not aware of these foundational principles.

  • Why do you find it confusing? To me it seems well laid out, compared w Cheesecake Factory.

  • Color and how it effects humans pschologically is in fact a very real science, not a pseudo-psychology as you call it. Where did you get your PHD from again?

  • Becca Kennedy
    3 weeks ago

    The psychological effect of color depends on environmental context and other factors. It is pop-psychology in many marketing blogs who make broad claims about what color “means.”

  • As a UX Designer who started the career in the Graphic Design field, I’m quite astonished by the misleading idea conveyed on this article that visual designers might not have some core psychology concepts to drive their designs in when switching to UX.
    From what is written, I’d say that nearly the 4th one is less covered in a Graphic Design university education. However, from 1st to 3rd, all those principles were heavily studied under the umbrella of Gestalt psychology during my education, having the same basis of research-results as described in the article. In fact, the studies of those principles at the time were what triggered my interests to my move to UX design rather than graphic artwork. I didn’t even needed a PhD to learn and research about that.
    To complement these, I’d mention as well 1st principle that compatibility could be explained from Gestalt principles of closure, when proximity, similarity and/or continuity make our brains draw a “container” to grouped objects, therefore creating a meaning and interdependence between elements and distinguish from others that not belong to that group.
    Besides that, 3rd principle of focal point could be better explained if associated to Gestalt principle of figure-ground.
    In this article I’d say that one important principle from research seems to not have been followed, which is to not declare assumptions without a proper data set exposed to confirm your statement. Visual design education may vary across schools around the world, some can be driven to give basic software training for market inclusion. others can be inclined to have more academic and theory ground. These nuances should be clearly indicated why some visual designers that move to UX might not have the cited psychology principles knowledge.

Leave a Reply