Justification PaperMichelle Jenkins

8/3/2019 Justification PaperMichelle Jenkins

1/9

Justification Paper Michelle Jenkins

Instructional Message Design Final Project 506

Rationale

In creating this unit project, the central focus was designing graphics with

the purpose of tutorial-type instruction. The graphics and the topics address

simple but essential skills. While the graphics were created to be used in

elementary classes in large group instruction on a projector, this website can be

used independently by anyone as a tutorial. Frequently new staff may come to a

school or business that have no previous experience with Apple computers.

Whether the user is 8 years old or middle aged, this project provides instruction

for people with little prior knowledge.

Published Graphics:

http://edtech2.boisestate.edu/jenkinsm/506graphics/graphic5.html

Process and Design

The biggest challenge in creating these instructional graphics was to make

the images interesting and informational, and not just look like screenshots. I

spent some time working on the color scheme, trying to use colors that would

feel energetic, and use the color repetition to link the topics together. I browsed

instructional websites looking for design styles, then I used the Adobe Kuler

application to create different color sets. After several ideas, I created the


2/9

bubble guy graphic to add a little humor, so the images wouldnt feel sterile

and bland.

Next, I worked on collecting all the screenshot images. For some of

these, I used zoom tools to get the correct viewpoint. I created a template as

the starting point for each graphic. The template contained the borders, arrows,

and text samples so that I could carry the design elements through the project.

I added the color swatches from Adobe Kuler into the FireWorks color panel. As I

studied the different graphic design concepts, I looked over my list of topics to

see into which ones I could incorporate the new elements.

The website format needed to be very structured, but easy to navigate

and show all the contents in one place. The navigation keeps the user at the

top level of the website all the time. There are no buried pages, or linear

navigation. The website topics can be used in isolation, like a tutorial site where

you just select the topic you want. This design fits with the purpose of the

project. Each graphic presents only one skill, and uses design elements like

arrows, color repetition, and text labels to focus attention to the main idea.


3/9

The following list summarizes the design process for each graphic.

Citations listed refer to the textbook by Lohr.

1. Create a Folder

This graphic will provide proficiency with less repetition by the teacher, because

the image shows all the steps in a static view. Following the principle of

selection, the graphic shows just the elements of the steps students need to

learn, without the clutter of the rest of the computer screen. By using

organizational arrows, the students connect the text for the steps to the places

where they should put the mouse. The arrow graphic not only points to a spot,

but also resembles a mouse arrow. (Lohr, p. 80)

It will provide students with information to work independently.

Alignment of the steps in text format shows the order to complete the steps, and

repetition of the numbers in front of the steps and on the arrows shows the

relationship in the tasks. (Lohr, p. 203)

By displaying static graphics, the teacher can demonstrate the steps, but then

also have the steps visible for students who were not paying attention the first

time, who clicked the wrong thing, and gives advanced students the freedom to

read the instructions and do tasks themselves. Visual learners may perform

better by reading the instructions and seeing the graphic than by having to listen


4/9

to the teacher say the instructions.

2. Using the Finder

Chapter 9 presents in several places that sans serif fonts are preferred, and

perhaps more legible on computer screens than serif fonts. I have used a bold

sans serif font for main headings, and a simple sans serif for supporting text.

My visuals capture a lot of text from the computer screen. If I enlarge the

graphics too much, the text becomes distorted, so I have to pay attention to

that. I have chosen a bright color scheme with Adobe Kuler tools. The color

scheme provides repetition among the graphics from page to page.

http://kuler.adobe.com/#themes...playground

Left alignment is used by lining up the headings with the left edge of the graphic

boxes. In other places, I have used the Fireworks snap grid tool

to align text headings with the other text headings to provide

repetition and better alignment across the visual (Lohr, p. 238).

3. Using Folders

My students have little understanding of the hierarchy of folders in computer

systems, and they also have little experience with the idea of file folders or file

cabinets. I accompany this lesson with actual file folders that I show and nest

them together to further illustrate the idea. After looking at the examples of


5/9

shape in the Slideology chapters document, I decided that using arrows would

show the relationship of folders to each other, and how the layers of information

are related. Using flow when working with the folder shapes

and keeping the linear spacing even helps to demonstrate how the folders are

related. I used the graduated shape to indicate that the folder topics nest inside

each other. This was described as an abstract shape concept called enclosed.

From page 203 of the textbook, I used repetition in the color and shape

of the folders and arrows to show relationships.

4. Minimize/Maximize

Following the idea of figure-ground, the figure is isolated using a visual

magnification. (Lohr, p. 113) The document is the ground- you need to know

where the colored dot tools are in relation to the document window, and that is

the only reason the document view is needed. (Lohr, p. 104)

5. Set up a Page

I have used the colored bands in the images to identify the concept (page 265),

and using color to show the concept of direction through integration, the big

picture. (Lohr, p. 269) The direction of the color bands emphasizes the

orientation of the photo, to define the concept of portrait / landscape.


6/9

6 & 7. Commands and Editing Text

Looking at the gestalt in these graphics, I wanted to reinforce the pattern and

repetition in using the Command key to perform common tasks.

I used a grid to set up the relationship between the menu item and the keyboard

shortcut. All the keyboard shortcuts are similar; I think even just repeating the

word COMMAND is a form of repetition. I used a grid on two pages, so that the

functions appear in similar places on the page. I kept the grid visible to provide

contrast, and I also used the invisible design grid to align everything carefully.

8. Save Files

This graphic uses repetition in color from the rest of the set of graphics. I also

used a fill color to make the 3 items stand out, to have contrast, and resemble

flash cards. I controlled white space on the graphic by containing

the 3 flash cards within a rectangle, so they were in close proximity,

but also used succinct question statements so that there is not an excessive

or unnecessary amount of words. Question 1, why to save, is a mostly rhetorical

question, designed to lead students to answer that we should save everything.

Cartoon guy emphasizes this fact. From page 275, I used symmetry

of space and objects to show that all three questions are equally important steps


7/9

when you save. I added the 3-dimensional title to add interest.

9. Moving around Websites

In this graphic, I have used chunking to present important informationin text

form. I presented 3 pieces of information, and limited it to only the information

that was absolutely necessary to present in text form.

From the textbook, page 125, information processing research states that the

short term memory can handle seven +-2 pieces of information at a time. I also

have used selection to visually direct the eye to the close/add tool on a browser

tab. The graphic uses repetition in color from related graphics in my unit. The

arrows direct the viewer to important items. I repeated the label TAB in

important locations, because it is the main concept and term I want the viewer

to learn.


8/9

Sources:

Alessi, S. M. and Trollip, S. R. (2001) Multimedia for Learning, Methods and

Development. Boston: Allyn and Bacon

Beginning Instructional Authoring: Why C.A.R.P. Is Exactly Whats Needed by Patti

Shank: Learning Solutions Magazine. (n.d.). Retrieved December 4, 2011,

from http://www.learningsolutionsmag.com/articles/713/beginning-

instructional-authoring-why-crap-is-exactly-whats-needed-part-1

Computers, Graphics, & Learning. (n.d.). Retrieved December 4, 2011, from

http://scholar.googleusercontent.com/scholar?q=cache:nDiVt03PmxkJ:schol

ar.google.com/&hl=en&as_sdt=0,51

ISTE | NETS Student Standards 2007. (n.d.). Retrieved December 4, 2011, from

http://www.iste.org/standards/nets-for-students/nets-student-standards-

2007.aspx

Lohr, L. (2008) Creating Graphics for Learning and Performance. New Jersey;

Pearson Education, Inc.

Scientific Commons: E-learning: and the Science of Instruction: Proven

Guidelines


9/9

for Consumers and Designers of Multimedia Learning (2003), 2003 [Colvin

Clark, Ruth, Mayer, Richard E.]. (n.d.). Retrieved December 4, 2011, from

http://en.scientificcommons.org/8750040

Documents

Justification PaperMichelle Jenkins