Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Pricing Tables: Examples And Best Practices

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 Link

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 Link

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.

TypePad9 (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.

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.

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 Link

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 table (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.

3. Make the price stand out Link

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.

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 Link

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.

Beanstalk11 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.

Planhq.com12 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?

Goodbarry.com1713 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 Table

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.

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.

5. Illustrate the difference vividly Link

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 Table
Dropsend Price Table
Litmus Application Price Table
Jigsaw Price Table

6. Be consistent in your design Link

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

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

7. Don’t lose your customers Link

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:

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

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 Link

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.

ActionThis

ActionThis Price Table

Squarespace15

Squarespace Price Table

Tickspot

Tickspot Price Table

Litmusapp.com16

Litmus Application Price Table

Goodbarry.com1713

GoodBarry Price Table

Bigcartel.com

Bigcartel Price Table

Blinksale.com18

Blinksale Price Table

Polldaddy.com19

Polldaddy Price Table

iPhone T-Mobile20

iPhone T-Mobile Price Table

Fluxiom.com21

Fluxiom Price Table

Dropsend.com22

Dropsend Price Table

Brightbox.com23

Brightbox Price Table

Spokeo.com/hr24

Spokeo Price Table

Movabletype25 (the pricing table is no longer available)

Movable Type Price Table

Zendesk26 (the pricing table is no longer available)

Movable Type Price Table

iPhone27

Apple iPhone Price Table

Harvest28

Harvest Price Table

Github.com29

Github Price Table

FetchApp.com30

Fetch Price Table

RescueTime31

RescueTime Price Table

Shutterstock32

Shutterstock Price Table

Intervals33

Intervals Price Table

Jigsaw34

Jigsaw Price Table
Cozimo.com Price Table

DabbleDB

DabbleDB Price Table

activeCollab35

activeCollab Price Table

Zoho Projects36

Zoho Projects Price Table

TiVo37

TiVo Price Table

Apple MobileMe38

MobileMe Price Table

Analysis-one39

Analysis-one Price Table

ProofHQ

ProofHQ Price Table

Backboard40

Backboard Price Table

ExpressionEngine41

Expression Engine Price Table

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

Best Practices: Summary Link

  • 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-pattern 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.

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

Footnotes Link

  1. 1 /2008/08/top-10-css-table-designs/
  2. 2 /2008/02/26/navigation-menus-trends-and-examples/
  3. 3 /2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  4. 4 /2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  5. 5 /2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
  6. 6 /2007/11/16/pagination-gallery-examples-and-good-practices/
  7. 7 /2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  8. 8 /2013/12/e-commerce-websites-showcase/
  9. 9 http://www.typepad.com/pricing/
  10. 10
  11. 11 http://beanstalkapp.com/pricing
  12. 12 http://www.planhq.com/signup
  13. 13 http://goodbarry.com/free-trial
  14. 14 http://www.mailchimp.com/pricing.phtml
  15. 15 http://www.squarespace.com/pricing/
  16. 16 http://litmusapp.com/pricing
  17. 17 http://goodbarry.com/free-trial
  18. 18 https://www.blinksale.com/firms/new
  19. 19 http://www.polldaddy.com/signup/
  20. 20 http://www.t-mobile.de/iphone/tarife/0,17181,21410-_,00.html
  21. 21 http://www.fluxiom.com/pricing/
  22. 22 http://www.dropsend.com/pricingsignup.php
  23. 23 http://www.brightbox.co.uk/
  24. 24 http://www.spokeo.com/hr
  25. 25 http://movabletype.com
  26. 26 http://www.zendesk.com/signup
  27. 27 https://buyiphone.apple.com
  28. 28 http://www.getharvest.com/pricing
  29. 29 http://github.com/plans
  30. 30 http://www.fetchapp.com/
  31. 31 http://www.rescuetime.com/upgrade
  32. 32 http://www.shutterstock.com/subscribe.mhtml
  33. 33 http://www.myintervals.com/pricing.php
  34. 34 https://www.jigsaw.com/Register.xhtml?landingPage=index_jsp.10&opCode=premium
  35. 35 http://www.activecollab.com/pricing/
  36. 36 https://projects.zoho.com/signupplan.na
  37. 37 https://www3.tivo.com/store/plans.do
  38. 38 http://www.apple.com/mobileme/pricing/
  39. 39 http://www.analysis-one.com/pricing-plans.aspx
  40. 40 #
  41. 41 http://www.expressionengine.com/
  42. 42 http://www.smileycat.com/design_elements/pricing_tables/
  43. 43 /2008/02/26/navigation-menus-trends-and-examples/
  44. 44 /2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
  45. 45 /2008/06/12/block-quotes-and-pull-quotes-examples-and-good-practices/
  46. 46 /2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
  47. 47 /2007/11/16/pagination-gallery-examples-and-good-practices/
  48. 48 /2007/11/07/tag-clouds-gallery-examples-and-good-practices/
  49. 49 /2008/02/07/shopping-carts-gallery-examples-and-good-practices/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1

    so coooool~ :-)

    1
  2. 2

    Really cool. Just what I was looking for. I have been looking for some ideas for similar table styles for my next project and boom, smashing magazine made i easy for me.

    Keep it up guys. You work very hard on these. Thank you.

    0
  3. 3

    Great one!

    0
  4. 4

    CreamScoop.com

    October 13, 2008 2:46 pm

    Nice post :)

    1
  5. 5

    Good post, better than the movie posters for sure.

    1
  6. 6

    Master of the collection is really good all-round, thank you

    0
  7. 7

    wilsonography

    October 13, 2008 4:29 pm

    Very nice article, I just happened to be working on a site where I can directly apply this, very inspirational!

    0
  8. 8

    Great post. We’ll be using some of these techniques very soon in mailings to show how we compare to our competitor pricing, etc.

    Keep up the fantastic article ideas!

    0
  9. 9

    Pedro Abraham

    October 13, 2008 6:56 pm

    Nice Post……

    0
  10. 10

    Great article. Inspired a lot for projects in the future.

    0
  11. 11

    Praveen Sewak

    October 13, 2008 7:44 pm

    Every site has its own design, but keeping these in mind certainly takes them to the next level. Very inspiring SM. Thanks!

    0
  12. 12

    Great post idea. I love the way apple.com does it too.

    0
  13. 13

    great article. lot of inspiration for projects. thanks

    0
  14. 14

    wherearetheothers

    October 13, 2008 11:07 pm

    This is an awful post, I read it with a real interest.

    @ “Place important features at the top left of the table, according to the F-pattern of scanning Web pages.”
    – Right, & I noticed that times the cheapest price is put to the left, and other times on right.

    From your point of view, as the Westerner order of reading is: left – right, the cheapest price should not always it be put to the left, and the highest on right, to show an evolution?

    -1
  15. 15

    Invaluable source of information, thank you very much TSM !

    0
  16. 16

    Vitaly Friedman & Sven Lennartz

    October 14, 2008 12:25 am

    @wherearetheothers (#14): please read the article carefully. We have written: “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.” And please, don’t misinterpret the article.

    2
  17. 17

    very nice article and also great practices thanx a lot

    0
  18. 18

    Thanks Smashing Magazine, as I’m about to redesign our web hosting site and this is exactly the sort of post I needed to get started.

    0
  19. 19

    Thanks… its a great article. all these days i was struggling hard, but this post…. awesome.

    0
  20. 20

    Love it! The posts you guys publish are absolutely awesome! Keep up the fantastic work!

    0

↑ Back to top