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.

How Smug is your Mug??

My last blog post for ETAD874 addressed the generation gap and technology.  I decided to take a different twist on this post and give and in-depth review of one of the on-line gallery tools my team is looking at to present to our client – The Saskatchewan History and Folklore Society.

From an initial consultation and needs assessment here is what the client would like:

• The online publishing of the over 9300 Baker Slides.
• To have these images organized and tagged (and if possible geotagged).
• To have these images available for purchase.
• To protect the integrity and authenticity of the images (possible watermarking of viewable images).
• An interface that is easy to use and maintain.
• An interface that is easy to access by the public.
• An interface that is accessible or integrated with the overall web redesign that is taking place.

Our team came up with 3 possible ideas for the Baker Slides:

1. Using FileMaker and constructing our own database of the slides.
2. Using Flickr.
3. Using SmugMug.

I had never heard of SmugMug.com until it was suggested by a fellow team member.  Another team member and I took on the task of developing a Sumgmug prototype.  Developing the prototype required some investigation into the workings of SmugMug.  Here are some of the findings.

SmugMug offers three levels for customers.  This blog entry will be reviewing the “Pro” version.  I will explain costing at the end.

Account set-up and Registration

Set-up and Registration was as easy as setting up an e-mail account.  The SmugMug main page offers multiple opportunities to sign-up for the free 14 day trial.  This trial is for the Pro features.  The initial sign up does not ask for personal information other than an e-mail address and setting up a password.  No personal information is required at this stage.  During setup, you are asked to set-up a domain within SmugMug.  It can be *anyword*.SmugMug.com.  Users have the ability to go into advance settings and map their existing web-address to their sumgmug site. Set-up is quick and easy, and you are ready to upload your images.

Images and Galleries

After registration you create an initial gallery.  SmugMug allows for users to have multiple galleries (for ‘big picture’ categorization and sorting of images).  It also allows users to assign individual photos to more than one gallery.  Gallery pages are organized into thumbnail images on the left hand side of the window (with right and left arrows to see more photos) with a larger image preview on the right hand side of the window.  Clicking on the thumbnail changes the image preview. Floating the mouse over the preview image brings up image options.  Users can click “thumbs up or thumbs down”, download the image, and get more information about the image (size and data on the image).  Beside the preview are options to make purchases.

Uploading images is quick and easy as users can select multiple files from a folder on their computer and batch upload into SmugMug.  Users can then click the thumbnails to see the preview of the photo, and from the preview users can geotag the photo, tag the photo with keywords (which then makes them searchable in an one-stop search bar), and add a caption to the photo.

On the public side of sumgmug, viewers of images have the opportunity to share the images via Twitter and facebook.  They also have the opportunity to comment on the image or on an entire gallery.  All comments can be moderated by the managing account.

E-Commerce

SmugMug Pro offers an e-commerce solution for the professional photographer who would like to sell their images.  Products offered range from common 4×6 photographs (with sizes increasing to the limit of the resolution of the uploaded file), mugs, posters, calendars, framed photos, wallet-size, and photo stickers.  All items are given a base price (price that SmugMug charges).  Users can then apply a mark-up percentage to the entire catalogue of items available or can take the time to set mark-up prices on each category or individual item available for purchase.  All items in the catalogue are produced on-demand so there are no overhead costs to inventory production.  Item check-out is similar to checking-out at any e-commerce site.  Customer service is handled by SmugMug, so users do not have to deal with any customer issues.

One of the negative components to SmugMug is that it is American based.  All transactions take place in $USD.  For the client, they need to set up a pay-pal account to receive their sales proceeds.  Canadians are charged 1.5x the U.S. shipping rate, which is discounted from other international shipping rates.  Base US shipping rates are quite reasonable.

Customization and Security

SmugMug offers users the ability to switch certain features on or off depending on how they would like to handle customization and security.  SmugMug allows users to:

• Watermark their photos.
• Disable the ‘right-click’ Save photo option.
• Password protect certain photos/galleries.
• Remove SmugMug headers and replace them with their own logos.
• Moderate comments from the public.
• Have a website free of ads and spam.
• Enable viewing on iPhones, iPads, and other mobile devices.
• Embed a flash slideshow of their photos in blogs.
• Upload an unlimited number of photos (max file size of 24MB’s a photo).
•  Have a dynamic display of the most popular photos.
• Choose from (and change at any time) 50 different themes.
• Have full HTML control over their website.

Maintenance and Cost

Once the images are uploaded, organized, tagged, geotagged, and captioned appropriately, there is very little maintenance that needs to be done to the site.  Users can come in and change a theme with a few clicks to refresh the look of the site without major time and work.  Users can go into the site at any time and change galleries or edit photo information.

The costs for SmugMug are as follows.  Basic – $5.00/month or $40.00/year, Power – $8.00/month or $60/year, and Pro $20/month or $150/year.  Here is a link to a comparison chart of the different price points.

http://www.SmugMug.com/photos/photo-sharing-features/

Conclusion

Taking into consideration information provided from my fellow group members on the FileMaker and Flickr prototypes, I feel that SmugMug is the most appropriate choice for our client.  The features in SmugMug seem to check-off many of their ‘must-haves’ and most of the ‘would like to’s’’. The pro-version may be more than a semi-professional or hobby photographer may need, but the Baker Slides are a priceless historical collection of esteemed photos.  The money and time spent on developing proper galleries, which in turn the client would be able to keep control and security over, is important.  The e-commerce options also allow the selling of digital images as well as print photos (and other merchandise mentioned above).  Since the e-commerce is built into SmugMug and handled by their team, SHFS should be able to sit back and let the pictures sell themselves.  It could be as simple as waiting for the ‘cheque in the mail’.  As the SHFS is a not-for-profit, hiring or contracting work after the instructional design team has finished it’s work may not be in their budget.  SmugMug allows for an easy hand-over of the account settings and will require very little maintenance and upkeep.

J.T.

The Generation Gap

Retrieved from: http://bit.ly/zNJEqJ

One of the assignments for ETAD 874 (Advanced Instructional Design) is to find and review articles that relate to the overall design project for the course.  Let me give you some background on the design project.  The project that the 12 of us is working on is a redesign and re-organization of the Saskatchewan History and Folklore Society.  The class is divided into two teams.  One team is working on the redesign of their website, whilst the other group is working on the organization and distribution of the Baker Slides (a historical image collection).  I am in the second group.

During our first project team meeting, we discussed the initial needs assessment of the client and who their target audience is.  From the information provided to us we discovered that it is mostly seniors who access the website and image database.  The discovery put us at a crossroads.  Do we revamp the website for the ‘next generation’,  do we refresh what is already in place, or is there a way to accomplish both – the win-win situation?

This discussion led me to an article on Instructional Design and the generation gap. Although the article is directed towards higher education, there are strong ties to the website redesign and the impact it has on the age of it’s users.

The article was taken from the Canadian Journal of Learning and Technology and is titled “Digital Learners in Higher Education: Generation is Not the Issue”.  It was written by Mark Bullen – British Columbia Institute of Technology, Tannis Morgan – Justice Institute of British Columbia, and Adnan Qayyum – University of Ottawa.

The article is a reaction to the popular belief amongst many designers that instructional design and technology use is generation-dependent.  The authors make a bold statement in the abstract that says: “A comprehensive review of the research and popular literature on the topic and an empirical study at one postsecondary institution in Canada suggest there are no meaningful generational differences in how leaners say they use ICT’s (information and communication technologies) or their perceived behavioural characteristics.”  (Bullen, Morgan, & Qayyum , 2011)

The authors spend the first few pages of their article arguing against the common belief that the net-generation (which they define as people born in 1982 or later) is better suited for ICT’s in their instruction.  The authors argue that ICT use is not generation dependent – it is USE dependent.  I will discuss this issue more later in this post.  Bullen, Morgan and Qayyum found many studies that support this wideheld belief, however, they had some issues with the research.  In many cases, research was completed on students (multi age) who were already enrolled in technology programs.  They also found a study (Oblinger and Oblinger, 2005) which legitimized the unique learning patterns of different generations, but the report was based mostly on speculation and anecdotal research. (pg. 5)

Bullen, Morgan &Qayyum decided to author their own study which looked at two groups: the Net-Generation (b. 1982 and later), and the non-net generation (b. prior to 1982).  The study was conducted at two British Columbia postsecondary institutions and took place in two parts – Interviews and an empirical data survey.  The study aimed to answer these three questions:

“How accurate are some of the more prevalent claims about net generation learners? Do the students at this Canadian postsecondary institution fit the typical profile of the net generation learner? How are the learners at this institution using various information and communication technologies (ICT)” (P. 6)

Here is a summary of their findings:

1)      Contrary to popular belief that e-mail is for the ‘older generation’, the study found that both groups use e-mail because of its formality and to maintain a certain distance from their professor.  E-mail was also a useful tool when needing to communicate to a group, long messages, and to share files.

2)      When asked what factors could improve their learning, both sets of students deferred answers on ICT’s and cited more physical factors such as better lighting, better lab and library hours, more windows, and better internet access.

3)      There were no significant differences between the generations in computer use, their desire to explore learning, their preference for clear instructions before trying something new, and goal setting.

4)      There were no significant pattern differences in personal or institutional e-mail use.  For both groups the most preferred method of communication with peers was in-person.  In fact, both groups had similar rates of in-person communication vs ICT communication with peers.

5)      The study found that the net-generation was more inclined to use web tools (instant messaging, facebook, etc) to communicate between peers , but this was not the case in communicating with the instructor in a course.

The authors argue that the use of ICT’s are not driven by generation, but driven by the context of the course materials.  My interpretation of their argument is that the use of webtools for learning is driven by the context and the need for the technology not by perceived age needs (which reminds me back to a previous blog post I did on Technology for Technology’s Sake).  They say “..we need to avoid the temptation to base our decisions on generational stereotypes and instead seek a deeper understanding of how students are using technology and what role it plays in learning and teaching in higher education.” (p. 17).

For Bullen, Morgan &Qayyum, they feel that the report has two main findings.  Instructional design decisions should not solely be based on generation and age alone, and that when institutions fund future ICT investments, they should avoid blanket-programming (such as system wide webtool licences) and look at the specific needs of individual programs and fund their needs appropriately.  They say that institutions should avoid making campus wide ICT decisions as they may not be appropriate for all programs (p. 18).

Although this article dealt with higher education, the idea of generation has be discussed in our round-table group meetings more than once and has become a “hot button” issue for us.  It is something that as a group we will need to discuss further before proceeding with our design.  I hope that this article review sheds some light on how different generations interact with technology.  One of my guiding design principles is that good design will transcend the target audience.  I plan on brining this idea forward in our design team meetings.

J.T.

 

Bullen, M, Morgan, T., & Qayyum A. (2011) Digital Learners in Higher Education: Generation is Not the Issue. Canadian Journal of Learning and Technology, Spring 2011.  Retrieved from: http://www.cjlt.ca/index.php/cjlt/article/view/550/298