Ежедневно для сбора информации и взаимодействия с окружающим миром мы используем комбинацию зрения и слуха. Однако в веб-интерфейсах эта комбинация всё ещё не отражена — большинство из них сугубо графические и ориентированы на зрение.
В прошлом я занимался музыкой и потому всегда ратовал за использование звуковых эффектов на сайтах. Сочетание зрения и слуха могло бы стать мощным инструментом для взаимодействия с человеко-машинными интерфейсами.
Рафа Абсар и Катрин Гуаставино в своей статье “Использование неречевых звуков в пользовательских интерфейсах” (2008 г.) отмечали:
“Представление всей информации только в графическом виде может привести к зрительным перегрузкам, а также, если взгляд сфокусирован в другой точке, к информационным потерям”.
В то время было принято считать, что звуки следует использовать только в играх. Это убеждение было результатом неверного вывода, что пользователи и так полностью сосредоточены на экране монитора, и их вряд ли может что-то отвлечь. Поэтому казалось, что звуки не нужны, и их использование может даже негативно отразиться на опыте пользователя.
К тому же существовали и технические ограничения, которые могли только ухудшить ситуацию: плохая поддержка аудиоформата браузерами и низкая скорость соединения (на большинстве устройств загрузка аудиофайлов занимала значительное время).
К счастью, теперь всё изменилось. Развитие UI стало более предсказуемым, UX обрёл господствующее влияние, а количество исследований использования звуков в UI начало расти.
Звуки становятся индивидуальной особенностью продукта, его эмоциональной составляющей. Трудно представить, скажем, Slack или Skype без их уникальных звуков.
В Facebook и Apple есть даже специальные отделы, работа которых целиком посвящена звуковому (саунд-) дизайну продуктов этих компаний.
Уилл Литтлджон, директор по звуковому дизайну в Facebook, говорит, что, пусть это и противоречит прежнему видению ситуации, но очень простые звуки могут сильно влиять на восприятие продукта людьми:
“Саунд-дизайнеры привносят в ваш мир определённый контекст, используя для этого царство звуков. Звуки, которые вы слышите параллельно с переживанием других сенсорных ощущений, играют огромную роль в формировании вашей картины реальности”.
Мне нравится идея добавления звуков в UI. Благодаря этому у меня создаётся ощущение, что сейчас создание пользовательских интерфейсов становится всё больше похожим на сочинение симфоний. Всё должно быть идеально синхронизировано: когда заканчивается визуальная анимация, в игру должен вступать звук и т. д. Это как оркестр — множество мелких деталей (графика, анимация и аудио) гармонично сочетаются друг с другом и порождают великолепный опыт взаимодействия человека и машины.
Вместе с тем важно знать, как интегрировать звуки в интерфейсы. Разработчики Material UI в Google создали отличное руководство, объясняющее, как звуки подкрепляют восприятие того или иного функционала — это стоит почитать.
В целом, можно выделить три способа использования звука:
- Звук как главный герой
Такие звуки подчёркивают какой-то особо важный момент, например, очистку списка входящих писем в электронной почте. Звук-герой усиливает ощущение. К примеру, для загрузки, которая занимает длительное время, можно использовать не только индикатор выполнения, но и дополнительно оповестить пользователя звуком об окончании операции.
По словам Уилла Литтлджона, это “позволяет людям переключаться на другие дела, вместо того чтобы безотрывно следить за индикатором загрузки. Это тот же самый когнитивный эффект, какой возникает при использовании таймера во время приготовления еды”. - Звук как украшение
Это, пожалуй, один из сложнейших способов работы со звуком, так как здесь замешан ещё и брендинг. В этом случае звуки стоит выбирать особенно тщательно, поскольку они станут уникальным “голосом” продукта. Звуки подчёркивают экспрессивные или игровые моменты, например, при запуске приложения звук может отражать его тему. - Звук как отклик
Такие звуки наиболее распространены и называются “аудиоиконками” (earcon). Они усиливают значение взаимодействия и подчёркивают индивидуальный характер и эмоциональную составляющую продукта. Эти звуки используются также для привлечения внимания: например, звук, раздающийся при выборе пункта из списка, подтверждает действие и устанавливает диалог между пользователем и приложением.
Иногда эти три категории накладываются друг на друга. Звуки следует использовать вместе с графикой — не надо всецело полагаться только на один аспект. Звук ограничен во времени, графика — нет. Однако в некоторых контекстах и в зависимости от окружающих факторов звуки могут играть основную роль. К примеру, когда мы не смотрим на экран, звуковое уведомление — единственное, что может привлечь наше внимание.
Ещё один важный момент, который надо учесть, — частота события, с которым связан звук. Стоит иметь в виду, как часто пользователь будет слышать тот или иной звук в приложении — важно не переборщить, чтобы не вызвать раздражения.
Если вам хочется заняться чем-то необычным в области UX, то использование звука в UI/UX — всё ещё новая и увлекательная тема. И, как всегда, лучший способ изучить что-либо — посмотреть, как с этим работают другие и, конечно, попрактиковаться самому.
Вот несколько полезных бесплатных библиотек, которые позволят вам поэкспериментировать со звуком:
1) Facebook sound kit
2) Material UI sounds
3) Freesound
4) Octave sounds
5) Sounds UI
Мой небольшой пример можно посмотреть тут. Код вы найдёте на GitHub.
Если вы пользуетесь каким-либо фреймворком JavaScript, то процесс добавления звука в UI для вас прост: нужно импортировать аудиофайл, создать аудиоузел на основе Audio Web API и привязать его к событию, например, к нажатию на кнопку.
Читайте также:
- Применение пустого пространства в UI-дизайне
- Мы снова написали самый быстрый JS-фреймворк UI
- 10 трендов UI-дизайна в 2021 году
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Tiago Costa: Adding Sounds to UI
