5 psychology principles for better UX design - Trymata

5 psychology principles for better UX design


Psychology and UX go hand-in-hand. As we attempt to better understand how users think and act while they are on our websites and apps, we learn more about the foundation of their psychology — their perceptions, their feelings, and their behaviors.

Likewise, knowledge of psychological principles can help us design better experiences – ones that are easier for people to use and understand, that impart positive feelings to users, and that nudge them towards the right pathways or actions.

 

In this article we break down 5 of the most important psychology principles for UXers: Miller’s Law, the Gestalt Laws, the Serial Position Effect, the Von Restorff Effect, and Hick’s Law. We show some examples of who is successfully employing them, and why they are important to UX.

 

 

Miller's Law: People can only remember 7 (plus or minus 2) things at a time

 

(1). Millers Law

Introduced by American psychologist George A. Miller in his descriptively titled 1956 paper, “The Magical Number Seven, Plus or Minus Two,” this principle is fairly self-explanatory.

Miller’s Law asserts that the average person can only keep about 7 (plus or minus 2) pieces of information in their working memory. This is an important fact to remember as we decide how to transmit information to users on our websites and apps.

 

For UX designers, remembering this principle will help you…

  • Present content more memorably and effectively
  • Decide how much to show users at one time (and what to cut out)

One useful strategy for dealing with this limitation is chunking. If you have 20 items to show users, but group them into 7 logical chunks, those chunks become new discrete “items.” Now, instead of having to remember 20 things (which isn’t possible according to Miller’s Law), they only have to remember 7.

The Airbnb search results page is a good example of design that abides by Miller’s Law.

 

Airbnb shows 7 filters at the top of the search results page

 

After users search based on location and date, the results show with 7 filtering options along the top. These filters include the selected trip dates, plus “Guests,” “Home type,” “Price,” “Instant Book,” “Trip type,” and “More filters.” The design is simple, aesthetically pleasing, and most importantly, not overwhelming.

Airbnb uses these 7 top-level filters to house a deeper level of options and selections, which are chunked to make finding and interacting with them easier.

If a user clicks on the last option, “More filters,” a new menu appears with 7 additional filters, each with chunked subcategories. For example, there is a “Rooms and beds” filter with the subcategories “Beds,” “Bedrooms,” and “Bathrooms,” where users can select their preferred number of each.

 

Each filter contains additional subsets of filters, abiding by chunking principles

 

While the total number of filtering options available in Airbnb’s search far exceeds the magical 7 (plus or minus 2), the design chunks them into a much smaller number of major categories and subcategories. This makes it easy for users to navigate and find the filters they need without getting lost or overwhelmed.

 

 

The Gestalt Law of Proximity states that people group items into larger chunks based on spacing

 

(2). Gestalt Laws

The second principle we’re diving into is also related to chunking. The “Gestalt Laws of grouping” are a set of principles in psychology that suggest people are naturally inclined to organize many smaller items into a larger whole.

The Gestalt Laws are comprised of 5 ideas: Proximity, Similarity, Continuity, Closure, and Connectedness. In this post we will focus on the first, Proximity.

The Gestalt Law of Proximity states that people tend to identify visual elements that are grouped together to be related, especially if there are other elements further away.

 

For UX designers, this principle is useful for…

  • Creating visual hierarchy
  • Increasing the scannability of content

The Gestalt Law of Proximity can be seen in websites that successfully use white space to shape information flow. White space helps to imply groupings, and allows for scannable layouts.

 

Apple's home page uses plenty of white space and groups related elements together

 

The homepage of Apple’s website demonstrates a good understanding of the Law of Proximity. The page, which spotlights the iPhone X, displays the product name, the tagline “Say Hello to the Future,” and “Learn more” and “Buy” links above an image of the new product.

While the font size and style differs between the various text elements, the tight spacing influences users to see a single visual and thematic unit. This helps to organize information and keep the design looking clean and simple.

Apple sticks to this philosophy of grouping — title, tagline, engagement options — surrounded by white space as you scroll down the homepage through its various products. Users can easily identify what they are looking at and how to engage as they quickly move through the site.

 

 

The Serial Position Effect states that people remember the first and last elements in a list better than the middle

 

(3). Serial Position Effect

If you click through to Apple’s product page featuring the MacBook Pro, you’ll see an application of another important psychological principle. The Serial Position Effect holds that people tend to recall the first and last items in a series best, and the middle items worst.

When recalling items from a list, people tend to recall the end of the list best – a phenomenon known as the Recency Effect. The first few items in a list are also recalled more frequently than the middle items; this is known as the Primacy Effect.

 

For UX designers, understanding this principle will help you…

  • Optimize the order and flow of information
  • Limit distraction
  • Direct users towards a specific outcome

Here’s how Apple uses this principle in the design of the MacBook Pro page.

 

Top, middle, and bottom of the MacBook Pro webpage

 

  • The first section of the page delivers a punchy, effective tagline and an attractive image of the product.
  • The middle section lists details about processing power, memory, battery life, color display, and more. These are meaningful to viewers, but ultimately not the most critical bits of information.
  • The bottom section offers the action items: “Shop now” links, a product comparison option, and help and contact pathways.

Acknowledging the Serial Position Effect, this page’s designers put the most important items at the top and bottom while leaving the nitty-gritty details in the middle, where interested users can still find them.

The Serial Position Effect is also handy to remember when sending out newsletters, as people tend to click more on the first and last links.

 

 

The Von Restorff Effect holds that users remember an item that sticks out from similar items around it

 

(4). Von Restorff Effect

The Von Restorff Effect (also called the Isolation Effect) is named after German psychiatrist and pediatrician Hedwig von Restorff. Her study found that when multiple similar items are presented, the one that is different from the rest is most likely to be remembered.

 

For UX designers, this principle is useful in order to…

  • Emphasize an especially important piece of information
  • Encourage one specific course of action

A good example of the Von Restorff Effect in UX design is the use of a button color that stands out from the color scheme of the rest of the page. This draws attention to the button and encourage clicks.

News websites are a great place to see the Von Restorff Effect in action. On the New York Times home page below, there’s a lot of articles to read, but there’s one big one in the middle with a large, prominent photo and headline.

 

Home page of the New York Times

 

In a sea of news articles, the special prominence given to 1 or 2 articles allows the website to nudge users towards the day’s featured articles, which they consider to be the most newsworthy or significant.

Those featured articles are likely to get the most clicks, or at least to be remembered as the headlines of the day by browsing visitors.

 

 

Hick's Law states that the time users take to make a decision is related to the number of total options present

 

(5). Hick’s Law

Hick’s Law, or the Hick-Hyman Law, asserts that the time it takes to make a decision is dependent on how many options are given. Increasing the number of options increases the decision time.

 

For UX designers, this principle can be employed to…

  • Minimize users’ cognitive stress
  • Encourage quick action
  • Increase conversions

Amazon’s “Buy now with 1-Click” button shows their understanding of Hick’s Law. By eliminating as many additional steps and choices as possible, the 1-click purchase option allows users to make instantaneous decisions, which surely helps Amazon’s conversion rates.

 

The 1-click purchase button on Amazon

 

You may not be able to streamline your entire conversion flow to a single click, but you can make it simpler, and take a load off your users, by minimizing the number of choices they have to make.

 

Conclusion:

Whether it is making content more memorable, creating a visual hierarchy or directing users to a specific item, psychology plays a major role in UX design. While these 5 are some of our favorites, there are plenty more psychological principles that are applicable in UX. Which principles do you find most important when you design?

 

Sign up for a free trial of our usability testing tools