doolittle examples

Great job compiling links that confirm or refute concepts related to Peter E. Doolittle's assertions about multimedia learning theory.

Below are the links and notes you submitted:


Timing is everything

Twitter Search in Plain English
Many part of this video support "Timing is Everything" or the Temporal Contiguity Principle of multimedia learning theory.  The creators do a great job synchronizing images and audio by displaying the images and playing the audio at the same time.  The best part of this video is shown below:

Animation:
example-oneexample-twoexample-three 

Audio:
..........................."Carla found that Twitter brought her closer to people that matter to her"
                             2:09
In this example, the animation of Carla's friends perfectly matches the narration transcribed below.  As Carla's friends move closer to her Twitter page, the narrator explains that Twitter helped Carla bring her friends closer.  The animation illustrates a figure of speech.  As a result, not only does he help draw a connection between Twitter and a sense of proximity, but he also introduces an element of illusion that humors linguistic idiosyncrasies.  The use of this metaphor helps integrate the audio and the images.

**********

Did You Know 4.0
This video supports "Timing is Everything" or the Temporal Contiguity Principle of multimedia learning theory.  It synchronizes images and text by displaying the images and displaying the text at the same time.  The best example is shown below:
dexample-onedexample-twodexample-three 

In this example, the creators embedded logos inline with the sentences in the text.  This is an extreme form of juxaposing images (i.e. logos) and a text that refers to those images.  Moreover, logos often carry text, and even when they do not, they still hold meaning because they are well known in society.  In this shot, there is a three-tiered juxtaposition of image and text.  The largest one is the positioning of logos (images) within the text.  The second level (red squares) is text in the logos themselves.  And I would argue that a third layer (blue squares) is composed of the logos that are recognizable enough to not need text.

Take Away Messages

1) Learning is best when most similar to imagination.  It almost resembles magical realism when it is most effective.  It need not be realistic.  When it is, the multimedia designer is operating under the assumption that human understanding is best when mental representations of reality reflect the exact state and structure of the physical world, not the mental world of meaning.

2) What Learning Theory proposes is that images and text be co-temporal.  However, what the spirit of this principle is getting at is that the illustration and the meaning must be juxtaposed.  Practicality speaking, text is a great conduit for meaning.  Logos are seldom as easy to deconstruct as is a word, if the viewer can read.

 


Keep it Simple

Example of a multimedia website that breaks the “keep it simple” rule:
http://www.nytimes.com/interactive/2009/08/21/us/200908-beth-court.html

Though the presentation itself is solid, the page violates multimedia learning theory by presenting, on load, side by side moving images. The viewer’s attention to the main content of the audio slideshow is diverted by the moving panorama to the left, and the overload is further complicated by the autoplay narration starting just as the user is looking at the page text for the first time. Therefore, there is both verbal and non-verbal overload. The page could be easily fixed by turning off the autoplay for both the panorama and the slideshow.


Keep it Close

www.lyndonwade.com
He Has giant pictures in his portfolio but no descriptions on any of the pictures. Lyndon Wade has wonderful pictures but I think it would be even better if they had captions because I think his audience would like to know what the actual picture means and what it is of. He can also put what type of media was used as a caption, just to give the audience a little background.

System:Users:shanices:Desktop:Picture 5.png

**********

http://www.nytimes.com/interactive/2008/08/22/nyregion/20080822_LASTSTOP_FEATURE.html
On some of the pictures there were captions. On the other pictures, there were only titles on them.  With every picture, there should be a caption even if it’s describing something and it should be consistent.

System:Users:shanices:Desktop:Picture 4.pngSystem:Users:shanices:Desktop:Picture 3.png

**********

http://www.nytimes.com/slideshow/2009/11/05/sports/20091104SPTSMLB_index.html
This is an example where there is a caption but it’s not in the correct place. I feel that a caption should be under the picture and you hover on the picture the caption pops up. In this particular image, the caption is all the way to the right. Keeping it close says that the students rather the corresponding words be presented near the pictures rather than far.

 

System:Users:shanices:Desktop:Picture 6.png

**********

Retail Sites
Retail sites like Radioshack.com (example) and BestBuy.com (example) frequently separate their informative content (product specs and descriptions, user reviews) from the picture of the merchandise.  Some of the savvier sites (Amazon.com: example; Apple.com: example) have begun to add additional pictures of the merchandise “below the fold.”  Doolittle’s “Spatial Contiguity Principle” states that students (or, presumably, consumers) learn better when corresponding words and images are placed close to one another.  In an online retail world, part of the “sale” includes educating consumers about the product. 

**********

Art Museums
The purpose of art museum websites is more traditionally “educational” than that of retail websites, and it is more difficult to rationalize bad design for elements like price and purchase information (which often takes up space next to the photograph on retail web sites.  The New York University Art Gallery (example), for instance, provides an introduction to its exhibits via text and one photograph.  To see more art, visitors must take the “View Photos” link, from which they can then choose from a number of unaccompanied examples.  The Art Institute of Chicago (example) functions similarly.  In both cases, visitors can either view the art or learn about it, but they cannot do both on the same screen.  Compare this with the University of Michigan Museum of Art, which also brings users to a textual summary with one photo.  Here, however, when visitors click the “more photos” button (small and in a washed-out color, but there nonetheless), they can scroll through examples from an exhibition on the same screen as the educational text.


We don't need no stinkin' text

example-doolittle-two
www.smibs.com
The Smibs Web site is poorly designed in terms of cognitive overload. The page is far too text heavy, with too much random white space.  Rather than giving the eye a break from all of the text, the white space is sectioned off, which makes it even harder for the eye to comprehend.  In addition, the site lacks a clear information hierarchy, which causes the eye to try to take in all of the text at once.

**********

example-doolittle-one
http://www.havenworks.com/

This Web site is the definition of information overload.  It seems quite likely that its design is totally undermining the site’s purpose--to educate people on breaking party politics--because it fails to deliver such information in an easy to understand, non-obnoxious way.  Research has proven that vertical design is better than horizontal, and the horizontal design of this site, I would submit, is the least of their worries.  There is text and icon overload, and no information hierarchy.

**********

According to the Modality Principle, students learn better from narration playing along with animation, rather than from animation accompanied by on-screen text. .  It requires less concentration to process audio along with video than having to read while looking at an image.
Studies have also shown that processing experiences both verbally and visually leads to better learning retention than simply one or the other.  Imagine watching one f the Lynda.com training videos without audio or without video.  It would be nearly impossible to gain any knowledge about the software if you had to rely either the narration of the video.  In other words, audio narration complements video and vice versa.

http://blogs.reuters.com/photo/2009/08/27/self-made-bionic-man/

Lynda.com:  Play any video and turn the sound off

***********

Magnum In Motion piece -  « One Planet, One Chance » :
http://inmotion.magnumphotos.com/essay/one-planet-one-chance
This multimedia feature, created by the digital studio of the Magnum photo agency, is an interesting example of a piece which uses animation (ie. A photo slideshow and infographics), narration (through the theme and the chronological sequence of photos), and  on screen-text (infographics and other text sequences). The piece had a great impact on me when I saw it the first time, to the point that I can recall it to this day. Granted, this specific form of narration would probably have very different impacts on people, based on their personal sensibilities, and could be ineffective in raising awareness about the environment amongst some kinds of people. However, it serves to show that on-screen text, mixed in with a photo-slideshow, can also be effective for some, and can have its place and effectiveness in an educational multimedia story about a social, cultural, environmental, or other subject -  if it is well done !


Swarm Interactive – Medical Animations :
http://www.swarminteractive.com/patient_ed_animations.html
Taking the “angiography” animation (in the cardiovascular animations section of the Swarm Interactive website), as just one example, one can see how on-screen text, combined with audio narration and animation, can in fact be an effective tool for teaching and learning about certain subjects. When watching instructional multimedia pieces about very complicated medical subjects, on-screen text may actually help by lightening, rather than adding to, the cognitive load, since it is hard for someone to learn about the procedure and memorize\pick up all the essential key terms and phrases just from the audio narration alone. So the text can serve as an aid to memory. Although it may in some cases be distracting and detrimental to learning, on-screen text does seem to have its place when it comes to complex, science related issues which imply the learning of lots of new vocabulary while learning about a larger issue.


Learning Styles

Two very successful sites that employ the concept of teaching low-knowledge and high-spatial learners to great advantage are Youtube and Lynda.com.

While homemade videos longing to become viral still abound, YouTube has become a treasure trove of information and instructional videos. It is no coincidence that the typical video is narration in conjunction with visual instruction, perfectly suited to the more successful multimedia learner, according to Doolittle's research.
Lynda.com, a highly successful learning site for software, also employs the instructional animation with a voiceover narration.

For example, the How to cast on video on YouTube is one of many knitting instructionals. It was recommended to me in a knitting class.
Any of the instructional videos on lynda, including the ones recommended for this class, are good examples of catering to the optimal multimedia learning style.

Both Lynda and YouTube also employ the segmentation principle outlined in the online Doolittle paper: Multimedia learners do better when they are able to control the flow and the rate of the information presentation.

Examples:
http://www.youtube.com/watch?v=5T43J_cYlSU&feature=rec-LGOUT-real_rn-HM

http://www.lynda.com/Member.aspx

**********

The first two examples are successful in keeping the rule of learning styles because they use one verbal and one nonverbal element, but avoid using two verbal elements like the third example. Research has shown processing experiences verbally and visually leads to greater learning and retention as opposed to only verbally. Conversely, Having more than one verbal elements results in cognitive overload, leading to lower retention.

http://www.nytimes.com/interactive/2009/11/04/us/politics/20091104_BEES_SS1/index.html?ref=multimedia
(audio slideshow with narration and photos, no caption text)

http://swarminteractive.com/patient_ed_animations.html
(images and text, animations step by step)

http://www.laurengreenfield.com/index.php?p=VQTME4W6

(what NOT to do - text, audio, photos)


Speak Up

The Diver’s View
http://www.nytimes.com/interactive/2008/08/21/sports/olympics/20080821_10M_DIVING.html
This multimedia presentation features a rotating 360 view of the Water Cube overlaid with a diver’s narration.  Not aiming to teach, this presentation relies heavily on the intonation of the narrator to convey a feeling and capture what it’s like to be on the platform.

**********

ResNET
http://its2.unc.edu/resnet/programs/media/?prog=26940848317&projnum=1
ResNET creates training videos for each of their programs.  They feature screen captures with narration explaining the process, for anything from how to install CCI printing to malware removal for your computer. This goes along with the ‘Speak Up’ principle because it allows people to process the ‘how to’ simultaneously with the screen visual.

 

Multimedia Design
description & policies | assignments & grading | calendar | downloads | search | home