Главное Авторские колонки Вакансии Образование
4 831 43 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Основные типы калькуляторов на сайтах: примеры, ошибки, советы

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

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

Калькулятор-справочник — для SEO

Вы поискали что-то вроде “рассчитать [товар или услугу]”, получили от Яндекса и Гугла кучу ссылок, перешли по одной из них, сделали расчет, а затем понимаете, что оказались:

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

Знакомая история?

b_58caa2bec7c7c.jpg

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

Задача такого калькулятора — ничего не продавать. Он должен удержать человека на сайте. Продавать должен сам сайт, на котором установлен виджет: подтолкнуть человека к этому можно разными способами — от поп-апов до ремаркетинга.

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

b_58caa38ec81a2.jpg

Один утверждал (и это верно “по букве закона”), что расчеты нужно затачивать 
под миллиметры, второй — что под сантиметры (потому что так считают его клиенты). 
Угадайте, у кого в итоге было больше заказов.

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

Как-бы-калькулятор захвата лидов

Еще один пример с фейсбука — посвежее и в общем не про нас, а про вас, владельцы коммерческих сайтов:

b_58caa5d4273ad.jpg

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

b_58caa63446278.jpg

Например, выяснить, нужно ли условное штробление стен, иногда проще в разговоре.

Задача калькулятора — служить формой готовой заявки.

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

Калькулятор заказа с моментальным расчетом

У каждого из нас есть ожидание по цене — мы знаем сколько денег можем занять или достать из семейного бюджета. И тот, кто ищет цену дешевле, чем вы предложите, может “долбить” онлайн-консультанта, долго выяснять детали по почте или телефону, но едва ли в итоге дойдет до сделки, верно?.

Калькулятор с авторасчетом позволит отсечь такого клиента сразу. Зато те, кто согласен с вашей ценой — смогут сразу сделать заказ.

b_58caa612804c1.jpg

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

Задача калькулятора — отвечать на вопрос клиента “Сколько стоит услуга в моем случае?”. Автоматом, вместо менеджера.

Соответственно, ошибкой будет не следить за ценами и поставить такой калькулятор отдельно от описания ваших преимуществ.

А одно из самых простых и частых улучшений — сделать скидку за комбинацию услуг. Её можно вывести отдельно, вторым результатом. Клиенты любят чувствовать себя особенными ;)

Калькулятор, который объединяет все предыдущие калькуляторы

b_58caa6e7505b5.jpg

Задача калькулятора — продать вашу экспертность через авторекомендации клиенту. А заодно он может считать скидки, мотивировать внести предоплату, переводить на каталог сопутствующих товаров, принимать заявки… В общем, с таким “монстром” можно придумать многое. Попробуйте!

***

Все примеры из статьи были сделаны на сервисе для самостоятельного создания калькуляторов и форм uCalc.pro.

+7
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Все по делу! Плюсую!
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Alexey Korneev
А почему примеры калькуляторов только для стройки? Калькулятор ипотеки, осаго - это ж одни из самых популярных по тому же «Вордстату»
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Строительные калькуляторы это одна из самых "горячих" тем сейчас на сервисе, поэтому активно пилим галерею шаблонов и решили поделиться примерами оттуда.

Обзор самых гуглимых (ой, простите, яндексимых) калькуляторов будет в следующем выпуске: подписывайтесь ;)
Ответить
Дима Балабан
Сделайте пожалуйста, расчет расстояния по карте.
От пункта А до Б
Ответить
Сергей Артюх
Такое поле появится позже.
Мы готовим еще много нового: аналитика калькулятора, интеграция с CRM, условия "если-то" в расчетах.

Что находится в разработке можете посмотреть на странице: http://all.uwishlist.ru/forums/589267
Ответить
Дима Балабан
Отлично!=)
Ждем обновлений=)
Ответить
Светлана Окрокверцхова
Отличный проект! Удачи в развитии
Ответить
Xpert-studio
Наша компания представляет услуги в сфере разработки веб-сайтов и продвижения
Xpert Webstudio
Отличный калькулятор на первый взгляд, нужно попробовать его в действии, удачи вам
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Спасибо - и делитесь мнением и опытом, как оттестите: мы собираем кейсы для таких вот публикаций: https://spark.ru/startup/ucalc/blog/28033/marketologi-delyatsya-kak-primenyat-kalkulyator-na-sajte
Ответить
Лидия Бесчастных
А куда вам можно заслать наш опыт?
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Лидия, каналов несколько - например, сообщения сообщества в нашем VK https://vk.com/ucalc , наш форум (в ссылках сообщества), либо написать мне тут. Как вам удобнее. Заранее спасибо ;)
Ответить
Мокан Александр
Материал хороший, спасибо.
Что касается сервиса. Решил попробовать и сразу уперся в стену. У "ползунка" очень мало настроек, использовать его практически невозможно. Как я понял, у него шкала с 10 делениями, задаётся первое и последнее.
Необходимо задавать число делений на шкале, а также ход ползунка по шкале.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Alexey Korneev
Вы можете это задать переход в опции «шаг» в настройке ползунка во вкладке «дизайн». Скажу, что это слегка неочевидно, но поддается укрощению :)
Ответить
Мокан Александр
Да, шаг задаётся. Но перемещение ползунка не связано со значением шага. Т.е. если у меня шкала 100, 200, 300 и шаг 100, то ползунок перемещается в любое место между 100 и 200 и показывает 100. Выглядит очень странно, нужно четкое перемещение ползунка в позицию, равную значению шага.
Ну и число делений шкалы - нужно обязательно. К примеру, мне нужна шкала из 3 значений: 100, 200, 300 (шаг 100). Вместо этого я вижу ненужные деления 120, 140, 160 и т.д.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Мокан, спасибо за интересный вопрос, позволяющий рассказать, как работает наш сервис.

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

Т.е. если вы выставили шаг 100, то на всем промежутке от 100 до 200 будет показываться 100. Если выставили шаг 7, на промежутке от 100 до 200 будет при скролле показываться 107, 114, 121, 128 и так далее.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
И вы всегда можете скинуть задачку прямо во время работы с калькулятором - подскажем и поможем: справа в аккаунте, где ваш ник, есть вкладка поддержка, вызывает такое окно.

Сразу зная id вашего калькулятора, нашим ребятам будет проще разобраться.
Ответить
Павел Николаев
Позабавил оконный калькулятор. Ерунда полная, потому что не учтена специфика производства окон. Подоконники кратно 10 см, хотя есть буквально 3-4 стандартных типоразмера. Окна 3 м на 3 м. Вы уверены, что это так делается?

Что-то мне подсказывает, что стоит вам купить тортик и пойти в ближайший салон продаж окон. Тортик обменяете на консультацию менеджера.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Павел, что-то мне подсказывает, что вы какой-то не тот пост прокомментировали: калькулятор из этой статьи стоит на сайте пользователя и второй месяц приносит заявки :)
Ответить
Jon Doe
Запустились недавно, 12 тысяч виджетов и ни одного калькулятора расчета мощности кондиционера. Я первый Штоль буду?)
Ответить
Показать предыдущие комментарии
Jon Doe
Сделал простенький, а как скинуть?
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Если не против показать общественности, у нас есть механика «опубликовать по ссылке»: она будет дотюниваться под использование в соцсетях и мессенджерах, но уже рабочая (вот описание, как сделать https://ucalc.pro/help#7)
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Спасибо, будем теперь знать, как мощность кондиционера считать! (это же калькулятор про кондиционеры, о котором вы спрашивали, да?)

Кстати, вы можете добавить калькулятору заголовок, используя функцию «текст» прямо на сервисе - но понимаю, что и на сайте заголовок можно стандартным методом вашей cms аналогично прописать.
Ответить
Jon Doe
Простейший. Для бытовых нужд. Спасибо за подсказку, буду иметь ввиду.
Ответить
Digital-Агенство /// ГОСАЙТ.РФ
Выводим бизнес в онлайн
Artem 15237
Вы планируете делать сервис платным? Хочу установить на сайт, но чувствую потом придет счет.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Артем, не факт, что придет. В базовой версии сервис всегда будет бесплатным, а еще где-то месяц можно будет пользоваться расширенным функционалом - мы будем его добавлять, например, связка с гугл-аналитикой и яндекс-метрикой готовится к выходу.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
В дальнейшем калькуляторы, использующие смс-уведомления (тут сторонний сервис, они сами берут деньги), картинки (их надо хранить на сервере, это место), аналитику, платежи - будут тарифицироваться по месячной подписке $5 в месяц. Калькуляторы, не использующие эти опции, тариф не затронет. Пользователям бета-версии будут приятные возможности - мы сообщим о них в рассылке.
Ответить
Екатерина К
Прикольная идея. Никогда не думала, что калькуляторы могут быть столь популярными. А что под капотом - какие технологии используете? И было бы интересно узнать про команду и про процесс разработки. Спасибо.
Ответить
Показать предыдущие комментарии
Екатерина К
Почитала. Но вопросы все же предпочту задать здесь. Вы рассказали только о фронтэнде, а что на бэкэнде?
Кто вообще делал этот продукт, ucoz?
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Да, uCoz - эта информация есть и на главной проекта, и на хабре. Исходно конструктор калькуляторов писался для нашего проекта uKit - это конструктор лендингов и сайтов-визиток в режиме wysiwyg. Но тк код можно встроить в любую cms или конструктор, мы решили сделать проект общедоступным.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Что касается технологий на бэкенде, то это php7, mysql (nosql тоже будем использовать), oauth 2.0, nginx и apache - в общем, такой стандартный «джентльменский набор» ;)
Ответить
Екатерина К
Спасибо за ответ. Насчет "стандартности" и "джентльменкости" набора не соглашусь, но это уже из области холиваров.
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Скажем так, для нашей вертикали это нормальный стэк.

А о фломастерах не спорят - тут вы правы)
Ответить
Co-Versia
Научное объединение специалистов в области интернет-маркетинга
Антон Медведев
Офигенный сервис :o
А как долго он будет бесплатным?
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Антон, спасибо за столь лестную оценку :)

uCalc останется полностью бесплатным до окончания бета-тестирования - это где-то месяц еще, грубо. Затем сервис будет работать в двух режимах: бесплатной базовой версии и платной - $5 за калькулятор в месяц, куда войдут отправка смс, привязка целей в метрике, прием оплат от пользователей и другие такие вещи.

Тарификация будет осуществляться в зависимости от функционала, используемого каждым калькулятором. Т.е., например, калькулятор-справочник с высокой вероятностью не будет ничего стоить, а калькулятор-заявка - скорее всего, будет платным, если вам будет недостаточно просто использования функции от правки на email.
Ответить
Co-Versia
Научное объединение специалистов в области интернет-маркетинга
Антон Медведев
Спасибо, будем ждать выката тарифов :)
Ответить
Максат Мт
Как раз тот инструмент, который я хотел использовать на лендинге)
Ответить
uKit AI
Сервис на базе нейронных сетей, который обновит дизайн и технологии вашего сайта
Олег Павлов
Максат, рады, что можем быть полезны.

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

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.