Редизайн программы Horocycle для инженеров коллайдера NICA
- Моя роль
- Продуктовый дизайнер
- Зона ответственности
- Анализ старой версии, интервью, гипотезы, схемы экранов, дизайн интерфейса и иконок, тесты с пользователями, передача макетов в разработку
- Результат
- −30% времени ключевого сценария, +25% сценариев без ошибок, −44% переделок настроек
Контекст
Horocycle — программа, в которой инженеры создают проекты для управления сложным оборудованием: собирают экраны, добавляют объекты и переменные, задают настройки. Её используют в Объединённом институте ядерных исследований при работе над коллайдером NICA — установкой для изучения частиц.
Программа сложная: в ней много экранов, настроек и рабочих сценариев. Моя задача была сделать её понятнее, а работу в ней быстрее и удобнее, особенно при редактировании элементов.
Главный экран
Рабочая область
Настройки
Отвечал за логику и внешний вид программы
Нужно было сделать сложный технический продукт понятнее: чтобы инженер быстрее начинал работу с проектом, ориентировался в структуре и редактировал объекты без лишних переходов.
- Анализировал, как устроена программа
- Изучал, как инженеры создают и открывают проекты
- Искал проблемы в навигации, дереве проекта (списке экранов и объектов) и настройках
- Формулировал гипотезы: что и как улучшить
- Проектировал структуру экранов
- Рисовал схемы экранов и итоговый дизайн
- Обновил набор иконок и привёл их к одному стилю
- Продумывал панели, состояния, вкладки и свойства объектов
- Готовил макеты для разработки
Начал с анализа старой версии
Сначала нужно было понять, где пользователю неудобно и что мешает быстро работать с проектами. Дальше — десять шагов от анализа до доработки.
Анализ→Слабые места→Отзывы команды→Тест старой версии→Гипотезы→Метрики→Новая структура→Макеты в Figma→Тест новой версии→Доработка
Интерфейс перегружен и не задаёт приоритетов
Вместе с техническими специалистами проверили интерфейс на главных сценариях и разобрали три экрана.
Проблема в общей сложности, а не в кнопках
Мы собрали отзывы команды и технических специалистов, которые знают, как устроены проекты для управления оборудованием. Чаще всего отмечали:
- Нужен быстрый доступ к созданию и открытию проекта
- Последние проекты должны быть видны сразу
- В дереве важно разделить объекты, экраны, программы и переменные
- На пустом экране нужна подсказка, как добавить первый элемент
- Свойства объекта должны быть доступны без отдельного окна
- Настройки нужно разделить по категориям
Тест старой версии показал потерю времени на старте
Проверили на четырёх респондентах восемь заданий: создать проект, открыть один из последних, найти в дереве «Экран 3», добавить первый элемент, найти свойства экрана, открыть настройки, найти автосохранение и раздел про редактор схем (FBD). Эти же задания дал и в тесте новой версии. Заодно замерил исходные значения метрик: медианное время сценария 8:25, 71% сценариев без ошибок и 18% переделок.
Пользователь терял время на старте, поиске проекта, ориентации в структуре и настройке объектов. Вывод: интерфейс нужно перестроить вокруг быстрого старта, понятной структуры проекта и удобного редактирования объектов.
Гипотеза: старт, структура и панель свойств
На обсуждении с разработчиком, техническим специалистом и заказчиком выделили главные проблемы: сложный старт, слабая навигация по дереву, пустая рабочая область без подсказок, трудный доступ к свойствам и перегруженные настройки.
Главная гипотеза
Если упростить старт, сделать структуру проекта понятнее и вынести свойства объекта в отдельную панель, пользователь быстрее создаст и отредактирует проект.
Привычные для сайтов и приложений показатели — число активных пользователей, возвращаемость, конверсия — для профессионального инструмента не подходят. Поэтому на этом этапе проблему подтверждали разбором сценариев, а числовые метрики выбрал позже, после гипотез: создание и открытие проекта, навигация по дереву, добавление первого элемента, работа с правой панелью и структура настроек.
Интервью подтвердили запрос на быстрый доступ к проектам
Поговорил с инженерами и техническими специалистами, которые создают, настраивают и редактируют проекты. Проверял, как они начинают работу, находят последние проекты, ориентируются в дереве, добавляют первый элемент, ищут свойства и настройки.
Страх потерять проект
Пользователи переживали за сохранность работы при долгих сессиях и вылетах системы.
Возвращаются к одним и тем же проектам
Хотят открывать их быстрее, без поиска по папкам.
Две группы пользователей
Инженер-разработчик проектов
Создаёт проекты, собирает экраны и объекты, много времени проводит в рабочей области.
Технический специалист
Настраивает структуру проекта и параметры, чаще работает с деревом, свойствами и настройками.
Метрики, на которые опирался при проектировании
Перед началом проекта выбрал, по каким показателям буду судить, стал ли интерфейс лучше. Не по внешнему виду, а по понятным числам: сколько времени занимает ключевой сценарий, как часто его удаётся пройти без ошибок и как часто настройки приходится переделывать.
Медианное время сценария
Сколько занимает полный ключевой сценарий: открыть проект, добавить элемент, настроить объект.
Доля сценариев без ошибок
Доля сценариев, завершённых без ошибок, неправильных действий и возвратов.
Доля переделок
Доля настроек, которые после сохранения приходится исправлять или переделывать.
Шесть гипотез, четыре из них в первую очередь
Расставил приоритеты: оценил влияние на пользователя, влияние на проект и сложность. В первую очередь (приоритеты 1–4) взяли гипотезы, которые сильнее всего ускоряют старт, ориентацию в системе и редактирование объектов.
| Гипотеза | Метрика | Приоритет |
|---|---|---|
| Быстрое создание и открытие проекта на главном экране | Медианное время сценария | 1 |
| Список последних проектов | Медианное время сценария | 2 |
| Дерево с понятной структурой: объекты, источники, программы, переменные, диагностика | Доля сценариев без ошибок | 3 |
| Правая панель свойств объекта | Доля переделок | 4 |
| Подсказка на пустой рабочей области | Доля сценариев без ошибок | 5 |
| Настройки по категориям: общие, экран, редакторы программ (ST и FBD), мышь | Доля переделок | 6 |
Добавил идеи, которые появились в ходе исследования
Во время интервью, теста и обсуждения сценариев появились решения для ежедневной работы инженеров.
Быстрый доступ к сохранениям
Избранные проекты, автосохранение и облачное хранение.
Миникарта
Помогает ориентироваться в больших схемах и понимать текущую область просмотра.
Тест нового интерфейса подтвердил решения
Дал четырём респондентам те же восемь заданий: создать проект, открыть один из последних, найти в дереве «Экран 3», добавить первый элемент, найти свойства экрана, открыть настройки, найти автосохранение и раздел про редактор схем (FBD).
- Стартовый экран поняли сразу: основные действия на виду
- Дерево помогло быстрее ориентироваться в структуре
- Подсказка на пустом экране объяснила, как добавить первый элемент
- Правая панель ускорила редактирование без отдельных окон
- Настройки стали понятнее за счёт категорий
Ключевой сценарий стал быстрее на 30%, ошибок и переделок стало меньше
Главный экран ускорил старт, а подсказка на пустом экране — добавление первого элемента. Свойства выбранного элемента вынесены в правую панель, поэтому не нужно искать параметры в отдельных окнах.
медианное время ключевого сценария: 8:25 → 5:55
доля сценариев без ошибок: 71% → 89%
доля переделок настроек: 18% → 10%
Сравнение старой и новой версии. Время — медианное: типичное значение, на которое не влияют самые быстрые и самые медленные участники.
| Метрика | До | После | Изменение |
|---|---|---|---|
| Медианное время сценария | 8:25 | 5:55 | −30% |
| Доля сценариев без ошибок | 71% | 89% | +25% |
| Доля переделок | 18% | 10% | −44% |
Мы не просто обновили внешний вид, а пересобрали основной сценарий работы инженера с проектом:
- Старт стал понятнее. Создать проект, открыть файл или вернуться к недавнему можно с главного экрана.
- Навигация проще. Дерево разделяет экраны, объекты, переменные и программы.
- Первый элемент очевиднее. Подсказка на пустом экране говорит, что делать.
- Редактирование быстрее. Свойства объекта всегда под рукой в правой панели.
- Настройки понятнее. Разделы сгруппированы по смыслу.
- Есть задел на будущее. Избранные проекты, автосохранение, облачные сохранения и миникарта.
