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


Tag! You’re it!

Article Review:

Fu, Y., Mao J., Su D., and Xu, Z. Towards the Semantic Web: Collaborative Tag Suggestions. Retrieved from: http://semanticmetadata.net/hosted/taggingws_www2006-files/13.pdf on February 2, 2012

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

When it comes to organizing web objects, tagging has been a common method of classifying the object and identifying it for easy retrieval.  Tagging is a networked approach to organizing objects as opposed to conventional hierarchical structures.  Rather than a top-down cascading approach, tagging allows users to interact with objects as a network of data.

In browsing Google Scholar (which is my new favorite search engine for academic articles) I came across a very good article on using tagging as an effective way of organizing web objects.

The authors argue that tagging (as opposed to traditional methods of organizing data) allow users to move away from standard methods of fitting objects into  set-standard ‘molds’.  Tags used in combination with each other also allow for flexibility in searching.  The authors uses the example of Renewable Energy.  This tag allows users to search for items tagged under renewable, energy, and renewable energy.

Tagging allows for flexibility when searching for digital items.  Think about a physical photograph.  If the photograph is of a horse on the prairie,  which photo album would you put the photo in?  One of horses? One of the prairies? What about the time period?  What about a specific farm or location?  Digital tagging allows users to enter specific keywords that would draw a potential audience to that web object.  This is the case my team is experiencing with the Baker Slide collection.

When tagging an object, tags do not necessarily need to relate to each other.  The tags are meant to draw in the audience.  Think back to the horse on the prairie, ‘horse’ and ‘prairie’ are mutually exclusive to each other, however, they each draw an audience to the same photo.  The more keywords one searches, the more refined and specific the web object will be.

Xu, Fu, Mao and Su suggest that the number of tags be kept small, but fail to provide an ideal number.  In their research they used web objects that had between three and 6 tags.  They suggest using one tag from each of the categories below.  I will use the idea of the horse on the prairie as an example.

1) Content-based tags – These are tags that relate to what is contained in the photo.   They are specific terms.  These can be objects in the photo, or what the photo is about.   HORSE, WHEAT, etc.

2) Context-based tags – These tags are things which help identify the content.  They can be locations, places, and descriptors. PRAIRIE, ALBERTA

3) Attribute tags – These tags relate to the main idea, but may not be identified directly.  SMITH (for Joe Smith’s Horse), RAMSAY (as a descriptor of the land owner).

4) Subjective tags – These tags are how the creator feels about the images. PEACE, SERENE, COOL, etc.

5) Organizational tags – These tags help to organize, or define the organization to which the object belongs. Ex. BAKER SLIDES, etc.

The authors also set some criteria for good tags.  They say that tags should:

  • Include common words
  • High popularity
  • Identifying should be least-effort
  • Uniformity within a collections

In conclusion, Xu, Fu, Mao and Su believe that tags allow users to search for and reach web objects from multiple vectors (not a linear or uniform search). Tags allow for sharing and discovering web objects.  The authors also caution us to think and use tags appropriately and purposely to eliminate unsolicited searches and spam.  They also suggest that the same principles in using tags can be used in developing a ‘tag cloud’ – a grouping of tags to be used to tag a collection.