логотип компании

Volume Control App

Программное решение, которое позволяет управлять уровнем громкости аудиосистемы или колонок, подключенных к компьютеру или мобильному устройству

Макеты
Проблема
Исследования
Детали

The most brutalist and efficient library by Sidebay Studio

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

A Webflow library infused with the brutalist way.

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Launch your portfolio, agency, startup faster than ever

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Just drag, drop and make your first MRR faster

The use of cutting-edge materials and manufacturing processes in the design and production of Elements_Efi has resulted in a product that is both durable and sustainable, reducing the environmental impact of its use.

Подключение устройств

Первым шагом при работе с приложением необходимо подключить микшер, к которому подсоединены колонки

Подключение колонки

После того, как в микшер подключили колонку, она отобразилась в подключенных колонках. Колонке можно задать иконку и цвет, чтобы идентифицировать иконки при работе с ними

При подключении/редактировании динамика пользователь может:

  • Видеть статус динамика
  • Просматривать имя модели
  • Поменять отображаемое имя динамика
  • Видеть, к какому именно выходу подключен динамик
  • Выбрать иконку и цвет для динамика (если пользователь colorblind, он может идентифицировать динамики не только по имени, но и по иконке)
  • Может подать звук на колонку, чтобы идентифицировать ее в пространстве
  • Удалить динамик из списка
  • Сохранить динамик без изменений

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

Настройка колонки

Колонке можно задать иконку и цвет, чтобы идентифицировать иконки при работе с ними.

Колонку также можно удалить и она будет недействительна на время и не будет отображаться в списке активных колонок

Удаление колонки

Динамик можно удалить, но не насовсем, и потом в настройках его вернуть и сделать опять активным

После подключения/редактирования динамика пользователь может:

  • Регулировать общую громкость динамиков, выключить общую громкость, выбрать средние значения громкости
  • Регулировать громкость определенного динамика, выключить звук на динамике, проиграть звук на динамике
  • Посмотреть модель динамика
  • Увидеть, к какому именно выходу подключен динамик и подробную информацию о выходе (статус, отображаемое имя)
  • Ввести значение громкости вручную
  • Редактировать динамик

Группировка колонок

Колонки можно сгруппировать и управлять общей громкостью группы колонок

Функция группировки динамиков

  • Нажать на кнопку “Группировать динамики”
  • Выбрать динамики, которые нужно сгруппировать
  • Дать имя группе динамиков
  • Динамики сгруппированы в одну плашку. Теперь можно управлять общей громкостью не только всех динамиков, но и отдельно громкостью группы динамиков

Редактирование группы

Группу колонок можно редактировать, убирать колонки из группы и добавлять новые

Функция Редактирования группы динамиков

  • Нажать на кнопку редактирования группы
  • На странице редактирования группы есть возможность изменить имя группы и удалить/добавить динамики
  • Для добавления динамиков в группу нажать на кнопку “Добавить динамики”, выбрать желанные динамики и нажать “Сохранить”
  • Для удаления динамиков, нажать на иконку “корзины” и нажать на кнопку “Сохранить”

Figma макеты приложения

С макетами в Figma можно ознакомиться по ссылке:
Figma Designs Link

Для тестирования и удобной демонстрации интерфейса был создан прототип на маленькое разрешение на андроид девайс.
С прототипом можно ознакомиться по ссылке:
Figma Prototype Link

Что было необходимо сделать

Общее о проекте

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

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

Требования

  • Добавление/удаление динамиков, подключенных к микшеру (до 8)
  • Называть / переименовывать динамики, иметь более удобные способы идентификации динамиков
  • Объединять динамики в группы
  • Сделать определенные динамики тише или громче, или просто отключить их звук
  • Контролировать общую громкость динамиков
Описание требований микшера

Этот звуковой микшер похож на приведенный ниже, но он составной и довольно продвинутый.

Фото микшера

В нашем случае большинство элементов управления этого звукового микшера находятся на экране.

Рисунок тапада микшера

В нашем случае большинство элементов управления этого звукового микшера находятся на экране.

Окружение

Вот пример конференц-зала, с которым мы могли бы работать. Колонки обычно расположены по периметру помещения. Основной звуковой микшер скрыт в отдельной "контрольной" комнате, поэтому он недоступен для тех, кому не следует к нему прикасаться. Однако во многих случаях вам приходится управлять звуком на месте, находясь в конференц-зале. Довольно неудобно совершать спринтерские пробежки в скрытую комнату по 20 раз в день. Это одна из причин, по которой нам нужен пульт дистанционного управления.

Схема зала где будет использоваться приложение

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

Схема микрофонов в зале

Это означает, что вы также можете захотеть управлять не только конкретными динамиками, но и несколькими из них одновременно в составе группы. Этот звуковой микшер с приложением не предназначен для одной конкретной комнаты. Он предназначен для использования в самых разных местах с различным дизайном интерьера, пространством, размерами и назначениями.

Схема подключения

Sound mixer - это концентратор для входных и выходных звуковых каналов. Он принимает звук с микрофонов и ноутбуков и отправляет его на несколько динамиков. При этом он управляет многими свойствами каждого входа и выхода: громкостью, басами, дрожанием, эффектами и т.д.

Схема подключения микшера

На нашем звуковом микшере:

  • Входы до 6 микрофонов (радио или шнуры)Выходы до 8 динамиков (шнуры)
  • Выходы до 8 динамиков (шнуры)
  • Вход для внешнего источника звука для воспроизведения музыки с ноутбука/телефона/ планшета/плеера/ и т.д. (шнуры)
  • Элементы управления воспроизведением/паузой/остановкой/предыдущим/следующим для внешнего источника звука
Схема микшера

Сопряжение по Wi-Fi

Звуковой микшер и его приложение подключаются друг к другу через Wi-Fi. Нужно иметь в виду, что Wi-Fi не является безупречной технологией, он ломается и дает сбои, и многое может пойти не так.

Проблема идентификации

Выходы динамиков на звуковом микшере пронумерованы. Вы можете называть их "задний динамик" или "динамик 2". Но это неудобная система, поскольку оба динамика могут быть случайным образом распределены по комнате. Входы на микшере расположены в линию, сами динамики - нет.

Необходимо придумать, как решить данную проблему без сильных энерго и время затрат.

ЦА приложения

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

Сложности

При создании дизайна для приложения, которое позволяет регулировать уровень громкости динамиков в разных точках помещения, возникли некоторые сложности, а именно:

  • Управление разными аудио-источниками:
    Пользователь может иметь несколько активных выходов аудио. Необходимо обеспечить возможность управления громкостью для каждого аудио-выхода в отдельности.
  • Оптимизация интерфейса пользователя:
    Разработка простого и интуитивно понятного пользовательского интерфейса для управления громкостью может быть непростой задачей, особенно если необходимо отобразить сложные настройки и состояния различных аудио-источников.
  • Визуальное отображение информации о звуке:
    Как представить информацию о текущем уровне громкости и параметрах звука для пользователя таким образом, чтобы она была понятной, интуитивной и привлекательной.
  • Доступность и удобство использования:
    Важно убедиться, что дизайн сфокусирован на обеспечении доступности и удобства использования для всех пользователей, включая людей с ограниченными возможностями.

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

Предложения для дополнительного функционала, не представленного в макетах (for future implementation)

  • Дать возможность группировать внутри группы (например динамики слева на сцене. Глобальная группа- Сцена, подгруппа- динамики слева).
  • Запоминать подключенные устройства в прошлом. Подключать можно только одно устройство, но можно выбрать из списка подключенных, а не только найденных в данный момент. Пример- подключение bluetooth или wi-fi.
  • Будет полезным оставлять небольшие комментарии на каждый динамик, группу динамиков или выход. Так можно уточнять местоположение динамика, его описание, описание выхода и тд.
  • Устанавливать одинаковую громкость в один клик на группу динамиков или на конкретные выбранные.

Предложения для решения проблемы идентификации динамиков

В тз была описана проблема идентификации динамиков. Иногда нет возможности определить, правильно ли расставили динамики по помещению. То есть я могу их поставить в ряд и подсоединить к выходам, но расставить по комнате я их могу не в таком порядке. Тогда собьется нейминг, если я задала его до того, как расставила динамики. Также, если динамики одинаковые, совсем непонятно как определить, какой динамик где должен был стоять. В данном случае собьется и нейминг выходов, что в дальнейшем приведет к проблеме идентификации динамиков.
Самым очевидным решением было бы иметь функцию звуковой идентификации колонки (как при подключении по bluetooth или wi-fi), что я и реализовала через “PLAY A SOUND” кнопку. Далее я перешла к поиску альтернативных решений конкретно для данного типа подключения динамиков, если данного действия будет недостаточно:

  • Предоставить цветные наклейки или бирки для физической маркировки каждого динамика (с разными цветами или иконками), которые можно наклеить на динамик при подключении или расстановке динамиков. В приложении пользователи могут назначать цвета наклеек и сопоставлять их с соответствующим цифровым представлением в интерфейсе приложения. Это позволяет быстро визуально идентифицировать динамики, особенно в больших или сложных установках.
  • Не запоминать названия выходов после отключения колонки. Чтобы, если мы решили в выход Кухня подключить колонку, которая должна стоять в спальне- мы не искали выход Спальня, а просто переименовали свободный выход. Для более быстрого выбора названия выхода, можно выбирать из существующих (перечислить названия выходов в начале подключения). Таким образом, пользователь не наберет заново выход Спальня, а просто выберет из уже существующих названий выходов. Это будет быстрее и удобнее, нежели набирать название заново.
  • QR-код/NFC-метки с физическими маркерами: Можно прикрепить QR-коды или NFC-метки к каждой физической колонке или ее подставке. В приложении пользователи могут отсканировать код или метку, чтобы вызвать элементы управления для этой конкретной колонки, используя цифровой идентификатор, соответствующий физическому местоположению.
  • Разрешить пользователям фотографировать каждый динамик и загружать его в приложение. При доступе к интерфейсу управления динамиками приложение отображает соответствующее изображение, помогая пользователям визуально идентифицировать конкретные динамики в помещении.

🧪 Исследования

  • Проведение глубинных интервью для определения того, какие функции первичные и какие лучше скрыть под кнопки как вторичные действия
  • Составление опросников для проведения количественных исследований для принятия решения о том, какой из двух вариантов дизайна выбирают бОльшее количество пользователей и почему
  • Проведение UX-тестирований системы на прототипах перед тем, как отдавать макеты в прод и основательно принять решение и финальных макетах

🎯 Целевая аудитория

Профессиональные музыканты и звукорежиссёры

Профессионалы звукозаписи, которые ищут простой и удобный способ управления звуковыми параметрами колонок

Люди, проводящие мероприятия и вечеринки

Организаторы вечеринок, диджеи и владельцы заведений, которые нуждаются в возможности управления громкостью и звуковыми эффектами колонок на мероприятиях

Владельцы домашних кинотеатров и аудиосистем

Люди, установившие домашние кинотеатры или мультимедийные системы в доме, которые хотят управлять громкостью и звучанием колонок из одного приложения

Тестирование

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

В тестировании участвовало 15 человек, 3-ое из которых являются диджеями и специалистами по звуку, 10 человек- люди в возрасте от 21 до 25 лет, оставшиеся двое людей в возрасте от 35 до 45 также принимали активное участие в тестировании.

Рабочий процесс в деталях

👩 Моя роль на проекте

Я работала единственным дизайнером на проекте, разрабатывала и поддерживала UI kit, составляла CJM, прорабатывала логику навигации и внешний вид приложения

🛠️ Инструменты

В работе использовала:

  • Figma как основной инструмент
  • Adobe Illustrator для отрисовки графических элементов, таких как: иконки, иллюстрации
  • Библиотека Material Design

Начало работы

Дизайн- процесс начался с анализа существующих приложений и устройств для регулировки громкости.

Их оказалось достаточно много, однако я столкнулась с проблемой: они кажутся приложениями для профессионалов. Очень много контроллов и интерфейс кажется очень нагруженным. Некоторые функции для разрабатываемого интерфейса совсем не требуются. Поэтому я перешла к следующему этапу- обозначению основных функций приложения, макеты для которого должна разработать.

Основные требуемые функции:

  • В приложении можно только контролировать уровень звука динамиков
  • Добавлять или удалять динамики, которые подключены к микшеру
  • Называть и переименовывать динамики. Также должны быть другие более удобные способы идентификации динамиков (не только по имени (цвета, иконки))
  • Объединять динамики в группы
  • Можно прибавлять и убавлять громкость отдельных динамиков, мьютить их. Данные действия можно производить и в отношении групп динамиков
  • Контролировать общую громкость динамиков

Вывод: требуется создать приложение для всех пользователей (не только специалистов по звуку). Интерфейс должен быть простой и удобный. Большой проблемой для пользователя будет недостаток времени, чтобы разобраться в приложении перед мероприятием. Поэтому оно должно быть ориентировано даже на ту ситуацию, в которой его включают сразу перед проведением мероприятия прямо в зале.

Анализ конкурентов

Для того, чтобы понять, как именно структурировать вебсайт, было необходимо провести анализ конкурентноспособных компаний. Что было сделано на данном этапе:

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

Этот анализ помог мне понять, чем отличаться от конкурентов и разработать удобное простое приложение без лишних инструментов и сложностей.

Следующий проект Flowwow redesign