Image by Nick Babich

Converting visitors into customers is one of the primary goals for any business. A pricing table is a tool that can help you with that. It provides users with an overview of what pricing plans are available for your product and the difference between them.

Here are the top 10 best practices for pricing table design:

1. Use pricing table when you have more than one version of your product

You might want to use a pricing table when you offer more than one variant of a product (more than one plan), and a user can purchase only one version.

2. Select right features/benefits for the comparison

It is vital to select the right features for the table (the ones that align with the goals of your potential customers) and let potential customers know what they’re missing when selecting a cheaper plan.

Select the features based on the value they provide for your users.

Visitors should be given only the information they would be interested in. Remember that the more information you provide, the more information visitors need to consume, and the more likely they will fall into analysis paralysis.

Every extra row in your pricing table increases the likelihood of losing a potential customer.

3. Make the price stand out

Price is the first thing potential customers want to see when they compare a product. You need to place it at the top of the table and add proper visual weight to the price (using color and font size/weight).

Don’ forget to add the currency of your prices to avoid confusion.

4. Align prices and features

The pricing table helps potential customers understand how product features change as the price changes. If visitors cannot understand how features align with prices, they won’t subscribe to your service. Conventional wisdom says that:

• The first plan should be either Free or the least expensive one. It is recommended to offer a Free plan because when you give something for free, and people are genuinely interested in your product, some can upgrade to a paid plan later.
• Order plans by ascending price. People read from left to right in the western world, so it is worth utilizing this pattern for any content, including price tables.
• Do not go to extremes when designing plans. Some businesses tend to provide only two variants of their product — free and pro. The latter has a fixed price. The problem with this approach is that the pro plan can be too expensive for some of your potential customers. It is recommended to add a middle plan to satisfy the needs of this group of users.
• Don’t add cents to your prices. Adding more numbers to the price might bias your potential customers—create a false impression that they will spend more money. If you don’t charge cents (i.e. you charge $25.00) you can get rid of decimals and leave only raw number (i.e. $25).
• Add visual indicator to help users evaluate how much they will get with each plan.

Visual indicator that help visitors understand the difference between individual plans

5. Make it easy for users to scan the table

Minimize the amount of text that the users have to read to understand the difference between plans.

The information in a table should be easy to consume at a glance.

• Try to communicate differences, not similarities. Highlight the difference between individual plans using numbers (i.e., “5 users”) or boolean values (i.e., use checkmark to indicate Yes and dash to indicate No). By doing that, you will minimize the amount of information potential customers will need to analyze.
• Use a left-hand feature column for labels.
• Place common features at the table’s top rows while leaving distinctive features at the bottom of the table.
• Avoid visual noise. Designers tend to use different background colors to visually separate different plans. This approach can introduce extra visual noise so that the pricing table will look more like a Christmas tree than a tool that helps users make an informed decision. By minimizing the number of colors and using the remaining colors properly, you will minimize the distraction.

6. Show price per month / annual billing

Many services offer a discount when the user pays annually. Show how much money the user can save when they purhcase a yearly subscription plan.

Add a monthly/yearly price switch at the top of the table so that users can compare the monthly and annual costs.

7. Don’t trick your potential customers

Some services use visual tricks to attach visitors’ attention to a particular plan they want users to buy. Help users understand the difference between individual plans and not force them to make a particular decision. Here are a few common marketing tricks that you should avoid:

• Changing the visual appearance of the individual columns. For example, using contrasting colors to highlight a column with a particular or adding the “most popular” label highlights one specific plan.
• Hiding Free plan. Even though a service provides a Free plan, it’s not visible in a comparison table. The visitor has to search for it (typically, a tiny link or button called Free plan is located below the table).
• Add a high price plan as a decoy. Even when a business offers a few different paid plans, some users might consider that the service is too expensive for them. To fight this feeling, businesses add an expensive price plan as a decoy. For example, if all plans are three-digit numbers (i.e., $199, $299, and $399), business owners add a four-digit number plan (i.e., $1199) to the end of the table. When visitors compare with the plan, they immediately assume that other plans look much cheaper.

8. Ensure that the column name stays visible on scroll

Even when a business aims to prioritize the features for comparison, it can end up with a relatively long pricing table. For long price comparison tables, the column name might not be visible when users reached the bottom of the table. As a result, users have to memorize which plan each column represents. It’s recommended to make the first row of the table (the one that contains plan name and, ideally, price) sticky — it should be visible on a screen.

9. Show ‘Select plan’ button

Show the sign-up button at the bottom of each column to help users select a particular plan.

10. Provide FAQ below the table

Try to provide answers to the most common questions your potential customers have, such as:

• Plan limitations (How does the free plan work?)
• Transition from one plan to another (Can I switch from a Free plan to a Pro plan? Can I downgrade a plan from more expensive to less expensive?)
• Trial period (Do you offer a money-back period? If yes, then how long is this period? Can I cancel my account?)

Want To Learn UX?

Try Designlab. Join the UX Academy Foundations course! You’ll embark on a 1-on-1 journey with your Designlab mentor to learn the fundamentals of design.