May 06 2014

UX Flows: How to Get Users to Click “Buy” on Your Pricing Page

uxflows_pricing_feature

Like sign-ups, pricing tables can be a tricky beast until you know the drill — and knowing the drill is really freaking important. Most marketing efforts drive users to this page and their main goal is to get users to click that “buy” button. Therefore, the main design goal of a pricing table is to clearly communicate all of the information a user needs to get them to make a purchase.

Essentially every pricing table features a list of benefits or inclusions with a purchase, a product name, and a price and sometimes other plans available for comparison. So then, what makes pricing tables to tricky, you ask? Really, it shouldn’t be so hard but the rules are counter intuitive. A good pricing table is about making boring content look good and communicating a message – and the price! – as clear as day.

Therefore, this UX Flows post is all about the takeaways. We’re going to talk about some important guiding principles in designing these critical tables and getting it right. We’re going to make it as simple as some of these best practices sound.

Make it Clear

The most important tip I can give you: give users the price of your product or service. It sounds obvious, but you would be surprised how often prices are hidden or obscured from users. This tip is counter intuitive because businesses are often nervous that the price will scare users away. But if a user has navigated to your pricing page, they most likely intended to and might very well have buying on the mind.

Nielsen Norman Group’s article Top 10 Mistakes in Web Design points out that “users are highly goal-driven on the Web. They visit sites because there’s something they want to accomplish — maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.”

This article also makes a great point, that business to customer ecommerce sites, like Amazon for example, hardly ever hide prices “but it’s rife in B2B, where most ‘enterprise solutions’ are presented so that you can’t tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have hours of video of users asking ‘Where’s the price?” while tearing their hair out.”
Now that we know not to commit that cardinal sin, let’s talk about making that price as clear as possible. So don’t just give the price, make it bigger or bolder.

Pricing at Squarespace

Pricing at Squarespace

What are some other things to make clear? Well, your call to action, for one. I know it goes without saying, but don’t forget a buy button!

Also, don’t forget to make what the user will be getting with their purchase clear. Check marks or arrow bullets can draw attention to offerings, making the purchase appealing:

Pricing at Treehouse

Pricing at Treehouse

Some B2B companies may have a complicated set of offerings. One way to be clear with the price with these situations is to show pricing for common scenarios. Another way is to create an interactive pricing table that builds a quote for users based on their needs, on site.

Pricing at GoSquared

Pricing at GoSquared

Pricing at Heroku

Pricing at Heroku

Pricing at Budget Lady

Pricing at Budget Lady

Keep it Clean

While you want users to be clear on the offering, you don’t want to overwhelm users. Another Nielsen Norman Group study pointed out a problem that falls on the opposite extreme of being clear, “a website that showed overly precise — and complicated — pricing information, which was much too difficult to use.” A great way to avoid difficult is to make it clean.

A good rule of thumb for pricing tables is to use visuals sparingly. Your table doesn’t need both green check marks and red Xes. Avoid too many check marks. Think about what you actually want to highlight – the offerings. Zendesk shortens the table to the important differentiating factors and scrolls users to a section with more information below the FAQ:

Pricing at Zen Desk

Pricing at Zen Desk

A great article from Smashing Magazine points out that “every unnecessary cell in your pricing table increases the probability of losing potential customers, because you make it more difficult for them to compare various plans and select the best one.” It goes on to point out that “visitors should be given only the information they would be interested in: available features, options and costs.”

While keeping it clean, some imagery may be helpful if it drives the message or helps to highlight the difference between a few different plans. Mailchimp does a good job with this in a delightful way.

Pricing at Mailchimp

Pricing at Mailchimp

Direct Users

Directing users is a key component to designing a pricing plan but is also what makes them tricky. The goal is to get users to buy what would be most profitable for your company but also for the customer to be satisfied. One way to do this is to try to visually emphasize what you want users to buy. This might mean putting a cap on one table that says “preferred plan” or “most popular” or using color to highlight what the user should focus on.

Pricing at Shopify

Pricing at Shopify

Pricing at Spotify

Pricing at Spotify

On a more granular level, help users find the plan that is right for them by emphasizing the differences between plans, not the similarities. One extreme example of this can be found in both Mailchimp and Media Temple. The pricing of their different offerings are not on the same page but split into separate pages. Rather than using a pricing table, they list offerings and then list the price on each offering’s page.

Pricing at Media Temple

Pricing at Media Temple

Include everything users may need to know in order to make the purchase, but just what they need to know. Otherwise users will be overwhelmed. This may mean adding an FAQ section outside of the pricing table, to give the pricing table less clutter. This is also about helping users to understand the value of what they are (or could be) getting and focusing their attention on the area around the “buy now” button.

Sweeten the Deal

Lastly, if possible, try to sweeten the deal for your user. Or at least make it seem sweeter. This may be a matter of breaking down the cost for users into a digestible sum – It may be $100 a year but noting that it breaks down to $8.33 a month may sweeten the deal.

Pricing at Positionly

Pricing at Positionly

There’s your crash course in Pricing! I hope that you learned something new. Any hot examples blowing your mind right now? Leave them in the comments.

About the Author:

MK Cook is a UX designer at digital-telepathy who channels her boundless energy and curiosity toward designing killer interactions and interfaces. She’s also a bicycle commuter, gourmet pizza baker and wannabe bee-keeper. Find her on Twitter and Google+.

Leave a Response