EdTech 506 Final Draft

Link to Website

Organization and Integration Project - EdTech 506

This week in EdTech 506 we learned about organization and integration. I chose to create a graphic organizer to demonstrate principles learned.  

The intended users for this graphic are high school students taking an online U.S. History course. The students can read at or near grade level or are able to gain access to assistance for words they cannot comprehend. Since this is a web-based course, these students should be familiar with web navigation and basic computer skills (cut and paste, snipping tool, saving documents, etc.).

The graphic organizer is related to the MAIN causes of World War One topic. In this organizer the student must complete 3 tasks. In task #1, the student demonstrates that they know what the four main causes of WWI were (recall). In task #2, the student must research and select an image that would show a relationship to the causal factor identified in the block above (making connections). In task #3, the student must explain how the image they selected in the block relates to the causal factor described (prove by citing evidence to support). 

This graphic organizer incorporates gestalt principles. Closure is demonstrated through the gaps and empty blocks in the graphic. According to the gestalt principle, the mind would want to fill in these gaps of information to provide closure on the concept as a whole (Lohr, pg. 162). 

Contiguity is demonstrated by placing similar items close to imply relationship (Lohr, pg. 162). Each task box is in a horizontal row across from the task directions to imply relationship for the task type and each box for the MAIN causal factors are connected by lines horizontally to show relationship to the overall theme of MAIN.  

Similarity is established by keeping directions and task boxes the same size across the image (Lohr, pg. 162). Lines were used to connect boxes to similar concepts as well, reducing cognitive load and enabling the learner to draw connections more easily.  

Regarding organization, hierarchy was demonstrated in the vertical alignment of the graphic (Lohr, pg. 128). The boxes all connected vertically, but the overall theme of the MAIN causes of WWI was located at the top, exemplifying the theme of the graphic as a whole. Cues were used in the form of connector lines to show relationship (Lohr, pg. 123). 

Chunking was used both horizontally and vertically in the graphic. Horizontally the groups were chunked into similar task types whereas vertically the boxes were chunked according to the MAIN causal factors of WWI. The vertical arrangement actually existed in harmony with the horizontal in that from the top down the boxes followed a logical sequence of completion regarding tasks (Lohr, pp. 125-26). Task #1 was a recall task, a Level 1 task on Webb’s depths of knowledge (Webb, 2005). Task #2 required the learner to identify and relate an image to the knowledge recalled in task #1, a Level 2 task.  Task #3 required the learner to explain how their image selection related to the causal factor, in essence connecting their knowledge of the image to the causal factor and proving their selection had validity, a Level 3-4 task.

I showed the graphic organizer to my wife and she said it was easy to understand and she could really see the organization and flow of the image. She said she didn’t see any changes that needed to be made.

I will likely use this graphic organizer in my classes this year as it requires the learner to demonstrate their knowledge through their own interpretation and understanding of the causal factors. It also gives them ownership in their own education, something I always wish for them to possess.

Works Cited

Lohr, L. (2008). Creating graphics for learning and performance: lessons in visual literacy (2nd ed.). Upper Saddle River, N.J.: Pearson/Merrill/Prentice Hall.

Webb, Norman L. and others. “Web Alignment Tool” 24 July 2005. Wisconsin Center of Educational Research. University of Wisconsin-Madison. 2 Feb. 2006. http://www.wcer.wisc.edu/WAT/index.aspx

 Organization and Integration Graphic

EdTech 506: Color, Depth, Space and Selection Project

This week in EdTech 506 we were to complete an independent activity that incorporated selection, color, space, and depth. I decided to create a quiz portion of my website project on World War One technology to test out these principles.

The intended users for this graphic are high school students taking an online U.S. History course. The students can read at or near grade level or are able to gain access to assistance for words they cannot comprehend. Since this is a web-based course, these students should be familiar with web navigation and basic computer skills.

In regard to selection I focused on the “three c’s,” concentrated, concise, and concrete (Lohr, pg. 102). First I created my title for the image, “Matching Quiz!” This would focus the learner on the main idea of the image. To be concise, I kept the supporting images simple and similar. I included the name of the technology and a graphic of each within a small rectangle. I also kept the descriptions within rectangles of similar height and width. All of the visual and descriptions within the workspace focused on the purpose of the overall image. To be concrete, I made the text and images easy to visualize using glow within the technology images and white background in the descriptions.

For color, I chose a drab green for the background as the quiz is of a military nature and the overall theme is World War One. I originally chose red for the title text but it seemed to not pop out enough although the colors do complement each other on the color wheel. So I chose a bright yellow and that seemed to work much better. With the need for contrast in the title the yellow advances (warm color) and the green recedes (cool color) (Lohr, pg. 269).

Most of the images for WWI are in black and white so I had to contrast with these colors as well. To do this I made the text black and used a white glow behind it to make the text easily readable in the technology images (Lohr, pg. 268).

For depth I had originally used some glow and drop shadows. However, it appeared as though the glow was overpowering. To alleviate this I incorporated a raised emboss on the title, images, and descriptions. This made the image much cleaner, added dimension and texture, and made it easier to visualize (Lohr, pg.271-72). I only used drop shadows for depth in the directions (very subtle) and in the technology images.

In regard to spacing, I sought to be symmetrical to convey a sense of calm and focus (Lohr, pg. 275). The title and directions are centered and at the top keeping order in the image. The descriptions are equidistant from each other and the images are also equidistant from each other and each image is centered on a description. Between the descriptions and images is an equal amount of space.

For my user-test I showed the image to my wife. I told her to look for color, depth, and space specifically and she identified where I had used those elements. She also said it was very easy to read and that a student should have no problems understanding it. I won’t make any changes based on my user-test. However, I have included the first draft of my project before I made significant changes for comparison. One very noticeable change from draft to final was flipping the images and descriptions. As the question numbers were included on the descriptions and we naturally read left to right, it would flow much better for the learner with the descriptions on the left and image choices on the right.

This exercise was very enlightening in that these were all principles I have used in the past in the design of slides and websites, but I had no experience with them formally.

Lohr, L. (2008). Creating graphics for learning and performance: lessons in visual literacy (2nd ed.). Upper Saddle River, N.J.: Pearson/Merrill/Prentice Hall.

Color, Depth, Space, and Selection Project Image

Final

 Draft

CARP Project - EdTech 506

This week in EdTech 506 we concentrated on CARP, or Contrast, Alignment, Repetition, and Proximity. I chose to create an infographic on the significance of the HMS Dreadnought to complete this assignment. 

The intended users for this graphic are high school students taking an online U.S. History course. The students can read at or near grade level or are able to gain access to assistance for words they cannot comprehend. Since this is a web-based course, these students should be familiar with web navigation and basic computer skills. 

My goal for this infographic was for students to recognize the significance of the HMS Dreadnought prior to World War One. At its creation, the Dreadnought made every other battleship in the world obsolete with its use of steam turbines (first battleship to do so), speed (fastest battleship in the world at the time), and firepower (first battleship to incorporate a uniform main battery). This British creation would force all other navies in the world to improve their navies, sparking a naval arms race, most notably between the British Royal Navy and the German Imperial Navy. This buildup of naval ships is an example of Militarism, one of the components of the acronym M-A-I-N regarding the causes of World War One.

To get this message across, I first created the title and used Stencil type to give a military feel to it (tying the Dreadnought to Militarism). I then inserted two images, one of HMS Agamemnon, a pre-Dreadnought battleship, and to the right an image of HMS Dreadnought. This was done to actually let the students see what was being taught about and so they could also get a good contrast of the armament of the two ships through the visuals. I placed them far apart in regard to proximity to improve differentiation between the two images. (Lohr, 203) 

I also used color coding and font for contrast. (Lohr, 201) I typed the text referring to the pre-Dreadnought in a rust color, signifying the “out with the old” concept. I typed the text referring to the HMS Dreadnought in blue, signifying “in with the new” and tying in with a color of the British ensign. I used repetition of these colors in the descriptions of Speed, Propulsion, and Firepower for each ship (Lohr, 203). So to reinforce the data for each ship, and to provide contrast, students were provided color coding. 

Regarding alignment (Lohr, 201), I chose to align the images across from each other for ease of comparison. I also aligned all text correlating to each image centered on the image for attribution. I used dividing lines for clean alignments on the information regarding Speed, Propulsion, and Firepower. At the bottom I used anchor images for bullets regarding the key information section on HMS Dreadnought. I also colored the anchors blue to associate the Dreadnought with that information being presented. Each bullet of information was aligned with an anchor. 

My wife assisted in the user-test and was she able to determine the significance of the HMS Dreadnought through the graphic without any problems at all. She could not think of any ways to really improve the graphic and that it was very effective in what it was meant to do. 

The only changes I can see making at this point would be to blow up the images more or link them to larger images on the finished website. I know students can zoom in but I think it might be easier to really contrast the ships if they were already enlarged.  

Works Cited 

Lohr, L. (2008). Creating graphics for learning and performance: lessons in visual literacy (2nd ed.). Upper Saddle River, N.J.: Pearson/Merrill/Prentice Hall.

 CARP Project Graphic