1

Running Head: INSTRUCTIONAL MESSAGE DESIGN

Standards and Projects in

Instructional Message Design

Tammi Palmer Gearhart

Boise State University

1

INSTRUCTIONAL MESSAGE DESIGN

Abstract

Effective visual design plays a major role in successful learning. It has the ability to reduce cognitive load, activate prior knowledge, and promote near and far transfer. If not handled correctly, it can even reduce learning (Clark & Lyons, 2004).

Standards that have been set by the Association for Educational Communications and Technology, and the Mission and Vision of the Boise State University’s Department of Educational Technology have been an integral part of the design and principles used to create the images that are discussed in the following projects and lessons.

The lessons cover Attention Visual, Memory Load and Far Transfer Visual, Mental Models and Near Transfer, Visualizing Procedures, Visualizing Facts, and Visualizing Concepts. Each lesson discusses the visual context, explains how the graphic was visualized, the instructional design model used to create the graphic, and the revisions that were made to the image. Included are links for a lesson plan and visual context for each project.

While having an understanding of the different elements involved in instructional design and in learning theories are important parts of success, it is when we combine all of the elements, together with an understanding of the context in which the lessons will be used, and have a willingness to receive input from others and revise, that our products will be truly effective.

Effective visual design plays a major role in successful learning. According to Clark and Lyons (2004), it has the ability to reduce cognitive load and activate prior knowledge. If not handled correctly, it can even reduce learning. Standards have been created by AECT (Association for Educational Communications and Technology) that help guide the creator in covering multiple facets of the images. By combining the standards with a definition of the visual context, following the instructional design model, applying learning theories and basic theories on visual design, and gathering feedback from users, graphics can significantly increase the effectiveness of a lesson.

AECT Standards and College Mission

Understanding the standards on which the designs of these projects were based provides a framework for the purpose of the graphic and the choices that were made in their design. The AECT has standards that cover the areas of design, development, and utilization that are pertinent to the following projects. While on one level, all of the standards apply to the projects; some of the subdomains help explain a closer correlation between the standards and the projects. It is the subdomains with the close correlations that are included in the following discussion.

Under Design, 1.1 Instructional Systems Design, the description reads, “Instructional Systems Design (ISD) is an organized procedure that includes the steps of analyzing, designing, developing, implementing, and evaluating instruction” (AECT, 2000, p. 20). These steps were taken with each project as we started with working through the visual context to thoroughly think through the goal, student population, and limitations that would be a part of the learning environment. As we used Fireworks to design and develop the product, we performed self-evaluations were performed based on the focus for each particular project. In addition to the self-evaluation, peer-evaluations and receiving instructor feedback were the basis of revisions. Subdomain 1.2, states, “Message design involves planning for the manipulation of the physical form of the message” (AECT, 2000, p. 20). This causes the designer to know the purpose of the image and the learning theories that relate to that particular goal. As the focus of each project changed, a different approach needed to be taken to help visualize the image. These are based on learning theories that deal with topics such as reducing cognitive load, promoting far and near transfer, and activating prior knowledge.

Under Standard 2 Development, subdomains 2.2 Audiovisual Technologies, and 2.4 Integrated Technologies, were applied consistently. Subdomain 2.2 states, “Audiovisual technologies are ways to produce or deliver materials by using mechanical devices or electronic machines to present auditory and visual messages” (AECT, 2000, p. 23). Although not all projects had an audio component, many did as a way to reduce cognitive load.

The goal of 2.4 Integrated Technologies is to “produce and deliver materials which encompass several forms of media under the control of the computer” (AECT, 2000, p. 23). By adding the audio and the controls, the user was able to play, pause, rewind, or stop the audio, providing a higher level of control and interaction when compared to just a visual.

Standard 3 discusses utilization. “Utilization is the act of using processes and resources for learning” (AECT, 2000, p. 23). While there has not been an opportunity to teach the following lessons, there was much thought that went into defining the learning context for each graphic. Working through the visual context document for each lesson refined and focused the understanding of the needs of the students and the implications of those needs.

These standards work in conjunction with the Mission and Vision Statement of the College by encouraging high standards of performance and professional development. The self-evaluation and peer evaluation provided opportunities to reflect and gain an increased understanding of the principles and practices being taught. By considering the needs of all students while creating the lesson plans and defining the visual context, a more flexible approach to teaching was developed that helps all students to be successful in learning.

In gaining a stronger understanding of artistic principles and guidelines, by developing a strong working knowledge of software that is an industry standard, and by being familiar with national standards as a guide in creating the following projects, I have grown in my ability to be a leader and innovator in the field of Educational Technology. That progressions is demonstrated in the following projects.

Attention Visual – Three Ways to Save a File

Defining the Visual Context

The “Three Ways to Save a File” visual is intended for use with second graders in a 45-minute lesson. Significant characteristics include reading skills that are still developing and the need for a high level of simplicity in explanations. Making concepts as concrete as possible is an important component of teaching this age group.

The location of these classes is a suburban school district outside of Harrisburg, Pennsylvania, with class sizes ranging between 18 and 25. This setting creates a sense of safety, with most students arriving ready to learn. The majority of students are Caucasian, with a minority of African-American, Asian, and Hispanic students. Most are English speakers, but approximately five to ten percent of the students are English Language Learners. There is a mix of socio-economic levels, but most students come from middle-class homes. Despite some students coming from low-income homes, anecdotal evidence indicates that almost all students have computers with Internet connectivity at home. This creates background knowledge that allows for a high comfort level with the MacBook laptops that are used at the schools.

In every class, there will be students with some form of disability. Individualized Education Plans (IEP’s) are provided for students who have been identified with a need, with accommodations outlined in the IEP. Currently, there is only one student who requires an amplification device due to hearing loss.

These lessons will be used in seven different classrooms, in three different buildings. The buildings range in age from 10 years to over 50 years old, with significant differences in construction, building materials, and resources. The things that are consistent between classrooms and buildings include a blackboard or smartboard at the front of the room, the teacher’s desk located either at the front or to the side, and students’ desks arranged at the discretion of the classroom teacher. Other tables or learning areas can often be found along the side or the back of the room.

While many classrooms are equipped with smartboards, some are not and require the use of a projector on a cart. Sometimes this requires time to rearrange the students’ desks in order to position the projector.

The lighting in the room is fluorescent and is on at the beginning of the class, but as the lesson progresses and the projector or the smartboard is used, one or all of the lights are turned off.

The furthest that someone will be sitting from the material being presented is approximately 20 feet.

While the material will be presented as part of an instructor-led session, learning aids will also be provided. The student version of the learning aid needs to be limited to no larger than five inches by six inches because of the amount of space that is available on the desks. The desks are two feet wide by two and a half feet long, and the laptops take up a little more than a foot in length. Consequently, if the laptop is centered on the desk, there are approximately six inches left on either side for additional material. A poster will also be created, and will be 18” by 24” inches, printed in color and laminated.

The laptop resolution setting is 1280 x 800, millions of colors. The projection devices require a resolution of 1024 x 768. The original canvas of this image was 1,000 x 800 pixels. Vector-based clipart, along with text and shapes generated by Fireworks, make up the image. It was exported in a .GIF format with 256 colors. Consequently, the image should appear clearly on both the laptop and when projected at the front of the room. The learning aid and poster will be produced by importing the .GIF file into a Word document and resized to fit accordingly.

The Internet connection is a broadband connection, although there are certain times of the day when the network is slow. This image is simple enough that it should load without taking much in terms of network resources.

Since this district participates in the government’s e-rate program, there is a firewall. This will mean that the web site needs to be tested on a student laptop prior to the class. If the web site is blocked, it is possible to submit a request to have it unblocked, but this can take up to a day.

Visualizing the Graphic

In this image, there are three sets of boxes; the top and bottom rows are green, while the middle row of boxes is yellow. In the first green box, it says, “File – Save As…” In the yellow box below that, it has a screen capture of the menu option for that command, and in the green box below that image, it says, “Good for the first time you save a file.”

The second set of boxes begins with the word “Icon”. In the yellow box below that, it shows a picture of a diskette, similar to what you would find in KidPix. In the green box below that it says, “Good for saving a document every time.”

In the third set of boxes, the first green box says “Keyboard”. In the yellow box below that, it shows an apple, a plus sign, and the letter “S” (apple + S; this is the keyboard shortcut on a Mac for saving a file). The last green box says, “Good for saving a document every time.” The image can be seen at the web site or at the end of the lesson plan.

Guidelines, principles, and elements that were used include color, shape, amount of detail, and harmony. The color was seen in the use of the color yellow to make the most important part of the visual stand out. The rectangular and square shapes held the information and text. There was a small, but appropriate amount of detail for what I wanted to communicate, and harmony was found in the repetition of the colors and shapes.

Instructional Design Model

Goal.

The purpose of this image is for use as an Attention Visual. My goal was to inform and to be a quick reference for the students.

Context.

In first grade, the students may have had a minimal amount of exposure to the concept of saving a document; however, since they are unable to complete this task independently, as second graders they would still be considered novices.

Designing the Visual Approach.

In designing the visual approach, I knew that graphics would need to be more dominant than text because of the intended use. The image was to be able to be read both vertically and horizontally to help in establishing patterns of computer functions, and how those functions are performed. The visuals needed to be larger and designed to help with recall in the future.

Communication function.

The function of this image was to communicate principles in the form of visuals that explained the three different methods for saving a document. Menu – Icon - Keyboard is a pattern that can be found in many of the functions the student perform while working on the computer, and by understanding these three choices, it should lead to a transference of skills with other commands such as “print” and “quit”.

Applying principles.

I wanted the students to be able to compare the three methods, so I used a table-type format to organize the information, with the goal of near transfer. I also used color and contrast as a visual signal to support focused attention. Placing text close to the visuals allowed me to apply the principle of contiguity (Clark & Lyons, 2004).

Revisions

There were two suggestions for changes on this graphic. Several people suggested increasing the size of the image for the menu that displayed the “Save As…” option. In order to accommodate that suggestion, I changed the overall size of the canvas, with the end result being an image that was much easier to read.

The second suggestion was to change the diskette to something more current. I did not make that change because this is what is used in the software that my students use and I wanted the images to correspond to what they would see in real-life.

Memory Load and Far Transfer – Three’s of Logging In

Defining the Visual Context

With this lesson also being for second grade, the visual context for this project is almost identical to that of the Attention Visual project. The differences come in the area of the E-learning platform. The original canvas size was 780 pixels wide by 650 pixels high, 256 colors, exported in the .GIF format since most of the images were either .PNG in their original format or created in Fireworks. Exporting it with fewer colors created a poor quality in the background image, but did not dramatically reduce the time it would take to download the file.

There would also be a learning aid produced from this graphic. The graphic would be exported in a .GIF format, brought into a Word document that was five inches high by six inches wide, and then the image would be resized. This size would be necessary in order for the document to fit on a desk at the same time that a laptop was on the desk.

For more information refer to the complete Visual Context document.

Visualizing the Graphic

The theme of three was used to describe three sites that the students might see at home and at school, three rules for logging in, three parts to a username and password, and three ways that the login button might look. The screens are based on information the students will encounter in their work at schooland are made up of clipart and images that were created in Fireworks.

The first screen contained the title, “The Three’s of Logging In” and displayed the number three that would also be present on all of the other screens. The next two screens had logos from places that the students might log in at home or at school. The next screen listed three rules to remember about the username and password, but used images that were created in Fireworks to support the text. Screens five and six explained the username and password by chunking the information, and screen seven gave three examples of different types of login buttons that the student might encounter. The images can be seen at the web site or at the end of the lesson plan.

The guidelines, principles, and elements included harmony, shapes, and typography. The screens are consistent in their appearance, squares are used in both the shape of the screen and the blocks used for text, and I used a very simple font that was consistent on all screens.

Instructional Design Model

Goal.

The goal for this project was to reduce memory load and build far-transfer skills. The tasks of logging on often times seems much more complex than it really is. Therefore, I wanted to construct a method of delivering the information in such a way that would organize it and break it down into manageable pieces. By choosing the theme of “Three’s”, the students would be able to look for patterns and apply them to the task of logging in to a variety of places.