Considering "Product Sensuality" Through UI Sound

This series will introduce various initiatives by Dentsu Inc. focused on the medium of "sound."

When it comes to communication through sound, telephones and radio likely come to mind first. While television, movies, and games also incorporate audio, many may still perceive it primarily as "supplementary to the visual information."

However, observing recent changes in the information environment reveals that sound's importance is actually growing across all forms of communication.

This time, Yasuhiro Tsuchiya of Dentsu Lab Tokyo explores the relationship between UI (user interface) and sound design from the past to the present.

What sensuality does "UI sound" bring to digital tools? And what is the aim of the "SND" (S-N-D) project, which provides UI sound free of charge?

SND　https://snd.dev/
Provides UI/UX developers with a free pack of 28 sound assets tailored to app and service UIs, along with a JavaScript library. Currently available as the first release: SND01 "sine" by Yasuhiro Tsuchiya of Dentsu Lab Tokyo and SND02 "piano" by musician Ayako Taniguchi.

<Table of Contents>

▼Designing the Relationship Between Computers and Users Through Sound &nbsp;

▼Evolving UI Design Trends and New Experiences with Sound UI　

▼The Sensuality of Interfaces Created by Combining "Sound" and "Touch"&nbsp;

▼Starting with "SND": Sound Design × CX&nbsp;

&nbsp;

Designing the Relationship Between Computers and Users Through Sound

First, let's briefly review the "History of UI and Sound."

For game consoles and TV screens, "audio feedback" was adopted relatively early. In games, it was used to enhance the world-building. For TVs, infrared remote controls had slow response times, so a sound was needed to confirm "the user's input was properly received by the program."

What about website UI? During the heyday of Flash content, which enabled rich web expressions, many web contents adopted "audio feedback." Various sound effects were used: BGM to enhance the content's world, hover sounds to notify users of mouse-over events, click sounds, and more.

However, as smartphone browsing became mainstream, users increasingly used devices with sound muted outdoors. Consequently, audio feedback in web content gradually fell out of favor.

Now, with the proliferation of smart speakers and true wireless earbuds, "sound" is once again gaining attention as a method for interaction between users and computers. Audiobooks, podcasts, and voice-based services like "Clubhouse" and "Twitter Spaces" are also popular.

Sound is also a crucial design domain in VR, where diverse applications are anticipated in the future. Designing UX in VR spaces requires skillfully guiding user attention, as it's impossible to know where they are looking.

Therefore, in high-quality VR content, the UX is meticulously designed using techniques like sound localization (the direction from which sound is heard) and interaction-linked sound effects to prevent users from becoming confused about what to do.

Meta's VR meeting app "Horizon Workrooms" incorporates numerous sound design innovations, such as voices changing their perceived location in space based on the speaker's position.

Reflecting on my own life, the pandemic shifted my work primarily to remote, and I started wearing headphones more often for work.

As a result, I started paying attention to sound design in various services—notices from email and groupware, among others—that I hadn't really noticed before.

Amidst this growing importance of "sound" in daily life, I wanted to rethink how sound designs the relationship between users and computers. This was the impetus for starting the "SND" project.

Evolution of UI Design Trends and New Experiences Through Sound UI

From here, I'll briefly introduce the evolution of UI trends, primarily focusing on visual aspects, while exploring why I'm now paying attention to UI sound.

① "Skeuomorphism" – Mimicking Physical Switches and Buttons

"Skeuomorphism" is a design technique that emerged after the advent of smartphones and tablets. On flat touchscreens lacking physical switches or buttons, the nature of the interface meant that much of the feedback for user interactions had to rely on "visual cues." Consequently, during the early days of smartphone UI design, many designs adopted styles that mimicked physical switches and buttons.

Skeuomorphism originally followed the principle that GUIs (Graphical User Interfaces) should directly represent real-world UI elements. However, as screen resolutions improved, highly intricate designs emerged. The image shows examples of skeuomorphic design in early iOS. The "Notes" app mimicked a real notepad, while "Voice Memos" featured a design resembling an actual microphone.

This phenomenon is similar to the period when candles were replaced by light bulbs, and many "candlestick-shaped light bulb sockets" were produced. It's a design approach based on the idea that during the transition to new technology, using "objects from the previous era that served the same function" as UI motifs can help users understand faster.

② As touch UI became commoditized, the trend shifted toward simple, refined "flat design"

Later, as touch interfaces became sufficiently widespread, the trend in UI design shifted to "flat design." Unlike skeuomorphism, this approach avoids imitating real-world buttons, instead basing designs on "simple colored shapes." You're likely very familiar with this style from your smartphone apps.

Both iOS's Notes and Voice Memos have been flattened, shedding designs that mimicked physical devices. Instead, they use layout and color schemes to indicate operable buttons.

As touch interfaces became widespread, users developed an experiential and intuitive understanding of what constitutes a button even on flat screens.

Thus, by eliminating unnecessary decoration and refining the UI design itself, this style became established. It can be seen as a modernist movement in architecture.

However, flat design is visually flat in the literal sense, and buttons often look very similar. This presented a problem: it could be confusing for users unfamiliar with touch interfaces.

③ The Emergence of "Microinteractions" to Enhance Flat UI with Subtle Animations

Recently, a trend called "micro-interactions" has emerged. This involves adding subtle animations to flat UI to enhance the user's sense of interaction.

For example, when a user presses a button that shouldn't be clickable, the button might vibrate. Or, in a note-taking app, pressing the "+" button in the top-right corner to create a new note might cause that button to expand to cover the entire screen, creating the sensation of a new memo sheet unfolding on a separate layer. These subtle animations make it easier to recognize interactive elements and hierarchical structures, even within flat design.

For example, on Twitter, a circular gauge next to the Tweet button changes based on the number of characters being typed. As the remaining characters decrease, an animation displays a countdown, showing one character at a time. Furthermore, if the 140-character limit is exceeded, the gauge turns red and the Tweet button color fades, clearly indicating to the user that they cannot tweet. Various micro-interactions like these are incorporated.

④ Will "UI Sound" Become Crucial for Future Interactions?

Looking ahead, I personally believe that "UI sound" will become important, following a similar approach to micro-interactions.

Humans traditionally perceive information through multiple senses. When presenting feedback for interactions, we should explore various methods beyond just visual cues, such as utilizing auditory or tactile feedback.

Imagine an elevator. When you press the destination button, a click sound is accompanied by a light turning on. If there were no tactile feedback when pressing the button and no light illuminated, you might worry whether it would actually stop at your floor.

In this way, "receiving some form of feedback from the system when the user interacts" provides a sense of reassurance. This "feedback for interaction" is crucial in UI design.

Regarding tactile feedback, "haptic technology" (technology providing feedback via vibrators, etc.), long used in game controllers, is now increasingly built into many smartphones and utilized as a UI feedback effect.

On the other hand, regarding auditory feedback, since speakers are fundamentally built into virtually every smartphone and device, it would be foolish not to utilize them. Recall the elevator example: when you press the button, hearing a "click" sound along with the tactile sensation of the button provides greater reassurance, doesn't it?

The original iPod featured a physical interface called the click wheel for browsing large music libraries. Rotating the wheel with your finger produced a distinct clicking sound, intuitively conveying file scrolling and menu transitions.

Going forward, I believe it will become increasingly important to design not just visual information and navigation paths, but to combine various senses like hearing and touch. This will lead to designing a pleasant user experience that engages all five senses.

The Sensuality of Interfaces Created by Combining "Sound" and "Touch"

The reason I came to think this way actually stems from becoming obsessed with PC keyboards during remote work, as part of making my home workspace more comfortable.

One common type of keyboard found on many modern laptops is the "membrane-type." This design features a rubber membrane inserted between the keycap (the printed character part) and the circuit board that registers keystrokes. The rubber's rebound creates the sensation of "pressing down" on the key. Because it uses rubber, it produces little sound when pressed, characterized by a "plop-plop" or "squish-squish" feel.

On the other hand, there are keyboards using a "mechanical" switch system. Instead of rubber, a physical switch made of plastic and springs is placed beneath the keycap. Compared to membrane switches, this provides a distinct, solid feel when pressing the key down. Because of this, mechanical switches are often used in keyboards designed for gamers who require precise input detection. When used, they produce a classic "clack-clack" or "click-clack" sound, offering a uniquely satisfying tactile experience.

Mechanical keyboards have numerous switches arranged beneath the keycaps like this. These switches alter the feel and sound when pressing the keys.

The world of PC keyboards is incredibly deep. Significant differences in feel arise from factors like spring tension, friction between plastic parts, lubricant type, and the material of the plate securing the PCB.

The feel boils down to variations in "sound" and "tactile feedback." Even with the same "tactile feedback," changing the plate material or inserting rubber between the PCB and keycap subtly alters the "sound," completely transforming the "feel." It's astonishing how much it changes!

Unintentionally, stepping one foot into the keyboard rabbit hole made me realize the importance of "sound" in UX.

What if the sound of pressing the send button felt incredibly satisfying?
What if notification sounds were pleasant?

Couldn't the relationship between products/services and users become much better than it is now?

Just like fountain pens and notebooks, digital tools—precisely because they're used daily—are increasingly becoming interfaces between users and brands through an indescribable sense of pleasure and comfort. This, I feel, is what shapes brand value.

Whether you find yourself wanting to touch it or keep it close at hand. This is what you might call its "sensuality."

Interfaces that people directly touch, like buttons and knobs, inherently possess a sensuality (≈ affordance) that makes you want to touch them.

Thinking about "UI sound" might help us reclaim the "sensuality" that physical tools possess, within user interfaces that are becoming increasingly symbolic alongside the spread of flat design.

Sound Design × CX: Starting with "SND"

Based on these ideas, Dentsu Inc. CXCC / Dentsu Lab Tokyo launched "SND." Primarily targeting UI/UX designers, this website aims to spark lively discussion about sound design within the interaction design field.

SND　https://snd.dev/
Provides UI/UX developers with a free pack of 28 sound assets tailored to app and service UIs, along with a JavaScript library. Currently available are SND01 "sine" by Yasuhiro Tsuchiya of Dentsu Lab Tokyo and SND02 "piano" by musician Ayako Taniguchi.

&nbsp;We have compiled 28 types of sounds corresponding to various UI elements such as "buttons," "toggle switches," "forms," and "modal windows," and are distributing them free of charge. These sound assets are available under an open-source license, freely usable for both commercial and non-commercial purposes. Even those who don't typically write code can implement "UI sounds" with minimal effort.

SND began as an initiative focused on sound design within the "UI domain"—the digital touchpoints between users and brands within CX. However, sound's potential extends far beyond the UI domain. The importance of sound in commercials, for instance, goes without saying. Effectively designing sound across all customer touchpoints contributes to enhancing brand value.

Consider the sound of a car door closing. The click of a camera shutter. The roar of a motorcycle engine. These sounds not only reinforce the tactile feel of a product but can also become crucial elements of brand identity. Sound design is simultaneously environmental design. When creating sound, we must also consider how it resonates within its environment and how it alters our soundscape.

At Dentsu Lab Tokyo, we research new forms of communication through sound design, including SND. Please feel free to contact us for consultations regarding R&D projects related to sound.
snd-contact@dentsu.co.jp