This visual is designed to illustrate the concept of figure-ground. The figure are those items that you want the user to focus on. The ground is everything else in the visual. According to Lohr, proper use of figure-ground allows the designer to improve instruction by making the most important information stand out to the viewer (Lohr, p.102) My topic for this exercise continues to build on our district’s Google pilot initiative, and this lesson focuses on the ability to add comments to a Google Doc (a key component for peer collaboration). The audience is a class of seventh graders who are becoming more experienced with Google Apps for Education everyday.
The intended use of this visual is to be a support aid for users, and it will be printed on 8.5×11 paper and attached to classroom and computer lab walls.There are three major figure items in my graphic; the three steps for adding a comment to Google Docs. Of these three items, users typically forget to perform step one “highlighting the text,” so I wanted this item to be the visual’s primary focus. Next, I want the user to recognize the symbol for the “comment” button, and finally to realize that another window opens on the screen where they will enter their comment.
I struggled trying to eliminate non-essential information. Lohr mentions that is the designer’s responsibility to “create a clear distinction between the figure and the ground and help learners by doing some of their brainwork for them.” (Lohr, p.108) I knew which elements I wanted to emphasize, but it was challenging to highlight them in the visual. I went through four major iterations. The visual below was my starting point. Based on user comments, my message was not clear. Instead of hearing ”I get it,” I received a “What do you mean by this and that?”
Since this visual is intended to be displayed on classroom walls, just like the CARP visual from week 7, I wanted to enforce repetition, so I repeated core design elements such as the border, colors, fonts, numbered steps and overall structure. The screen captures worked better in a horizontal format so I rotated the design.
Forgetting to highlight the text is the most frequent mistake made by users, so I decided to eliminate the extra verbiage in the design above and simply state “highlight the text.” I added a background color to look like highlighting, and I used large capital letters to reinforce the concept. I added extra character spacing to make it easier to read, and enlarged the font size of the first letter in each word to help readability.
There are two ways to add a comment in Google Docs and each is equally effective. I could not make the “comment” button become a figure item in version 1 above. In several design attempts, it was always a confusing element. I finally decided to take a different approach and use the toolbar icon for comments. By redrawing the button in Fireworks, I was able to create a very large version of the button. The red arrow draws the user to the button, and then the red lines direct the user to the enlarged symbol (I borrowed this approach from an example in Lohr p.113).
The last step in the process is for the user to type in their comments and press the comment button. Having two figure items in close proximity to each other was another challenge. Eventually, I used the CARP approach, and decided to repeat the arrow design used in step two. I numbered the arrows to emphasize the sequence.
When I looked at my visual from a distance (version 1), my eyes were constantly drawn to the numbered steps. While this item has value, it is not the focus of this visual. I decided to reduce the size of the step numbers and made them circular to make them more of a ground item than a figure item. I think this version works much better. I also relocated and reduced the size of the Google logo.
I asked a different group of users to review my final draft and received encouraging feedback. They were able to explain to me the steps required to add a comment. They also identified “highlighting the text” as the most important element on the visual.
NOTE: The screenshots print clearly even though they are a little difficult to read online. I reduced the image significantly from its printable size (8.5'x11.0") to make it easier to see on screen.
Lohr, L. (2008). Creating graphics for learning and performance. Upper Saddle River, NJ: Pearson Prentice Hall.