There were two suggestions provided by class mates during the second stage of user testing. First, to link each skill in the graphic to the corresponding web page in the tutorial. I plan to incorporate this change using hot spots when I assemble the web site. Second, add a logo or colors to increase the visual appeal. I went with the same logo that I used on my unit plan document. This Fireworks logo fits perfectly with the rectangular shape of the image, and it adds a splash of color to the graphic. I removed the word “Tutorial” from the title to make room for the logo. Click the image above to view the full size revised graphic.
Using Graphics to Illustrate Organization
This graphic will serve as the site map for my Fireworks CS6 tutorial web site. It is designed to meet this week’s challenge: designing a graphic to illustrate the hierarchy of the complete unit.
Staff members at APS are the primary target audience members for this unit. However, since it is hosted online, anyone will be able to find and work through the lessons. With that broad of a target audience, it is important to provide at a glance the structure of the unit. All target audience members have the ability to browse a web site using hyperlinks and site menus. Those who read at the sixth-grade level or above will be able to understand this graphic.
Why This Graphic Will Work
People who study online want to know what it is they are considering so they can make a decision if it will be worth the time they will invest. This outline provides enough detail (Lohr, 2008, p. 126) to let the potential learner determine the value of the tutorial for their personal learning. I followed several of the graphic design principles detailed in the text book, including the organization and hierarchy principles, while creating this graphic.
First, I chunked the information by increasing the leading between lines of text and between the lessons. This provides white space in the graphic (Lohr, 2008, p. 126), effectively breaking the material into four chunks. This fits within the limits of both Miller’s and Cowan’s research (Lohr, 2008, p. 125), providing a manageable amount of information for potential learners.
The top-to-bottom orientation of the graphic will lead the reader’s eye through the hierarchy of the graphic and unit. Also, each lesson heading is bolded to indicate its importance in the hierarchy (Lohr, 2008, p. 123).
User Test Results
In the original version of the graphic, the title and each lesson had a blue background gradient. The color was unnecessary and distracting. The lines of text were too close together, too, which resulted in little white space. It appeared as one large body of information, instead of several small chunks of information. This made it harder to read and comprehend. The user also thought the text was larger than it needed to be.
Changes to the Original Image
After the user test, I increased the leading in the text, more effectively adding white space and chunking the information. I also decreased the size of the font and deleted the blue gradient backgrounds. I added a black border to provide a rectangular frame for the information.
Lohr, L. (2008). Creating graphics for learning and performance: Lessons in visual literacy. Upper Saddle River, N.J: Pearson/Merrill/Prentice Hall.