К содержанию
id0.it Interface Collection

Арт-событие и выбор места

Lumen Field

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

Технологии
  • Next.js
  • React
  • TypeScript
  • Base UI

Задача

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

Как устроен сценарий

  1. Познакомиться с событием

    До начала бронирования посетитель видит программу, площадку, даты и практическую информацию.

  2. Посмотреть доступные места

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

  3. Проверить заказ

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

  4. Подтвердить бронирование

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

Выбор мест на схеме и в списке

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

Рисованная схема зала Lumen Field с выбранными местами «Передняя орбита» и «Боковая орбита» и итогом 106 €.

Два места на схеме зала

На редакционном плане одновременно видны оба выбранных маркера и итоговая цена 106 €.

Экран проверки Lumen Field с двумя выбранными местами, итогом 106 €, пустыми контактными полями и кнопкой формирования состава бронирования.

Проверка перед отправкой

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

Мобильная схема зала Lumen Field со всеми восемью пронумерованными местами и выбранными «Передней орбитой» и «Боковой орбитой».

Та же схема на мобильном экране

На узком экране различимы все восемь пронумерованных мест и оба выбранных маркера.

Изображение 1 из 3

Рисованная схема зала Lumen Field с выбранными местами «Передняя орбита» и «Боковая орбита» и итогом 106 €.

Ключевые решения

  • Один выбор на карте и в списке

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

  • Схема и действия разделены

    SVG-план показывает расположение мест, а описание, выбор, цена и отправка заявки остаются обычными элементами страницы.

Сложные состояния

  • Сначала изучить, затем выбрать

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

  • Равные возможности схемы и списка

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