Как звуковой дизайн меняет UX

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

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

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

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

Как звук может улучшить впечатления от онлайн-опыта?

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

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

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

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

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

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

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

Какие типы звука существуют? 

Музыка/партитура
Представьте себе любимый фильм без культовой музыки. «Челюсти» без зловещего предупреждения в два аккорда, «Звездные войны» без невероятного саундтрека, разворачивающего действие с первого знакового кадра. Великая музыка живет своей собственной жизнью; это важно для успеха производства. 

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

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

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

Голосовая помощь через такие приложения, как Alexa или Siri, быстро становится частью нашей жизни: от использования телефона, управления транспортными средствами или создания настроения с помощью музыки дома. Распознавание голоса на сайтах и ​​в приложениях растет и будет продолжать расти.

Психология звука

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

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

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

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

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

Создатели фильмов и игр уже много лет извлекают выгоду из психологической силы звука. Они знают, как звук может вызывать эмоции. Правильная музыка или окружающие звуки могут мгновенно вызвать у аудитории поток связанных с ними чувств. У каждого есть любимая музыкальная тема из игры или музыка из фильма. Как только они слышат ее, они вспоминают, что они чувствовали, когда играли или видели ее в первый раз. Возможно, это культовая тема Super Mario Bros или саундтрек из Азерота в World of Warcraft. 

Правильное звуковое оформление и музыка могут не только задать настроение, но и эмоционально воздействовать на людей так, как это не могут сделать одни лишь визуальные эффекты.

Как звук может влиять на эмоции?

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

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

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

Какие проблемы возникают при использовании звука?

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

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

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

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

Какие существуют основные форматы аудиофайлов?

MP3 — сжатый формат или формат с потерями. Аудиоданные сжимаются и оптимизируются по размеру и скорости передачи данных. Этот формат нужно использовать как можно чаще.

WAV — формат контейнера WAVE представляет собой несжатый аудиофайл, обычно имеющий гораздо больший размер. Файлы в формате контейнера WAVE обычно имеют расширение «wav».

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

Ogg Theora Vorbis  — поддерживается в настольных/мобильных версиях Gecko (Firefox), Chrome и Opera. Поддержка может быть добавлена ​​в Safari (но не в iOS) с помощью надстройки. Формат никак не поддерживается в IE.

Где я могу найти звуки для своих проектов?

Freesound — совместная база данных звуков, лицензированных Creative Commons. Вы можете просматривать, скачивать звуки и делиться ими.

SoundJay – библиотека бесплатных звуков, которые вы можете использовать на своем веб-сайте бесплатно и без лицензионных отчислений в своих проектах.

Partners in Rhyme – бесплатная музыка и звуковые эффекты без лицензионных отчислений.

Pond 5 — одна из крупнейших в мире коллекций стокового видео, а также творческих ресурсов, звуков и музыки, не требующих лицензионных отчислений.

Premium Beat — высококачественная бесплатная музыкальная библиотека, организованная по жанрам и настроению.

Audio Jungle – огромная библиотека бесплатных звуков и музыки по цене от 1 доллара.

Sound Stripe — модель членства, позволяющая получать неограниченные лицензии на песни в большой, тщательно отобранной музыкальной библиотеке.

Лучшие звуковые библиотеки, которые стоит попробовать

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

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

SoundJS
Библиотека JavaScript, предоставляющая простой API и мощные функции, упрощающие работу со звуком. Разработанный с учетом кросс-браузерной поддержки, он изящно возвращается к HTML-аудио для широкой поддержки. Легко привязывает загрузку аудиофайлов к PreloadJS. Если вы уже используете инструменты CreateJS, это хороший выбор.

Автор: Ричард Маттка — отмеченный наградами интерактивный технолог, дизайнер и разработчик. Он специализируется на создании интерактивных миров на научно-фантастические темы, исследуя синергию между человеком и машиной. Он также регулярно пишет статьи для Net Magazine и Web Designer Magazine по ряду интересных тем из мира технологий, включая искусственный интеллект, визуальные эффекты, 3D и многое другое.