Color and Space

Revised Graphic

WhiteSpaceProjectSmall

Further testing (class mates) resulted in these changes. First, the bar for the original photo was hard to distinguish as data because it looked like a gray background. I changed the color to light red, then adjusted the other three bars to lighter colors. I also moved the KB labels so that all were lined up on the left side of the graphic for easy comparison.

Using White Space to Lead the Reader’s Eye

WhiteSpaceProjectSmall

Graphic Overview

Image optimization is an important topic to incorporate when preparing graphics for the web. This week’s graphic will serve as a visual demonstration of the differences in four levels of optimization. Click the image above to see the full-size graphic. Each sample on the full-size graphic is linked to the complete picture in the corresponding file type. In other words, clicking the first sample will open the original, 13,648 KB photo. The load time is noticeably different for the original, non-optimized photo as compared with the other three, optimized photos.

Target Audience

Online users and APS staff members are the target audience for this graphic. Anyone who completes this portion of the Fireworks CS6 unit will be interested in learning how to post images online. The reading level (minimum sixth-grade) for this graphic is similar to all other images in this unit. There are some new terms to learn, though. The names of the file types may be new to some users. To help learners assimilate the terms and see how they are used in Fireworks CS6, I included in the image a visual of the actual optimization panel as seen in Fireworks, as well as a size chart listing the names of the file formats.

Why This Graphic Will Work

White space is an important graphic element that will help learners understand the information in an image. I used white space to chunk the information into five elements: the four file optimization types and the file size chart (Lohr, 2008, p. 272). First I put as little white space as possible between the three parts of each file type (text, image, and optimization panel). Then I added extra white space to create four rows of file optimization types. There is even more white space to separate the chart from the optimization types. This graphic incorporates both white space and the lack of white space to lead the learner’s eye through the lesson.

White space in this graphic creates a symmetrical balance of elements (Lohr, 2008, p. 275) by keeping each element aligned and of similar size. All elements are centered on the page, further adding to the symmetry. With this symmetry, I was also able to avoid trapped space (Lohr, 2008, p. 272), helping to lead the reader’s eye from top to bottom through the graphic. Finally, the white space makes it easy for the learner to see the structure of the page (Lohr, 2008, p. 274). The images go from top to bottom, from the highest quality to the lowest quality optimization choice. In the chart, the file sizes move top to bottom, from the largest to the smallest. The white space also created rows, which lead the eye from left to right.

User Test Results

Originally, I had the optimization panel and the text/label on opposite sides. The optimization panel was on the left and the text on the right. The user noted that this looked awkward because it drew the eye to the right first in an effort to read the explanatory text. The text in the labels was also too large and bold, making it distracting and hard to read.

The text was simply black on white. The user suggested adding a background to the text so that it matched the background of the optimization panel images. This would provide more symmetry in a gray box-image-gray box pattern, and further define each row. In the chart, the bar representing 13,648 KB was red. With such a large bar in a bold color, it caught the user’s attention before any other element in the graphic.

Changes to the Original Image

I switched the optimization panel and text positions. This helped with leading the learner’s eye, and it had a bonus effect. The optimization panel is now on the right side, very close to where it is found in Fireworks. This will help the learner make the move from the instructional graphic to finding the panel in Fireworks. I changed the size of the font to make it more easily readable, and dropped the bold from everything except the file type names. This provided more contrast between the titles and the other text, too.

I added a gray background to each text box, matching the size and color of the optimization panel for each file type. To remove the focus from the longest bar in the chart, I changed it from red to the same gray that is found in the boxes behind the text and optimization panels.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s