Design Template by Anonymous

Icons and Earcons

Skeuomorphism

Before getting into the direct application of audio in web design, we need to talk about the concept of skeuomorphism. Put simply, skeuomorphism is the idea that a digital object's design will include features which directly imitate the real-life counterparts they represent, despite there being no necessity or little purpose for its function. This can come in the form of an object's appearance or even the way in which a user interacts with an interface element, and is seen all over the digital world.

Some common and near universal examples of visual skeuomorphism include an operating system's icon for the trash or recycling bin or a digital audio interface plugin such as a compressor or EQ looking like how they would in real life. You may also be familiar with the old Apple Notes app design featuring college ruled lines and an aged yellow paper texture just like a real notepad might.

The old Apple Notes app icon greatly resebmles a real notepad.

The benefits of skeuomorphic designs is that they draw upon a user's past experiences in the real world, communicating quickly and effectively a digital object's purpose or use instructions even if one has little prior knowledge of a site's features. Generally, skeuomorphic features are intuitive to a wide audience and easily understandable.

Audio Icons

Just like with visual style, the concept of skeuomorphism can readily be applied to the world of audio design. This often comes in the form of short sound bites that are linked to a particular digital event or action. When these sounds are skeuomorphic, they are called audio icons. An example of this could be a metallic lock clicking sound (perhaps with an associated lock icon) which plays when a digital action which increases security is performed. Actions like locking the contents of a password protected document, confirming private settings, or your phone as it closes could be accompanied by an audio icon.

An audio icon which could be used during a digital locking feature.

Another great example of this is your computer's trash/recycling bin, as discussed before. Not only is it skeuomorphic in appearance, but often with audio as well, as a crumpled paper sound plays to confirm aurally that its contents have been discarded.

The audio icon of erasing files from a computer's trash which compliments its visual design.

Audio icons help develop the natural auditory associations our brains make by ascribing familiar sounds to digital interactions and deliver the user feedback by representing these sound interactions.

Earcons

Much like audio icons, earcons are also short, structured sounds used to indicate digital events or actions. The primary difference between the two is the relationship of the sound to the associated action. While audio icons aim to replicate the real-world sound that one would naturally associate with an event, earcons are abstract sounds that otherwise have no direct relationship to the actions they represent. Often these are synthesized sounds and tones, and are created to reinforce the interaction and offer a sense of resolution.

If you were designing an earcon for the same locking feature, such as an action that locks the contents of a password protected document, you have a much broader range of possibilities. An example of a suitable earcon here might be a synthesized tapping bloop. Depending on the aesthetic of the site being designed, it might be more appropriate for a more upbeat styled sound to be used, such as a pleasant ring. Earcons are particularly great at conveying the personality and emotion of a site or product

An example of an earcon, potentially which could be used for our locking feature.

A less serious, more fun earcon might be more appropriate for some sites.

In addition to providing instructional feedback, earcons are also helpful in amplifying key moments, celebrating specific actions, and increasing the emotional impact of interacting with a site.

Key Takeaways

In web design, both audio icons and earcons serve to quickly transmit information that compliments the sometimes uncertain interactions within a digital space.
Receiving auditory feedback, especially those which are already familiar, makes a user feel more confident when using a site's various features and significantly aids in increasing the engagement and immersion of its content.