Створення музичних інтерфейсів

Дзвінок будильника, характерний писк, з яким відкриваються дверцята машини — ми постійно взаємодіємо з технікою за допомогою звуків. Тим не менш, у багатьох зберігається переконання, що інтерфейс транслює інформацію переважно через вікно, в той час як величезний потенціал мови звуків залишається без уваги.



Я займаюся дизайном вже 16 років, а у вільний час пишу музику. Володіння цими навичками ствердило мене в думці, що інтерфейси повинні поєднувати в собі як мінімум звук і зображення. Команда з компанії Udemy, де я зараз працюю, в даний момент розробляє новий підхід до навчання. В ході мозкового штурму виникла ідея підключити звукові сигнали до проміжним екранів. Я захопився і почав експериментувати з синтезатором and MIDI-семплами, щоб забезпечити користувачеві аудиофидбэк в процесі проходження та завершення курсу. Ми пробували різні інструменти, акорди і темп. Складність полягала в тому, щоб аудіоконтент осмислено демонстрував прогрес і разом з тим, висловлював цінності нашої компанії. Які звуки можуть розповісти про нас? У результаті ми зупинилися на коротких, ненав'язливих мотиви в ля мажор, награних на маримбе та арфі.


Після цього досвіду я задався питанням… що якщо замість того, щоб використовувати в інтерфейсах звукові сигнали як аудильного фідбек для юзера, ми застосовували б гармонії, ноти і акорди як символи? Що якщо ми б вибрали інструмент або набір інструментів, який підходить для нашого бренду, співзвучний «голосу» нашого продукту? Якби музика застосовувалася таким чином, щоб користувач міг вважати вкладений в неї посил?

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

Описаний досвід так мені сподобався, що я вирішив скласти колекцію музичних записів, які інші могли б використовувати в своїх розробках. У мене вийшло понад 200 аудиосэмплов — гармонії, послідовності, звукові ефекти, звучна мова і поєднання акордів, виконаних на 8 різних інструментах.

Цілком цей архів можна скачати тут. Ну а якщо вас цікавить моє минуле, мої поради про те, як створювати музичні інтерфейси, або історія створення цих семплів — читайте далі.



Якщо в лісі падає дерево, а навколо нікого немає, прийде повідомлення?

Перш ніж говорити про музику, давайте спочатку розберемося, як ми дешифруем і, в кінцевому рахунку, створюємо смисли, приховані в звуках. Аудіальний контент, навіть якщо це не звучить мова, насичений інформацією, яка допомагає нам краще зрозуміти навколишнє середовище — цей процес давно став для нас частиною повсякденного життя. Досить просто прислухатися, щоб визначити, що б'є вдарив по м'ячу, що хтось розстебнув застібку-липучку або що чайник закипів. Ми застосовуємо аудіальний механізм отримання фідбек у таких пристроях як телевізори, мікрохвильовки, машини, іграшки та мобільні телефони. Звукові інтерфейси можуть служити приємним і корисним доповненням для візуальних (або навіть замінником, враховуючи зростаючу популярність наручних девайсів).

Створюючи дизайн зі звуком, важливо визначити, яке значення буде передавати кожен з них, на самих ранніх етапах роботи. Сигнал, який транслює важливу інформацію, повинен істотно відрізнятися від тих, які просто супроводжують візуальний контент. Зоровий і слуховий канали сприйняття в корені різні, тому звуки можуть передавати інформацію, недоступну для візуального контенту. Звук унікальним чином підкріплює три основних принципи інтерактивного дизайну: видимість, відгук і сталість.

Аудіальні дизайни можуть виражати різні смисли: закономірність, протягом часу, заклик до дії чи попередження. Можливості безмежні, але з цього не випливає, що кожне взаємодія повинна включати в себе звук. Аудіоконтент повинен сприяти взаємодії, а не перешкоджати, заважаючи або відволікаючи. Щоб не дратувати користувача одноманітними сигналами, краще всього віддавати перевагу коротким і простим звуків, які інформативні по самій своїй формі. Таким чином звук буде передавати значення, яке вбудоване в нього спочатку.

Дизайн і музика повинні заспівати

Дизайн — моя головна пристрасть, але і музика займає в моїй душі особливе місце. Історія моїх відносин з музикою розгорталася не зовсім в традиційному ключі, але все-таки досить заурядно. Почав я з того, що підлітком грав в панк-групі (грав, до речі, страшенно), потім переключився на сінті-панк з MIDI і віртуальними студіями, далі дістався до ню-диско з синтезаторами і арпеджиаторами (Джеймс Мерфі мене б не схвалив). Якийсь час «підкоряв» публіку чарами música sabrosa у складі латиноамериканської групи, а потім вирішив освоїти «втрачене мистецтво» діджеїнгу (мій коник — мексиканські весілля).

За ті роки, що я працював дизайнером і писав музику для душі, я прийшов до наступного висновку: творчий процес в обох випадках вистоюється практично однаково. Неважливо, пишете ви пісню, малюєте комікс або створюєте користувальницький досвід, мета завжди одна — розповісти історію. Ви дотримуєтеся універсальної базової структури: зав'язка, розвиток дії по наростаючій, кульмінація, розвиток дії по низхідній і розв'язка. Секрет в тому, щоб захопити і утримати аудиторію.

Подібність не вичерпується однією структурою. Характеристики звуку (висота, тембр, тривалість, гучність, напрямок) аналогічні елементам дизайну (форма, колір, розмір, текстура, напрямок). Принципи створення музики та дизайну також мають багато спільного (композиція, форма, ритм, фактура, гармонія, подібності і контрасти).

Чому я вам все це розповідаю? Тому що вважаю, що в будь-якому інтерфейсі звуки і візуальні елементи повинні складати єдине ціле. Наприклад, створюючи модуль попередження, ми можемо використовувати червоний колір і іконку зі знаком оклику — обидва цих символу знайомі користувачеві і викликають уявлення про небезпеку або ризик. Аналогічним чином як сигнал попередження можна вибрати високий, гучний звук з незвичайним тембром. Між візуальним і звуковим контентом в інтерфейсі повинна бути зв'язок, будь то подібність або взаємодоповнення.

Компанія Blackberry зіставляє візуальний мова інтерфейсу зі звуковою його складової в своїй Earconography:

«Конверт на іконці може бути різних кольорів, з маркою або без, розташований під кутом 25 градусів — поки він виглядає як конверт, користувачі будуть розуміти, що позначає іконка. Та ж історія і з звуками».


Пошук відповідного звучання — це така морока

Вибір відповідного звукового оформлення залежить від призначення вашого продукту або сервісу, а також від його стилістики. На фундаментальному рівні ви можете використовувати в інтерфейсі звуки мови або звукові сигнали — так звані «звукові іконки» (earcons). Програми на зразок Facebook, TiVo, iPhone і Skype використовують звукові сигнали, щоб створити відчуття прив'язки до їх цілісної екосистеми. Застосування звукових іконок допомагає інструментів краще представити бренд на ринку або підкреслити персональний стиль продукту. Повинен звук залишати відчуття чогось металевого або дерев'яного? Синтетичного або натурального? Масивного або невеликого? Складного чи простого? Відповіді на ці питання допомагають визначити матеріал, тип інструменту (духовий, ударний, струнний), а також задати загальну тему.

Варіативність звуків не має меж. Ви можете змінювати будь-які характеристики, отримуючи на виході абсолютно різні результати з кожною новою комбінацією. Більш того, звукові характеристики впливають один на одного. Наприклад, гучність впливає на висоту, висота може міняти гучність, тембр і тривалість також можуть впливати один на одного. Заглиблюватися у всі технічні деталі може виявитися складно, а можливість найняти звукорежисера не завжди вписується в бюджет. Тому я порекомендував би трохи поекспериментувати і довіритися своєму чуттю, підбираючи оптимальний звукове оформлення для вашого проекту. Або просто найняти підлітка з панк-групи.

В ідеалі музичні інтерфейси повинні бути частково ідеографічними і частково метафорическими. Іншими словами, вони повинні містити стандартні атрибути звуку, так і абстрактні категорії зразок розміру, матеріалу, швидкості або ваги. Мені подобається визначати ці два варіанти дизайну звуку як «плоский» і «скевоморфический». Наприклад, після закриття діалогового вікна в додатку можна безпосередньо відтворювати природний звук закривається двері, а можна використовувати синтезовану імітацію (або скевоморф) цього звуку з подкорректированными тембром, швидкістю і силою.



Музичні інтерфейси на висоті

Більшість людей має загальне уявлення про музику, навіть при відсутності досвіду роботи з нею або відповідної освіти. Експерименти з різними її характеристиками, такими як ритм, гармонія, инстурментовка, мотив або темп, можуть допомогти визначити значення і мета, які стоять за кожним звуком.

Серед додатків, які віртуозно використовують музику у взаємодії з користувачем, я б назвав monument valley і okey. Той факт, що обидва додатки ігрові — не простий збіг. Гейм-дизайнери з давніх пір опрацьовують тему використання музики в інтерфейсах, і, на мою думку, розробники можуть багато чого повчитися у них. Використання акордів може додати глибини інтерфейсу, у якому тональності різних висот виконуються не припиняючись. Гармонійне рух, що виникає від руху мелодій, може викликати у слухача асоціацію з прогресом, успіхом або помилкою. Інші події, такі як завершення, відправка (розсилка, завантаження) або повернення (отримання, скачування), можуть бути представлені шляхом модуляції з домінанти в тоніку і назад.

Музичні посили також можуть апелювати до почуттів. У західної музичної культури мажор викликає позитивні емоції (досить згадати велику частину поп-музики), а мінорні мелодії сприймаються як сумні і меланхолійні (наприклад, «Love will tear us apart» — Joy Division, «New York, I love you, but you're bringing me down» — LCD Soundsystem). Вибір звукоряду може допомогти надати вашому продукту потрібний настрій.

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

Використовувати архів — менуэтное справа

Архів був створений шляхом запису аналогових і цифрових синтезаторів в Ableton Live. Для його створення були використані вісім музичних інструментів (дзвіночок, гітара, арфа, марімба, фортепіано, свисток, флейта, ксилофон), кілька звукових ефектів (R2D2, Секретні матеріали) та голосу (як чоловічі, так і жіночі).

Кожен музичний інструмент має від 20 до 40 звуків. У різних поєднаннях вони можуть представляти послідовність дій, успіх, помилку, оповіщення, попередження та інші прості інтеракції. В тому числі, я додав кілька прикрашених акордів у разі, якщо ви хочете вдихнути нове життя і додати родзинку у ваш продукт.

Структура папок досить проста: «Коренева папка / Інструмент/ Файл». Імена файлів мають вигляд «инстурмент-концепт-нота-номер.дозвіл». Я рекомендую використовувати для взаємодій різного типу звуки одного і того ж інструмента. Але якщо хочете відірватися, то можете скомбінувати два інструменту і подивитися, що вийде.

Завершуючи на високій ноті

Музика може впливати на те, як ми взаємодіємо з візуальними інтерфейсами. Вона допомагає людям глибше зануритися в історію і перейнятися їй. Добре продумані музичні інтерфейси можуть поліпшити досвід і зробити продукт персоналізованим, але при неправильному використанні звуки відволікають і дратують (пам'ятаєте флеш-сайти 2000х років і жахливі блоги?). Аудіо — це щось дуже особисте, і потрібно проявляти обережність, щоб не переступити межу в процесі комунікації з користувачами.

Я сподіваюся, що створений мною архів допоможе вам отримати багатий досвід і надихне вас на створення приголомшливих продуктів.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.