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
No comments:
Post a Comment