Selection Principle: Emphasizing Figure and Ground

October 27, 2013

Image

The users of my final project will be students from grades 4-12 and adult instructors.  The majority of the students are advanced readers.  This is new to students and is designed to provide an overview of the ports, buttons, and switches that will be used during this unit.  I thought this would be a good design to focus on the concepts of selection principle and figure-ground because there are many parts to The Brain robotic controller that users need to be aware of in order to properly use it for programming.

The original graphic used to point out the different ports, buttons, and switches was a computer-aided design (CAD) image that looked like a real controller (see below).  I decided to create a simple line drawing of the controller to label instead of using the more realistic version.  Lohr (2008) explained that researchers in the 1960s “agreed that realistic visuals often provided extraneous stimuli that detracted from learning.  Simple line drawings were favored because they provided only the essential cues” (p. 100).   I think this line drawing will complement the real controller students will have in-hand while viewing this graphic.  According to Lohr, “one way to address the three c’s (concentrated, concise, and concrete) is to improve figure-ground – a perception principle that explains how the limited information-processing capacity of the human mind forces people to focus on one stimulus at a time rather than several” (p. 102).  I decided to add a CAD generated image of the controller as a reference for students so they would have a visual of what the line drawing represents.  I think that made it more concrete and that the line drawing portion of the graphic adds the component of concentration.

I had a friend look at my design and we discussed the lines and text that are used to point to and label the parts of the controller.  I originally did everything in black, but a suggestion was to make them a different color to keep everything from blending together.  I chose to use the same shade of blue that I have been using throughout my graphics, including the title of this graphic.  I had also originally included the CAD image of each side of the controller that is shown below, but was given the suggestion to remove it because it seemed to busy.  I think that doing so helped to draw more attention to the labeled parts of the controller which made the graphic as a whole more concise.

Resource:
Lohr, L. (2008). Creating graphics for learning and performance (2nd ed.). Upper Saddle River, NJ: Pearson Education.

Image

*The CAD created graphic of the controller.  I decided to create a line drawing to use in place of this.


CARP Project

October 20, 2013

CARP – Contrast, Alignment, Repetition, and Proximity

Image

Justification:

The users of my final project will be students from grades 4-12 and adult instructors.  The majority of the students are advanced readers.  This is new to students and is designed to provide an overview of the basic programming commands that will be used during this unit.  These commands will be used by students and instructions regularly in our robotics program.  I thought this would be a good design need to focus on applying CARP (contrast, alignment, repetition, and proximity) to because there are multiple sections that are related, but still need to show some separation.

I tried to create contrast by adjusting the size, weight, and colors of the heading, subtitle for the type of command, and the text that describes the commands. I used a left-alignment for the text that describes the commands and according to Lohr (2008), “One of the most important things to remember about alignment is that text should be left-aligned for easier reading in western cultures” (p. 201).  For the subtitles of types of commands, I decided to add a shadow of color that relates to the color of the commands. I consistently used the font Trebuchet throughout the design.  I also added a curved box around the title to match the shape of the programming command icons.  Lohr (2008) states, “Repetition can create a sense of harmony and unity. When you repeat similar colors in a display, or similar typeface, you imply relationships” (p. 203).  As for proximity, I used a larger amount of space between each section of the type of commands to show separation between them.  I made sure to use the same amount of space before the procedure commands subtitle and the lights and sensors commands subtitle following the previous section.

I had a friend look at my design and we discussed the contrast alignment, repetition, and proximity of the different parts of it.  I originally had a more squared box around the title, but rounded the edges a lot more in order to make it look more like the command icons based on his suggestion.  The second suggestion was to add the shadow of color in the subtitles that relates to the command icons to help tie them together.  I think that made a big difference in also showing separation between each type of command.

Resource:
Lohr, L. (2008). Creating graphics for learning and performance (2nd ed.). Upper Saddle River, NJ: Pearson Education.


ACE it with PAT – Graphic Organizer

October 13, 2013

Image

The users of my final project will be students from grades 4-12 and adult instructors.  The majority of the students are advanced readers.  Both students and instructors will follow this process when being introduced to programming for robotics.  This is intended to be an overview of the unit.

In the “create” phase of ACE, Lohr (2008) states that it “involves moving design from a conceptual form to a physical form” (p. 76).  I decided to make my design to look like stepping stones to show progression from the beginning of the unit to the final stage of applying what they learn.  I think this will help to emphasize that what they are learning builds on something they previously learned.

I think the Trebuchet font used to state each step will help to make this inviting for users because as Lohr (2008) stated, “many consider Sans Serif type more legible for computer-based instruction or presentation since the resolution of computer monitors is often not great enough to show serifs, making serif typefaces lose their legibility” (p. 221).  I also decided to incorporate the design of the word “robotics” from a previous assignment to start to tie everything together for my final project of this unit.

I had a friend look at the original graphic organizer I created where the outline of the hexagon boxes were all the same thickness. He suggested that I make them thicker to show the progression of the unit.  In the “evaluation” phase of ACE, one of the questions Lohr (2008) suggests asking is “Do cues in the visual help perception of selection, organization, and integration?” (p. 87).  I ended up making that change because I think it will help people to interpret it as a progression.

Resource:
Lohr, L. (2008). Creating graphics for learning and performance (2nd ed.). Upper Saddle River, NJ: Pearson Education.


The Use of Shape

October 6, 2013

Image

The users of my final project will be students from grades 4-12 and adult instructors.  The majority of the students are advanced readers.  Both students and instructors will be familiar with the Engineering Design Process and use it regularly in our robotics program.  This is intended to be a reminder of the steps in the process and that they can go forward in steps, but also backwards when needed.

I think the message of the Engineering Design Process will work because I used curved line segments to form a circle to tie the different steps together. According to Lohr (2008), “Circles and ovals are used to show unity, imply harmony, show processes, focus attention, and show elements of systems or subsystems” (p. 250).  In addition to that, Lohr explains that lines can be used to show motion and direction (p. 250).  In addition to the use of shapes to develop and instructional message, I selected the Georgia typeface for the steps in the process to make it easy to read online (Lohr, p. 220).

I had a friend look at my instructional message.  We discussed the use of arrows to show direction in addition to the circular line, but I feel that not having arrows allows for a flow in both directions.  I added the word “start” because it’s the only direction that is needed to get the process going.  I tried the use of arrows facing both directions, but thought it looked too crowded.  That may be a concept to continue to play with if the process is difficult for some to understand.

Resource:
Lohr, L. (2008). Creating graphics for learning and performance (2nd ed.). Upper Saddle River, NJ: Pearson Education.