2. Audio IA Information Architecture for Sound: Integrating sound design into an interaction design process Millicent Cooley February 24, 2004 (draft)

3. Introduction The 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?

4. 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. Audio IA: What is Audio IA?

5. 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. Audio IA: What is Audio IA?

6. 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

7. 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. Audio IA: Design Process and Artifacts

8. 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. Audio IA: Design Process and Artifacts

9. Sound Map Audio IA: Design Process and Artifacts 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 BrowserEmail 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 xx x x x x x x x x x x x xxxx x x

10. 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. Audio IA: Design Process and Artifacts 1 2 3

11. Screen Designs with Sound Audio IA: Design Process and Artifacts 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

12. Screen Designs with Sound Audio IA: Design Process and Artifacts 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

13. 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.