Читайте наш Telegram-канал про ужасы интерфейсных проектов!
Главная / Портфолио / Интерфейс приложения визуальной LowCode среды разработки

2023

Интерфейс приложения визуальной LowCode среды разработки

Создали новую удобную для пользователей версию существующего решения.

Цена

680 000 ₽

Сроки

2 месяца
Собака Павлова • Dipol • Интерфейс приложения визуальной среды разработки

Компания Диполь с 1992 года занимается комплексным оснащением и переоснащением предприятий радиоэлектроники и машиностроения, научно-производственным консалтингом и повышением эффективности производства.

Компания пришла к нам с задачей доработать интерфейс десктопного приложения.

Бизнес-задача

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

Приложение визуальной среды разработки. Авторизация | SobakaPav.ru
Приложение визуальной среды разработки. Авторизация | SobakaPav.ru
Авторизация. Темная тема, светлая тема

Дизайн-задача

Обновить дизайн существующего решения, которое используется внутри компании:

  • провести анализ существующего решения;
  • продумать UX- и UI-решения;
  • создать детальные макеты интерфейса в дизайне;
  • создать единую библиотеку используемых компонентов с описаниями.

Мы присоединились к проекту на стадии разработки продукта и некоторые части интерфейса разрабатывались «Собакой» с нуля. Для существующих элементов требовалось сохранить функциональность и расположение, чтобы пользователи внутри компании, работающие со старой версией интерфейса, могли быстро сориентироваться и в обновленном.

Приложение визуальной среды разработки. Схема измерений | SobakaPav.ru
Приложение визуальной среды разработки. Схема измерений | SobakaPav.ru
Схема измерений. Темная тема, светлая тема

Результат

Заказчик получил обновленный и дополненный интерфейс, разработанный с учетом будущего функционала приложения.

Приложение визуальной среды разработки. Главное окно | SobakaPav.ru
Приложение визуальной среды разработки. Главное окно | SobakaPav.ru
Главное окно. Темная тема, светлая тема

Интерфейс стал более современным, более легким и «читаемым». Дизайнеры не стали изобретать велосипед и ориентировались на похожие решения мировых компаний, в том числе уменьшили визуальный шум (тени, обводка и т.п.).

Приложение визуальной среды разработки. Выделение блока на панели | SobakaPav.ru
Приложение визуальной среды разработки. Выделение блока на панели | SobakaPav.ru
Выделение блока на панели. Темная тема, светлая тема

Передали заказчику макеты отдельных частей приложения и собранные на их основе экраны в различных состояниях. Интерфейс приложения изменялся в зависимости от пользовательской роли и вида работ.

Приложение визуальной среды разработки. Работа с проектами | SobakaPav.ru
Приложение визуальной среды разработки. Работа с проектами | SobakaPav.ru
Работа с проектами. Темная тема, светлая тема

Также заказчик получил библиотеку компонентов и удобную настройку цветовой схемы (светлая / тёмная).

Приложение визуальной среды разработки. Светлая тема | SobakaPav.ru
Приложение визуальной среды разработки. Темная тема | SobakaPav.ru
Светлая и темная темы. Темная тема, светлая тема

Экстра-польза

Чтобы показать заказчику, как будут работать части приложения, создали user-flow некоторых действий на экране. Например, работы с панелями «Свойства» и «Инструменты», работы с частью экрана, на которой создается схема для проектирования и тестирования системы (канвас).

Приложение визуальной среды разработки. Панель «Свойства» | SobakaPav.ru
Приложение визуальной среды разработки. Панель «Свойства» | SobakaPav.ru
Панель «Свойства». Темная тема, светлая тема
Приложение визуальной среды разработки. Панель «Инструменты» | SobakaPav.ru
Приложение визуальной среды разработки. Панель «Инструменты» | SobakaPav.ru
Панель «Инструменты». Темная тема, светлая тема
Приложение визуальной среды разработки. Панель «Инструменты», user flow «поиск» | SobakaPav.ru
Приложение визуальной среды разработки. Панель «Инструменты», user flow «поиск» | SobakaPav.ru
Панель «Инструменты», user flow «поиск». Темная тема, светлая тема

Заказчику понравилась реализация пошагового user flow для канваса, на которой команда показала работу основных пользовательских сценариев (запуск программы, создание секций, поиск по канвасу и т.п.).

Приложение визуальной среды разработки. Канвас | SobakaPav.ru
Приложение визуальной среды разработки. Канвас | SobakaPav.ru
Канвас. Темная тема, светлая тема

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

User flow «Поиск по канвасу». Ховер на кнопке поиска | SobakaPav.ru
User flow «Поиск по канвасу». Ховер на кнопке поиска | SobakaPav.ru
User flow «Поиск по канвасу». Ховер на кнопке поиска. Темная тема, светлая тема
User flow «Поиск по канвасу». По клику раскрывается поиск | SobakaPav.ru
User flow «Поиск по канвасу». По клику раскрывается поиск | SobakaPav.ru
User flow «Поиск по канвасу». По клику раскрывается поиск. Темная тема, светлая тема
User flow «Поиск по канвасу». Искомое на лету выделяется инверсией | SobakaPav.ru
User flow «Поиск по канвасу». Искомое на лету выделяется инверсией | SobakaPav.ru
User flow «Поиск по канвасу». Искомое на лету выделяется инверсией. Темная тема, светлая тема

Нюансы и особенности

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

Для выполнения задачи был составлен список панелей. Мы проранжировали их по приоритетности, оценили сложность разработки каждой по Фибоначчи-шкале. Это помогло менеджеру оценить затраты времени на каждую из панелей и спланировать сроки и график сдачи проекта.

По ходу работы некоторые требования изменялись, потому что изменялось само приложение. Поэтому мы разбили все задачи на четыре категории приоритетности: must-haves (обязательно), should-haves (желательно), could-haves (возможно) и won’t-haves (не будет). Это позволило контролировать передачу новых задач в работу и избежать бесконечного разрастания проекта.

Проект подразумевал высокий темп и постоянные изменения, поэтому промежуточными результатами делились с заказчиком непосредственно в рабочем файле в Figma. Так не пришлось тратить время на внесение корректировок в демонстрационный файл для заказчика и сверку версий.

Приложение визуальной среды разработки. Создание проекта | SobakaPav.ru
Приложение визуальной среды разработки. Создание проекта | SobakaPav.ru
Создание проекта. Темная тема, светлая тема

Некоторые цифры

Отрисовали

user-flow 

для детализации работы определенных сценариев

Создали

темы 

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

Спроектировали

панелей 

программы

User-flow объясняют разработке и бизнесу последовательность действий пользователя и детально показывает взаимодействие между экранами. Темы позволяют кастомизировать цветовое решение интефейса. Некоторые из панелей программы уже были реализованы в существующей версии продукта, некоторые мы создавали с нуля.

Вам нужен интерфейс?

Заказать дизайн

Напишите нам на we@sobakapav.ru

Что мы можем сделать?

Разработать UX-дизайн под ключ и добавить в интерфейс новую функциональность, как в этом кейсе. И многое другое.

Слово директора

Наталья Прокофьева

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

Задачи по таким продуктам бывают двух видов: «упростить для не совсем инженеров» и «сделать красиво» для того, чтоб было проще продавать, удобнее развивать и приятнее работать.

Здесь была задача второго вида, и мы её удачно решили.

Наталья Прокофьева
директор «Собаки Павловой»

Цена

680 000 ₽

Сроки

2 месяца