USER EXPERIENCE

Pricing page design with psychology in mind

Improving conversion and not harming usability

There are so many beautiful pricing UI concepts, but in real life, they often get rejected. What’s wrong with all these bright cards and cute paper planes and space shuttle illustrations? Usually, the reason is low conversion. Businesses can excuse your bulky UI and inconsistent colors, but if a page doesn’t sell, it’s trouble. In this article, we’ll find out how to make pricing pages sell and, at the same time, follow design principles.

Psychology of choice

Economic theories assume that people act logically and search for the most beneficial variant. But we don’t choose all the time rationally. We can stay with a satisfactory option, not necessarily the perfect one. Many choices are automatic and based on thinking templates — heuristics. They were discovered in the 1950s by Herbert Simon, an American economist, cognitive psychologist, and Nobel-prize laureate. In the 1970s, Israeli-American psychologists Amos Tversky and Daniel Kahneman explored cognitive biases and effects that mislead us in decision-making. So, let’s analyze the main human habits of making a choice.

Availability heuristic

People make judgments based on what they’ve recently learned or thought about. This information is not necessarily full and consistent. For example, if you’ve read a lot about cloud storage leaks and privacy violations, you’ll probably set up an own server instead of buying a Dropbox account. User’s choice is connected with the content they consumed earlier. E-commerce sites often track user activity so that businesses know what people saw before and how it might influence their judgments.

Questions for a designer to think about:

• What is at the top of the main page? In other words, what will people see before clicking on the “Pricing” link in the menu?
• What does web analytics tell about the pages people visit before “Pricing?”
• What do people typically do before visiting your site? Is it Friday-evening relaxation or sorting a ton of emails on Monday morning?

Affect heuristic

People’s choice is influenced by the emotion they experience at the moment. In a good mood, we tend to see more benefits and fewer risks. In a bad mood, we focus on downsides rather than gains. For example, an angry user may notice how many helpful features are locked in the free subscription plan and might not sign up at all.

Questions for a designer to think about:

• Can you make people choose when they are in a good mood?
• Is it possible to ensure a person is in a good mood while making a choice?
• How do you make people’s moods better before they have to choose?

Representativeness heuristic

If things seem alike, people think the rest of the characteristics, causes, and results of those things are similar too. It happens because our mind has a system of categories and representative prototypes for each category. Mathematically, a coincidence of two or more traits is less likely. However, people consider the coincidence more likely if it fits the most representative prototype from their memory. For example, you have a category “designers,” and the most representative prototype is a creative bearded guy who rides a hoverboard and likes smoothies. If you see such a guy in a cafe, you’ll automatically assume he is a designer, and probably he has an iPhone and loves avocado salads.

Questions for a designer to think about:

• What “category” does the audience usually assign to your product? Do they think it’s luxurious, secure, practical?
• What characteristics should a product have to make people associate it with the desired category?

Goldilocks principle

As a rule, customers choose the median option, especially by price. People believe they are smart buyers and don’t overpay. At the same time, they feel able to afford a better service than the free or cheapest plan. The median option is also connected with the representativeness heuristic; in other words, it seems to be typical. By the way, Goldilock’s effect is named after the fairy tale “The Three Bears,” in which a little girl Goldilocks tastes three different bowls of porridge and finds that she prefers porridge that is neither too hot nor too cold — has just the right temperature.

Questions for a designer to think about:

• How much does your median option fit the customer needs?
• Given the majority of customers choose the median payment plan, will the company meet its business goals?

Decoy effect

This effect can happen when there are initially packages with different advantages — for example, a cheaper one, and the one with more features. Some people choose the more affordable variant; some prefer the bigger package. Of course, businesses want to encourage purchases of the more expensive option. So, they add a “decoy” option. The “decoy” is better by one parameter and worse by the other parameter from the initial options. As a result, customers change their preferences. They tend to buy the most expensive package because now it seems more beneficial.

In 2018, researchers from the University of Colorado and the Chinese Academy of Sciences studied the behavior of food factory workers. For the first 20 days, workers received spray sanitizer to clean their hands hourly. Then the researchers offered them the choice of the usual spray or less convenient options — a squeeze bottle or a washbasin. The workers increased their use of the original spray from 60% to over 90%.

Questions for a designer to think about:

• Which package does the company want to sell most of all? Do people perceive it as the most advantageous?
• Which option is the most popular? Why do people choose it so often?
• What can make expensive packages look more beneficial?

Anchoring effect

Anchoring is the tendency to rely too heavily on one piece of information (usually, the first one) when making a choice. When an anchor is set, all the further judgments and estimates will be affected by it. For example, the first price you see will become an anchor, and you’ll subconsciously compare all other prices to it. There was an experiment when people were to multiply numbers from 1 to 8. The time was intentionally limited, and they had to estimate instead of precise calculating. Those who multiplied in the order “1×2×3×4×5×6×7×8” guessed the sum four times less than those who multiplied “8×7×6×5×4×3×2×1.” The first calculated product became an anchor and defined the further thinking process.

Questions for a designer to think about:

• What anchors can customers come with to your website?
• What should customers see first to be prepared for making a choice and purchasing a product or service?

Social proof

This term was invented by Robert Cialdini in 1984 and meant the influence of other people on our decisions. If people cannot decide or choose optimal behavior, they tend to copy the actions of others. The social proof effect is the result of our cognitive laziness — a desire to reduce thinking effort — and the belief that other people possess more knowledge about the current situation. In e-commerce, social proof is applied through testimonials, “Our clients” section, and product ratings.

Questions for a designer to think about:

• Who is an opinion leader for your audience? How can you support the product offer with their help?
• Which of your current customers can possess enough reputation and can serve a model for others?

Loss aversion

People usually prefer avoiding losses to acquiring gains. For example, it is better not to lose $10 than to find $10. Some researches even declare that we are twice more sensitive to a loss than obtaining a profit. It means that sometimes a designer should present benefits as loss avoidance to make them more understandable. However, you shouldn’t exaggerate and scare people since the opposite effect — reactance — might happen.

In a 2002 experiment, people were to compose their pizza. The first group was removing ingredients from an all-in-one default pizza. The second group was adding ingredients to a pizza base. Participants who scaled the pizza down ended up with a more loaded dish.

Questions for a designer to think about:

• What are people afraid of losing when they choose a product like yours?
• How can you show customers they will avoid problems by purchasing your service or product?

Reactance

It’s an unpleasant reaction to offers and rules that threaten our freedoms. Reactance occurs when a person feels someone or something is taking away or limiting choice. For example, teens smoke more out of spite, protesting against parents’ control than because they like cigarettes. In e-commerce, reactance is resistance to overwhelming promotion and persuasion. If a product or service is advertised too much, a person tends to do the opposite — strengthen the negative attitude and buy from competitors.

Questions for a designer to think about:

• How do people perceive the messages on your website? Aren’t they pushing too much? Are they persuasive enough?
• What can motivate customers to buy but respect their personal limits?

Von Restorff effect

This effect was observed by Hedwig von Restorff in a 1933 study. People tend to remember better an object that stands out or is highlighted. Some scientists think people rehearse isolated items in the working memory for a longer time. A different theory states that remembering isolated things launches a separate task in the brain, whereas similar items are remembered together as a category and require more effort. For example, if a shopping list item is highlighted in yellow, people are more likely to remember it than the rest of the items. The same works with word meaning: In the list — professional, safe, secure, durable, high-quality, magical, responsible — “magical” stands out and will be remembered the most.

Questions for a designer to think about:

• What does the business want to draw customers’ attention to? How to highlight this option gracefully?
• What is highlighted on the pricing page now? Is it the right thing to retain in customers’ minds? Does it have a connection with conversion?

Psychology is a great secondary skill for designers because it notices tendencies and gives clues on what to pay attention to while making the design. The knowledge of how human thinking works helps to create the first versions of the design and start testing them with users.

Anatomy of pricing interfaces

Pricing can be a separate web page or one of the landing page sections. Anyway, some attributes never change — pricing options, features, prices, and call-to-actions. Nowadays, designers mainly utilize cards, tables, and sliders for visualizing pricing. All the methods have their strong and weak sides.

Cards

Cards are compact and represent 2–3 self-explanatory payment options. They work best when the difference between packages is noticeable. If cards become too long and cannot fit the screen, it’s better either to cut the content or to choose the table format. Cards often appear in straightforward and simple products for non-specialists.

Typical components.

• Plan names (often with an icon or illustration).
• Short descriptions (or a list of 2–5 features).
• Prices and payment schedule (daily, weekly, annually, etc.).
• “Recommended,” “Popular,” or other labels.
• Bonuses (for an expensive plan, paying in advance, etc.).
• Call-to-action buttons.

Tables

Unlike cards, tables have a stricter structure: columns with pricing options and rows with features. On the intersections, it’s shown whether a feature is included in a package or the contents of a feature. Unlike cards, tables are capable of showing long feature lists. Tables are frequently used for corporate systems with lots of characteristics: access management, synchronization settings, integrations with other software, etc. Tables are often designed for technical people or managers who make a decision dependent on the budget and business requirements.

Typical components.

• Plan names (sometimes with a short description or purpose).
• List of features (grouped if it’s very long and with explanations if it contains niche terms).
• Prices and payment schedule.
• “Recommended,” “Popular,” or other labels.
• Bonuses (for an expensive plan, paying in advance, etc.).
• Call-to-action buttons.

Sliders

A slider is a way to show there are many options, and the product is highly customizable. People can configure an offer to their taste. Sliders are great for services without defined packages — if the price directly depends on the number of users, audience coverage, or the capacity of something. Sliders are typical for such businesses as selling server storage, promotion in social networks, loans, or renting.

Typical components.

• A slider or a set of sliders for different parameters.
• Features and services included, regardless of the slider position.
• Price (typically, updates on the fly).
• Bonuses (for an expensive plan, paying in advance, etc.).
• Call-to-action buttons.

To sum up, cards are great for self-explanatory packages; tables visualize complex packages with many features; sliders help customers to configure a product themselves. But how to compose the right pricing interface?

👋 Hi there! I enjoy two things — sharing knowledge and drinking good coffee. If you like what you are reading now, feel free to support me via the “Buy Me a Coffee” platform ☕ Thank you! ❤️

Best practices

Examining other designers’ mockups in pursuit of inspiration won’t work if you don’t know what to look at. I collected different approaches to pricing and showed how they could be useful and harmful.

Build the set of packages balanced

How many options to give and what to pack inside? This is what a business owner and designer should carefully consider. If there are too many options, people get lost and tend not to choose at all, especially if they haven’t bought this product before. For example, you are not a stationery guru and see 130 black ink pens. Which one will you choose? How long will you be choosing? In the digital world, it’s even harder because you cannot “touch” the options and choose by texture, weight, smell, etc. So, the fewer options, the less confusion — optimally, two-four packages — or a single option at all.

Retailers want to increase revenue and make supermarket trolleys larger so that customers buy more. We can observe the same tendency in the digital world. Software companies include more options in the service packages and increase the price. But if the smallest available package contains too much unnecessary stuff and costs much, people might go away empty-handed. The smallest package should be useful for some real-life situations, for example, meet the everyday needs of a freelancer.

Welcome purpose-based option naming

Such titles as “Economy/Standard/Premium” don’t reveal the offer features and might sound discriminatory. Such names make people dive into descriptions to learn what fits their needs. A better approach is naming due to the situation of use, for instance, “Individual/Team/Corporation” or “Personal/Business.” It gives additional clues about what to choose. Such naming as “Basic/Plus/Maximal” also works. It shows that the difference is in the capacity or scope of service.

Keep the critical information always visible

If the description of service plans is so long that needs scrolling, it’s crucial to make names, prices, and call-to-action buttons fixed. When they are visible, people don’t need to scroll back to double-check if the described features are worth the money.

If the features are grouped, it’s better to show them expanded, since scrolling is a more natural action than clicking several times to expand each group.

Make comparison always comfortable

A tablet or laptop screen is wide enough to fit all the options. It’s comfortable because you can easily compare them. So, what do designers do on mobile? Simply turn it into a carousel! As a result, only the displayed card is discoverable, whereas other options are buried behind the screen edge. It’s better to put cards one by one, maybe in a collapsed mode, so that people see the main difference straight away.

Warn about sensitive actions

People are frustrated when they proceed with all the steps and then — “Please enter your credit card.” Often users quit here, but if they agree, there is another risk. You start using a product, forget about the credit card, get the payment notification, immediately cancel the subscription, and feel like you’ve lost money… Of course, it’s better to make free plans truly free and not to ask for a credit card. But if you need that, why not mentioning beforehand to prevent unpleasant surprises and users’ aversion?

Mind repeated information

If the next package equals the previous one plus additional features, designers write something like, “The same as ‘Basic’ but with enhanced security check and a personal consultant.” It makes the interface a little bit cleaner; however, a person needs to read the previous option, keep it in mind, and add the extra features. It becomes annoying when the formula “the same as A plus Z” repeats twice or more. Then you cannot understand the next option without reading all the previous ones.

Call to action honestly

Buttons are essential to any interface, but on the “Pricing” page, they directly affect conversion. If a button is called “Try for free” or “Start your free trial” and after clicking you see the “Contact us” form, it disappoints and leads to losing customers. Another frustrating example is “More info” instead of an ability to buy a product right away. If a button says “Buy” or “Buy now,” logically, it should guide to the payment form. If it’s called “Try” or “Start your trial,” the next step should be the creation of a profile or even simpler — going right to an empty or demo project.

Display prices unambiguously

According to the Cornell Unversity Hospitality Report 2009, removing the currency symbol ($) or name (dollars) in restaurant menus increased average spending by 12%. Currency is an additional reminder of spending money, which is connected with loss aversion. People are more sensitive to what they lose rather than what they gain. Unfortunately, designers and marketers misinterpret this research and either hide the price or start playing with the font size. Designers should balance between not focusing attention on money and being honest with users.

Businesses want to encourage long-term contracts and offer discounts for annual billing. Pricing pages can show a lower price for a longer term by default, but it should be done unambiguously. Footnotes that explain an offer are less visible. As a result, people might be unpleasantly surprised by a bigger invoice than they expected.

Guide but do not cheat

“Recommended,” “Popular choice,” “Our customers choose,” and large bright buttons “Buy now” can boost conversion as well as dramatically decrease it. Due to the reactance effect, at some point, people start feeling manipulation and refuse to follow the visual hierarchy in the interface. When paid options are so prominent that “shout out loud” at you, and the free option is greyed out and tiny, people may stop trusting you.

Answer frequently asked questions

When people are about to spend money on the internet, they want safety and guarantees. Talking about virtual products, customers cannot see a seller in person, so there are not many powerful ways to persuade them. Fortunately, you can simulate a candid conversation through the FAQ section. You might be afraid of adding too much text and making the page crowded. In reality, people care about finding a solution to a problem — not whether an interface is clean and minimalistic.

The tips above are a good starting point, not a magic recipe, so feel free to test your designs with users. Eventually, pricing pages should boost conversion and customer satisfaction. If people get what they want and do not regret afterward, and the company makes enough revenue, it’s a success.

Further reading

• “I analyzed 250 SaaS pricing pages — here’s what I found,” an article by Benjamin Brendall for The Next Web.
• “The psychology of price in UX,” an article by Anders Toxboe for the Web Design Depot blog.
• “Show prices for common scenarios,” an article by Jakob Nielsen for the Nielsen Norman Group blog.
• “Choice overload is harming your users,” a video by Alita Joyce for the Nielsen Norman Group blog.
• “How to design a pricing page that converts,” an article by Val Geisler for the Invision app blog.
• “11 pricing page examples to inspire your own design,” an article by Lindsay Kolowich for the Hubspot blog.

• ✍️ Here are all my design articles on Medium.
• 💼 Let’s connect on Linkedin. Drop me a note if you want me to present the topic of this article at a conference or meetup.
• 🏰 Bored by design articles? Check my other blog about photography and overlooked architecture.