Interface Desing for Music Education Multimedia

Interface Designing for Music Education Multimedia

Valerie L. Trollinger

University of North Carolina at Greesboro

Music educators wishing to integrate multimedia into their instruction are often not aware of the strong affect the visual presentation of their information has on the presentation of the musical concept(s). Sometimes, the aural information and the visual information may perceptually clash, and provide misinformation that impedes the student’s progress towards the instructional goal of the program. Therefore, the purpose of this paper is to present information developed by graphic designers and researchers that can aid the music educator in developing visual environments that will aid overall learning, not distract, disorient, of misinform the learner. The areas to be discussed include the following:

1. The goals and components of effective multimedia program, interface layout and conventions.

2. Selecting and/or designing the elements that will compose the interface (e.g., backgrounds, colors, graphics, stylistic unity, layout conventions, buttons and hotspots for navigation),

3. Text and format, the use of video clips, animation and sound, the interaction of all these elements within the interface

4. Using storyboarding and rapid prototyping as tools for development

Goals and components of effective multimedia. The goals of multimedia for instructional use are (1) the presentation of a consistent visual learning environment, (2) to provide familiarity and comfort for the learner, and (3) to provide transparency of navigation via the interface layout and form and function. The interface layout refers to the manner in which one arranges the elements (structural, informational, and functional) that not only look good but are easily understandable in how it will function. Structural components include the background, colors, images, windows and panels. Informational components generally include text, video, animations, and sound. Functional components are usually buttons, hotspots, and other navigational devices or stimuli that will result in a response if the image is selected.

Colors, background, and layout. One of the most important fundamental design elements in a multimedia program in the selection and use of color. Research in this area indicates that colors alone will not affect learning, however, colors in combination can enhance or distract from learning (Murch, 1984). Design principles concerning color indicate that (1) related elements of the presentation should be grouped in the same color (2), colors can be used to indicate dynamic changes over time – such as an increasing tempo, (3) the bright colors should be used for special purposes only, and judiciously (4), warm colors will move an image from the background, while cool colors will recede the image (which is why cool colors are better for backgrounds), (5) colors should be consistently used from screen to screen to aid unity of presentation, and (6) the 7+/-2 (miller, 1956) rule applies that too many colors will be too confusing and may obscure the materials the learner should be concentrating on for retention.

Color works with fonts and images to unify the style of the presentation of the material. Styles of the screens affect the perception of the materials, and are generally influenced by societal standards, likes and dislikes. Of primary importance to keep in mind is that the content of the program will define what the style of the presentation. To define a style, the following steps are suggested (Kristof & Satran, 1995): (1) first, identify the single most powerful impression that is produced by the content, (2) develop a theme that applies not only to the images but to all the elements of the multimedia experience, and (3) use this theme to lead to the unity in design. If it is too difficult to identify the single most powerful impression, that may indicate that the particular program may be focusing on too many things and should be broken down into separate smaller programs or components.

Based on research concerned with visual perception, Bateman (2000) and Wright, Wooley & Wooley (2001) suggest the following layout conventions should be considered in developing screens for multimedia (1) that users generally scan from top to bottom and left to right, (2) that users assume that items over other items (e.g., something at the top of the screen has more importance over items below, (3) users generally perceive larger items as being more significant, and (4) users look for ‘more to com’ signals (navigational, etc) at the bottom center or right of the screen. Since many of these conventions are integral to the development of an understandable navigation of the interface, consideration must be given especially to the placement of the buttons and hotspots. Presentation of these navigational cues in a consistent manner of placement should be carefully though – out, with other considerations given to color size, and sounds of the buttons/hotspots, the indication of the button/hotspot’s function should be obvious (e.g., use of a drawer or door), and especially concerns for cultural meanings and metaphorical use of these navigational devices should be addressed (e.g., traffic signs and signals).

Images and graphics. Images and graphics in instruction aid instruction as well as distract from it. Any images used in instruction should be connected directly to the target learners, their learning tasks, and the content to be learned. Images and graphics are not necessary when text or sounds will provide enough information, in which case they may be more of a distraction rather than an aid. Any images used are to be relevant to the accompanying sound and text, and the learner needs cues on how to process the image in relationship to the learning. Use of attention – getting images should be used judiciously, as again, they may be more of a distraction rather than an aid to instruction.

Text and format. Text that is presented on a screen should visually balance any graphics that are presented. Text should also not be squished up against one side of the screen all the time. In addition, serifed fonts (e.g., Palatino) are better for reading blocks of text, while sans – serifed fonts(e.g., Bold Ariel) are better for titles and navigational information.

Video, animation and sound. Video clips are best used to illustrate skills or further flesh – out a concept ( e.g., Salzedo technique in harp). They should always be used judiciously, and the learner should be directed on how to process the information on the video. Animations are especially beneficial for young children in that animated characters can be an aid in program navigation, can provide a simple exemplar of how to do a particular task in the program (such as tapping a space bar to a beat) and a reinforcement. Sound in music education primarily refers to the presentation of music, and in this area music educators must be especially aware than over – stimulating visual presentation on the screen at the same time music is being played (with the music as the most important emphasis) may instead detract from the music. In addition, the sound used should be as real as possible and within context, not contrived (e.g., a violin should sound like a violin, not lie an obviously computerized sine wave).

Putting it all together. When putting the program together at a preliminary level, several steps should be taken to insure that the program will work when it reaches further stages of development, hence the developer need not spend a lot of time fixing the program after it has been fully designed. The first step to take is to design, using paper and pencil if necessary, the basic format of the screens. The following are design hints to take into consideration when developing the screens: (1) distinct images presented on the splash screen should also be incorporated (usually in a smaller size) on the topic screens, (2) Colors and backgrounds should be consistent between screens (3) hierarchal presentation of material (e.g., topic and then subtopics) are best for navigational purposes and also for understanding overall program relationships, (4) keep navigational information and placement of buttons, icons, etc, consistent in placement on screens.

The second step to take is to storyboard all the screens, which generally reveals navigational strengths or weaknesses and can also show inconsistencies. After the program is storyboarded, then rapid prototyping may be employed. Rapid prototyping refers to the actual creation of a program in a very stripped down version (using placeholders instead of text, graphics, etc) that will reveal programming bugs and inconsistencies in navigation at the beginning. Rapid prototypes can also be used by target audiences to see if the program works is understandable to them at a basic level of function. From this point on, beta programs and the final program can be developed.

Although this paper presents simple information concerned with basic interface design, the reader of this paper needs to know that there are many other considerations that need to be taken into consideration when designing and developing a multimedia program for instruction. It is hoped that further investigation into this area in relationship to music education will aid music educators in efficient development of education multimedia for the classroom.