MVP системы управления внешним освещением
UX/UI

Илья Николаев, дизайнер сайтов на тильде, заказать сайт на тильде

QERel — 2021 — Skolkovo
QRel — это система управления освещением для небольших объектов до 1 000 светильников. Этим пользуются небольшие ТРЦ, коттеджи и пр.
Проект
MVP на базе фреймворка. Самое важное — сделать простой и понятный детектинг ошибок в устройстве, все остальное вторично.
Задача
Теги
MVP
Material UI
Иерархия девайсов
Наивысшее звено. Набор настроек для применения к группе.
Профиль
Может состоять как из 1 контроллера и светильников в связке с ним, так и из нескольких контроллеров. Ее настройки применяются ко всем девайсах внутри группы.
Группа
Некий Project Manager в мире света. Объединяет несколько светильников и транслирует их сигнал на главный пульт. Отвечает за выполнением светильниками приказа пульта.
Контроллер
Самый маленький юнит. Может управляться самостоятельно. По факту просто лампочка с модулем для приема и отправки сигнала до контроллера.
Светильник
Шаг — 1. Техническая архитектура.
Портреты юзеров
Как правило, люди 55−65 лет, работающие в охране от безысходности, ведь в другие места их не берут. Свою должность воспринимают как легкую работу, где практически ничего не надо делать.

Основной сценарий — мониторинг ошибок. Задача охранника — просто наблюдать за тем, чтобы ничего не сломалось.
Шаг — 1. Пользователи.
Люди 30−45 лет. Занимаются установкой оборудования и его настройкой. Тот человек, который при первом пуске будет объединять девайсы и задавать им профиля.

Аватар требует максимально простого и понятного интерфейса, где UX главенствует над UI.
Охранник
Монтажник
User Goals Map
Аватары делают схожие вещи, но под разными мотивами. Профиль монтажника более обширен и включает более широкий спектр задач. Исходя из этого я составил карту пользовательских целей с исключением роли персонажа, так как она минимальна.
Шаг — 3. Проектирование целей юзера.
Группы целей
Как реализовать цель
Конкретная цель
Примечание
Детектинг ошибок
В системе предусмотрены 2 условных значка: круг и квадрат. Круг означает светильник, а квадрат — контроллер.

Если в девайсе возникает проблема, вокруг иконки начинает мерцать желтая или красная область, обозначающая ошибки.
Группа целей — 1. Мгновенные цели.
В правом нижнем углу размещается виджет с ошибками. Даже если вы не увидите на карте девайс с проблемой, то все равно узнаете об ошибке из этого компонента.
Слайд 1
При нажатии раскроется список с текущими ошибками, сгруппированными по адресам. Девайс с наибольшим количеством критических ошибок будет показан первым.
Слайд 2
При клике на адрес в списке откроется карточка этого устройства на вкладке «Ошибки».
Слайд 3
Концепция управления
Все настройки можно сделать из одного компонента, который отвечает за следующие пользовательские цели:
Группа целей — 2. Управление светильником.
Локальная смена яркости освещения
Просмотр группы и профиля, к которому привязан девайс
Настройка устройства
Просмотр характеристик девайса
Просмотр графика отклонения светильника за последние сутки
Просмотр ошибок
Вкладка «Управление»
Содержит локальный переключатель с мощностью освещения и характеристики. Характеристики меняются от устройства к устройству. При локальном изменении яркости настройка вступит в силу до следующего события в профиле, о чем мы предупреждаем пользователя, как только он сдвинет ползунок (слайд 2.)
Часть — 1. Управление светильником.
Вкладка «Профиль»
Во вкладке расположен график профиля, к которому привязан светильник и график отклонения, если оно было за последние 24 часа. Из вкладки можно перейти в группу и профиль этого светильника.
Часть — 2. Действия с профилем.
Вкладка «Настройки»
Переименование устройства, изменение ключа авторизации и выбор региона. Выбор региона не влияет ни на что, но в будущем будет влиять на спецпрофиля для отдельных регионов.
Часть — 3. Настройки светильника.
Вкладка «Ошибки»
Список с ошибками, отфильтрованными по уровню критичности. Действия от пользователя не требуются. Некритические ошибки вносят нестабильность в работу системы, а критические делают работу невозможной.
Часть — 4. Ошибки и ворнинги.
Концепция групп
Раздел вынесен отдельным пунктом в меню. Эта часть интерфейса отвечает за решение следующих пользовательских целей:
Группа целей — 3. Управление группами.
Создать группу
Удалить группу
Редактировать девайсы в группе
Переименовать группу
Управление яркостью локально
Смена профиля
Просмотр ошибок
Главный список
Вынесены кнопки для удаления списка, а также кнопка создания группы. Все остальные функции запрятаны внутрь, так как быстрый доступ к ним только навредит. Например, локальное изменение яркости группы.
Часть — 1. Списки.
Вкладка «Управление»
Содержит локальный переключатель с мощностью освещения и имя группы. При изменении яркости настройка вступит в силу до следующего события в профиле, о чем мы предупреждаем пользователя, как только он сдвинет ползунок (слайд 2.)
Часть — 2. Локальное управление.
Вкладка «Устройства в группе»
В таких продуктах выбор из списка с чекбоксами — это принятый паттерн. Выбранные ранее девайсы выносятся в самых верх.

Если вам нужно добавить новое устройство, вы вбиваете его в поиск и ставите чекбокс. Все нормально ровно до того момента, пока вам не надо собрать новую группу или добавить много устройств. Для этого я сделал выбор на карте.
Часть — 3. Управление устройствами в группе.
Любимая фича проекта
В разделе выбора на карте слева список с устройствами группы, у каждого есть иконка геолокации, при нажатии на которую мы выберем его на карте.

Обратите внимание на кнопку «Выделить область». С ее помощью можно карандашом выделить участок карты и сразу же внести все устройства разом (слайд 2).
Часть — 4. Карта устройств.
Вкладка «Профиль»
Такой же график с учетом отклонения за сутки, как и у светильника, только здесь уже можно изменить действующий профиль.
Часть — 5. Привязанный профиль.
Вкладка «Ошибки»
Ошибки сгруппированы по устройствам. При нажатии на иконку произойдет переход в карточку конкретного девайса. Это нужно, когда по названию пользователь не может определить, что это за устройство.
Часть — 4. Ошибки.
Концепция профилей
Раздел вынесен отдельным пунктом в меню. Эта часть интерфейса отвечает за решение следующих пользовательских целей:
Группа целей — 4. Управление профилями.
Создать профиль
Удалить профиль
Редактирование привязанных групп
Переименовать профиль
Редактирование интервалов профиля
Главный список
Вынесены кнопки для быстрого редактирования и удаления списка, а также кнопка создания профиля.
Часть — 1. Списки.
Вкладка «Настройки профиля»
Можно задать имя профиля и отредактировать его интервалы. Как только интервал будет отредактирован, изменение отобразится на графике профиля.
Часть — 2. Управление интервалами.
Вкладка «Привязанные группы»
Все выбранные группы выносятся в самых верх.

При клике на иконку рядом с названием группы появляется попап, показывающий на карте, какие устройства включены в данную группу. При необходимости их можно сразу изменить.
Часть — 3. Управление группами.
Компоненты
Создал компоненты и их состояниями на основе Material UI 2. Всю типографику добавил в глобальные стили. Для удобства восприятия собрал их в UI-кит.
Заключение. Дизайн-система.
Плюшки для разработчиков
Разработчики не отличают дефолтные иконки фреймворка от ваших кастомных, поэтому вы должны им помочь. Я всегда подписываю кастомную иконку как iconName_custom. Это позволяет кодеру сразу понять, может ли он импортировать иконку из библиотеки Material UI.

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

Иконка находится во фрейме 24*24, размер иконки регулируется только отступом от края фрейма. Это само собой разумеющееся.
Заключение. Дизайн-система.
На этом все. Ниже контакты, тут другой проект
Telegram
Телефон
Почта