audio ia information architecture for sound: integrating sound design into an interaction design...

Audio IAInformation Architecture for Sound:

Integrating sound design into an interaction design process

Millicent CooleyFebruary 24, 2004

(draft)

IntroductionThe purpose of this document is to describe an approach for integrating sound design, including voice and non-voice product sounds, into an interaction design process. This does not offer guidance in what the content of sounds should be. Instead, it focuses on a way to integrate them into the overall product design strategy and to make it easier for teams, including clients and non-designers, to evaluate their development.

Premises:– Prototyping and design process methods for interaction design are further

evolved for visual media than for sound media. – Commonly used approaches for rapid prototyping, including use of artifacts

such as site maps and wire frames, can be adapted for sound design.– Sound designs should be developed in conjunction with the design of all

other media. The content in audio and visual media impact each other greatly in setting the stage for various impressions and perceptions, and need to be evaluated conjointly.

Audio IA: What is Audio IA?

Approach: Design Planning

The design strategy for sounds should address the informational and emotional impacts of sounds. Diagrams and written design rules show how the strategy will be carried out. The rules describe the design language and the diagrams, analogous to artifacts such as site maps and wire frames, make it possible to see how those rules are reflected in the actual design.

Diagrams for sounds may be annotated, as wire frames and site maps are. The diagrams contain sounds and are interactive. One type of diagram discussed here is a Sound Map.

Diagrams such as a Sound Map give team members, including non-designers and clients, an accessible vehicle around which to explore, communicate and evaluate ideas and concerns, as the design evolves.


Software

Diagrams and images made in Visio, Photoshop, Illustrator or other related applications are placed into one of the following types of software, in order to apply audio and to make them interactive.

– Excel: Excel cells can display playable animation and audio files, in addition to graphics files. The row/column format allows you to catalog written information about each media element, sort and organize. Excel may be most useful when large numbers of elements are involved.

– Power Point: Power Point is better than Excel for showing full images. Prototypes are unsophisticated in appearance and use, but very quick and easy to make and revise. Because this application is part of the MS Office Suite (as is Excel), it is readily available on the desktop machines in office environments.

– Director and Flash: Prototypes may take longer to produce than prototypes in Power Point, but interaction capabilities are much more refined.


Example: Xyz Company Internet Applications

Xyz Company, a major internet provider, planned to design and develop a suite of web applications, including email, instant messenger, connection manager, custom browser, and media player. The client wanted sounds designed for the applications that would reinforce the visual design, convey a common look and feel across all the individual applications, reinforce the brand and distinguish these applications from other desktop software and websites, and would aid usability in providing information about active functions.

Three types of documents were used for developing sounds:– Description of goals that will drive the design of individual sounds– Interactive sound map– Interactive wire frames and screen designs

Audio IA: Design Process and Artifacts

Xyz Company Internet Applications : Design Goals• Reinforce the experience that users are communicating in a

networked environment, which is a key offering of these applications.

• Reinforce the object metaphor of the visual design.

• Apply restraint in limiting the total number of functions with sound, and in keeping sound volumes low, in order to avoid user irritation with sounds.


Approach: Functional Sound Groupings

A design language for sounds is defined by creating a conceptual framework consisting of a list of the functions that will be given sounds, and organizing those functions into groups and related subgroups. Audio characteristics are assigned that make those groupings recognizable. The premise is that making these groupings recognizable through sounds will help users learn and recognize functions. Major functional sound groups in the this project:

– Tactile sounds: Contact with on-screen ‘objects’. Non-musical sounds support the object metaphor in the visual design in a literal manner.

– Communication: Person to person. Musical sounds are designed to play off of each other as a musical whole rather than just as a set of individual musical sounds. A goal is to create the experience of random harmony.

– System and information alerts: System to person. Non-melodic tonal sounds are simple and somewhat emotive or gestural in nature.


Sound Map


Mousedown: hardware

Mousedown: software

Docking

Undocking

Hardware panel moves

Menu opens

Norgie (folder list)

Tab Shift

Tab focus

Rollover

Message in: email

Message in: IM

Friend arrives online

Invite: calendar event

Task fail

Task succeed

Alert: positive

Alert: negative

Groups and subgroups

of functions/action

Connection

Manager

Sounds: versions

1 2 3 Browser Email

Instant

Messenger

Media

Player

The sound map shows the big picture for the sound plan, including the overall pattern and the relationship of the individual parts to the whole.

Subgroupings within major categories are clustered in the list; their sounds should seem related to each other.

Click on red squares to hear the sound for that function. You can compare versions; in this example, version 3 sounds were chosen for final use.

Column headings on the right indicate individual products in the set. Cells highlighted in yellow indicate when the sound/function may occur in that product.

Tactile: Contact with image/objects

Communication: Person to person

Alerts: System to person

Sounds designed by Craig Nogescu (FrogDesign)

x

x

x

x

x

x

x

x

x

x

x x

x

x

x

x

x

x

x

x

x

x

x

x x x x

x

x

Wireframes with Sound

Sound design iterations can be considered while functional design plans are being developed at the wireframe stage.

The wireframe annotation on the bottom right explains what happens if the user clicks the Sign In button without first entering a password. Click the Sign In button on the drawing to activate the sound.

The three sound versions for the Task Fail sound shown on the Sound Map can also be evaluated here.


prodigyHelpSettingsManage Member IDs

N

Click an Icon to Sign In

Member ID

Password

Location

[email protected]

*******

Home - DSL

Save my password on this computer

This pulldown will list all IDs in the same order in which they are listed in the left-hand pane, plus 'Add a Member ID' as the last item.

The ID selected here and the one selected in the left-hand pane always match. If the user changes one, the other updates to match.

When the Password field is filled, the characters are masked (shown as *).

Guest Sign In

Sign InStatus: Connected with Prodigy DSLDownload Speed: 386 K B per second

To Switch to another ID, click ID at left

A

C

J

memberID1

memberID3

memberID4

Guest

NmemberID2

Hide Icons

Not Signed In

Please enter a password and try again.

Error

If the Sign In button is pressed when the password field is empty, play Task Failed sound and show error message, below.

Wireframe drawing by Kirsten Miller, Information Architect

1 2 3

Screen Designs with Sound


Visual screen designs and interactive prototypes also include the sounds.

Click on the lower right corner of the docked media player to hear what it sounds like when it pops out of the console to appear as a free-standing application, then click on it again to pop it back in place.

Visual screen designs by FrogDesign

Audio IA: Adaptation to new project types

This approach may be extended to apply to additional types of design projects. For example, in the design of kitchen appliances, it would be useful to see an interactive sound diagram of an entire kitchen floor plan, containing each appliance with the sounds it will produce. This view would be helpful in grasping a holistic vision of how all sounds will be experienced in the kitchen environment.

In the design of wayfinding systems, such as an accessibility path for mobility impaired pedestrians in an airport, the sound diagram that provides the big-picture view would show the layout of the airport.