My learners will be between the ages of 18 and 34. They will be high school graduates at a minimum, and some will be college graduates. They will have at least high school reading abilities. They will all be mentally and physically fit to accomplish physically and mentally demanding tasks. They all will have graduated
Basic Training from the military, and will have had basic weapons safety training, and also basic weapons marksmanship training.
It was imperative for this unit of instruction to have graphics included into each lesson. Having taught the subject of room clearing before, I know that it is extremely dangerous and that all personnel that participate in the training have to understand fully each step. The use of pictures, or graphic illustrations help to clarify what is being taught, as the learner can actually see each step, not just read about it. The learner will have text on the steps, visuals, and during the field phase will be shown by instructors as to how to perform each step, then they will be taken through a crawl, walk, and run phase of instruction.
The overall objective of the visual on the home page was to be an organizational graphic. The goal was to make a visual that would could be used for both the web and for the static (hands on) instruction that would show the topics that would be taught.
This graphic was to be used as a concept map, where the user clicks on hot links within the pictures and takes them to a new webpage that will give them detailed information on that module of instruction. The graphic was to be the only information on the home page, but after analyzing the instruction I thought that including an introduction and instructions on the homepage would be better. Also having a common banner throughout the instruction would be better also, so the visual is shown at the bottom of the instructions and introduction. I created the graphic using the PAT starting with the first part, (principles) which involves selection, organization, and integration. For selection I only wanted the main topic and the three modules being taught shown to the viewer. I only used the titles of the modules to represent what would be taught (Lohr, pg. 80). For organization I combined the graphics and pictures with each topic, and ensured proper spacing between each element. I also believe that any shapes or forms added around each topic would make the graphic too cluttered. I also feel that with the
1
images will match the remainder of the instruction. Finally for tools I used the same colors for font, and red for my lines connecting to the main topic. I used same shape for the pictures, and I used typography for the titles of the modules. Proximity of the topics are all the same (Lohr, p.85).
2
The image on this page was not designed by me, it was selected from a creative commons search. It is used along with instruction on negligent discharges. I wanted something at the beginning of the safety module to show the results of what possibly could happen due to a negligent discharge and to motivate the learner to pay attention to the instruction.
The second page of the weapons safety module talks about preventing negligent discharges. Part of the solution is that leaders and soldiers know the different weapons statuses. There is a color for each status, and the visual is used to help the learner view the differences in statuses by showing the color relation to each status.
This graphic has the instructional purpose of using color for labeling, to differentiate (Lohr, pg. 265). The differentiation is the statuses of the weapon. Each status has a color and I used the color of the status as a background frame of the pictures, and for the title. I also used black text on a white background to make the text standout (Lohr, pg. 267). I used a larger, bolder font for my title and sub titles to give the graphic separation and each area importance. White space is used to separate each area of weapon status. I also used drop shadowing in the sub-title to give them more depth to make the text below stand out (Lohr, 263). I used yellow circles to put around each area in the weapon status that the learner should focus on the differences.
For page three the instruction covers the acronym T.H. I. N. K., which is extremely important to remember in weapons safety. I wanted to include the graphic by itself on this Webpage because I felt the information covered in the visual was enough, without any further text to be included.
This graphic employs the principles of selection and has at least three of the seven C’s that Mayer (2001) has identified, which makes an effective instructional visual
(Lohr, pg. 102). My visual is concentrated with the title weapons safety, and shows the acronym THINK which explains weapons safety. The image is concise because there are five steps to weapons safety and has an acronym that helps the learner remember, each letter in the acronym means something, and there is no extraneous information in the visual that would confuse my learners (Lohr, pg.102 ). Concrete because the message is THINK safety, also the large letters of the acronym makes it stand out for each part. For my image I also used the actions and tools learned in previous chapters, by using CARP to achieve the optimal image (Lohr, pg.111). I used contrast for the
3 acronym THINK, using large letters to make it stand out. I used typography for the heading to give the visual meaning. I used alignment with the text and images. I used repetition by using the same color and size font. And proximity with the font and images.
There are three images included in this visual, the first being live ammunition, which the learner should recognize and know that not handling a weapon safely with live ammunition is dangerous, and that everyone should handle a weapon as if it has live ammunition and a round in the chamber. I positioned that visual at the top to connect with the first two letters in the acronym. The second image is of someone pointing a weapon and firing, which goes along with the third and fourth letter in the acronym, identifying what you’re shooting at and never point a weapon at someone you don’t intend to shoot. The last image was connecting with the last letter in the acronym which is to keep the finger off the trigger until you want to fire.
The first part of module two talks about the principles of room clearing. The principles are used in the design of an image used with different typography to drive the message home as to what the words mean. I wanted to start off with text for the instruction so that when the learner viewed the graphic, they would understand even more what the words meant in relation to room clearing.
The word "security", which is in the top left corner of the image, is not always used as a principle, but many now use it. What I wanted to portray with the word, was that if security is used it is their shield, it should protect themselves and others from being harmed. I used black for background with white lettering to give it good contrast.
The word "surprise" is used as a principle, and what I wanted to emphasize, was the meaning of the word. The word was designed, so that it sort of jumps out at the reader, by copying the word, and pasting it slightly above, I think it makes the word
"jump out" at the reader. I also distorted the word slightly added noise to it, and highlighted the edges, to give it a "louder" look. I used the technique of increasing the kerning for this font. Kerning is the action of increasing the horizontal spacing between the letters in a word. By kerning you can make the words look better and it is generally used for headings (Lohr, 2008 pg. 234-236). The font looked very legible in bold, which I wanted, however when increasing the kerning, it appeared even more legible.
The word "speed", another principle is used in module 2 and 3, and I needed the design of the word to show its meaning. I skewed the word so that it leans forward as if it is moving ahead, and used red, as this color I think signifies speed more than any other color. Although the book says that all caps usually makes words less legible, I felt that it was more legible with caps for this particular font.
The word "violence" is also a principle, in a term called "violence of action". When choosing a font, I really didn't know what type of font would portray the meaning of the word. Luckily I ran across the font called chilling, and I think it fits perfectly. Although I normally wouldn't use this type of font for instructional purposes. This is a decorative display font, and is used for establishing mood (Lohr, 2008 pg. 230). Establishing mood
is what I wanted to achieve with this word, and I feel darkening the word with a darker red color achieves the mood for the word
4
This part of the instruction talks about what room clearing is, and the actions used during the different phases of room clearing. Rather than create 18 separate visuals for the instruction to be inserted into a webpage, I decided to design the visual to be used for the entire part of this instruction. I included enough information with each picture or graphic, so that the graphic is understandable.
This visual was based on the usage of CARP in the design. I used contrast when using different font in the headings and also using different colors for the background of the font sub-headings. "You establish contrast by establishing differences in the visual
(Lohr, pg. 201)." I used a variety of alignment with the text in each of the sub-headings, the text to each image is aligned, and I aligned each image (Lohr, pg.201). I created repetition by using the same color of background and same size of rectangular background with the sub-headings (Lohr, pg. 203). Finally I used proximity by putting the text that describes each image closer to the image itself (Lohr, pg.203).
The final part of module 2, room clearing shows the techniques for doing the actual room clearing with a four person team. Again Instead of creating eight separate visuals and including them into a webpage with text I went along with creating one visual that included all the steps. This way the instructor can download all these visuals and have them printed out as posters for the static hands on training portion. I included enough information for each visual to explain what is going on in the step.
This graphic takes advantage of using shapes to instruct the learner. The background, or canvas is rectangular, the rooms are rectangular, and the grey dashed line is rectangular. According to Lohr, in Creating Graphics for Learning and
Performance , (pg.25
5), designers should “choose shapes and layouts that complement the underlying display shape. “Squares and rectangles can contain information, facilitate comparisons, focus attention, and show hierarchy (Lohr, pg. 250).” I used red squares to focus the use r’s attention on a particular soldier at certain steps in the instruction.
“Lines are used to separate and define, show motion and direction, make connections, show process, and convey emotion and volume (Lohr, pg. 250).” I used various lines throughout the instructional graphic. I used a dashed gray line to show direction the user should look in following the steps. There was a black dashed line in step 2 to show movement of a soldier. There are also lines used to show the direction of fire each soldier should be focusing on. On page (254) Lohr, also indicates we should use arrows as a shape when providing direction for the user. There are red arrows indicating the direction the soldiers should move when entering the room.
In the beginning of module three, the focus is on, going form a cleared room into a hallway, moving in a hallway and then moving into an un-cleared room. The visuals are steps that show the process of how a techniques can be performed, and like some of the visuals before, I did not want to create eight separate visuals for a webpage. This visual shows all the steps in one graphic and includes text to help the learner understand each visual.
This visual focuses on organization to help the learner. The visual uses both vertical alignment and horizontal alignment to improve upon the hierarchical organization that is needed to show the visual (Lohr p.128). Each visual is placed in order from left to right and then down and is in a sequence that I want the learners to read, or see the visuals. All of the information is in the same category so I see no need for chunking the information. I tried to use proximity in my sentences of information to show that the information was related to the image (Lohr, p.133).
5
The last visual in module 3, and for the entire unit of instruction are techniques used for different scenarios in hallway movement. This graphic only had four visuals I created in it, and I decided that it would need further explaining so it would go below the text on the webpage, so that the user would better understand
The use of white space in this graphic is used to direct the eye to important information by chunking and separating instructional elements (Lohr, pg. 272). The whitespace used also is using symmetry in which all elements are equal (Lohr, pg. 275).
90-10-1, F. (1999). Military Operations in Urban Terrain .
Washington: US Army.
Lohr, L. L. (2008). Creating Graphics for Learning and Performance: Lessons in Visual
Literacy.
Columbus: Pearson.
Tollet, R. W. (2006). The Non-Designers Web Book.
Berkely: Peach Pit Press.