UI/UX дизайн прайс-листа и таблицы тарифных планов

Превращение посетителей в клиентов  —  одна из главных целей любого бизнеса. Следовательно, прайс-лист  —  очень полезный инструмент, ведь он помогает пользователю составить представление о тарифных планах продукта и разнице между ними.

В руководстве рассмотрим 10 лучших практик оформления прайс-листа.

1. Много версий одного продукта

Вам понадобится сравнительный прайс-лист или таблица тарифных планов, если вы предлагаете более одного варианта продукта (более одного тарифного плана), а вот пользователь всегда приобретает только одну версию.

2. Правильные выгоды в сравнении

Крайне важно выбрать правильные плюсы и минусы тарифов и товаров для таблицы (соответствующие целям ваших потенциальных клиентов). Дайте потенциальным клиентам понять, что именно они упускают, выбирая более дешевый тарифный план.

Выбирайте достоинства тарифа на основе ценности, представляемой пользователям.

Посетителям следует предоставлять только ту информацию, которая их заинтересует. Помните, что чем больше информации вы предоставляете, тем больше информации им приходится потреблять, и тем больше вероятность паралича анализа.

Каждая лишняя строка в таблице тарифов увеличивает вероятность потери потенциального клиента.

3. Визуальное выделение цены

Цена  —  первое, что хотят увидеть потенциальные покупатели, когда сравнивают предложения между собой. Вам необходимо поместить ее в верхней части таблицы и придать ей соответствующий визуальный вес, например благодаря цвету, размеру или весу шрифта.

Не забудьте добавить валюту для каждой цены  —  это поможет избежать путаницы.

4. Согласованность цены с характеристиками

Таблица тарифов помогает потенциальным клиентам понять, как меняются характеристики продукта при изменении его цены. Если посетители не могут понять, как характеристики согласуются с ценой, то не станут подписываться на услугу. Традиционная мудрость гласит:

  • Первый тарифный план в таблице либо бесплатный, либо самый дешевый. Предлагайте бесплатный план: когда вы даете что-то бесплатно, то люди сразу же искренне интересуются продуктом, а некоторые из них могут перейти на платный план позже.
  • Располагайте планы по возрастанию цены. В западном мире люди читают слева направо, поэтому стоит использовать эту схему для любого контента, включая таблицы тарифов и прайс-листы.
  • Не впадайте в крайности при разработке тарифных планов. Некоторые компании склонны предоставлять только два варианта своего продукта  —  бесплатный и профессиональный, где последний доступен за фиксированную цену. Проблема такого подхода заключается в том, что тарифный план может оказаться слишком дорогим для некоторых потенциальных клиентов. Всегда добавляйте средний план для удовлетворения потребности данной группы пользователей.
  • НЕ добавляйте центы к ценам. Дополнительные цифры в цене могут случайно ввести в заблуждение ваших потенциальных клиентов  —  создать ложное впечатление, что они потратят больше денег. Если вы не указываете центы (например, вы берете $25,00), то избавьтесь от десятичных знаков, оставив только целую часть числа (например, $25).
  • Добавьте визуальный индикатор, чтобы помочь пользователям оценить, сколько и чего в сравнении они получат по каждому тарифному плану.
Визуальный индикатор, помогающий посетителям понять разницу между индивидуальными планами

5. Легкость визуального сканирования

Минимизируйте объем текста, необходимого к прочтению для понимания разницы между тарифными планами.

Информация в таблице должна быть удобной для восприятия с первого взгляда.

  • Старайтесь донести различия, а не сходства
    Выделите цифрами разницу между отдельными планами (например, “5 пользователей”) или же примените булевы значения (например, галочка для обозначения “Да” и тире для обозначения “Нет”). Таким образом вы сведете к минимуму количество информации для анализа потенциальными клиентами.
  • Для меток применяйте левую колонку характеристик.
  • Поместите общие характеристики в верхние строки таблицы, а отличительные характеристики поставьте в нижнюю часть.
  • Избегайте визуального шума. Дизайнеры склонны выбирать разные цвета фона для визуального разделения планов. Такой подход может внести дополнительный визуальный шум, и тогда таблица с ценами станет похожа на скорее на рождественскую елку, чем на инструмент для принятия взвешенного решения. Сведя к минимуму количество цветов и правильно используя оставшиеся, вы уничтожите отвлекающий фактор на корню.

6. Цена за месяц и за годовой тариф

Многие сервисы предлагают скидку при ежегодной оплате. Покажите, сколько денег сэкономит пользователь, приобретая годовой план подписки.

В верхней части таблицы добавьте переключатель цены за месяц и за год, чтобы пользователи сравнили оба варианта стоимости тарифа.

7. Запрет на обман потенциальных клиентов

Некоторые сервисы пользуются разными визуальными трюками, чтобы привлечь внимание посетителя к определенному тарифному плану, который срочно нужно продать. Помогите пользователям понять разницу между отдельными тарифными планами и не заставляйте их сразу принимать конкретное решение. 

Пожалуйста, всегда избегайте применения следующих распространенных маркетинговых уловок, только снижающих продажи:

  • Разный дизайн для разных тарифных планов. Например, применение контрастных цветов для выделения колонки с одним конкретным планом или добавление метки “самый популярный”.
  • Сокрытие бесплатного тарифа. Тарифный план Free не виден в сравнительной таблице, даже если сервис его предоставляет  —  это критическая ошибка. Посетителю приходится искать свободный план самостоятельно, особенно когда исключительно под таблицей находится крошечная ссылка или кнопка с названием Free plan.
  • Добавьте план-приманку с высокой ценой. Даже если компания предлагает несколько различных платных тарифных планов, некоторые пользователи все равно решат, что услуга слишком дорога для них. Для борьбы с таким ощущением компании в качестве приманки добавляют в прайс-лист слишком дорогой тарифный план. Например, если все тарифные планы состоят из трехзначных чисел (например, $199, $299 и $399), то владельцы бизнеса добавляют в конец таблицы план с четырехзначным числом (например, $1199). Когда посетители сравнивают выбранный план с самым дорогим, то сразу понимают, что он выглядит уже не так дорого.

8. Название столбца видно при прокрутке

По итогу таблица тарифов может получиться довольно длинной, даже если предприятие стремится определить приоритетность характеристик для сравнения. В длинных таблицах сравнения цен название столбца может быть не видно, когда пользователи доходят до нижней части таблицы. В результате пользователям приходится запоминать, какой план представляет каждый столбец.

Рекомендуется сделать первую строку таблицы (ту, которая содержит название плана и, в идеале, цену) липкой  —  на экране ее должно быть видно всегда. 

9. Кнопка выбора плана

Покажите кнопку регистрации внизу каждой колонки, чтобы помочь пользователям выбрать определенный план.

10. FAQ под прайс-листом

Постарайтесь дать ответы на наиболее распространенные вопросы, возникающие у ваших потенциальных клиентов, например:

  1. Ограничения плана. Как работает бесплатный план?
  2. Переход с одного плана на другой. Можно ли перейти с бесплатного плана на Pro? Можно ли перейти с более дорогого плана на менее дорогой?
  3. Пробный период. Предлагаете ли вы период возврата денег? Если да, то какова продолжительность этого периода? Можно ли удалить аккаунт?

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи Nick Babich: Best Practices for Pricing Table Design

Предыдущая статьяПочему я перехожу с Python на Rust
Следующая статьяТОП-4 официальных сайта МО-библиотек и способы их использования