Зміст
- Перегляньте це відео, яке супроводжує підручник ...
- 01. Чи потрібно це?
- 02. Навколишнє середовище
- 03. Це дратує?
- 04. Виступ
- 05. Контекст та ідентичність
- Кода
Звук в Інтернеті. Я знаю. Історично склалося, що ці дві речі склалися не дуже добре. Більшість з нас обпеклися під час відвідування сайту, автор якого вважав, швидше за все, як попередню думку, що фонове жахливе електро-джаз буде чудовим способом покращити настрій. На щастя, це не повинно бути так. Ми можемо робити інакше.
Коли люди говорять про власні та веб-програми, звук ніколи не згадується. Проте саме цей елемент допомагає користувальницькому інтерфейсу багатьох власних додатків перевершувати свої веб-аналоги. Візьміть, наприклад, додаток камери на телефоні. Як ми знаємо, коли було зроблено фото? Швидше за все, ви побачите на екрані якийсь спалах, який вказує на те, що зображення було зроблено, але воно, як правило, підкріплюється звуком емульованого механічного клацання затвора камери. А як щодо відомого управління Twitter "потягніть, щоб оновити"? Чи було б це так само приємно, якби у нього не було того маленького «попса», коли ви відпускаєте?
Перегляньте це відео, яке супроводжує підручник ...
То навіщо думати про це зараз? Що змінилося? Ну, з одного боку, нам більше не потрібно покладатися на Flash. З приходом аудіо> тегом, і все більше і більше браузерів, що реалізують API веб-аудіо, ми можемо створювати власний звук у браузері з нульовим запізненням і з більшим контролем, ніж у нас коли-небудь раніше. Нам навіть не потрібно використовувати аудіофайли, якщо ми цього не хочемо. API веб-аудіо дозволяє нам створювати звук на клієнті, подібно до того, як ми робимо це, створюючи зображення з нуля, малюючи в полотно елемент, але про це пізніше.
Скажімо, ми хочемо повідомити користувача, коли завантаження його фотографії на наш веб-сайт завершиться. Можливо, ми захочемо надати звуковий відгук, відтворивши звук. Незважаючи на те, що це технічно досить просто впровадити, це може зашкодити користувацькому досвіду, якщо воно не буде продумано належним чином. Для того, щоб надати деякі вказівки, я створив перелік з п’яти важливих речей, які слід враховувати при передачі звуку у свій веб-додаток.
01. Чи потрібно це?
Немає необхідності виконувати та вимикати для кожного наведеного посилання або кожного переходу CSS. Дія чи результат повинні супроводжуватися звуком лише у тому випадку, якщо це значно посилює або уточнює важливе повідомлення для користувача. Повідомляючи користувача про щось, що вимагає його уваги? Ймовірно. Клацання на посилання? Точно ні.
02. Навколишнє середовище
Можливо, однією з причин того, що рідні мобільні додатки набагато більше сприймають звук, є те, що стає необхідним надати додатковий зворотний зв'язок в середовищі, яке, швидше за все, буде галасливим та наповненим візуальними відволікаючими факторами. Ваша веб-програма частіше використовується в дорозі або в тихому офісі, де такі звуки можуть відволікати інших? Якщо ви плануєте додати аудіо для покращення мобільного досвіду, враховуйте висоту звуку. Наприклад, басисті звуки не пробиватимуть фоновий шум, ускладнюючи його почуття.
03. Це дратує?
Аудіо має додатковий тягар потенційно надзвичайно дратує. Іноді це сам звук, інший раз - до його повторення. Іноді це і те, і інше (слухайте нещодавній свисток сповіщень Samsung) На щастя, ми можемо зменшити ймовірність цього, виконавши кілька дій:
- Зробіть звук коротким. Менше секунди бажано, а пів секунди - навіть краще.
- Переконайтесь, що ноти, що складають ваш звук, гармонійні, а тембр - приємний.
- Повторюйте звук лише за крайньої необхідності.
Що стосується повторення, програми для чату, такі як ті, що є частиною Facebook та Google+, використовують звук для сповіщення користувача про те, що хтось надіслав їм повідомлення. Це має сенс, якщо користувач відкрив Facebook на іншій вкладці, ніж та, на якій він працює зараз, оскільки це чіткий показник того, що щось, що вимагає уваги, чекає. Однак якщо вони зараз відповідають на згаданий чат, яку користь приносить сповіщення?
04. Виступ
Залежно від того, скільки часу це триває, фрагмент аудіо може мати розмір файлу більше, ніж більшість зображень на вашій сторінці. На щастя, це не вплине ні на що візуально або заблокує будь-яку функціональність. Отже, замість того, щоб завантажувати аудіофайли разом із вашим HTML та зображеннями, розгляньте можливість завантаження його у фоновому режимі після завантаження сторінки, поки користувач із задоволенням взаємодіє з вашою сторінкою.
А ще краще, розгляньте можливість використання Web Audio API, де це можливо. API веб-аудіо - це високорівневий спосіб керувати звуком у браузері за допомогою JavaScript. Хоча він наразі реалізований не у всіх основних браузерах, безумовно, варто подумати про те, щоб використовувати його разом із аудіоелементом як резервний. API дозволяє створювати звук у браузері з нуля, не використовуючи вже існуючі аудіофайли. Незважаючи на те, що входи та виходи виходять за рамки цієї статті, ви можете побачити, як я створив success-demo.html звук сповіщення (доступний для завантаження у файлах навчальних посібників) у JavaScript, якщо ви використовуєте Chrome, Safari або Firefox.
05. Контекст та ідентичність
Аудіо, створене для покращення взаємодії з користувачем веселого веб-сайту, призначеного для дітей, не підходить для фінансової веб-програми. Уявіть собі настрій людини, яка користується вашим додатком, і переконайтеся, що ви правильно підбираєте свій тон.
Звук також може стати невід'ємною частиною бренду, як і його візуальна ідентичність. Звук запуску Mac, мелодія дзвінка Nokia та звуковий сигнал Intel Inside - це приклади, коли, якби ми чули ці звуки поза контекстом, ми все одно знали б задіяні компанії. Незважаючи на те, що при кожній нагоді не потрібно штовхати свій унікальний мотив по вушних каналах користувача, розгляньте можливість створення набору звуків, що відображає візуальну ідентичність вашого сайту. Facebook нещодавно зробив цю ідею на крок далі; звук вхідного дзвінка складається з чотирьох музичних нот: F, A, C та E.
Кода
Якщо все зробити добре, аудіо може покращити і збагатити навіть найтупішіші веб-програми. Забудьте про фонову музику автовідтворення, зосередьтеся на тому, як це може покращити загальний досвід і насолоду від вашого сайту. Слід визнати, що це не завжди буде доречно. Окрім досади своїм користувачам, ви повинні стежити за тим, щоб дошкуляти тим, хто фізично знаходиться поруч з вашим користувачем. Пам'ятає користувач iPhone, який не вимкнув звук клавіатури на екрані. Додавання звуку слід робити обережно, легким дотиком.
Тепер, коли API веб-аудіо підтримується в Chrome, Safari, Firefox та Opera, ми тепер маємо повний контроль над звуком без завантаження вагомих активів. Також не слід ігнорувати потужність API. Динамічне застосування звукових ефектів, таких як реверберація або перехресне згасання двох окремих музичних композицій, перетворює поточні можливості ігор HTML5, роблячи весь досвід набагато захоплюючим. Ви навіть можете створювати музичні інструменти в браузерах, які кидають виклик їхнім рідним конкурентам. Але, я б сказав, що. Подивіться мою ударну машину, виготовлену за допомогою Web Audio API.
Звуки можуть бути настільки ж ефективними для надання відгуку вашим користувачам, як і будь-яка візуальна реплика. Прийшов час, коли ми це ставимо до того, що нам прищепили досвід настороженості.
Слова: Стюарт Мемо
Ця стаття спочатку з’явилась у випуску 250 журналу net.
