Tariff tables: examples and best solutions
From me: since now I am faced with the task directly covered in this article, I decided, besides studying, to translate the article, because I consider it useful and competent. I also wanted to receive your comments on the translation, the language also needs to be improved. Wishes are accepted.
Tables with tariff plans are important for each company offering goods or services. They should combine both design and usability. They should be simple, but at the same time give a clear difference in the possibilities and prices between the goods or services.
Tariff tables should help the user choose the optimal tariff plan for him . The company should carefully analyze its products and show the main features and differences of its tariff plans. Visitors should receive only the information that they really need: fare options, features and cost. The main rule - each unnecessary cell of our table increases the probability of losing a potential client . The more information - the more difficult it is to compare different rates and choose the best among them.
')
Once you have decided on the most important functions, go back and create a detailed list of features for those users who are interested in details. Users have the right to know what they are paying money for, and to be able to see the full characteristics of the product.
To understand how best to arrange and present such tables, consider how other designers have coped with this task.
We face a difficult task. The designer must provide information accurately and clearly, presenting on the one hand enough information and, on the other, helping the user to make the best choice. To do this, we formulate the basic principles.
It would seem that the more information we provide to the user, the better impression we will make on him. However, loading the user with this data, we make him remember them all at once.
TypePad uses a fairly long table. Despite its informational content and the ability to fully explain the difference between tariff plans, it is very difficult to understand: a visitor must remember which tariff each column represents. In addition, duplicating the names of tariffs in the lower part of the table, the authors forgot to put down prices next to them. To get pricing information, users looking at the middle of the table should return to the top of the table.
A good example can be seen at ConceptShare . Note that in the fourth row of the table, the authors combined two similar parameters, which made it possible to get rid of the extra row. Very successful solution.
It is very good that visitors can see the difference in tariff plans. Information is not much and not enough. It is reasonable, because if a buyer comes to your store, you will not first of all tell about the similarities of the two products? :-) Give the user the information he is looking for. This is the second principle.
Highlight the differences of goods. A good idea can be considered a different design of the main characteristics (available on all tariffs) and features of this tariff. To highlight them, you can put the most important features above the main characteristics.
Look at the table on the website etribes.com . We see what we pay attention to, what is the difference between tariffs. The selected icons fit well into the overall style of the site and help the visitor without distracting him. This is an effective and successful solution.
The price is the first thing that the user wants to see when he enters the site of a product or service. Make sure that the user can see the price as quickly and clearly as possible.
Font usage usually depends on the type of product, and should be combined with the rest of the design. In most cases, the font of prices, titles and important headings increase to highlight this information. As a designer, you need to make sure that the price takes its place on the page.
It is also worth sorting the rates by price, descending. Since we are viewing sites using F-view (on the subject you can see the article by Jacob Nielsen ), some designers place the simplest suggestions on the left, so that the user will pay attention to them first of all. But in the interests of the designer to show the most attractive offers.
Many of the examples considered have a serious drawback: visual distinctions are used too often, and often incorrectly. Designers are trying to make tariff plans more attractive, apparently for this and use numerous green check marks and red crosses.
And if these icons are scattered throughout the table, then with each next user it becomes more difficult to perceive information and remember all the differences between the tariffs.
We successfully solved this problem on the Beanstalk website. Supported specifications are indicated by a neutral gray circle, which does not distract attention, and for tariffs that do not have this feature, the cell is left empty.
Planhq.com uses green checkmarks, but abandoned red crosses. Indeed, why are they? If we can abandon unnecessary elements, we should do it?
Goodbarry.com uses color to draw attention to the head of the table. It is worth paying attention to the font size below to increase the difference in tariff plans and how green is used to encourage the visitor to try the product.
Thus, it is necessary to use visual distinction and avoid the use of visual noise. Use icons when they do not interfere and help the user or carry information.
It is also important to remember that icons and images can be really useful. For example, in the table of comparison of goods, when the picture allows you to see the goods.
Almost all the examples reviewed use different background colors to differentiate tariff plans. Designers use color theory and bright colors to make the user pay attention to the tariff plan that the company wants to sell you.
Some designers use illustrations and color images to visually distinguish tariff plans. Metaphors are used very often. For example, if a company offers several tariffs for a survey service, it would be dismissable to use a small box for the lite-version, and a huge one for the corporate one. So many designers do.
This rule applies to all design elements. A similar error was made on the website BigFilebox.com :
The second table falls out of the overall site design.
Table of tariff plans plays an important role in successful sales. The tariff table is the face of the product. It is important that it is always available.
The table should work not only in modern browsers, but also in all types of browsers and other devices. A table can be created using a variety of effects, but in the end, the ability to use the table should always remain, even if CSS or JavaScript is disabled.
One example of how a table should look like when CSS and JS are disabled:
An example of a table that uses JS incorrectly:
If we click on the “View Plan Details”, a driving menu will open with details. However, if JS is disabled, we will not see anything. One of the solutions to this problem is to hide blocks using java-script when loading the page.
ActionThis
Squarespace
Tickspot
Litmusapp.com
Goodbarry.com
Bigcartel.com
Blinksale.com
Polldaddy.com
iPhone T-Mobile
Fluxiom.com
Dropsend.com
Brightbox.com
Spokeo.com/hr
Movabletype (the pricing table is no longer available)
Zendesk (the pricing table is no longer available)
iphone
Harvest
Github.com
FetchApp.com
Rescuetime
Shutterstock
Intervals
Jigsaw
DabbleDB
activeCollab
Zoho Projects
Tivo
Apple MobileMe
Analysis one
Proofhq
Backboard
ExpressionEngine
More examples can be found in the review by Kristjan Watson .
Tables with tariff plans are important for each company offering goods or services. They should combine both design and usability. They should be simple, but at the same time give a clear difference in the possibilities and prices between the goods or services.
Tariff tables should help the user choose the optimal tariff plan for him . The company should carefully analyze its products and show the main features and differences of its tariff plans. Visitors should receive only the information that they really need: fare options, features and cost. The main rule - each unnecessary cell of our table increases the probability of losing a potential client . The more information - the more difficult it is to compare different rates and choose the best among them.
')
Once you have decided on the most important functions, go back and create a detailed list of features for those users who are interested in details. Users have the right to know what they are paying money for, and to be able to see the full characteristics of the product.
To understand how best to arrange and present such tables, consider how other designers have coped with this task.
What you need to remember?
We face a difficult task. The designer must provide information accurately and clearly, presenting on the one hand enough information and, on the other, helping the user to make the best choice. To do this, we formulate the basic principles.
1. Not much and not enough
It would seem that the more information we provide to the user, the better impression we will make on him. However, loading the user with this data, we make him remember them all at once.
TypePad uses a fairly long table. Despite its informational content and the ability to fully explain the difference between tariff plans, it is very difficult to understand: a visitor must remember which tariff each column represents. In addition, duplicating the names of tariffs in the lower part of the table, the authors forgot to put down prices next to them. To get pricing information, users looking at the middle of the table should return to the top of the table.
A good example can be seen at ConceptShare . Note that in the fourth row of the table, the authors combined two similar parameters, which made it possible to get rid of the extra row. Very successful solution.
It is very good that visitors can see the difference in tariff plans. Information is not much and not enough. It is reasonable, because if a buyer comes to your store, you will not first of all tell about the similarities of the two products? :-) Give the user the information he is looking for. This is the second principle.
2. Show differences, not similarities.
Highlight the differences of goods. A good idea can be considered a different design of the main characteristics (available on all tariffs) and features of this tariff. To highlight them, you can put the most important features above the main characteristics.
Look at the table on the website etribes.com . We see what we pay attention to, what is the difference between tariffs. The selected icons fit well into the overall style of the site and help the visitor without distracting him. This is an effective and successful solution.
3. Highlight the price.
The price is the first thing that the user wants to see when he enters the site of a product or service. Make sure that the user can see the price as quickly and clearly as possible.
Font usage usually depends on the type of product, and should be combined with the rest of the design. In most cases, the font of prices, titles and important headings increase to highlight this information. As a designer, you need to make sure that the price takes its place on the page.
It is also worth sorting the rates by price, descending. Since we are viewing sites using F-view (on the subject you can see the article by Jacob Nielsen ), some designers place the simplest suggestions on the left, so that the user will pay attention to them first of all. But in the interests of the designer to show the most attractive offers.
4. Use visual differences
Many of the examples considered have a serious drawback: visual distinctions are used too often, and often incorrectly. Designers are trying to make tariff plans more attractive, apparently for this and use numerous green check marks and red crosses.
And if these icons are scattered throughout the table, then with each next user it becomes more difficult to perceive information and remember all the differences between the tariffs.
We successfully solved this problem on the Beanstalk website. Supported specifications are indicated by a neutral gray circle, which does not distract attention, and for tariffs that do not have this feature, the cell is left empty.
Planhq.com uses green checkmarks, but abandoned red crosses. Indeed, why are they? If we can abandon unnecessary elements, we should do it?
Goodbarry.com uses color to draw attention to the head of the table. It is worth paying attention to the font size below to increase the difference in tariff plans and how green is used to encourage the visitor to try the product.
Thus, it is necessary to use visual distinction and avoid the use of visual noise. Use icons when they do not interfere and help the user or carry information.
It is also important to remember that icons and images can be really useful. For example, in the table of comparison of goods, when the picture allows you to see the goods.
Almost all the examples reviewed use different background colors to differentiate tariff plans. Designers use color theory and bright colors to make the user pay attention to the tariff plan that the company wants to sell you.
5. Revive your page.
Some designers use illustrations and color images to visually distinguish tariff plans. Metaphors are used very often. For example, if a company offers several tariffs for a survey service, it would be dismissable to use a small box for the lite-version, and a huge one for the corporate one. So many designers do.
6. Be consistent
This rule applies to all design elements. A similar error was made on the website BigFilebox.com :
The second table falls out of the overall site design.
7. Do not lose customers
Table of tariff plans plays an important role in successful sales. The tariff table is the face of the product. It is important that it is always available.
The table should work not only in modern browsers, but also in all types of browsers and other devices. A table can be created using a variety of effects, but in the end, the ability to use the table should always remain, even if CSS or JavaScript is disabled.
One example of how a table should look like when CSS and JS are disabled:
An example of a table that uses JS incorrectly:
If we click on the “View Plan Details”, a driving menu will open with details. However, if JS is disabled, we will not see anything. One of the solutions to this problem is to hide blocks using java-script when loading the page.
Examples of successful decisions
ActionThis
Squarespace
Tickspot
Litmusapp.com
Goodbarry.com
Bigcartel.com
Blinksale.com
Polldaddy.com
iPhone T-Mobile
Fluxiom.com
Dropsend.com
Brightbox.com
Spokeo.com/hr
Movabletype (the pricing table is no longer available)
Zendesk (the pricing table is no longer available)
iphone
Harvest
Github.com
FetchApp.com
Rescuetime
Shutterstock
Intervals
Jigsaw
DabbleDB
activeCollab
Zoho Projects
Tivo
Apple MobileMe
Analysis one
Proofhq
Backboard
ExpressionEngine
More examples can be found in the review by Kristjan Watson .
Let's sum up
- All elements, including tables, must comply with the overall design of the site.
- Use background colors to visually distinguish different rates (but without fanaticism).
- As photographers draw attention to detail in their pictures, so with the help of tariff plans, the details that you want to emphasize are highlighted.
- Play color and size fonts for headlines and important notes.
- The most important is the upper left corner of the table.
- Use "unobtrusive" JS and CSS
- Always show the price of your offers.
- If the list of characteristics is too long (that is, it doesn’t fit on the page without scrolling), make sure that you duplicate the name, price and selection button both at the top and bottom of the table.
- And do not forget to specify the currency of the price.
Source: https://habr.com/ru/post/57698/
All Articles