Продвинутый модуль бронирования на сайте отеля.

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

Есть такой способ размещать модуль бронирования на стороннем сайте с помощью переадресации.

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

Например:

7458751f857799456044c390d8451cf1.png

Модуль бронирования

•   находится на стороннем сайте

•   не вызывает доверия из-за доисторического интерфейса

•   автоматически выбирает бронь при первичном посещении

•   наличие мест на выбранный период определяется после обновления сайта

•   приходится бесконечно изменять даты в поисках свободного номера

Или такое решение:

•   форма дает возможность выбрать занятое место

•   потом переводит на новую страницу и пишет, что нет доступных номеров

•   при частичном совпадении предлагает «доступные даты заезда» во всевозможных вариантах. Выбранный номер в данным списке не имеет приоритета и расположен на 3 месте

 8767a787717a46539e08c9b1e95dd72a.png

 cc4782b0e35ba24505a55b39a902980b.png

 5a71a0d81498f3dfb44fff0adc68a3b5.png

•    при выборе 1 гостя показывает сначала двухместные номера

•    нет калькулятора 

•    нет возможности сразу посмотреть свободные даты в конкретных номерах

•    отсутствует разрешение для мобильной версии

 856cc7926eab05ecb833dbba5e028e37.png

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

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

На первом этапе мы выбрали максимально приближённый под задачу плагин на WordPress, который даёт такие необходимые возможности, которые мы выявили после анализа UX и UI.

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

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

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

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

 Вот как это выглядит. 

1473e7bf63fac9456eaf620a9f2f3665.png

На главной странице можно выбрать тип размещения.

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

e9fa2dcaa2bc0bb7d300f8dfcb0532d8.png

dd14d4aeb7c7c73f6169c4dc30a9021d.png

Далее предлагается умная форма брони.9f9675f153b608a4bf4373bbe0fb4f88.png

2fa89f4441390cf2f7fc2b9e7a86fc68.png


49b5bbe19661a52eb355f4433e378c08.png

И другие варианты размещения в самом низу страницы.

41027466c7b4fd79a8a972c217de52c7.png 

Критерии, которые мы использовали при создании формы:

•    ajax-бронирование

•   полная стилизация под сайт

•   выбор только релевантных дат

•    подсчет цены в зависимости от вида размещения, дня недели или сезона

•    исчерпывающая информация об интересующем номере

Перейти на сайт

Полный текст статьи читайте на CMS Magazine