Повышение конверсии интернет-магазина на UMI.RU

Пришло время сайтов на ЮМИ.РУ. Давно про них ничего не писал. Сегодня хочу поговорить о проблеме производительности облачных сайтов, в частности, об интернет-магазинах и конверсии кнопки Купить.

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

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

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

Что же делать в этом случае?

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

Что дает такое решение?

Пользователь понимает что сайт реагирует на его запрос и просит посетителя подождать. Это позволяет донести до клиента важную информацию о том что:

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

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

Как мы пришли к этому решению?

Как ни странно, эту проблему мы обнаружили просто посмотрев на сеансы в вебвизоре от Яндекса.

В частности, один из пользователей ткнул 10 раз в кнопку Купить. Не дождавшись ответа от системы и какой-либо реакции на его действия он просто ушел с сайта так и не совершив покупку. Безусловно, владелец магазина был расстроен.

Техническое решение проблемы

Специально для этого случая в библиотеке jquery.umi_ru_form.js была разработана функция, прикрепляемая к событию и показывающая окно ожидания. Это окно не висит у пользователя постоянно, а пропадает спустя заданное время. По-умолчанию, таймаут составляет 1,5 секунды. Данного времени обычно хватает для того, чтобы сервер смог обработать запросы от пользователя и отобразить результат их выполнения.

Пример

<script type="text/javascript" charset="utf-8" src="//umicms.me/utils/jquery.umi_ru_form.js"></script> <script type="text/javascript">$('.button_buy:not(.gotobasket)').umiRuWait();</script>

В данном случае, на клик по кнопке с классом button_buy навешивается событие появления окна ожидания.

Небольшая особенность — в облачной версии UMI CMS кнопка "Купить" после её нажатия может становиться кнопкой "Перейти в корзину", которая отличается от обычной наличием класса "gotobasket". Именно поэтому из списка элементов для срабатывания исключены кнопки с классом "gotobasket" (селектор :not исключает элементы).

Как показано в примере, для использования функции вам потребуется задействовать библиотеку umi_ru_form, о которой уже шла речь в статьях "Дополнительные поля в форме заказа интернет-магазина UMI.RU", "Произвольная форма обратной связи для сайта на ЮМИ РУ" и "Изменение дизайна шаблонного сайта UMI.RU".

Надеюсь, что эта информация окажется полезной.

Задавайте вопросы в комментариях, отписывайтесь об интересующих вас темах и будьте в курсе всех тонкостей разработки на UMI CMS.

Выбрать дизайн для сайта на UMI.RU можно тут:

Июл01

Блог программиста UMI CMS