White space

This week's reading and project encouraged me to think about white space, and how this design tool can be used to help learners. Since my target audience will be secondary students in first-year Spanish (often lacking in background knowledge and patience!), I know that it's crucial to help them sort and process new information. After reading this week's assignment, I started planning and organizing the "grammar" section of my website.

Most of the lessons on my tutorial website will present prepositions in a very visual way, with pictures and embedded flashcards. As the learner progresses through the website, the lessons will incorporate prepositions in sentences, providing context and repetitive practice. At some point, though, the learners will need clarification on the grammar patterns they will (hopefully) start to observe. That is where this graphic will come in.

My "graphic" is really mostly text, organized in a way that I hope will direct and maintain learners' attention. Because "text passages that use plenty of white space... [help learners] feel less overwhelmed" (Lohr, 2008, p. 275), I tried to break the information into logical, bite-sized chunks. "Space can direct the eye to important information by chunking and separating instructional elements." (Lohr, 2008, p. 272) The space separating information and examples, as well as the clearly-defined boxes for each topic (with headings and subheadings), all contribute to the readability of this text. I also used type, shape, and color to support the design of this graphic.

My husband, also a secondary Spanish teacher, was kind enough to provide feedback on this graphic. He suggested adding a few clarifying words in the "de" example and the "del" explanation. Upon interrogation, he also admitted that the turquoise "caption" font would probably benefit from a slightly larger font. I made those changes and posted the "before" and "after" below.

My one concern about using this graphic on my tutorial website, on which I would greatly appreciate others' thoughts, is... What about making this information accessible to all learners? There's a lot of information in this "graphic". How to I make that available to people using screen-readers, for example? Thank you in advance for your feedback.


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

My project after user test (with suggested changes implemented).

My project before user test and suggested changes.

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.

Design Process Model

This week, we read about the ACE model (Analyze, Create, Evaluate) and how it can be used to guide the design process. Lohr (2008) recommends that the designer begin by considering the instructional context for the visual, and end by critically editing the visual. Of course, this is an iterative process, and can go through many revisions and stages of development.

My task this week was to create a "map" of my tutorial website, using the ACE model of design. I plan to use the visual I created on the home page of my website, so that students (and teachers) may orient themselves and preview what they are about to do throughout the three lessons. Additionally, I plan to carry the theme (colors and icons) throughout the website.

I struggled a bit getting started, I think because I was trying to make my visual very graphics-heavy. I really wanted to come up with icons that would "say it all", but in the end, text is needed to convey the finer points of each lesson. The students that will be using my website are high school age, so they should respond to the bold and repeated icons, but will also appreciate having the chance to read the details of each lesson. Students of this age appreciate knowing what they are about to learn, and how. I tried to answer those questions very succinctly, using the format of "new information", "practice", and "extension activities" for each lesson.

I also made the decision to write this menu/map in English, keeping in mind that, although this is a tutorial for Spanish students, they are beginning learners, and wouldn't find the text as useful if it were presented in Spanish. There will be places for that elsewhere on the website.

I think my visual will work because its instructional function is to provide organization for users of the website. Lohr recommends that this type of visual "make information easier to understand" (2008, p. 75). In clarifying ideas for the viewer, I put the principles of CARP to work (Lohr, 2008, pp. 80-85):

• Contrast is used to clearly separate the three lessons from the background and from each other. Bold headlines and icons are meant to grab the viewer's attention.
• Alignment shows ordinate and subordinate ideas, as well as the order in which a user would progress through the tutorial activities.
• Repetition of content, organization, and icons "increases the simplicity of the design and increases the sense of relationship between the elements" (Lohr, 2008, p. 84).
• Proximity shows how elements are grouped.

For the user-test, I showed this image to my husband. He provided the following comments and feedback:

• He thought the layout was very organized, obvious, and consistent. It reminded him of an outline (with I, II, III and A, B, C).
• He could see the pedagogy within each lesson.
• He liked the "soft, pleasing colors".
• He thought the icon guide provided at the bottom was a good idea. The "information" icon is obvious, but the other two icons are less obvious, so it was good to clarify their meaning.

Based on this initial user-test, I don't plan on any further revisions.

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

"Brain" icon created by Vlad Marin, and used with permission.  
"Information" and "Star" icons created by Yankoa, and used with permission under Creative Commons License.

Shape

For this week's "shape" assignment, I created a graphic that I plan to use as a section header in my website tutorial on prepositions. (Reminder: I'm introducing Spanish prepositions to high school students in their first year of Spanish studies.) For the last several years, I've noticed that my students have pretty good recall of something that I assume they are learning in elementary school: "A preposition is anywhere a mouse can go." When I teach prepositions in the classroom setting, this "definition" invariably comes up when I ask students to explain prepositions to me. I think it's a decent definition, but only if students understand that the mouse's location needs to be described in relation to something else.  (For example, a mouse can go to Alaska, but Alaska is not a preposition.)

With this in mind, I used Fireworks to create this visual, hoping to stimulate students' prior knowledge, and then use the image and concept as a point of discussion. After viewing this image in the "Introduction to Prepositions" part of my tutorial, students will be asked to narrate the path of the mouse. ("The mouse goes up the P, over the top of the P, across the r and e", etc.) In doing so, students will use a number of prepositions in context, reinforcing their function and their more "complete" definition.

Shape figured heavily in the creation of this image. Initially, I knew I wanted a wide and short display shape, so as to use the image to head a section on my website. In this way, the rectangle shape will contain information and focus attention towards the content of the text that will follow (Lohr, 2008, p. 252). I did struggle a little while trying to make this image the appropriate size and shape, while also maintaining legibility of all the text. I think with a million more hours of work, I could probably fine-tune the kerning of the word "Prepositions" a little more so as to save space, bumping up the text size for all the little words... but I'm pretty satisfied with how it turned out. I am still a novice when it comes to Fireworks, and this little picture turned out to be a big undertaking!

The mouse silhouette was an important shape to find and include, since it references the metaphor for my students, and also makes the image more engaging (Lohr, 2008, p. 250). I was lucky to finally find a suitable mouse image in the Creative Commons: http://commons.wikimedia.org/wiki/File:Silhouette_of_a_mouse.jpg

And, of course, line is an important shape element in this image. I created a path through the word "Prepositions" and then aligned the smaller text to this path, showing motion and direction (Lohr, 2008, p. 250).

When I asked my husband to give his feedback (as a "user test"), he made the following remarks: This image is good for demonstrating what a preposition is, and it also provides quite a few clear examples. It's easy to focus on one of the two "depths" in the image (either the black or the blue). He is also a Spanish teacher, and he said he'd like a version in Spanish for his classroom. He also thinks it would be good for primary teachers (in English, or whatever the language of instruction may be).

Based on the user test, I don't plan to make any changes at this point. As I said before, I'd like to have the image sized a little differently (not quite so wide and short), but I've done what I can with my time (and sanity!) at this point.

One thing I've struggled with in Fireworks is how to best export images and not lose resolution. It seems that no matter what I do (jpeg, png, 100%, etc.), nothing looks as good as it did in the original Fireworks file (when open in Fireworks). I included two different exports in this week's post hoping to see what they look like side-by-side. I think that in this case, the first image (the gif) looks a little better. Does anyone have advice?  Thank you in advance for your comments.

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