Видеовстречи · прототип

Кликабельный макет раздела «Видеовстречи» для портала FEroom. Не функциональный: данные мокаются, отправок никуда нет. Цель — потыкать UX и понять как это будет работать.

→ Открыть десктоп Раздел «Видеовстречи» как часть портала → Открыть мобильную версию Откройте в режиме мобильного устройства в DevTools → Гостевой вход Как выглядит для внешнего участника

Базовые принципы

Минимум дизайна — фокус на UX

В прототипе нет градиентов, теней-картин, ярких акцентных блоков. Палитра — белый/серый/чёрный плюс один синий для CTA и два функциональных (зелёный для готовых задач, янтарный для «в процессе»). Это сознательное решение: цель — увидеть структуру и потоки, а не вкусы дизайнера.

Если на этом этапе кажется, что «как-то скучно» — это и есть скучно намеренно. Брендирование, иллюстрации, иконографика — следующий шаг, когда будет понятно, что строим правильно.

Качественная вёрстка важнее красоты

Сетки на Grid и Flexbox с явными min-width, чтобы ничего не разъезжалось при разных размерах окна. Типографика на 8 размерах, отступы — кратные 4 пикселям. Это чтобы при сборке боевой версии не пришлось переписывать.

Минимум функциональности

Клики работают, переходы между экранами есть, фильтры реально фильтруют, поиск ищет, форма создания валидируется. Но никаких реальных запросов, ничего не сохраняется при перезагрузке. Все данные — в JS-файлах в директории data/.

Что внутри

Десктоп index.html

Шапка портала и боковая навигация — заглушка FEroom, чтобы видеть, что это часть портала, а не отдельный сервис. Активный пункт — «Видеовстречи». Другие пункты (Календарь, Комнаты, Аналитика) — открываются заглушками, остальные — тосты.
Реестр встреч — сгруппирован по «Сегодня / Завтра / На этой неделе / Раньше». В строке: время, длительность, название, создатель, число участников, индикаторы артефактов (запись/расшифровка/протокол/задачи), пометка моей роли.
Фильтры и поиск — период, моя роль, статус артефактов, статус встречи. Кнопка «По содержимому» — заглушка для будущего поиска по транскриптам.
Карточка встречи — поп-ап со вкладками: Участники, Запись, Расшифровка, Протокол, Задачи. Открывается по deep-link #/meeting/:id — перезагрузка возвращает в то же место.
Сценарий «протокол → задачи» — открывается из вкладки «Задачи». Список кандидатов: формулировка (редактируемая), исполнитель (select), срок (date-picker), цитата из расшифровки. Можно снять галочку, удалить, добавить вручную.
Создание встречи — модалка в два шага: форма (название, дата, доступ, приглашённые) → диалог со ссылкой.
Заглушка видеокомнаты — чёрный экран с двумя тайлами, контролы, кнопка «Завершить» → возврат в реестр.

Мобильный mobile.html

Отдельный набор макетов — не media queries поверх десктопа.

Список карточками, не строками — на мобилке плотность информации другая.
FAB «Создать» + нижний таб-бар, как в нативных приложениях.
Карточка встречи — полноэкранно, вкладки прокручиваются горизонтально.
Создать встречу в 3 тапа: FAB → название → создать. Дополнительные опции скрыты за «Больше настроек».
Гостевой вход — отдельный экран на #/guest/:id для тех, кто пришёл по ссылке без аккаунта.

Ключевые сценарии — что попробовать

1. Найти конкретную встречу

Откройте десктоп. Видите 14 встреч в нескольких группах.
Введите в поиск «ретро» — список фильтруется живым поиском.
Сбросьте фильтры. Попробуйте «Только где я участвовал» в селекте — наблюдатель отфильтруется.
Попробуйте «Без записи» — увидите встречу, где забыли включить запись.

2. Просмотр прошедшей встречи

Кликните «Ретро по спринту 14». Откроется поп-ап.
Переключайте вкладки. На «Расшифровке» — попробуйте поиск внутри расшифровки и клик по тайм-кодам.
На «Протоколе» — структурированный текст с секциями.
На «Задачах» — список созданных задач со статусами.

3. Создать задачи из протокола

В реестре сверху висит баннер «по встрече готов протокол». Кликните «Открыть».
Откроется встреча «Видеовстречи: ревью прототипа». Перейдите на вкладку «Задачи».
Кнопка «Предложить задачи» неактивна, потому что у этой встречи протокол ещё не готов (это важный сценарий — система честно говорит).
Закройте, откройте встречу «Kick-off проекта Видеовстречи» (внизу списка, «Раньше»).
На вкладке «Задачи» нажмите «Посмотреть 3» (синий блок). Откроется экран кандидатов.
Отредактируйте формулировку, исполнителя, срок. Снимите галочку с третьего кандидата. Раскройте «Из расшифровки» — увидите цитату.
Нажмите «Создать N». Задачи переезжают в список созданных, на счётчике вкладки увеличивается число.

4. Создать встречу

Кнопка «Создать встречу» сверху справа.
Введите название. Попробуйте переключить «Закрытая» — появятся приглашённые и лобби.
Нажмите «Создать встречу». Появится диалог со ссылкой и кнопкой «Войти сразу».
«Войти сразу» открывает заглушку видеокомнаты. «Завершить» — возврат в реестр.

5. Мобилка

Откройте mobile.html. В Chrome DevTools переключите на режим устройства (iPhone, Pixel — любое).
Список карточками — попробуйте проскроллить, нажать на встречу.
В карточке полноэкранно — пролистайте вкладки слева-направо (они скроллятся).
Нажмите «+» внизу справа — мобильная форма создания, минимальная.
Откройте mobile.html#/guest/m-101 — экран гостя.

UX-решения и почему именно так

Карточка — поп-ап, не страница

Видеоконференция — это всегда контекст. Пользователь ищет «ту самую встречу» в реестре. Если унести его на отдельную страницу — он потеряет контекст. Поп-ап с deep-link сохраняет URL и фон.

Дефолтная вкладка — Задачи

Для прошедших встреч с готовым протоколом первая открытая вкладка — «Задачи», а не «Участники». Потому что 90% возвратов к встрече — узнать, что надо делать.

Иконки артефактов в строке

Не текстом «Есть протокол, есть расшифровка, нет задач», а 4 иконки разной плотности. Состояние «есть» — нормальный контраст, «обрабатывается» — пульсирующая точка, «нет» — полупрозрачно. Глаз ловит за миллисекунды.

«Закрытая» и «Открытая» — иконка, не цвет

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

Кандидаты задач — каждый в отдельной карточке

Не таблица, не лист. Карточка, где формулировка — редактируемое поле, исполнитель — select, срок — date-picker. Цитата из расшифровки — свёрнутая, раскрывается. Это даёт максимально быстрое редактирование без модалок.

Идущая встреча — единственный «живой» элемент

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

Группировка по датам, не сортировка

Заголовки «Сегодня / Вчера / На этой неделе / Раньше» дают мгновенную карту времени. Без них реестр — поток дат, в котором глаз теряется.

Мобилка — другая, не сжатая

Список — карточки, а не строки (на мобилке плотность другая). Карточка встречи — полноэкранно, а не поп-ап. Создание — короткая форма, дополнительные опции скрыты. Это не «адаптив», это переосмысление.

Что упрощено

Глобальный поиск в шапке портала — заглушка. Это отдельная фича уровня портала, не модуля.
Поиск по содержимому встреч (по транскриптам) — кнопка с подсказкой «скоро». Технически — следующий этап.
Календарь / Постоянные комнаты / Аналитика — заглушки с визуализациями и пояснениями. Чтобы было видно общую картину, но не отвлекаться от MVP.
Онлайн-доска — кнопка в медиа-вкладке с тостом «появится в следующем релизе». Большая отдельная история — обсуждение в vision.
Видеокомната — чёрный экран с двумя тайлами. Реальная интеграция с Jitsi описана в part1-meet.md и follow-up-tz-alex-shebelev.md.
Уведомления и календарь — только колокольчик с точкой в шапке (тост-заглушка). Полноценная подписка — отдельная история.
Скачивание — все кнопки «Скачать TXT/MD/DOCX» — кнопки без действия.

Что итерировать дальше

UX-проверка с пользователями. Дать прототип 3-5 сотрудникам, посмотреть как они используют. Особенно интересно — справится ли пользователь со сценарием «протокол → задачи» без объяснений.
Уточнить дефолты вкладок. Для разных типов встреч (прошедшая с задачами, прошедшая без, идущая, запланированная) — оптимальная первая вкладка может быть разной. Сейчас «задачи для прошедших с протоколом, участники для остальных».
Доработать гостевой сценарий. Прототип показывает только вход — а что гость видит после? Нужен ли ему «лобби-экран», экран ожидания, реакция на отказ.
Сделать второй прогон с дизайнером. Когда логика и потоки утвердились — пройти по визуальному стилю: типографика, иконография, плотность, акценты. Сейчас всё нейтрально по дизайн-минимуму, что-то нужно усилить.
Аналитика и календарь — спроектировать отдельно. Сейчас это заглушки. Если их брать в скоуп — на каждое нужен свой проход вижн + прототип.
Уведомления как отдельный сценарий. Какие события генерят пуш, какие — почту, какие — внутрь портала. Это не «фича карточки», а пересечение модуля Видеовстречи и системы уведомлений FEroom.

Технически

Чистые HTML/CSS/ES-модули. Без npm, без сборщиков, без фреймворков. Архитектура файлов: app/ (роутинг, форматтеры, модалка, тосты), data/ (моки), screens/ (экраны), components/ (переиспользуемые UI-элементы), mobile/ (отдельные мобильные экраны), styles/ (base + desktop + mobile).

Запуск: python3 -m http.server 8080 из директории poc/, открыть http://localhost:8080/intro.html.

→ vision.md · scope.md · part1-meet.md · follow-up-tz-alex-shebelev.md