Как создать прайс-лист для сайта, чтобы посетитель понял цены и условия

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

Что собрать, прежде чем делать прайс-лист?

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

Для передачи данных пригодится таблица с отдельными столбцами:

• название позиции и категория;
• цена и единица расчёта;
• состав услуги или характеристики товара;
• условия и дополнительные работы;
• источник данных и ответственный за обновление.

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

Как разделить позиции на понятные клиенту категории?

Категории стоит называть по задачам покупателя, а не по отделам компании. Человек ищет сайт под рекламу или обновление магазина; внутреннее название направления ему не помогает. Проверьте, сможет ли новый посетитель узнать свою задачу в заголовке раздела, ещё не читая каждую строку прайса.

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

Что указать рядом с ценой, чтобы её не поняли неправильно?

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

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

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

Какой формат прайс-листа выбрать: таблицу, карточки или файл?

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

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

Как собрать страницу, чтобы цену было легко прочитать?

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

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

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

Как проверить прайс-лист глазами посетителя?

Дайте человеку, который не работал с вашим внутренним перечнем, конкретную задачу: найти услугу и объяснить её стоимость. Он должен увидеть единицу расчёта, состав предложения и следующий шаг без подсказки менеджера. Затем повторите проверку на телефоне — там ошибки в расположении цен заметнее.

Перед публикацией сверьте:

• совпадают ли названия и цены с согласованным источником;
• видны ли рядом с ценой единица расчёта и условия;
• не обрезаются ли строки и работают ли переходы на узком экране;
• понятно ли, как узнать стоимость, если она зависит от задачи.

Если человек нашёл цену, но не понял, что в неё входит, проверка ещё не пройдена. Исправьте пояснение рядом с позицией, а не оставляйте его для разговора с менеджером.

Как опубликовать прайс на сайте и не дать ему устареть?

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

Не размещайте весь прайс одной картинкой: в таком виде отдельную цену и условие трудно исправить или скопировать. Если цены часто меняются, заранее выясните, поддерживает ли ваша CMS удобное обновление данных. В этом поможет разбор о том, как выбрать CMS для сайта.

Если нужен каталог с карточками товаров и ценами, обсудите разработку сайта-каталога с HUNTERWEB. Консультация специалиста бесплатная; цену, состав работ и сроки компания укажет в коммерческом предложении после обсуждения задачи.

Частые вопросы

Ниже — ответы на вопросы, которые возникают при передаче прайса разработчику и выборе способа показа цен. Они помогут решить, нужна ли общая страница и что проверять после публикации. Если стоимость зависит от состава работ, сначала опишите условия расчёта: формат страницы сам по себе эту неопределённость не устранит.

Как передать разработчику прайс-лист из Excel?

Сделайте одну строку на позицию и отдельные столбцы для названия, цены, единицы расчёта и условий. Уберите объединённые ячейки. Состав услуги и ограничения запишите в таблицу, а не оставляйте только в примечаниях.

Нужна ли отдельная страница с прайсом или достаточно цен на страницах услуг?

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

Стоит ли добавлять микроразметку к ценам?

У типа Offer в Schema.org есть свойства price и priceCurrency. Добавляйте такую разметку, только если можете поддерживать её вместе с видимыми ценами: посетитель и разметка не должны получать разные значения.

Как понять, помогает ли прайс-лист посетителям?

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

Источники

Эти документы использованы для технических рекомендаций о таблицах и микроразметке. Руководство W3C объясняет, как помечать заголовки таблиц и связывать их с данными. Страница Schema.org описывает тип Offer и его свойства. Рекомендации по структуре прайса в статье — редакционные, а условия работы HUNTERWEB сверены с данными компании.

• Tables Tutorial, W3C Web Accessibility Initiative — разделы о заголовках таблиц и связи заголовков с ячейками данных.
• Offer, Schema.org — описание типа Offer и свойств price, priceCurrency.

Ильнар ИсхаковРуководитель digital-проектов, Hunterweb