Eye Spy

Image retrieved from: http://bit.ly/ykaP5o

Article review: Screen Design Guidelines for Motivation in Interactive Multimedia Instruction: A Survey and Framework for Designers

As my group project for Advanced Instructional Design evolves, so does my role within the group.  We started off by researching and applying keywords and tags to photos, and now we’re on to usability testing.  Somewhere in the middle I’ve volunteered myself for some graphic design (I have a TINY bit of Photoshop experience).  We needed to have a title banner run along the top of the gallery.  Since I take on each task as a learning opportunity, I wondered what role images, screen design, and layout have to do with Instructional Design.  I stumbled upon this article (which coincidentally references my professor’s materials on Instructional Design).  Here are some of the key points I’m keeping in mind for the graphic design of the banner, and the layout of our photo gallery.

Organization is key!

Motivation and retention are driven and influenced by organized materials.  Images/galleries should be well-organized and easy to navigate.  Well organized material also helps to maintain interest and promotes learner engagement.  Organization also helps to reduce learner fatigue.  Organization should be considered right from the start of any project.

Visual Characteristics

TYPOGRAPHY –  The organization of text can be broken down into further sub-sections such as tables, charts, and diagrams.  There are certain cues which affect the ‘learning’ of material.  Factors such as FONT, SIZE, BOLD, ITALICS,  the use of UPPER and LOWER CASE, the contrast between text and background, and consistency in typography all influence what we retain from a website. Improper typography can result in visual noise that can distract from the learning at hand.  Some other typography points that I learned were:

1)      Use highlighting sparingly, too much can be a distraction

2)      Blinking or moving fonts can be very distracting and hard to read.


GRAPHICAL IMAGES – Since this is the focus of the gallery, there were many important points learned in this section. Images used in materials should be of an appropriate size (images that are too small or large will distort the resolution and the image will lose it’s impact).  Images should be used sparingly – to point-out or highlight major details.  Images need to have captions and/or keywords to show their purpose and relate them to the material at hand.  Images should follow normal conventions (for example flow charts going from left to right or top down) to avoid confusion and remain within logical parameters.


COLOUR – Colour has a unique role in multimedia design as it serves both a concrete visual role as well as an emotional role (red-anger, blue=calm, etc).  Colour can promote learner/material interaction or distract from it. 

1)                  Colour choices should be limited and held to an over-all colour scheme.  Keeping to a colour scheme promotes unity and flow in multimedia design.

2)                  Colour choices should be consistent (backgrounds, text colours, etc).

3)                  Colour can be used to cue the learner for something new or to highlight importance.

4)                  Background colours should be kept to dark shades while foreground colours should be held to brighter hues.

5)                  Complimentary colour schemes should be avoided (blue/orange) etc.

6)                  Colour use is age dependent – know your target audiences.  Bright, high-contrast colour schemes can be used with designing for younger audiences while more muted colour schemes can be used for mature audiences.

 Boling, E. , & Lee, S. (1999). Screen Design Guidelines for Motivation in Interactive Multimedia Instruction: A Survey and Framework for Designers. Educational Technology. Volume 39. Retrieved from: http://www.medvet.umontreal.ca/techno/eta6785/articles/screen_design_guidelines.pdf


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 )

Connecting to %s