Pricing Tables: Examples And Best Practices

Advertisement

Pricing tables play an important role for every company that offers products or services. They are a challenge from both a design and usability standpoint. They must be simple but at the same time clearly differentiate between features and prices of different products and services.

A pricing table should help users pick the most appropriate plan for them. A company should carefully examine its product portfolio and pick the most important features to present in its pricing plans. Visitors should be given only the information they would be interested in: available features, options and costs. The rule of thumb is: 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.

Once you have identified the most important features, go ahead and create a more detailed list of features for users who are interested in a particular plan. Users must know what kind of a product they are spending their money on and all of the features associated with it.

For a good grounding in exactly how to design and present a pricing table, let’s examine some that other designers have created and analyze them according to the following important criteria:

  • Design: colors, style, typography, icons.
  • Usability: What happens if we turn off CSS and JavaScript? Is it still usable?

You may also want to take a look at the following related articles:

Best Practices and Guidelines

Designing a pricing table is a tricky task. A pricing table is a design element that requires the designer to communicate information clearly and precisely, exposing as many features as possible and making it as easy and as intuitive as possible for a user to make the best choice.

1. Communicate not too much and not too little

Intuitively, one would assume that a feature-rich pricing table with dozens of various aspects would make a good impression on potential customers. However, the more information you provide, the more information visitors need to absorb.

TypePad8 (screenshot below) uses a quite lengthy pricing table. Although it’s informative and goes into detail to explain the differences between various plans, it is really hard to scan: users need to remember which plan each column represents. Furthermore, although the plan titles are mentioned at the bottom of the table, the prices are not mentioned there. So a user who has landed below the middle of the table will have to scroll to the top to see how much each plan costs.

TypePad Price Table9

ConceptShare10 is an example of a short but concise and visually appealing form. Notice that the fourth row of the table combines two aspects (users and reviewers) in a single row and avoids a fifth unnecessary field. This is a beautiful and informative pricing table.

ConceptShare Price Table11

Still, it’s important that your visitors get a good understanding of the differences between different plans. Communicate not too much and not too little. If a potential customer walks into your store and wants to know the difference between two specific devices, you wouldn’t explain the similarities between the devices first, right? Communicate the information that your visitors are looking for; they will be grateful. This leads to our second point.

2. Communicate differences, not similarities

Instead of focusing on displaying similar features of available plans, communicate the differences between them. It is often a good idea to visually distinguish between similar features (available in all plans) and special features (available in only some plans). To achieve this, you could place the most distinctive features at the top of the table while leaving the common features at the bottom of the table.

Take a look at eTribes.com’s pricing table12 (screenshot below). The design manages to communicate the differences effectively while conveying additional information. The choice of icons fits the overall design and supports, rather than distracts, the visitor. This is effective and user-friendly.

etribes.com Price Table13

3. Make the price stand out

Price is the first thing users want to see when they visit a product or service website, and leaving it out is the number one design mistake on B2B and B2C websites. So, you had better make sure you show it to your visitors as quickly and as clearly as possible.

Font selection usually depends on the type of product or service offered, and it also must be consistent with the overall design. On many pricing tables, the font size of prices, titles and important headlines are larger and stronger to make them stand out. As a designer, you need to make sure that the price is given the appropriate weight, both visually and semantically.

Wufoo Price Table14

Basecamp Price Table15

It is also a good idea to sort pricing plans by price, from highest to lowest or vice versa. Because users scan websites in an F-shape, some designers put the cheapest offer on the left side of the table, so that users see it first. It’s in designer’s best interest to make sure that users see the most attractive offer first.

4. Use visuals sparingly

Unfortunately, many of the designs we are considering in this showcase have one major shortcoming: they use overly vibrant visuals too often and often for the wrong purpose. Designers try to make pricing plans look as attractive as possible, and, apparently, numerous green check marks and red crosses are supposed to help to achieve this effect.

And if these icons are spread widely across the table, then with each additional feature it becomes increasingly harder for visitors to read the table and identify differences between plans.

Beanstalk16 communicates its information effectively while avoiding the visual noise. The support of a feature is indicated by a neutral circle that doesn’t distract the eye but conveys the message. Plans that do not have a particular feature simply do not have a circle in the corresponding cell.

Beanstalk Price Table17

Planhq.com18 uses green check marks but not red crosses. In fact, why should crosses be used at all? If you can remove unnecessary elements from your design, you should remove them, right?

Planhq.com Price Table19

Goodbarry.com4120 uses color to indicate the main details in the table. Notice how the font-size is used to make the different pricing plans more distinctive. Also notice how well green is used to animate the visitors into trying out the product.

GoodBarry Price Table4221

So, use visuals sparingly and avoid visual noise. Feel free to use icons if you are sure they are not too vibrant and if they help a user’s understanding of the table and, more importantly, convey some information. For instance, a green check mark next to the word “Unlimited” does not convey any information.

It’s important also that icons and thumbnails be extremely useful. For instance, if a table compares physical products, then thumbnail of those products should be present.

Dell.com Price Table22

Almost all of the pricing tables we’ve examined use different background colors to differentiate pricing plans. Designers use color theory and vivid colors to keep the visitor’s focus on the specific plan that the company wants the most sales on.

CrazyEgg.com Price Table23

5. Illustrate the difference vividly

Some designers use illlustrations and vivid images to clearly illustrate the difference between various plans in a memorable way. Metaphors (e.g. cartoons) are used very often. For instance, if a company is offering the poll service in several various plans, you may want to use a “lightweight” box with tools for a lite version and a bigger, larger toolbox for the corporate version. In fact, that’s what wany designers do.

Movable Type Price Table6224

Dropsend Price Table5425

Litmus Application Price Table4026

Jigsaw Price Table7827

6. Be consistent in your design

All website elements, not only pricing tables, should be consistent with the overall design. BigFilebox.com28 makes the mistake of breaking this rule:

BigFilebox.com Price Table29

The second pricing table’s design is not consistent with the website’s whole design.

7. Don’t lose your customers

On a product or service website, pricing tables play an important role in making a successful sale. Pricing tables are the window to a product; therefore, it is important that they be usable and accessible to everyone.

Pricing tables should support not just modern Web browsers, but all forms of Web browsers, screen readers, etc. Companies can create pricing tables that are rich in features and effects, but they should make these features unobtrusive for users with browsers that do not have CSS or JavaScript enabled.

This is one example of how a pricing table should look when CSS and JavaScript is disabled:

FiltrBox Price Table30

An example of a pricing table that uses JavaScript obtrusively is on mailchimp.com31:

Mailchimp Price Table32

If you go to this pricing table and click on the “View plan details…” links, you will see a JavaScript accordion effect showing hidden elements. If we disable JavaScript in our browsers, the links don’t work anymore. One solution to this problem would be to show all hidden elements when JavaScript is disabled.

Pricing Table Showcase

Horizontal or vertical? Which should a designer choose? Either a horizontal or vertical layout is good as long as the plan’s features are clearly separated; although there is a strong trend towards column-based (vertical) layouts.

ActionThis33

ActionThis Price Table34

Squarespace35

Squarespace Price Table36

Tickspot37

Tickspot Price Table38

Litmusapp.com39

Litmus Application Price Table4026

Goodbarry.com4120

GoodBarry Price Table4221

Bigcartel.com43

Bigcartel Price Table44

Blinksale.com45

Blinksale Price Table46

Polldaddy.com47

Polldaddy Price Table48

iPhone T-Mobile49

iPhone T-Mobile Price Table50

Fluxiom.com51

Fluxiom Price Table52

Dropsend.com53

Dropsend Price Table5425

Brightbox.com55

Brightbox Price Table56

Spokeo.com/hr57

Spokeo Price Table58

Movabletype59 (the pricing table is no longer available)

Movable Type Price Table60

Zendesk61 (the pricing table is no longer available)

Movable Type Price Table6224

iPhone63

Apple iPhone Price Table64

Harvest65

Harvest Price Table66

Github.com67

Github Price Table68

FetchApp.com69

Fetch Price Table70

RescueTime71

RescueTime Price Table72

Shutterstock73

Shutterstock Price Table74

Intervals75

Intervals Price Table76

Jigsaw77

Jigsaw Price Table7827

Cozimo.com Price Table79

DabbleDB80

DabbleDB Price Table81

activeCollab82

activeCollab Price Table83

Zoho Projects84

Zoho Projects Price Table85

TiVo86

TiVo Price Table87

Apple MobileMe88

MobileMe Price Table89

Analysis-one90

Analysis-one Price Table91

ProofHQ92

ProofHQ Price Table93

Backboard94

Backboard Price Table95

ExpressionEngine96

Expression Engine Price Table97

You can find more examples of pricing tables in Christian Watson’s showcase Pricing Tables98.

Best Practices: Summary

  • All elements, including pricing tables, should be consistent with the overall design of your website.
  • Use background colors to visually separate different plans, but sparingly.
  • Just as photographers draw attention to where they want in their images, so with price tables, make the sections that you want to draw attention to stand out.
  • Use different font sizes and colors for titles and important headlines.
  • Place important features at the top left of the table, according to the F-pattern99 of scanning Web pages.
  • Use unobtrusive CSS and JavaScript techniques when designing a pricing table.
  • Always show the prices of your plans.
  • If your feature list is too long (i.e. doesn’t fit in the browser’s visible area), then make sure to present your plan names, prices and selection options at both the top and bottom of the pricing table.
  • Mention the currency of your prices to avoid confusion, because a “$” sign could represent US, Canadian or Australian dollars.

Related articles

You may also want to take a look at the following related articles:

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  2. 2 http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  3. 3 http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  4. 4 http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
  5. 5 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  6. 6 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  7. 7 http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/
  8. 8 http://www.typepad.com/pricing/
  9. 9 http://www.typepad.com/pricing/
  10. 10 http://www.conceptshare.com/signup
  11. 11 http://www.conceptshare.com/signup
  12. 12 http://www.etribes.com/pricing.html
  13. 13 http://www.etribes.com/pricing.html
  14. 14 http://wufoo.com/signup
  15. 15 http://www.basecamphq.com/signup
  16. 16 http://beanstalkapp.com/pricing
  17. 17 http://beanstalkapp.com/pricing
  18. 18 http://www.planhq.com/signup
  19. 19 http://www.planhq.com/signup
  20. 20 http://goodbarry.com/free-trial
  21. 21 http://goodbarry.com/free-trial
  22. 22 http://www.dell.com/content/products/category.aspx/latitude_e?c=us&cs=04&l=en&s=bsd
  23. 23 https://crazyegg.com/pay/plans
  24. 24 http://www.zendesk.com/signup
  25. 25 http://www.dropsend.com/pricingsignup.php
  26. 26 http://litmusapp.com/pricing
  27. 27 https://www.jigsaw.com/Register.xhtml?landingPage=index_jsp.10&opCode=premium
  28. 28 http://www.bigfilebox.com/order
  29. 29 http://www.bigfilebox.com/order
  30. 30 https://www.filtrbox.com/signup.php
  31. 31 http://www.mailchimp.com/pricing.phtml
  32. 32 http://www.mailchimp.com/pricing.phtml
  33. 33 http://www.actionthis.com/HowToBuy
  34. 34 http://www.actionthis.com/HowToBuy
  35. 35 http://www.squarespace.com/pricing/
  36. 36 http://www.squarespace.com/pricing/
  37. 37 http://tickspot.com/pricing/
  38. 38 http://tickspot.com/pricing/
  39. 39 http://litmusapp.com/pricing
  40. 40 http://litmusapp.com/pricing
  41. 41 http://goodbarry.com/free-trial
  42. 42 http://goodbarry.com/free-trial
  43. 43 http://bigcartel.com/prices
  44. 44 http://bigcartel.com/prices
  45. 45 https://www.blinksale.com/firms/new
  46. 46 https://www.blinksale.com/firms/new
  47. 47 http://www.polldaddy.com/signup/
  48. 48 http://www.polldaddy.com/signup/
  49. 49 http://www.t-mobile.de/iphone/tarife/0,17181,21410-_,00.html
  50. 50 http://www.t-mobile.de/iphone/tarife/0,17181,21410-_,00.html
  51. 51 http://www.fluxiom.com/pricing/
  52. 52 http://www.fluxiom.com/pricing/
  53. 53 http://www.dropsend.com/pricingsignup.php
  54. 54 http://www.dropsend.com/pricingsignup.php
  55. 55 http://www.brightbox.co.uk/
  56. 56 http://www.brightbox.co.uk/
  57. 57 http://www.spokeo.com/hr
  58. 58 http://www.spokeo.com/hr
  59. 59 http://movabletype.com
  60. 60 http://movabletype.com
  61. 61 http://www.zendesk.com/signup
  62. 62 http://www.zendesk.com/signup
  63. 63 https://buyiphone.apple.com
  64. 64 https://buyiphone.apple.com
  65. 65 http://www.getharvest.com/pricing
  66. 66 http://www.getharvest.com/pricing
  67. 67 http://github.com/plans
  68. 68 http://github.com/plans
  69. 69 http://www.fetchapp.com/
  70. 70 http://www.fetchapp.com/
  71. 71 http://www.rescuetime.com/upgrade
  72. 72 http://www.rescuetime.com/upgrade
  73. 73 http://www.shutterstock.com/subscribe.mhtml
  74. 74 http://www.shutterstock.com/subscribe.mhtml
  75. 75 http://www.myintervals.com/pricing.php
  76. 76 http://www.myintervals.com/pricing.php
  77. 77 https://www.jigsaw.com/Register.xhtml?landingPage=index_jsp.10&opCode=premium
  78. 78 https://www.jigsaw.com/Register.xhtml?landingPage=index_jsp.10&opCode=premium
  79. 79 http://www.cozimo.com/pricing
  80. 80 http://dabbledb.com/pricing/
  81. 81 http://dabbledb.com/pricing/
  82. 82 http://www.activecollab.com/pricing/
  83. 83 http://www.activecollab.com/pricing/
  84. 84 https://projects.zoho.com/signupplan.na
  85. 85 https://projects.zoho.com/signupplan.na
  86. 86 https://www3.tivo.com/store/plans.do
  87. 87 https://www3.tivo.com/store/plans.do
  88. 88 http://www.apple.com/mobileme/pricing/
  89. 89 http://www.apple.com/mobileme/pricing/
  90. 90 http://www.analysis-one.com/pricing-plans.aspx
  91. 91 http://www.analysis-one.com/pricing-plans.aspx
  92. 92 http://www.proofhq.com/dashboard.php/signup/step1
  93. 93 http://www.proofhq.com/dashboard.php/signup/step1
  94. 94 https://www.getbackboard.com/users/pricing
  95. 95 https://www.getbackboard.com/users/pricing
  96. 96 http://www.expressionengine.com/
  97. 97 http://www.expressionengine.com/
  98. 98 http://www.smileycat.com/design_elements/pricing_tables/
  99. 99 http://www.useit.com/alertbox/reading_pattern.html
  100. 100 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  101. 101 http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  102. 102 http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  103. 103 http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
  104. 104 http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
  105. 105 http://www.smashingmagazine.com/2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  106. 106 http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/

↑ Back to top Tweet itShare on Facebook

György Fekete is a Web developer with 5 years of experience in Web design and development. He is the founder of Primal Skill Ltd., an established Romanian Web design and development studio.

Advertising
  1. 1

    Nice collection! Many thx for this!

    0
  2. 52

    Very nice collection of pricing tables, I will definitely use this in the future.

    0
  3. 103

    This article is suspiciously like an expanded version of this one, posted 3 days before this one on brainfuel: http://www.brainfuel.tv/web-app-pricing-tier-comparisons. Come one smashing! At least acknowledge sources!

    0
  4. 154

    Vitaly Friedman & Sven Lennartz

    October 17, 2008 1:52 am

    @Fionnuala (#53): we did not copy the article – you know that we would never do that. In fact, we have never seen this article before. For your information: we collect examples for our posts 30-60 days, so it must be a coincidence.

    0
  5. 205

    excellent article – thorough and informative – just how we like it

    0
  6. 256

    I love smashingmagazine and most of the articles are great, but for this I gotta say it is only dealing with presenting one form of data set – the package is on the column and the items include in the package are in the rows. This work wonderfully and perfectly when it comes to sales of various hosting services, emails, hardware, but doesn’t really deal with other industries e.g. theme parks where data has to be presented in a different format as the dynamics of sales is rather different.

    0
  7. 307

    I never though there was anything like pricing table . i first found this in this website. Good work.

    0
  8. 358

    Brilliant article. One I’ve bookmarked for future usage — I was trying to search for this a few days ago under “pricing comparison” or “feature comparison” and am glad I found it! :D

    0
  9. 409

    Great post,

    0
  10. 460

    Very helpful post!

    0
  11. 511

    oh,great works,really helpfull things

    0
  12. 562

    Mark van Beek (mediablok.nl)

    April 3, 2009 1:09 am

    We are just in the process of creating price-tables for one of oure products. Youre timing couldn’t be better. Thanks for sharing this great piece of information.
    Mark

    0
  13. 613

    Tahitian Noni Juice UK

    April 24, 2009 4:50 am

    A great post and very detailed. We’ll try it out on our website very soon for our new Tahitian Noni Juice subscription plans

    0
  14. 664

    WOW.

    I really never thought so intently about the design of my pricing tables. Thank you for prompting me to take another look at them all.

    Off to re-woork my websites.

    0
  15. 715

    As I’m up to this stage in designing my site, I decided I’d come check out Smashing Mag to see if you guys had done an article on comparison / pricing tables.

    You guys never disappoint me – this article is bookmarked and boy am I gonna have fun designing my table :)

    0
  16. 766

    Great list for table design. I think this is an important because most will not read! It is so difficult to get web viewers to actually read content. If you make it easy to absorb the data, and laid out in an attractive way more users will read. NOW this doesn’t mean they will retain what they just learn :)

    0
  17. 817

    Cool and great stuff :)

    0
  18. 868

    Great list and very useful examples from a design perspective.

    If you need rationale behind why some companies following a particular pricing model – you will find this article useful:
    http://tenmiles.com/blog/2010/04/pricing-your-saas-application/

    1
  19. 919

    Dennis van der Heijden

    December 10, 2010 12:59 pm

    My vision on 303 pricing pages. See screenshots and tips per pricing page.. Learn to make you killer page http://www.reedge.com/303-ideas-for-pricing-pages.html

    0
  20. 970

    So many of these were outdated that I decided to make an updated pricing table gallery: http://webdesignandsuch.com/pricing-table-design-showcase/

    2
  21. 1021

    Hi!

    This day is a gift it we say present, yesterday is the past and tomorrow is the mystery.

    0
  22. 1072

    Would love an updated version of this review.

    0
  23. 1123

    Really inspirational collection, thank you for putting them together.

    0
  24. 1174

    The best pricing table example I have found here, thanks for great effort.

    0
  25. 1225

    Dennis van der Heijden

    May 24, 2011 10:44 am

    Wrote a blogpost on our own pricing page design decisions http://blog.reedge.com/the-anatomy-of-our-pricing-page.html

    0
  26. 1276

    Very good article. From our experience in Personyze (a SaaS company dealing with site Personalization). A plan page needs to be as simple and intuitive as possible in order to work.

    2
  27. 1327

    These are some amazing designs on how effectively to display prices and features. Here is more that I have found http://www.creativesen.se/category/pricing_tables

    1
  28. 1378

    This is a good article,

    I am surprised at how consistent the layout designs are. They are not very inspirational to be honest. Like an excel spreadsheet, 3, 4, 5 or 6 columns – different prices and options.

    A smart designer could really turn this on it’s head. I advise people to look back to the way print media outlines plan options. If you go to your local car dealer and pick up a few brochures, look to the optional extras page – a lot easier to understand the trues benefits.

    Overall quite good, thanks!

    0
  29. 1429

    Great article! Have you done any research as to how many pricing/product options are optimal and at what point too many becomes a detriment to conversion?

    0
  30. 1480

    Great list. What do you think this “Go – Responsive Pricing” http://bit.ly/Y0qDm9?

    0
  31. 1531

    Some nice and attractive tables but they should definitely be responsive these days. Check out this Responsive Pricing Table and Tabular Data Table.

    Free Responsive HTML5 Pricing Table
    http://templatz.co/responsive-multi-color-pricing-table.php

    Free Responsive HTML5 Table For Tabular Data
    http://templatz.co/responsive-table.php

    2
  32. 1582

    Thanks Smashing ;P You inspired a redesign: http://maillift.com/pricing I tried to be more consistent with our design and simplify.

    0
  33. 1633

    Very nice post, here you can find a generator to implement these tips : http://www.pricefish.com

    0

↑ Back to top