Интерактивная схема бронирования зрительских мест

Задача и проблема

Для продажи билетов концертным залам и стадионам нужна наглядная схема рассадки. Она помогает зрителю выбрать подходящие по расположению и цене места и купить билеты.

При создании цифровой экосистемы ЦСКА перед нами стояла задача разработки интерактивной схемы стадиона «ВЭБ Арена» для продажи билетов на матчи, охватывающую все 30 000 кресел. Схема должна корректно работать с таким количеством посадочных мест, отображать статус билетов в реальном времени и быть удобной для управления со стороны клуба.

Решение — схема мест для покупки билетов

Команда Riverstart разработала схему стадиона «ВЭБ Арена» с возможностью онлайн выбора мест и бронирования билетов. Схема охватывает все 30 000 кресел и в точности повторяет реальную планировку стадиона, его сектора и трибуны.

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

Быстрая загрузка и работа с детализированным рендером

Для выбора 30 000 кресел, масштабирования и показа местности вокруг стадиона нужно ультравысокое качество. Мы получили от заказчика детализированный 3D-рендер в разрешении 16K — объект такого качества весил около 350 МБ и создавал высокую нагрузку на сайт. 

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

Схема поддерживает пять уровней зума. Масштабирование и перемещение по карте работают быстро, без задержек и визуальных артефактов. Все элементы корректно фиксируются при выборе мест.

Онлайн выбор мест на стадионе

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

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

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

Управление интерактивной схемой бронирования и кастомизация через CMS

Зрительские места синхронизированы с билетной системой, чтобы пользователи покупали реальное место в нужном им секторе. 

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

Схема поддерживает размещение интерактивных элементов и промо‑блоков. Контент-менеджер может самостоятельно добавлять «пасхалки» — кликабельные объекты с промокодами или дополнительными акциями. А для усиления «вау-эффекта» предусмотрены дневная и ночная версии схемы — для ночных и дневных матчей.

Кому актуально это решение

Разработка интерактивной схемы бронирования может быть полезна площадкам, которые продают или резервируют места в реальном времени:

• спортивным клубам и стадионам;
• театрам, кинотеатрам и концертным залам;
• жилым комплексам с продажей парковочных мест;
• ресторанам с бронированием столиков.