8

SND: Crafted UI sound assets for UX developers

 2 years ago
source link: https://snd.dev/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

ABOUT 

With the spread of smart speakers and wireless earphones, the importance of sound in interaction design is increasing day by day. However, compared to many researches and practices in the fields of visual design and animation in interaction design, it seems that not enough knowledge has been shared about interaction design with sound, except in some fields such as games.

Interaction should not be limited to text and visuals, but should be richer than that. In order to make the intensity of interaction richer and stronger, we should have more discussion about sound.

However, in the area of interaction design, there are fewer sound designers than visual designers and programmers, and there are certainly barriers to creating sound.

To encourage UX developers to further explore discussions in the area of interaction design with sound, we have developed UI sound assets that can be used for free without worrying about licensing.

UI sound assets, developed in collaboration with multiple sound designers, are designed to fit the components used in many modern UIs. Each asset is individually designed with a different concept, so you can feel the change in texture and tone by switching the sounds.

We hope that you will use it as a resource to further refine the quality of UX for your apps, services, and products under development, and that it will help you to explore the field of sound design.

All UI sounds published on "SND" can be used for free, regardless of whether they are commercial or non-commercial. Therefore, you can use them not only for prototyping, but also for implementation in your services. *Please check the terms of use for details.

土屋泰洋

The simple sound kit for designing a variety of interactions. All sounds are designed based on sine waves; the smallest pure element of sound. It is designed to be as simple as possible with a small file size, focusing on a frequency range that can be reproduced even by speakers with relatively low playback capabilities, so it can be used in a variety of situations such as web, applications, and digital signage.

Yasuhiro Tsuchiya, Sound Designer / Researcher

All sounds are played with a Steinway grand piano. Not only by usual techniques, but also experimental techniques such as hammering and scratching surface. Simple but with rich lustrous sound asset that only live instruments can provide.

Ayako Taniguchi, Musician

The sound assets available on this site are audio files, and are intended to be loaded and used as needed in various development environments. However, in order to make it easier to use these assets, especially for websites and JavaScript-based application, we have developed a JavaScript library that makes it easy to implement the SND sound library with a few lines of codes.
Github

Simply add a line to your html and add a class to the html element you want to assign the sound to, the sound will be automatically added. You can switch the sound assets to be assigned by changing the number of kit=## paramter behind the js library name loaded.
Demo

HTML + CSS

<html>
	<head>
		<!-- Load JavaScript file from CDN -->
		<script src='https://cdn.jsdelivr.net/gh/snd-lib/[email protected]/dist/browser/snd.js?kit=01'></script>
	</head>
	<body>
		<!-- Button sound on click -->
		<a href='https://github.com/' class='snd__button'>Link</a>
		<!-- Type sound on keydown -->
		<input type='text' class='snd__type' />
		<!-- Celebration sound on click -->
		<input type='submit' class='snd__celebration' value='Submit' />
	</body>
</html>

If you want to assign sounds more finely, you can specify the events in JavaScript. Install the library via npm and create an instance of the snd class. *In this library, browser audio is enabled by monitoring the first pointer event inside the class and playing a silent sound.
Demo

$ npm install snd-lib

JavaScript

import Snd from 'snd-lib';

const snd = new Snd();

// Get all anchor elements.
const links = document.getElementsByTagName('a');

// Event handler for click
const onClick = (e) => {
	snd.play(Snd.SOUNDS.TAP);
}

// Load audio file
snd.load(Snd.KITS.SND01).then(() => {
	// Listen click event of all anchor elements.
	for (let i=0; i<links.length; i++) {
		links[i].addEventListener('click', onClick)
	}
})

This is a playground for testing the behavior of each sound. By tinkering with the each pseudo UI elements with sound assigned, you can feel the tactile changes caused by the sounds. The sound assets can be switched in the menu at the bottom of the screen.

  • Unlike Tap sound, this sound is played to clearly indicate to the user that they have pressed a UI element that performs a specific function, such as a button. In combination with visual effects, it can provide the user the feeling that they have definitely pressed a specific button.

  • This sound is played when you press a disabled button. The sound is not as strong as the Caution sound described below. The sound is simply to indicate that the button itself is invalid.

  • This sound is played when a UI that clearly indicates two states, "ON" and "OFF", such as a toggle switch, is activated. The sound is designed to correspond to the ON and OFF states, from low to high when it is ON, and from high to low when it is OFF. By properly assigning the ON and OFF sounds, it enables users to clearly notice the toggle switch has enabled or disabled some function.

  • This sound is played to indicate to the user that the program recognized the user's action such as tapping or clicking on the screen.Since program would play the sound frequently, we have prepared five different sounds with the same tone but slightly different sound. By randomly playing these sound for each user action, it enables interface to reduce the discomfort of hearing the same sound repeatedly.This sound is only for the purpose of making the user "feel responsive". For UI elements that have certain functions assigned such as buttons, be sure to assign appropriate sound from the following sound assets.

  • This sound is played when a user swipes or presses the pager button to make a horizontal-transition. Since program would play the sound frequently, we have prepared five different sounds with the same tone but slightly different sound. By randomly playing these sound for each user action, it enables interface to reduce the discomfort of hearing the same sound repeatedly.

  • This sound is played when a specific UI element is selected such as a checkbox, radio button, choice chip, or input form. In combination with visual effects, it can be used to create a responsive feeling to the user that they have definitely selected a specific element.

  • Unlike Swipe sound which is for horizontal-transition within the same hierarchy, this is a sound is played when a hierarchical-transition is made by a modal window, etc., As with Toggle sounds, there are OPEN and CLOSE sounds. By assigning them appropriately to modal opening and closing, hierarchical transitions can be notified to the user properly.

  • This sound is played to clearly indicate that some task is being processed, such as loading, dragging, etc. It is designed to be played in a loop while the task is running. After the task is completed, it is a nice to play a sound to indicate that the work has been completed according to the type of task. However, if the processing time is expected to be very long, or if the processing occurs frequently, the sound will be played all the time, so consider carefully which task to assign the sound to.

  • This sound is played to provide feedback to the user when typing text. For the sound to be played repeatedly during keystrokes, we have prepared five different sounds with the same tone but slightly different. By randomly playing these sound for each user input, it enables to reduce the discomfort of hearing the same sound repeatedly.

  • Notification sound. This sound is played to alert the user when there is some kind of notification from the app.

  • A caution sound. This sound is played to indicate to the user that something is wrong, has a slightly more negative sound than Notification.

  • Check me all.

    This is a sound to celebrate the moment when user have achieved the biggest goal of each application. For example, when user send an email in an email app, or when user has checked the last task in a task management app. It creates a climax in the app's UX.

  • This is the sound with the highest level of alert compared to Notification and Caution. It is designed to be played in a loop until the user takes action. It is intended to be used as a ringing sound or alarm sound.

Dentsu Customer Experience Creative Center conducts research and development on sound for better user experience, please feel free to contact us for UI sound development requests, consultations on sound-related projects, requests for lectures, and requests for interviews.

DENTSU INC.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK