[Перевод] Создание музыкальных интерфейсов
Я занимаюсь дизайном уже 16 лет, а в свободное время пишу музыку. Владение этими навыками утвердило меня в мысли, что интерфейсы должны объединять в себе как минимум звук и изображение. Команда из компании Udemy, где я сейчас работаю, в данный момент разрабатывает новый подход к обучению. В ходе мозгового штурма возникла идея подключить звуковые сигналы к промежуточным экранам. Я увлекся и стал экспериментировать с синтезатором and MIDI-сэмплами, чтобы обеспечить пользователю аудиофидбэк в процессе прохождения и завершения курса. Мы пробовали разные инструменты, аккорды и темп. Сложность заключалась в том, чтобы аудиоконтент осмысленно демонстрировал прогресс и вместе с тем, выражал ценности нашей компании. Какие звуки могут рассказать о нас? В итоге мы остановились на коротких, ненавязчивых мотивах в ля мажор, наигранных на маримбе и арфе.
После этого опыта я задался вопросом… что если вместо того, чтобы использовать в интерфейсах звуковые сигналы в качестве аудильного фидбэка для юзера, мы применяли бы гармонии, ноты и аккорды как символы? Что если мы бы выбрали инструмент или набор инструментов, который подходит для нашего бренда, созвучен «голосу» нашего продукта? Что если бы музыка применялась таким образом, чтобы пользователь мог считать вложенный в нее посыл?
Несмотря на то, что слух — один из основных каналов восприятия информации, большая часть интерфейсов делает упор на визуал. Звуковой фидбэк может улучшить пользовательский опыт, однако разработчики за редким исключением полагаются только на то, что можно вывести на экран. Аудиальный фидбэк помогает пользователю, давая ему возможность отвести взгляд от девайса и заниматься несколькими делами одновременно. Удобен он и тем, что дает знать, когда действие зафиксировано, обрабатывается или завершено, не задействуя экран. Но создавать дизайны со звуком не так просто. Необходимо принимать во внимание множество аспектов, чтобы сделать опыт пользователя приятным, осмысленным и практичным.
Описанный опыт так мне понравился, что я решил составить коллекцию музыкальных записей, которые другие могли бы использовать в своих разработках. У меня получилось более 200 аудиосэмплов — гармонии, последовательности, звуковые эффекты, звучащая речь и сочетания аккордов, исполненных на 8 разных инструментах.
Целиком этот архив можно скачать здесь. Ну, а если вас интересует мое прошлое, мои советы о том, как создавать музыкальные интерфейсы, или история создания этих сэмплов — читайте дальше.
Если в лесу падает дерево, а вокруг никого нет, придет ли уведомление?
Прежде чем говорить о музыке, давайте сначала разберемся, как мы дешифруем и, в конечном счете, создаем смыслы, скрытые в звуках. Аудиальный контент, даже если это не звучащая речь, насыщен информацией, которая помогает нам лучше понять окружающую среду — этот процесс давно стал для нас частью повседневной жизни. Достаточно просто прислушаться, чтобы определить, что бьющий ударил по мячу, что кто-то расстегнул застежку-липучку или что чайник закипел. Мы применяем аудиальный механизм получения фидбэка в таких устройствах как телевизоры, микроволновки, машины, игрушки и мобильные телефоны. Звуковые интерфейсы могут служить приятным и полезным дополнением для визуальных (или даже заменителем, учитывая растущую популярность наручных девайсов).
Создавая дизайн со звуком, важно определить, какое значение будет передавать каждый из них, на самых ранних этапах работы. Сигнал, который транслирует важную информацию, должен существенно отличаться от тех, которые просто сопровождают визуальный контент. Зрительный и слуховой каналы восприятия в корне различны, поэтому звуки могут передавать информацию, недоступную для визуального контента. Звук уникальным образом подкрепляет три основных принципа интерактивного дизайна: видимость, отклик и постоянство.
Аудиальные дизайны могут выражать разные смыслы: закономерность, течение времени, призыв к действию или предупреждение. Возможности безграничны, но из этого не следует, что каждое взаимодействие должно включать в себя звук. Аудиоконтент должен способствовать взаимодействию, а не препятствовать, мешая или отвлекая. Чтобы не раздражать пользователя однообразными сигналами, лучше всего отдавать предпочтение коротким и простым звукам, которые информативны по самой своей форме. Таким образом звук будет передавать значение, которое встроено в него изначально.
Дизайн и музыка должны спеться
Дизайн — моя главная страсть, но и музыка занимает в моей душе особое место. История моих отношений с музыкой разворачивалась не совсем в традиционном ключе, но все-таки довольно заурядно. Начал я с того, что подростком играл в панк-группе (играл, кстати, ужасно), потом переключился на синти-панк с MIDI и виртуальными студиями, далее добрался до ню-диско с синтезаторами и арпеджиаторами (Джеймс Мёрфи меня бы не одобрил). Какое-то время «покорял» публику чарами música sabrosa в составе латиноамериканской группы, а затем решил освоить «утерянное искусство» диджеинга (мой конек — мексиканские свадьбы).
За те годы, что я работал дизайнером и писал музыку для души, я пришел к следующему выводу: творческий процесс в обоих случаях выстаивается практически одинаково. Неважно, пишете вы песню, рисуете комикс или создаете пользовательский опыт, цель всегда одна — рассказать историю. Вы придерживаетесь универсальной базовой структуры: завязка, развитие действия по нарастающей, кульминация, развитие действия по ниспадающей и развязка. Секрет в том, чтобы захватить и удержать аудиторию.
Сходство не исчерпывается одной структурой. Характеристики звука (высота, тембр, продолжительность, громкость, направление) аналогичны элементам дизайна (форма, цвет, размер, текстура, направление). Принципы создания музыки и дизайна также имеют много общего (композиция, форма, ритм, фактура, гармония, сходства и контрасты).
Почему я вам все это рассказываю? Потому что считаю, что в любом интерфейсе звуки и визуальные элементы должны составлять единое целое. Например, создавая модуль предупреждения, мы можем использовать красный цвет и иконку с восклицательным знаком — оба этих символа знакомы пользователю и вызывают представление об опасности или риске. Аналогичным образом в качестве сигнала предупреждения можно выбрать высокий, громкий звук с необычным тембром. Между визуальным и звуковым контентом в интерфейсе должна быть связь, будь то сходство или взаимодополнение.
Компания Blackberry сопоставляет визуальный язык интерфейса со звуковой его составляющей в своей Earconography:
«Конверт на иконке может быть разных цветов, с маркой или без, расположен под углом в 25 градусов — пока он выглядит как конверт, пользователи будут понимать, что обозначает иконка. Та же история и со звуками».
Поиск подходящего звучания — это такая морока
Выбор подходящего звукового оформления зависит от предназначения вашего продукта или сервиса, а также от его стилистики. На фундаментальном уровне вы можете использовать в интерфейсе звуки речи или звуковые сигналы — так называемые «звуковые иконки» (earcons). Приложения наподобие Facebook, TiVo, iPhone и Skype используют звуковые сигналы, чтобы создать ощущение привязки к их целостной экосистеме. Применение звуковых иконок помогает инструментам лучше представить бренд на рынке или подчеркнуть персональный стиль продукта. Должен ли звук оставлять ощущение чего-то металлического или деревянного? Синтетического или натурального? Массивного или небольшого? Сложного или простого? Ответы на эти вопросы помогают определить материал, тип инструмента (духовой, ударный, струнный), а также задать общую тему.
Вариативность звуков не имеет пределов. Вы можете изменять любые характеристики, получая на выходе совершенно разные результаты с каждой новой комбинацией. Более того, звуковые характеристики оказывают влияние друг на друга. К примеру, громкость влияет на высоту, высота может менять громкость, тембр и длительность также могут воздействовать друг на друга. Углубляться во все технические детали может оказаться сложновато, а возможность нанять звукорежиссёра не всегда вписывается в бюджет. Поэтому я порекомендовал бы немного поэкспериментировать и довериться своему чутью, подбирая оптимальное звуковое оформление для вашего проекта. Либо просто нанять подростка из панк-группы.
В идеале музыкальные интерфейсы должны быть отчасти идеографическими и отчасти метафорическими. Иными словами, они должны содержать как стандартные атрибуты звука, так и абстрактные категории наподобие размера, материала, скорости или веса. Мне нравится определять эти два варианта дизайна звука как «плоский» и «скевоморфический». Например, при закрытии диалогового окна в приложении можно напрямую воспроизводить естественный звук закрывающейся двери, а можно использовать синтезированную имитацию (или скевоморф) этого звука с подкорректированными тембром, скоростью и силой.
Музыкальные интерфейсы на высоте
Большинство людей имеет общее представление о музыке, даже при отсутствии опыта работы с ней или соответствующего образования. Эксперименты с разными ее характеристиками, такими как ритм, гармония, инстурментовка, мотив или темп, могут помочь определить значение и цель, которые стоят за каждым звуком.
Среди приложений, которые виртуозно используют музыку во взаимодействии с пользователем, я бы назвал monument valley и okey. Тот факт, что оба приложения игровые — не простое совпадение. Гейм-дизайнеры с давних пор прорабатывают тему использования музыки в интерфейсах, и, по моему мнению, разработчики могут многому поучиться у них. Использование аккордов может добавить глубины интерфейсу, в котором тональности различных высот исполняются не прекращаясь. Гармоническое движение, возникающее от движения мелодий, может вызвать у слушателя ассоциации c прогрессом, успехом или ошибкой. Другие события, такие как завершение, отправка (рассылка, загрузка) или возврат (получение, скачивание), могут быть представлены путем модуляции из доминанты в тонику и обратно.
Музыкальные посылы также могут апеллировать к чувствам. В западной музыкальной культуре мажор вызывает положительные эмоции (достаточно вспомнить большую часть поп-музыки), а минорные мелодии воспринимаются как печальные и меланхоличные (к примеру, «Love will tear us apart» — Joy Division, «New York I love you, but you«re bringing me down» — LCD Soundsystem). Выбор звукоряда может помочь придать вашему продукту нужное настроение.
В архиве, который я составил, используется ре мажор. Я создал различные последовательности нот, октав и аккордов которые могут сочетаться в созвучии. В будущем я планирую его обновлять по мере того, как будут добавляться другие октавы.
Использовать архив — менуэтное дело
Архив был создан путем запиcи аналоговых и цифровых синтезаторов в Ableton Live. Для его создания были использованы восемь музыкальных инструментов (колокольчик, гитара, арфа, маримба, фортепиано, свисток, флейта, ксилофон), несколько звуковых эффектов (R2D2, Секретные материалы) и голоса (как мужские, так и женские).
Каждый музыкальный инструмент имеет от 20 до 40 звуков. В разных сочетаниях они могут представлять последовательность действий, успех, ошибку, оповещение, предупреждение и другие простые интеракции. В том числе, я добавил несколько приукрашенных аккордов в случае, если вы хотите вдохнуть новую жизнь и добавить изюминку в ваш продукт.
Структура папки достаточно проста: «Корневая папка / Инструмент/ Файл». Имена файлов имеют вид «инстурмент-концепт-нота-номер.разрешение». Я рекомендую использовать для взаимодействий разного типа звуки одного и того же инструмента. Но если хотите оторваться, то можете скомбинировать два инструмента и посмотреть, что получится.
Завершая на высокой ноте
Музыка может оказывать влияние на то, как мы взаимодействуем с визуальными интерфейсами. Она помогает пользователю глубже погрузиться в историю и проникнуться ей. Хорошо продуманные музыкальные интерфейсы могут улучшить опыт и сделать продукт персонализированным, но при неверном использовании звуки отвлекают и раздражают (помните флэш-сайты 2000х годов и ужасные блоги?). Аудио — это нечто очень личное, и нужно проявлять осторожность, чтобы не переступить границу в процессе коммуникации с пользователями.
Я надеюсь, что созданный мною архив поможет вам получить богатый опыт и вдохновит вас на создание потрясающих продуктов.
