Звуки интерфейса

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

В этой статье я описал свои идеи альтернативного метода позволяющего использовать мелодию, как дополнительного инструмента в создании интерфейсов.

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

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

Это позволяет нам ассоциировать визуальную информацию со слуховой, как пример большинство из нас с легкостью определит по картинкам стили музыки (рис. 2) : 1 — танцевальная, 2 — поп, 3 — релакс.

Данные ассоциации мы можем перенести на объекты, цвета, формы и другие элементы дизайна (Рис. 3,4,5).

Для дополнительного примера рассмотрим небольшое исследование, которое я провел в рамках проекта "Netology Grow". При разработке корпоративного сервиса я решил выяснить, с каким стилем музыки у участников проекта ассоциируется бренд компании «Нетология» (рис. 6).

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

Для создания методики взял два параметра мелодии: ритм и пульс. Данные метрики являются основными для понимания динамики мелодии. (рис. 7)

Саму методику решил представить в виде графика "Звуки интерфейса" (рис. 8) :

"X"- Пульс мелодии, количество модулей в сетке (величина пульса=количеству модулей в сетке)

"Y"- Форма объектов, количество объектов на блок макета, цвета

В эксперименте я использовал следующие метрики:

1. Дизайн:

— цвет;

— форма объектов;

— модульная сетка;

— количество объектов на блок макета;

2. Мелодия:

— пульс (замер проводился на самой динамичной части музыкальной композиции) ;

— время мелодии (величина постоянная и равна 20 секундам трека).

В первую очередь определил точку отсчета по Оси X (пульс/модульная сетка). Для этого был взят самый медленный музыкальный стиль релакс, композицию выбрал рандомно.

В самой ритмичной части мелодии в двадцатисекундном отрезке получилось пять пульсов, это будет точкой отсчета на графике (рис. 9)

Дальше выбрал максимально активный стиль драм-н-бейс, композицию так же выбрал рандомно. С учетом самой ритмичной части мелодии и двадцатисекундного отрезка получилось 24 пульса (рис. 10).

Теперь у нас есть минимальный и максимальный показатели пульса, можем построить линейный график (рис. 11):

Основа сформирована, интегрируем остальные метрики в график

Человеческое сознание легко считывает и интуитивно ассоциирует мелодию относительно формы. Для подтверждения этой теории я собрал референсы изображений из поисковых запросов релакс и драм-н-бейс. (рис. 12,13):

В тематике релакс превалировали округлые формы. За точку отсчета взял круг.

Среди картинок по запросу «Драм-н-бейс» в поисковике преобладают прямоугольные формы, данные формы взяты за основу. Теперь можем построить график зависимости формы от пульса мелодий.(рис. 14)

Минимально допустимое количество объектов на блок макета условно определил двумя объектами, максимальное шестью. Далее примерно распределил их количество по всей оси в зависимости от пульса, теперь можем построить график (рис. 15):

На графике можно выбрать любой вариант формы объекта в диапазоне от 1 до 8 в зависимости от пульса мелодии.

Пример: Допустим, мелодия состоит из 17 пульсов, форму объекта можно выбрать любую: от начальной до той, которая соответствует текущей величине (17).

Дальше я определил цвета относительно пульса музыки. Были взяты основные используемые в дизайне и распределены в соответствии с психологией цветов на два вида: спокойные и активные, далее построен график относительно пульса (рис. 16):

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

Обобщая все полученные данные, получил график (рис. 17):

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

Проиллюстрирую, как работает метод, на примере макета главной страницы официального сайта ВТБ.

В работе над главной страницей сайта за базу было взято рекламное музыкальное произведение ВТБ с Егором Кридом «Нажми на кнопку».

Далее рассмотрим эквалайзер (рис. 20):

За основу я взял самую динамичную часть композиции, а именно: 20-секундный отрезок из припева. В этом отрезке получилось 12 пульсов.

Рисунок 21. Затем перенес полученные данные на график :

Результаты выбора:

· Форма объектов — 1 –4

· Количество объектов — не более 4

· Цвета — фирменные синий и белый

· Количество модулей в сетке — 12, расстояния — по умолчанию

По полученным данным я сформировал макет главной страницы сайта ВТБ по данной методике , сравним результаты c оригиналом (рис. 22,23,24,25)

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

Общий план работы метода "Звуки интерфейса" выглядит так:

Так как сравнительной аналитики, исследований я никаких не проводил, все выводы, стал ли интерфейс лучше и на сколько актуальна методика, оставляю на суд читателю.

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

Оставляйте комментарии, подписывайтесь, дальше будет только интересней!