От меня: поскольку сейчас передо мной стоит задача, непосредственно освещаемая в данной статье, то решил помимо изучения и перевести статью, поскольку считаю её полезной и грамотной. Хотелось заодно и получить Ваши замечания по переводу, язык тоже надо совершенствовать. Пожелания принимаются.
Таблицы с тарифными планами важны каждой компании, предлагающей товары или услуги. Они должны объединить в себе и дизайн, и юзабилити. Они должны быть простыми, но в то же время давать четкие отличия возможностей и цен между товарами или услугами.
Таблицы тарифов должны помочь пользователю выбрать оптимальный для него тарифный план. Компания должна тщательно проанализировать свою продукцию и показать главные особенности и отличия своих тарифных планов. Посетители должны получить только ту информацию, которая действительно им нужна: возможности тарифа, особенности и стоимость. Главное правило — каждая ненужная ячейка нашей таблицы увеличивает вероятность потери потенциального клиента. Чем больше информации — тем сложнее сравнить различные тарифы и выбрать среди них лучший.
Как только Вы определились с наиболее важными функциями, вернитесь и создайте подробный список характеристик для тех пользователей, которых интересуют подробности. Пользователи имеют право знать, за что они платят деньги, и иметь возможность увидеть полные характеристики продукта.
Чтобы понять как лучше оформить и представить такие таблицы, рассмотрим как другие дизайнеры справились с этой задачей.
Перед нами стоит непростая задача. Дизайнер должен представить информацию точно и четко, представив с одной стороны достаточно информации и, с другой, помочь пользователю сделать оптимальный выбор. Для этого сформулируем основные принципы.
Казалось бы, чем больше информации мы предоставляем пользователю, тем лучшее впечатление мы на него произведем. Однако нагружая пользователя этими данными, мы заставляем его помнить их все сразу.
TypePad использует достаточно длинную таблицу. Несмотря на свою информативность и возможность полно объяснить различие между тарифными планами, она очень сложна для понимания: посетитель должен помнить какой тариф представляет каждая колонка. К тому же, продублировав названия тарифов в нижней части таблицы, авторы забыли проставить рядом с ними цены. Чтобы получить информацию о ценах, пользователи, изучающие середину таблицы, должны вернуться к вершине таблицы.
![TypePad Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/typepad_com.gif)
Удачный пример можно увидеть на ConceptShare. Обратите внимание, что в четвертый ряд таблицы авторы скомбинировали два сходных параметра, что позволило избавиться от лишнего ряда. Очень удачное решение.
![ConceptShare Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/conceptshare_com.jpg)
Очень хорошо что посетителям видно отличия тарифных планов. Информации не много и не мало. Разумно, ведь если в ваш магазин прийдет покупатель, то Вы не будете в первую очередь рассказывать о сходствах двух товаров? :-) Давайте пользователю ту информацию, которую он ищет. Это и есть второй принцип.
Выделяйте отличия товаров. Неплохой идеей можно считать различное оформление основных характеристик (доступных на всех тарифах) и особенностей данного тарифа. Чтобы выделить их, Вы можете поместить наиболее важные особенности над основными характеристиками.
Посмотрим на таблицу на сайте etribes.com. Мы видим, на что нам обратить внимание, в чем отличие тарифов. Выбранные иконки удачно вписываются в общий стиль сайта и помогают посетителю, не отвлекая его. Это эффективное и удачное решение.
![etribes.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/etribes.jpg)
Цена — это первое что хочет увидеть пользователь, когда он заходит на сайт продукта или услуги. Удостоверьтесь, что пользователь может увидеть цену максимально быстро и понятно.
Использование шрифта обычно зависит от типа продукции, и должно сочетаться с остальным дизайном. В большинстве случаев шрифт цен, названий и важных заголовков увеличивают, дабы выделить эту информацию. Как дизайнер, Вы должны удостовериться, что цена занимает своё место на странице.
![Wufoo Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/wufoo.jpg)
![Basecamp Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/basecamphq_com.jpg)
Также стоит сортировать тарифы по цене, по убыванию. Поскольку мы просматриваем сайты, используя F-просмотр (по теме можно посмотреть статью Якоба Нильсена), некоторые дизайнеры размещают слева самые простые предложения, чтобы пользователь обратил внимание в первую очередь на них. Но ведь в интересах дизайнера показать самые привлекательные предложения.
Многие рассматриваемые примеры имеют серьезный недостаток: слишком часто используется визуальное отличие, и зачастую неверно. Дизайнеры пытаются сделать тарифные планы привлекательнее, видимо для этого и используются многочисленные зеленые галочки и красные крестики.
И если эти иконки разбросаны по всей таблице, то с каждой следущей пользователю становится сложнее воспринимать информацию и запоминать все различия между тарифами.
Удачно решили эту проблему на сайте Beanstalk. Поддерживаемые характеристики обозначаются нейтральным серым кружком, который не отвлекает внимание, а у тарифов, не имеющих данной особенности, ячейка оставлена пустой.
![Beanstalk Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/beanstalk.jpg)
Planhq.com использует зеленые галочки, но отказались от красных крестиков. Действительно, зачем они? Если мы можем отказаться от ненужных элементов, мы ведь должны сделать это?
![Planhq.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/planhq_com.jpg)
Goodbarry.com используют цвет для привлечения внимания к главному в таблице. Стоит обратить внимание на размер шрифта внизу для усиления различия тарифных планов и на то, как используется зеленый цвет для побуждает посетителя попробовать продукт.
![GoodBarry Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/barry.gif)
Таким образом, нужно использовать визуальное отличие и избегать использование визуального шума. Используйте иконки когда они не мешают и помогают пользователю или несут информацию.
Важно также помнить, что иконки и изображения могут быть и действительно полезны. К примеру, в таблице сравнения товаров, когда картинка позволяет увидеть товар.
![Dell.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dell_com.gif)
Почти все рассмотренные примеры используют различные цвета фона для различия тарифных планов. Дизайнеры используют цветовую теорию и яркие цвета для того, чтобы пользователь обратил внимание на тот тарифный план, который хочет продать Вам компания.
![CrazyEgg.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/crazyegg_com.jpg)
Некоторые дизайнеры используют иллюстрации и цветные изображения для визуального отличия тарифных планов. Метафоры используются очень часто. К примеру, если компания предлагает несколько тарифов сервиса опросов, разымным было бы использовать небольшоя ящичек для lite-версии, и огромный для корпоративной. Так поступают многие дизайнеры.
![Movable Type Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/boxes.jpg)
![Dropsend Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dropsend.gif)
![Litmus Application Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/litmus.gif)
![Jigsaw Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/jigsaw.jpg)
Это правило применимо ко всем элементам дизайна. Подобная ошибка допущена на сайте BigFilebox.com:
![BigFilebox.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/bigfilebox.jpg)
Вторая таблица выпадает из общего дизайна сайта.
Таблица тарифных планов играет важную роль в успешных продажах. Таблица тарифов — лицо продукта. Важно, чтобы она была доступна всегда.
Таблица должна работать не только в современных браузерах, но и во всех видах браузеров и других устройствах. Таблица может быть создана с использованием всего разнообразия эффектов, но в итоге возможность пользоваться таблицей должна оставаться всегда, даже при отключенном CSS или JavaScript.
Один из примеров как должна выглядеть таблица при отключенном CSS и JS:
![FiltrBox Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/filtrbox_nocss.jpg)
Пример таблицы которая использует JS неправильно:
![Mailchimp Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/mailchimp.jpg)
Если мы нажмем на «View Plan Details», то откроется разъезжающее меню с подробностями. Однако если JS будет отключен, то мы ничего не увидим. Одно из решений этой проблемы скрывать блоки средствами java-скрипта при загрузке страницы.
ActionThis
![ActionThis Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/actionthis.gif)
Squarespace
![Squarespace Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/squarespace_com.jpg)
Tickspot
![Tickspot Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/tick.gif)
Litmusapp.com
![Litmus Application Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/litmus.gif)
Goodbarry.com
![GoodBarry Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/barry.gif)
Bigcartel.com
![Bigcartel Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/bigcartel.jpg)
Blinksale.com
![Blinksale Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/blinksale.gif)
Polldaddy.com
![Polldaddy Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/polldaddy.gif)
iPhone T-Mobile
![iPhone T-Mobile Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/iphone2.gif)
Fluxiom.com
![Fluxiom Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/flux.jpg)
Dropsend.com
![Dropsend Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dropsend.gif)
Brightbox.com
![Brightbox Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/brightbox.gif)
Spokeo.com/hr
![Spokeo Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/spokeo.jpg)
Movabletype (the pricing table is no longer available)
![Movable Type Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/movable.jpg)
Zendesk (the pricing table is no longer available)
![Movable Type Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/boxes.jpg)
iPhone
![Apple iPhone Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/apple.gif)
Harvest
![Harvest Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/getharvest_com.gif)
Github.com
![Github Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/github_com.gif)
FetchApp.com
![Fetch Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/fetch.gif)
RescueTime
![RescueTime Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/rescuetime_com.jpg)
Shutterstock
![Shutterstock Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/shutterstock_com.jpg)
Intervals
![Intervals Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/myintervals.jpg)
Jigsaw
![Jigsaw Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/jigsaw.jpg)
![Cozimo.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/cozimo.jpg)
DabbleDB
![DabbleDB Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dabbledb_com.jpg)
activeCollab
![activeCollab Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/activecollab_com.jpg)
Zoho Projects
![Zoho Projects Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/zoho_com.jpg)
TiVo
![TiVo Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/tivo.jpg)
Apple MobileMe
![MobileMe Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/apple_mobileme.jpg)
Analysis-one
![Analysis-one Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/anal.gif)
ProofHQ
![ProofHQ Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/proofhq.jpg)
Backboard
![Backboard Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/backboard_com.jpg)
ExpressionEngine
![Expression Engine Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/ee.jpg)
Больше примеров можно посмотреть в обзоре Кристьяна Ватсона.
Таблицы с тарифными планами важны каждой компании, предлагающей товары или услуги. Они должны объединить в себе и дизайн, и юзабилити. Они должны быть простыми, но в то же время давать четкие отличия возможностей и цен между товарами или услугами.
Таблицы тарифов должны помочь пользователю выбрать оптимальный для него тарифный план. Компания должна тщательно проанализировать свою продукцию и показать главные особенности и отличия своих тарифных планов. Посетители должны получить только ту информацию, которая действительно им нужна: возможности тарифа, особенности и стоимость. Главное правило — каждая ненужная ячейка нашей таблицы увеличивает вероятность потери потенциального клиента. Чем больше информации — тем сложнее сравнить различные тарифы и выбрать среди них лучший.
Как только Вы определились с наиболее важными функциями, вернитесь и создайте подробный список характеристик для тех пользователей, которых интересуют подробности. Пользователи имеют право знать, за что они платят деньги, и иметь возможность увидеть полные характеристики продукта.
Чтобы понять как лучше оформить и представить такие таблицы, рассмотрим как другие дизайнеры справились с этой задачей.
О чем необходимо помнить?
Перед нами стоит непростая задача. Дизайнер должен представить информацию точно и четко, представив с одной стороны достаточно информации и, с другой, помочь пользователю сделать оптимальный выбор. Для этого сформулируем основные принципы.
1. Не много и не мало
Казалось бы, чем больше информации мы предоставляем пользователю, тем лучшее впечатление мы на него произведем. Однако нагружая пользователя этими данными, мы заставляем его помнить их все сразу.
TypePad использует достаточно длинную таблицу. Несмотря на свою информативность и возможность полно объяснить различие между тарифными планами, она очень сложна для понимания: посетитель должен помнить какой тариф представляет каждая колонка. К тому же, продублировав названия тарифов в нижней части таблицы, авторы забыли проставить рядом с ними цены. Чтобы получить информацию о ценах, пользователи, изучающие середину таблицы, должны вернуться к вершине таблицы.
![TypePad Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/typepad_com.gif)
Удачный пример можно увидеть на ConceptShare. Обратите внимание, что в четвертый ряд таблицы авторы скомбинировали два сходных параметра, что позволило избавиться от лишнего ряда. Очень удачное решение.
![ConceptShare Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/conceptshare_com.jpg)
Очень хорошо что посетителям видно отличия тарифных планов. Информации не много и не мало. Разумно, ведь если в ваш магазин прийдет покупатель, то Вы не будете в первую очередь рассказывать о сходствах двух товаров? :-) Давайте пользователю ту информацию, которую он ищет. Это и есть второй принцип.
2. Показывайте отличия, а не сходства
Выделяйте отличия товаров. Неплохой идеей можно считать различное оформление основных характеристик (доступных на всех тарифах) и особенностей данного тарифа. Чтобы выделить их, Вы можете поместить наиболее важные особенности над основными характеристиками.
Посмотрим на таблицу на сайте etribes.com. Мы видим, на что нам обратить внимание, в чем отличие тарифов. Выбранные иконки удачно вписываются в общий стиль сайта и помогают посетителю, не отвлекая его. Это эффективное и удачное решение.
![etribes.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/etribes.jpg)
3. Выделяйте цену
Цена — это первое что хочет увидеть пользователь, когда он заходит на сайт продукта или услуги. Удостоверьтесь, что пользователь может увидеть цену максимально быстро и понятно.
Использование шрифта обычно зависит от типа продукции, и должно сочетаться с остальным дизайном. В большинстве случаев шрифт цен, названий и важных заголовков увеличивают, дабы выделить эту информацию. Как дизайнер, Вы должны удостовериться, что цена занимает своё место на странице.
![Wufoo Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/wufoo.jpg)
![Basecamp Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/basecamphq_com.jpg)
Также стоит сортировать тарифы по цене, по убыванию. Поскольку мы просматриваем сайты, используя F-просмотр (по теме можно посмотреть статью Якоба Нильсена), некоторые дизайнеры размещают слева самые простые предложения, чтобы пользователь обратил внимание в первую очередь на них. Но ведь в интересах дизайнера показать самые привлекательные предложения.
4. Используйте визуальные различия
Многие рассматриваемые примеры имеют серьезный недостаток: слишком часто используется визуальное отличие, и зачастую неверно. Дизайнеры пытаются сделать тарифные планы привлекательнее, видимо для этого и используются многочисленные зеленые галочки и красные крестики.
И если эти иконки разбросаны по всей таблице, то с каждой следущей пользователю становится сложнее воспринимать информацию и запоминать все различия между тарифами.
Удачно решили эту проблему на сайте Beanstalk. Поддерживаемые характеристики обозначаются нейтральным серым кружком, который не отвлекает внимание, а у тарифов, не имеющих данной особенности, ячейка оставлена пустой.
![Beanstalk Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/beanstalk.jpg)
Planhq.com использует зеленые галочки, но отказались от красных крестиков. Действительно, зачем они? Если мы можем отказаться от ненужных элементов, мы ведь должны сделать это?
![Planhq.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/planhq_com.jpg)
Goodbarry.com используют цвет для привлечения внимания к главному в таблице. Стоит обратить внимание на размер шрифта внизу для усиления различия тарифных планов и на то, как используется зеленый цвет для побуждает посетителя попробовать продукт.
![GoodBarry Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/barry.gif)
Таким образом, нужно использовать визуальное отличие и избегать использование визуального шума. Используйте иконки когда они не мешают и помогают пользователю или несут информацию.
Важно также помнить, что иконки и изображения могут быть и действительно полезны. К примеру, в таблице сравнения товаров, когда картинка позволяет увидеть товар.
![Dell.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dell_com.gif)
Почти все рассмотренные примеры используют различные цвета фона для различия тарифных планов. Дизайнеры используют цветовую теорию и яркие цвета для того, чтобы пользователь обратил внимание на тот тарифный план, который хочет продать Вам компания.
![CrazyEgg.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/crazyegg_com.jpg)
5. Оживите свою страницу
Некоторые дизайнеры используют иллюстрации и цветные изображения для визуального отличия тарифных планов. Метафоры используются очень часто. К примеру, если компания предлагает несколько тарифов сервиса опросов, разымным было бы использовать небольшоя ящичек для lite-версии, и огромный для корпоративной. Так поступают многие дизайнеры.
![Movable Type Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/boxes.jpg)
![Dropsend Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dropsend.gif)
![Litmus Application Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/litmus.gif)
![Jigsaw Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/jigsaw.jpg)
6. Будьте последовательны
Это правило применимо ко всем элементам дизайна. Подобная ошибка допущена на сайте BigFilebox.com:
![BigFilebox.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/bigfilebox.jpg)
Вторая таблица выпадает из общего дизайна сайта.
7. Не теряйте клиентов
Таблица тарифных планов играет важную роль в успешных продажах. Таблица тарифов — лицо продукта. Важно, чтобы она была доступна всегда.
Таблица должна работать не только в современных браузерах, но и во всех видах браузеров и других устройствах. Таблица может быть создана с использованием всего разнообразия эффектов, но в итоге возможность пользоваться таблицей должна оставаться всегда, даже при отключенном CSS или JavaScript.
Один из примеров как должна выглядеть таблица при отключенном CSS и JS:
![FiltrBox Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/filtrbox_nocss.jpg)
Пример таблицы которая использует JS неправильно:
![Mailchimp Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/mailchimp.jpg)
Если мы нажмем на «View Plan Details», то откроется разъезжающее меню с подробностями. Однако если JS будет отключен, то мы ничего не увидим. Одно из решений этой проблемы скрывать блоки средствами java-скрипта при загрузке страницы.
Примеры удачных решений
ActionThis
![ActionThis Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/actionthis.gif)
Squarespace
![Squarespace Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/squarespace_com.jpg)
Tickspot
![Tickspot Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/tick.gif)
Litmusapp.com
![Litmus Application Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/litmus.gif)
Goodbarry.com
![GoodBarry Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/barry.gif)
Bigcartel.com
![Bigcartel Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/bigcartel.jpg)
Blinksale.com
![Blinksale Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/blinksale.gif)
Polldaddy.com
![Polldaddy Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/polldaddy.gif)
iPhone T-Mobile
![iPhone T-Mobile Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/iphone2.gif)
Fluxiom.com
![Fluxiom Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/flux.jpg)
Dropsend.com
![Dropsend Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dropsend.gif)
Brightbox.com
![Brightbox Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/brightbox.gif)
Spokeo.com/hr
![Spokeo Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/spokeo.jpg)
Movabletype (the pricing table is no longer available)
![Movable Type Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/movable.jpg)
Zendesk (the pricing table is no longer available)
![Movable Type Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/boxes.jpg)
iPhone
![Apple iPhone Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/apple.gif)
Harvest
![Harvest Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/getharvest_com.gif)
Github.com
![Github Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/github_com.gif)
FetchApp.com
![Fetch Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/fetch.gif)
RescueTime
![RescueTime Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/rescuetime_com.jpg)
Shutterstock
![Shutterstock Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/shutterstock_com.jpg)
Intervals
![Intervals Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/myintervals.jpg)
Jigsaw
![Jigsaw Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/jigsaw.jpg)
![Cozimo.com Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/cozimo.jpg)
DabbleDB
![DabbleDB Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/dabbledb_com.jpg)
activeCollab
![activeCollab Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/activecollab_com.jpg)
Zoho Projects
![Zoho Projects Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/zoho_com.jpg)
TiVo
![TiVo Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/tivo.jpg)
Apple MobileMe
![MobileMe Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/apple_mobileme.jpg)
Analysis-one
![Analysis-one Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/anal.gif)
ProofHQ
![ProofHQ Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/proofhq.jpg)
Backboard
![Backboard Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/backboard_com.jpg)
ExpressionEngine
![Expression Engine Price Table](http://sarry.fatal.ru/habr/images/pricing-plans/ee.jpg)
Больше примеров можно посмотреть в обзоре Кристьяна Ватсона.
Подведем итоги
- Все элементы, включая таблицы, должны соответствовать общему дизайну сайта.
- Используйте фоновые цвета для визуального отличия различных тарифов (но без фанатизма).
- Как фотографы привлекают внимание к деталям на своих снимках, так и с помощью тарифных планов выделяются детали, которые вы хотите подчеркнуть.
- Играйте цветом и размером шрифтов для заголовков и важных замечаний.
- Самое важное — в левый верхний угол таблицы.
- Используйте «ненавязчивый» JS и CSS
- Всегда показывайте цену Ваших предложений
- Если список характеристик слишком длинный (т.е. не помещается на страницу без прокрутки) — удостоверьтесь, что Вы продублировали название, цену и кнопку выбора и вверху, и внизу таблицы.
- И не забывайте указывать валюту цены.