Metric Builder: Редизайн создания формул в Piano Analytics

Обзор

Компания: Piano Analytics — аналитическая платформа для крупнейших мировых издательств и медиакомпаний.

Продукт: Metric Builder — полноэкранная модалка для создания кастомных метрик через формулы, сегменты и функции агрегации.

Роль: Единственный дизайнер. Работал с Product Owner, PM и разработчиками.

Сроки: 1 месяц.

Проблема

Старый Metric Builder устарел и ограничивал пользователей. Нельзя было применить сегмент к группе метрик в скобках, не было функций агрегации (Min, Max, Average…), не было мульти-выделения, а сложные формулы было трудно читать.

Фидбек пользователей и обращения в саппорт подтверждали: опытные пользователи упирались в ограничения каждый день.

Ключевые дизайн-решения

Редизайн сфокусирован на пяти направлениях: визуальный язык формул, управление сегментами, функции агрегации, мульти-выделение и drag & drop.

Предыдущая версия — плоская формула с ограниченной функциональностью

Канвас формулы с визуальным кодированием

У каждого типа элемента свой цвет: оранжевый — метрики, синий — properties, фиолетовый — сегменты. Каждый чип метрики показывает иконку, буквенный идентификатор (A, B, C) и название. Внизу канваса — упрощённая формула (A + B ÷ C) для быстрого чтения.

Канвас формулы — цветовые чипы с упрощённой формулой внизу

Сегменты на скобках

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

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

Клик по скобке — попап для применения сегмента

Сегмент применён — фиолетовые скобки с названием сегмента

Функции агрегации

Новые чипы функций (Min, Max, Sum, Average, Median) работают как обёртки — выбираешь функцию, применяешь property, получаешь метрику. Добавляются через дропдаун в тулбаре операторов.

Дропдаун функций — Min, Max, Sum, Average, Median

Применение property к выбранной функции

Готовая метрика — Min применён к property

Мульти-выделение и массовые операции

Три способа выделения: клик (одиночный), Shift+клик (мульти), выделение областью (marquee). У выделенных элементов появляется floating toolbar с массовыми действиями — Apply Segment или Remove.

Умная логика: Apply Segment доступен только если выделены только метрики или только скобки. При смешанном выделении — тултип с объяснением.

Marquee выделение — перетаскивание для выбора нескольких элементов

Выделенные элементы с floating toolbar — Apply Segment, Remove

Drag and Drop

Мульти-DnD с индикаторами позиции. Перетаскиваемые элементы остаются видимыми на 50% opacity на старом месте — всегда понятно, откуда они были взяты. Линия 100% opacity показывает, куда они приземлятся. Выделение сохраняется после перетаскивания.

Мульти-DnD — элементы на 50% opacity на старом месте, индикатор на целевой позиции

Сложные формулы — всё ещё читаемые

Длинные формулы переносятся на несколько строк. Цветовое кодирование, буквенные идентификаторы и строка упрощённой формулы сохраняют читаемость даже в масштабе.

Многострочная формула — читаемость через цветовое кодирование и буквенные идентификаторы

Save Drawer — метаданные когда нужны

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

Save drawer — поля метаданных скрыты до момента сохранения

Решения и компромиссы

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

• Одиночная вставка скобок (не авто-пары): полный контроль над структурой формулы, валидация ловит несоответствия.

• Разделение Use и Save: “Use” применяет метрику без сохранения (разовый анализ), “Save” открывает дровер с метаданными. Разные сценарии, один интерфейс.

• Метаданные в дровере вместо постоянного отображения: приоритет канвасу формулы — метаданные нужны только при сохранении, не во время построения.

• Авто-удаление пустых числовых чипов при blur: предотвращает накопление фантомных элементов в формуле.

Результат

• Выпущено: сегменты на скобках, функции агрегации, мульти-выделение, мульти-DnD

• Положительный фидбек от внутренней команды и реальных пользователей — функции агрегации были самой запрашиваемой недостающей функцией

• До/после: создание сложных метрик из процесса с костылями превратилось в прямой визуальный workflow

Рефлексия

В сложных интерфейсах вроде этого 80% работы — это edge cases: конфликты сегментов, состояния валидации, пустые состояния. Их легко пропустить в спеке, но именно они определяют реальный опыт пользователя. Я проработал каждый сценарий в дизайн-файле до передачи в разработку.