Звук в UX/UI-дизайне

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

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

На сайте Масаюки Дадзима визуал сопровождается музыкой, которая дополняет трансформирующиеся 3D-объекты на экране.

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

Брендинг

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

Эмоции

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

Коммуникация с продуктом

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

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

Расстановка акцентов

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

Инклюзивность

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

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

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

Уведомления

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

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

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

Обратная связь

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

Такие сигналы называются earcon = ear (ухо) + icon(иконка) — аудиальная иконка или аудио-иконка.

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

Звук в качестве декора

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

Звук «героя»

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

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

Окружающая музыка

Окружающая музыка — это звук, который создает атмосферу продукта, передает его образ, поддерживает имидж и обращается к эмоциям.

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

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

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

Голосовое воспроизведение

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

Сайт итальянского бренда, который предлагает вечные розы, упакованные в эксклюзивные дизайнерские боксы. Интро сайта — голосовое чтение текста, идущего бегущей строкой на экране. Далее голос сменяется мелодичной музыкой.

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

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

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

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

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

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

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

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

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

Расслабляющая тихая фоновая музыка отвечает тематике продукта.

Ориентируйтесь на функцию

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

Создайте гайд

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

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

Не гонитесь за сложностью

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

Предоставьте пользователям возможность управлять

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

Тестируйте

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

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

Повышение когнитивной нагрузки

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

Внезапность

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

Помехи загрузки

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

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

Грамотное использование аудио в веб-дизайне может сформировать запоминающийся опыт пользования. Не забывайте про уместность и ориентируйтесь на задачи продукта.