Organization

This week focused on organization, including its most prominent design principle, hierarchy. "When you design for organization, you provide the learner or user with pathways through information. In doing this, you reduce the learner's cognitive load." (Lohr, 2008, p. 123)

I set out this week to develop a graphic introducing common Spanish prepositions on my tutorial website. (Again, this will be for secondary students taking first-year Spanish.) I wanted something that would clearly communicate the spatial relationships and how to say each one in Spanish. I also wanted a graphic that could serve as a performance aid later on in the tutorial or afterwards. I was inspired by graphics that I found online, similar to this one. I illustrated a set of Spanish prepositions, while using the following techniques to organize and provide hierarchical structure:

• Figure-ground distinction is enhanced through use of white-space and pops of color.
• The title provides a visual cue for entry point to the instruction. 
• Information is chunked so that related ideas are presented in opposite pairs (as with "above" and "below"). The gray, bordered, boxes and the surrounding white-space clearly delineate each "chunk" of information. 
• The layout suggests that each preposition is relatively as important as its neighbors; distinct, yet complementary. The interlocking gray boxes invite the viewer to scan the information and then re-scan, processing and learning the vocabulary. 
• Textual variations suggest that the Spanish vocabulary is the primary focus, while the English is provided as a supporting detail.
• Arrows and lines were used to show hierarchical relationships between prepositions. (Lohr, 2008, p. 155)

I asked my husband, who also teaches Spanish, to provide feedback on this graphic. He was easily able to interpret, use and verbalize the information presented. He said it seemed obvious that the black bars were provided as the point of reference for each circle, and that the visual presentation of each relationship was clear. He liked the balance and contrast of colors and layout. He also said that he liked the twelve prepositions I chose, and that the English was a nice touch (small enough to be avoided once it's not needed). Based on this user-test, I don't plan on making any revisions at this time.


Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.

Color and Depth

Clip art was created by Improulx and modified with permission.

This week's focus was color, and how it can be used to facilitate learning. I found it interesting that, scientifically-speaking, "the effect of color on learning is slight" (Lohr, 2008, p. 265). However, learners prefer color materials, and it can help them locate information quickly (Lohr, 2008, p. 266). Given these justifications for use of color, I tried to create a graphic that is usable, efficient, and appealing (Lohr, 2008, p. 266).

As part of my larger project in this class (a web tutorial on Spanish prepositions), the student task associated with this graphic is to describe relative location of objects. Specifically, I plan to have students practice the following prepositions with this image: in front of, behind, next to, to the left/right of, between, and near. By providing labeled nouns for beginning Spanish students, this graphic, like my others, will support learners and reduce cognitive load.

In this graphic, I used color in the following ways:

• Labeling: "The first function of color is to label or differentiate information" (Lohr, 2008, p. 265). The colored name-tags stand out against the various values of gray, calling attention to the students' names and aiding learner selection (figure/ground).
• Creating aesthetic appeal: "People tend to prefer color to black and white" (Lohr, 2008, p. 265).
• Warm and cool colors: "Warm colors tend to advance while cool colors tend to recede" (Lohr, 2008, p. 267). To help create a feeling of depth, I chose warm colors for the labels at the front of the room and cool colors for the students at the back of the room.
• Black, white, and gray: These "can be used effectively to facilitate selection" (Lohr, 2008, p. 267). I used a variety of gray values to suggest different colors, highlights, and shadows, without overwhelming the importance of the name-tags.

I had my husband review this graphic, and he had a lot of positive feedback. In addition to guessing how I was going to have students use the visual (he is also a Spanish teacher), he had some good ideas for extension activities that I hadn't yet considered. He pointed out that because my other two graphics were of zoo animals and fruit (things, not people), this new graphic allows for interrogative phrases like "who...?" and "what's the name of...?". He complimented the fact that such a seemingly simple graphic actually has a lot of details for description, should teachers/students want to head that direction. Based on this user-test, I don't have any plans for revision.

Speaking of "revision", though, I did go back and revise a project from a couple of weeks ago. The colors in my fruit stand graphic have been bothering me, but until this week I didn't really know how to fix the problem. I just knew that the colors seemed gaudy and out of place when compared to the other graphics I'd done, and I really wanted to present a more cohesive look on my website. (Yes, I probably have seen too many "Project Runway" episodes... but I could hear Tim Gunn's worried voice...) After learning a lot this week about color (and Adobe Fireworks), I went back to my original graphic and removed all the color and then painstakingly added back in better fruit colors. I also made a few other changes (dimensions, font, etc.). I'm really proud of the results, and so much happier with it. (Plus, I got to dust off the neglected Bamboo pad that my husband bought me years ago as a gift...)

Here's the before and after:

before...

...after!

Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.

Selection Project

This week's assignment asked us to consider "selection", which is "the mind's tendency to pay attention to what is dominant in an image" (Lohr, 2008, p. 116). In graphic design, we want to make the message as clear as possible. By carefully applying contrast to type, colors, space and depth, we facilitate the selection process, creating figure-ground distinction (Lohr, 2008, p. 116).

As with last the few weeks' graphics, this will be used as part of my web tutorial on prepositions. For high-school students, I want to provide enough visual interest that the image doesn't seem too boring or elementary, but I also don't want to overwhelm them with extraneous details. As beginning Spanish students, they need linguistic support for the objects in the picture (in this case, animals), so that they can immediately use the prepositions from this lesson.

In this graphic, I created figure-ground distinction with contrasting shapes and colors. It is easy to see the arrangement of various animal habitats, as well as the pedestrian paths that connect them. Landmarks and animals are clearly labeled with bold icons and Spanish names. This should help students verbalize spatial relationships while reducing cognitive load. As Lohr (2008) comments on page 108, "the goal of most performance support environments is to help the learner perform a task, not figure out what the task is". 

My husband had positive feedback about this image. His only concern was that students will try to apply prepositions like "right" and "left" to this map, and without having a perspective/orientation, it will be confusing or meaningless. I assured him that I was planning on using "drop-down" menus to assess this graphic, and it will focus on relationships like "next to", "near", "between", and "facing". Last week's graphic (the fruit stand) will provide practice opportunities for prepositions like "to the left of", "to the right of", "above", and "below". So once that was cleared up, he said the graphic was very pleasing and easy to use. Based on this, I don't plan any updates at this time.

Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.

Clip art was created by the following artists, and used with permission: Francesco_Rollandin, horse50, johnny-automatic, Kaz, laobc, molumen, nicubunu, Rones, and Savanaprice.

CARP Project

This week's assignment addressed the design actions of Contrast, Alignment, Repetition, and Proximity, or "CARP". By carefully applying these actions to a design's elements (such as type, shape, color, dimension, and space), viewers can more easily select, organize, and integrate information (Lohr, 2008, p. 207).

Since I created this graphic as part of my web tutorial on prepositions, I considered the students who will be using the graphic. For high-school students, I want to provide enough visual interest that the image doesn't seem too boring or elementary, but I also don't want to overwhelm them with extraneous details. As beginning Spanish students, they need linguistic support for the objects in the picture (in this case, fruit), so that they can immediately use the prepositions from this lesson.

I used CARP in the following ways:

• Contrast between shapes and colors makes the various fruits quickly identifiable. The bold font labeling the fruits will help students verbalize spatial relationships while reducing cognitive load.
• Alignment of the crates helps "establish unity among different elements" (Lohr, 2008, p. 207) and organizes the information. This simple arrangement will make it easier for beginning Spanish students to apply prepositional terms such as "to the left of", "above", and "next to". 
• Repetition of the fruit labels, the fruit shapes, and the spatial arrangement helps learners make connections.
• Proximity of "like" images help learners perceive the organization of this graphic. Additionally, there is a heading (the "name" of the fruit stand) and subordinate content below (the various fruits in their respective crates).

I had my husband look at this image and verbalize what he saw. Initially, he didn't remember which assignment I was working on, and he thought it might be a good graphic for teaching any number of topics (colors, fruit, prepositions, articles, numbers, or comparisons). He said he liked the colors, the shapes, and the wood texture, and that it looked "professional". One thing I was worried about was the size of the price tags in each fruit crate; I wanted tags just to make the image look more authentic, but they really have nothing to do with the lesson. I asked him if the small price tag font was a distraction, and he said it wasn't. I would greatly appreciate feedback on this detail, if anyone has thoughts...

Based on the initial user-test, I don't plan on any major revisions. 

Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.

Fruit clip art created by casino, Gerald_G, and nicubunu and used with permission.
Crate clip art and wood pattern created by nemo and used with permission.