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

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

Рафа Абсар и Катрин Гуаставино, авторы статьи Удобство использования неречевых звуков в пользовательском интерфейсе (2008 г.), отмечают, что:

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

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

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

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

Звуки становятся частью индивидуальности продукта и его эмоций. Сложно представить, например, такие продукты, как Slack и Skype, без их уникальных звуков.

Кстати, у таких компаний, как Facebook и Apple, есть внутренние команды, занимающиеся разработкой звуков для своих продуктов.

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

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

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

Тем не менее, важно знать, как интегрировать звуки в интерфейсы. Команда Google Material UI создала отличное руководство о том, как звуки могут усилить определенные функции. Это стоит прочитать.

По сути, есть три применения звуков:

1) Звук героя
Эти звуки используются, чтобы выделить критический момент, например празднование, когда пользователь очищает почтовый ящик. Это может улучшить впечатления. Например, для загрузки, которая занимает много времени, вместо того, чтобы полагаться только на индикатор выполнения, можно использовать звук, чтобы указать, что загрузка завершена.

По словам Литтлджона, это «позволяет людям перейти к другим делам, которые они предпочитают делать, вместо того, чтобы смотреть на индикатор выполнения. Это тот же когнитивный сдвиг, который вы совершаете, когда используете таймер во время приготовления ужина ".

2) Звук как украшение
Я считаю, что это один из самых сложных способов работы со звуком, поскольку он связан с брендингом. Следует тщательно выбирать звуки, которые используются таким образом, поскольку они создают уникальный голос продукта. Их используют для выделения выразительных или игривых моментов. Например, когда вы запускаете приложение, может воспроизводиться звук, отражающий тему продукта.

3) Звук как обратная связь
Эти звуки, также называемые наушниками, являются наиболее распространенными. Они используются для усиления смысла взаимодействия, а также эмоций и индивидуальности продукта. Они также используются для привлечения внимания пользователя. Например, когда вы выбираете элемент в списке, раздается звуковой щелчок, чтобы усилить действие и создать двусторонний диалог между пользователем и приложением.

Я заметил, что иногда эти три категории пересекаются. Звуки следует использовать вместе с визуальной графикой. Не стоит полагаться только на одно или другое. Звуки - это преходящая среда, а графика - неподвижна. Однако звуки могут стать заметными в определенных условиях (в зависимости от факторов окружающей среды). Например, когда мы не можем смотреть на экран, звуковое уведомление - единственное, что может привлечь наше внимание.

Еще одна важная вещь, о которой следует помнить, - это частота события, связанная со звуком. Лучше всего учитывать, как часто пользователь будет слышать звук в приложении. Важно не переусердствовать, поскольку это может вызвать раздражение.

Звуки UI / UX по-прежнему являются новой и захватывающей темой, если вы хотите сосредоточиться на чем-то другом в области UX. Как и в случае с другими предметами, лучший способ изучить этот предмет - это понаблюдать за тем, как его реализуют другие разработчики, и, конечно же, запачкать руки.

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

1) Звуковой комплект Facebook
2) Звуки материала UI
3) Freesound
4) Звуки октавы
5) Звуки UI

Я также создал небольшой пример здесь. Код доступен на моем GitHub.

Если вы используете фреймворк JavaScript, процесс добавления звука в пользовательский интерфейс прост. Вы импортируете аудиофайл, объявляете аудиоузел на основе Audio Web API, а затем присоединяете его к событию, как нажатие кнопки.

Если вам известны какие-либо реализации звуков в пользовательском интерфейсе, на которые стоит обратить внимание, упомяните их в комментариях и не забудьте проверить мои другие сообщения о UX и разработке пользовательского интерфейса.

Фотографии Parker Knight из Pexels, Steve Harvey и Soundtrap на Unsplash.