1stwebdesigner

Posted by | Posted on 17:06

1stwebdesigner


Pricing Tables – Best Practices, Tips and Inspiration

Posted: 07 May 2011 03:00 AM PDT

Pricing tables have become an essential element of every online business website. While it can hike up your business if done neatly, it can also be the tombstone of your online business. A pricing table’s task is to help users choose the best pricing plan for them based on their needs. But we often find the tables dazzling and hard to understand. Designing an efficient pricing table requires a subtle yet solid mix of design and usability. In this post I’m going to share some tips on creating stunning pricing tables, discuss some of the best practices and present a list of some of the most successful pricing tables out there.

Structure

Most of the pricing tables are horizontal because it’s easier to compare the offers and see features. That doesn’t mean you should always use the horizontal layout, though. It really depends on the variety and complexity of the information you want to display in the chart. Best practice is to use a horizontal solution when you have to display a lot of features and a vertical one when you don’t have a lot of plans to offer and you’re not planning to include a long list of features.

Dropbox-pricing-charts-best-examples-tips-inspiration

Dropbox is an example of vertical layout pricing chart. Their plans only have minor differences so this is an efficient way to display them.

Champion-sound-pricing-charts-best-examples-tips-inspiration

Champion Sound is a classic example of horizontal pricing table structure.  They need to include some features which are easier to compare viewed side by side so a horizontal layout is the best solution here.

Design

Design can do one of two things to your business – either sink it or raise it to the top. You have to be very careful when designing a pricing chart. Fonts, headlines, layout – it all has to be balanced and done neatly. Furthermore you have to make sure the chart’s design works with the main site. However don’t forget about your main goal. In pricing tables, design is just a tool to achieve your objectives, namely – increase sales. Simplicity is the key to success. Remember that you’re not creating a collage for school, you’re creating a design for a specific reason. Don’t clutter your chart with unnecessary elements. A common mistake is to write down a list of features most of the plans don’t offer and then put dozens of red crosses in your chart. Consumers don’t want to see what you’re not offering, they want to see what you’ve got and for what price.

Think-vitamin-pricing-charts-best-examples-tips-inspiration

Think Vitamin is an excellent example of proper use of design in pricing charts. In the left section you can see features and the most important phrases are bold. They’re using subtle green checkmarks and there are only two red crosses which are necessary to compare these two plans.

Rulefm-pricing-charts-best-examples-tips-inspiration

Rule.fm is another example of appropriate use of design in pricing charts. They’ve adapted the chart to their main design and have managed to use design elements neatly and plainly.

Emphasis

Emphasizing one specific plan is a common practice and you should do the same. With a lot of different plans to choose from it’s important to make it as easy as possible for your customers to choose the right one for them. With an emphasis on one particular plan you immediately draw your visitors attention to that one special plan. Most of the services choose to highlight the most popular package, however you can experiment. Yet don’t go to extremes- highlighting the cheapest and most expensive plans won’t bring much income. Emphasizing the right one can seriously enhance your business and it can also be incredibly useful from a potential customers point of view.

There are plenty of ways to emphasize a plan. Vivid colors, different backgrounds, badges, frames, huge call to an action buttons. Design and creativity – it’s all up to you. However keep in mind that exaggeration will only do harm. Never emphasize more than one pricing plan. Using different backgrounds for each pricing plan can be fine though you have to be careful with that too.

Shopify-pricing-charts-best-examples-tips-inspiration

Shopify uses a bigger background graphic and price font size to emphasize their most popular plan. They’re using different backgrounds for each pricing plan though they haven’t exaggerated the color scheme and the colors create the right ambiance.

Ning-pricing-charts-best-examples-tips-inspiration

Ning is using a different background color to emphasize one specific plan. Note that it’s the medium-price plan so emphasizing is most likely used as a marketing strategy. The green immediately catches your attention and most likely you won’t even look at the other pricing plans.

Difference

If you’re offering both free and premium plans then from the business perspective your goal is clear – convince people to choose the premium plan. This is where design and marketing play a major role. You have to be able to share your message quickly and in a visually effective way. It may not be important if you don’t offer a free plan though you should still be aware of this. Try to distinguish the differences between pricing plans as clearly as you can. A common mistake you should avoid is writing down a list of features that are available in each plan. Also think about the sequence. You want to place your main and distinctive features for each plan somewhere near the top. As you’re coming to the bottom you can start to include some features that are provided in all plans.

Big-cartel-pricing-charts-best-examples-tips-inspiration

When looking at the Big Cartel pricing chart I just can’t fight the feeling of actually wanting to sign up. They’ve managed to distinguish their premium plans from their free plans and make it very appealing.

Evernote-pricing-charts-best-examples-tips-inspiration

Evernote has also achieved an appealing look for their premium plan. Besides the smooth pricing chart they’ve got some descriptions with icons in the page. Remember that charts ain’t the only way to attract clients.

Be Clear

While you may think that offering more plans is effective and gives costumers a wider range of choice,having too many plans can severely affect your bottom line. What’s more, a lot of services don’t offer enough unique features to sustain a lot of pricing plans. The most popular solution is to have about 2-5 plan options. Going beyond that will just confuse your costumers and harm your business.

So you’ve created your, let’s say, three pricing plans and now you have to introduce the clients to the services you offer. You write down every single thing you offer including a lost password’s recovery. Then you look at your final result and conclude that you have to scroll the page down to see all the features. That’s a fine thing to do if you want to shoo your costumers for good.

Having the right pricing plans isn’t enough. You have to present your services the right way. There are pricing tables that leave you uncertain and confused about what the company is trying to sell. And there are tables that leave you puzzled and overwhelmed by the quantity of features. With more features the amount of information the visitor has to absorb grows. You need to find the right balance between too much and not enough information. You want your feature list to be comprehensive but concise so that after reading it the potential consumer can knows what he’s getting for his money.

Animoto-pricing-charts-best-examples-tips-inspiration

Animoto pricing chart undoubtedly won’t leave you confused. They’re using a minimalist design style with some accents. They’re offering three pricing plans and each of them is distinct. The main features are listed at the top and followed by more advanced features which are offered only in the pro plan.

Draftboard-pricing-charts-best-examples-tips-inspiration

Draftboard has gone with the “less is more” approach. They’re using a modest gray pricing chart with green accents. The chart is not cluttered with unnecessary elements so it’s very easy to comprehend. Plus they’ve highlighted one particular plan so it’s even easier for potential clients to make the decision.

Wrapping up

A lot to take into consideration, isn’t it? Well, wherever there’s money involved you’ll have to adapt and shape your design in order to achieve the desired result. I hope these five points helped you to get a little insight into designing effective pricing tables and gave you a clearer idea about embracing design and how best to combine it with marketing. These guidelines aren’t written in stone and it’s up to you how you follow them. Maybe you find them useless for your business and that’s absolutely fine. There is no one right formula for designing pricing tables since every business is a bit different. However I believe that these points made you at least consider your existing/forthcoming pricing table. That would be about it from theory outlook. Time to give you some terrific examples. Below you’ll find 15 examples of well-designed pricing tables for your inspiration.

Inspiration

1. Skype

Skype-pricing-charts-best-examples-tips-inspiration

2. Teambox

Teambox-pricing-charts-best-examples-tips-inspiration

3. Proposable

Proposable-pricing-charts-best-examples-tips-inspiration

4. Vaultpress

Vaultpress-pricing-charts-best-examples-tips-inspiration

5. Drupal Gardens

Drupal-gardens-pricing-charts-best-examples-tips-inspiration

6. Wufoo

Wufoo-pricing-charts-best-examples-tips-inspiration

7. Formstack

Formstack-pricing-charts-best-examples-tips-inspiration

8. Squarespace

Square-space-pricing-charts-best-examples-tips-inspiration

9. Zendesk

Zendesk-pricing-charts-best-examples-tips-inspiration

10. Crazyegg

Crazyegg-pricing-charts-best-examples-tips-inspiration

11. WooThemes

Woothemes-pricing-charts-best-examples-tips-inspiration

12. Campaign Monitor

Campaign-monitor-pricing-charts-best-examples-tips-inspiration

13. Raven Tools

Raven-tools-pricing-charts-best-examples-tips-inspiration

14. Typekit

Typekit-pricing-charts-best-examples-tips-inspiration

15. Business Catalyst

Business-catalyst-pricing-charts-best-examples-tips-inspiration

Comments (0)

Post a Comment