От меня: поскольку сейчас передо мной стоит задача, непосредственно освещаемая в данной статье, то решил помимо изучения и перевести статью, поскольку считаю её полезной и грамотной. Хотелось заодно и получить Ваши замечания по переводу, язык тоже надо совершенствовать. Пожелания принимаются.
Таблицы с тарифными планами важны каждой компании, предлагающей товары или услуги. Они должны объединить в себе и дизайн, и юзабилити. Они должны быть простыми, но в то же время давать четкие отличия возможностей и цен между товарами или услугами.
Таблицы тарифов должны помочь пользователю выбрать оптимальный для него тарифный план. Компания должна тщательно проанализировать свою продукцию и показать главные особенности и отличия своих тарифных планов. Посетители должны получить только ту информацию, которая действительно им нужна: возможности тарифа, особенности и стоимость. Главное правило — каждая ненужная ячейка нашей таблицы увеличивает вероятность потери потенциального клиента. Чем больше информации — тем сложнее сравнить различные тарифы и выбрать среди них лучший.
Как только Вы определились с наиболее важными функциями, вернитесь и создайте подробный список характеристик для тех пользователей, которых интересуют подробности. Пользователи имеют право знать, за что они платят деньги, и иметь возможность увидеть полные характеристики продукта.
Чтобы понять как лучше оформить и представить такие таблицы, рассмотрим как другие дизайнеры справились с этой задачей.
Перед нами стоит непростая задача. Дизайнер должен представить информацию точно и четко, представив с одной стороны достаточно информации и, с другой, помочь пользователю сделать оптимальный выбор. Для этого сформулируем основные принципы.
Казалось бы, чем больше информации мы предоставляем пользователю, тем лучшее впечатление мы на него произведем. Однако нагружая пользователя этими данными, мы заставляем его помнить их все сразу.
TypePad использует достаточно длинную таблицу. Несмотря на свою информативность и возможность полно объяснить различие между тарифными планами, она очень сложна для понимания: посетитель должен помнить какой тариф представляет каждая колонка. К тому же, продублировав названия тарифов в нижней части таблицы, авторы забыли проставить рядом с ними цены. Чтобы получить информацию о ценах, пользователи, изучающие середину таблицы, должны вернуться к вершине таблицы.
Удачный пример можно увидеть на ConceptShare. Обратите внимание, что в четвертый ряд таблицы авторы скомбинировали два сходных параметра, что позволило избавиться от лишнего ряда. Очень удачное решение.
Очень хорошо что посетителям видно отличия тарифных планов. Информации не много и не мало. Разумно, ведь если в ваш магазин прийдет покупатель, то Вы не будете в первую очередь рассказывать о сходствах двух товаров? :-) Давайте пользователю ту информацию, которую он ищет. Это и есть второй принцип.
Выделяйте отличия товаров. Неплохой идеей можно считать различное оформление основных характеристик (доступных на всех тарифах) и особенностей данного тарифа. Чтобы выделить их, Вы можете поместить наиболее важные особенности над основными характеристиками.
Посмотрим на таблицу на сайте etribes.com. Мы видим, на что нам обратить внимание, в чем отличие тарифов. Выбранные иконки удачно вписываются в общий стиль сайта и помогают посетителю, не отвлекая его. Это эффективное и удачное решение.
Цена — это первое что хочет увидеть пользователь, когда он заходит на сайт продукта или услуги. Удостоверьтесь, что пользователь может увидеть цену максимально быстро и понятно.
Использование шрифта обычно зависит от типа продукции, и должно сочетаться с остальным дизайном. В большинстве случаев шрифт цен, названий и важных заголовков увеличивают, дабы выделить эту информацию. Как дизайнер, Вы должны удостовериться, что цена занимает своё место на странице.
Также стоит сортировать тарифы по цене, по убыванию. Поскольку мы просматриваем сайты, используя F-просмотр (по теме можно посмотреть статью Якоба Нильсена), некоторые дизайнеры размещают слева самые простые предложения, чтобы пользователь обратил внимание в первую очередь на них. Но ведь в интересах дизайнера показать самые привлекательные предложения.
Многие рассматриваемые примеры имеют серьезный недостаток: слишком часто используется визуальное отличие, и зачастую неверно. Дизайнеры пытаются сделать тарифные планы привлекательнее, видимо для этого и используются многочисленные зеленые галочки и красные крестики.
И если эти иконки разбросаны по всей таблице, то с каждой следущей пользователю становится сложнее воспринимать информацию и запоминать все различия между тарифами.
Удачно решили эту проблему на сайте Beanstalk. Поддерживаемые характеристики обозначаются нейтральным серым кружком, который не отвлекает внимание, а у тарифов, не имеющих данной особенности, ячейка оставлена пустой.
Planhq.com использует зеленые галочки, но отказались от красных крестиков. Действительно, зачем они? Если мы можем отказаться от ненужных элементов, мы ведь должны сделать это?
Goodbarry.com используют цвет для привлечения внимания к главному в таблице. Стоит обратить внимание на размер шрифта внизу для усиления различия тарифных планов и на то, как используется зеленый цвет для побуждает посетителя попробовать продукт.
Таким образом, нужно использовать визуальное отличие и избегать использование визуального шума. Используйте иконки когда они не мешают и помогают пользователю или несут информацию.
Важно также помнить, что иконки и изображения могут быть и действительно полезны. К примеру, в таблице сравнения товаров, когда картинка позволяет увидеть товар.
Почти все рассмотренные примеры используют различные цвета фона для различия тарифных планов. Дизайнеры используют цветовую теорию и яркие цвета для того, чтобы пользователь обратил внимание на тот тарифный план, который хочет продать Вам компания.
Некоторые дизайнеры используют иллюстрации и цветные изображения для визуального отличия тарифных планов. Метафоры используются очень часто. К примеру, если компания предлагает несколько тарифов сервиса опросов, разымным было бы использовать небольшоя ящичек для lite-версии, и огромный для корпоративной. Так поступают многие дизайнеры.
Это правило применимо ко всем элементам дизайна. Подобная ошибка допущена на сайте BigFilebox.com:
Вторая таблица выпадает из общего дизайна сайта.
Таблица тарифных планов играет важную роль в успешных продажах. Таблица тарифов — лицо продукта. Важно, чтобы она была доступна всегда.
Таблица должна работать не только в современных браузерах, но и во всех видах браузеров и других устройствах. Таблица может быть создана с использованием всего разнообразия эффектов, но в итоге возможность пользоваться таблицей должна оставаться всегда, даже при отключенном CSS или JavaScript.
Один из примеров как должна выглядеть таблица при отключенном CSS и JS:
Пример таблицы которая использует JS неправильно:
Если мы нажмем на «View Plan Details», то откроется разъезжающее меню с подробностями. Однако если JS будет отключен, то мы ничего не увидим. Одно из решений этой проблемы скрывать блоки средствами java-скрипта при загрузке страницы.
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
Больше примеров можно посмотреть в обзоре Кристьяна Ватсона.
Таблицы с тарифными планами важны каждой компании, предлагающей товары или услуги. Они должны объединить в себе и дизайн, и юзабилити. Они должны быть простыми, но в то же время давать четкие отличия возможностей и цен между товарами или услугами.
Таблицы тарифов должны помочь пользователю выбрать оптимальный для него тарифный план. Компания должна тщательно проанализировать свою продукцию и показать главные особенности и отличия своих тарифных планов. Посетители должны получить только ту информацию, которая действительно им нужна: возможности тарифа, особенности и стоимость. Главное правило — каждая ненужная ячейка нашей таблицы увеличивает вероятность потери потенциального клиента. Чем больше информации — тем сложнее сравнить различные тарифы и выбрать среди них лучший.
Как только Вы определились с наиболее важными функциями, вернитесь и создайте подробный список характеристик для тех пользователей, которых интересуют подробности. Пользователи имеют право знать, за что они платят деньги, и иметь возможность увидеть полные характеристики продукта.
Чтобы понять как лучше оформить и представить такие таблицы, рассмотрим как другие дизайнеры справились с этой задачей.
О чем необходимо помнить?
Перед нами стоит непростая задача. Дизайнер должен представить информацию точно и четко, представив с одной стороны достаточно информации и, с другой, помочь пользователю сделать оптимальный выбор. Для этого сформулируем основные принципы.
1. Не много и не мало
Казалось бы, чем больше информации мы предоставляем пользователю, тем лучшее впечатление мы на него произведем. Однако нагружая пользователя этими данными, мы заставляем его помнить их все сразу.
TypePad использует достаточно длинную таблицу. Несмотря на свою информативность и возможность полно объяснить различие между тарифными планами, она очень сложна для понимания: посетитель должен помнить какой тариф представляет каждая колонка. К тому же, продублировав названия тарифов в нижней части таблицы, авторы забыли проставить рядом с ними цены. Чтобы получить информацию о ценах, пользователи, изучающие середину таблицы, должны вернуться к вершине таблицы.
Удачный пример можно увидеть на ConceptShare. Обратите внимание, что в четвертый ряд таблицы авторы скомбинировали два сходных параметра, что позволило избавиться от лишнего ряда. Очень удачное решение.
Очень хорошо что посетителям видно отличия тарифных планов. Информации не много и не мало. Разумно, ведь если в ваш магазин прийдет покупатель, то Вы не будете в первую очередь рассказывать о сходствах двух товаров? :-) Давайте пользователю ту информацию, которую он ищет. Это и есть второй принцип.
2. Показывайте отличия, а не сходства
Выделяйте отличия товаров. Неплохой идеей можно считать различное оформление основных характеристик (доступных на всех тарифах) и особенностей данного тарифа. Чтобы выделить их, Вы можете поместить наиболее важные особенности над основными характеристиками.
Посмотрим на таблицу на сайте etribes.com. Мы видим, на что нам обратить внимание, в чем отличие тарифов. Выбранные иконки удачно вписываются в общий стиль сайта и помогают посетителю, не отвлекая его. Это эффективное и удачное решение.
3. Выделяйте цену
Цена — это первое что хочет увидеть пользователь, когда он заходит на сайт продукта или услуги. Удостоверьтесь, что пользователь может увидеть цену максимально быстро и понятно.
Использование шрифта обычно зависит от типа продукции, и должно сочетаться с остальным дизайном. В большинстве случаев шрифт цен, названий и важных заголовков увеличивают, дабы выделить эту информацию. Как дизайнер, Вы должны удостовериться, что цена занимает своё место на странице.
Также стоит сортировать тарифы по цене, по убыванию. Поскольку мы просматриваем сайты, используя F-просмотр (по теме можно посмотреть статью Якоба Нильсена), некоторые дизайнеры размещают слева самые простые предложения, чтобы пользователь обратил внимание в первую очередь на них. Но ведь в интересах дизайнера показать самые привлекательные предложения.
4. Используйте визуальные различия
Многие рассматриваемые примеры имеют серьезный недостаток: слишком часто используется визуальное отличие, и зачастую неверно. Дизайнеры пытаются сделать тарифные планы привлекательнее, видимо для этого и используются многочисленные зеленые галочки и красные крестики.
И если эти иконки разбросаны по всей таблице, то с каждой следущей пользователю становится сложнее воспринимать информацию и запоминать все различия между тарифами.
Удачно решили эту проблему на сайте Beanstalk. Поддерживаемые характеристики обозначаются нейтральным серым кружком, который не отвлекает внимание, а у тарифов, не имеющих данной особенности, ячейка оставлена пустой.
Planhq.com использует зеленые галочки, но отказались от красных крестиков. Действительно, зачем они? Если мы можем отказаться от ненужных элементов, мы ведь должны сделать это?
Goodbarry.com используют цвет для привлечения внимания к главному в таблице. Стоит обратить внимание на размер шрифта внизу для усиления различия тарифных планов и на то, как используется зеленый цвет для побуждает посетителя попробовать продукт.
Таким образом, нужно использовать визуальное отличие и избегать использование визуального шума. Используйте иконки когда они не мешают и помогают пользователю или несут информацию.
Важно также помнить, что иконки и изображения могут быть и действительно полезны. К примеру, в таблице сравнения товаров, когда картинка позволяет увидеть товар.
Почти все рассмотренные примеры используют различные цвета фона для различия тарифных планов. Дизайнеры используют цветовую теорию и яркие цвета для того, чтобы пользователь обратил внимание на тот тарифный план, который хочет продать Вам компания.
5. Оживите свою страницу
Некоторые дизайнеры используют иллюстрации и цветные изображения для визуального отличия тарифных планов. Метафоры используются очень часто. К примеру, если компания предлагает несколько тарифов сервиса опросов, разымным было бы использовать небольшоя ящичек для lite-версии, и огромный для корпоративной. Так поступают многие дизайнеры.
6. Будьте последовательны
Это правило применимо ко всем элементам дизайна. Подобная ошибка допущена на сайте BigFilebox.com:
Вторая таблица выпадает из общего дизайна сайта.
7. Не теряйте клиентов
Таблица тарифных планов играет важную роль в успешных продажах. Таблица тарифов — лицо продукта. Важно, чтобы она была доступна всегда.
Таблица должна работать не только в современных браузерах, но и во всех видах браузеров и других устройствах. Таблица может быть создана с использованием всего разнообразия эффектов, но в итоге возможность пользоваться таблицей должна оставаться всегда, даже при отключенном CSS или JavaScript.
Один из примеров как должна выглядеть таблица при отключенном CSS и JS:
Пример таблицы которая использует JS неправильно:
Если мы нажмем на «View Plan Details», то откроется разъезжающее меню с подробностями. Однако если JS будет отключен, то мы ничего не увидим. Одно из решений этой проблемы скрывать блоки средствами java-скрипта при загрузке страницы.
Примеры удачных решений
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
Больше примеров можно посмотреть в обзоре Кристьяна Ватсона.
Подведем итоги
- Все элементы, включая таблицы, должны соответствовать общему дизайну сайта.
- Используйте фоновые цвета для визуального отличия различных тарифов (но без фанатизма).
- Как фотографы привлекают внимание к деталям на своих снимках, так и с помощью тарифных планов выделяются детали, которые вы хотите подчеркнуть.
- Играйте цветом и размером шрифтов для заголовков и важных замечаний.
- Самое важное — в левый верхний угол таблицы.
- Используйте «ненавязчивый» JS и CSS
- Всегда показывайте цену Ваших предложений
- Если список характеристик слишком длинный (т.е. не помещается на страницу без прокрутки) — удостоверьтесь, что Вы продублировали название, цену и кнопку выбора и вверху, и внизу таблицы.
- И не забывайте указывать валюту цены.
