Дизайн сравнительных карточек с ценами

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

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

Основные правила

1. Покажите все возможные варианты продуктов, чтобы каждый был на виду и пользователь мог спокойно их сравнить, не переходя на другие страницы и не листая карусель.
2. Укажите цену в каждом варианте. Часто цена—решающий фактор и она всегда должна быть на виду.
3. Сравнивайте основные характеристики продукта. Найдите золотую середину: если будет много информации о каждом продукте, пользователь запутается, сравнивая опции. Если указать минимум информации, этого может быть недостаточно для объективного сравнения.

Позаботьтесь о визуальной составляющей

1. Данным в карточке не должно быть тесно. Оставьте по краям достаточно пространства и не располагайте элементы слишком близко друг к другу.
2. Подберите для фона нейтральную цветовую гамму. Это поможет выделить визуальные эффекты (крестики, галочки и т.д.).
3. Чтобы сравнивать карточки было еще проще, данные об опции делайте более контрастными, чем название самой опции. Например в карточке сравнения тарифного плана название опции “скорость” сделайте серым цветом, а данные об этой опции “200Мб”—черным.

Выделяйте приоритетную информацию

Акцентируйте внимание на цене, преимуществах и дополнительных опциях продуктов. Это можно сделать с помощью увеличение размера, изменения цвета или добавления визуальных эффектов.

Добавьте иллюстрации и иконки

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

Выделяйте рекомендуемые продукты

Такой прием можно увидеть на многих сайтах, где есть сравнительные карточки. Можно увеличить продажи определенного продукта, пометив его как выгодное предложение. Чтобы выделить рекомендуемый продукт, используйте контрастный цвет, тень или больший размер плашки.

Добавьте СТА в карточку

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