These Massive Open Online Courses (MOOCs) create “a strange paradox: these professors are simultaneously the most and least accessible teachers in history. And it’s not the only tension inherent in MOOCs,” writes A. J. Jacobs in the Sunday Review. Jacobs recently signed up for 11 courses (of which he completed 2), and graded his experience:

• B+ for the professors, who tended to be charming and theatrical, trying to make the best of the virtual environment. There’s no patience for crummy professors, as in a math course canceled in 2012 by Udacity.
• A for convenience, which is unmatched as students can learn from home, while commuting, worldwide. Start and stop anytime.
• D for student-teacher interaction, which is virtually nonexistent. It’s one-way delivery from pop-star teachers, a virtual lottery to get a professor to answer a specific question.
• B- for student-student interaction, which is vital for cementing the newly-learned knowledge, but even the best online discussions lack the immediacy of real life. There’s also a signal-to-noise problem, as well as trolling.
• B- for assignments, which are heavily multiple-choice quizzes (great for computers to grade, bad for measuring learning), rampant with cheating, and lackluster when peer-review is used for essays.
• B overall, which a generally positive experience, but minimal practical application when taking diverse subjects, and the courses don’t convey any credentials.

The hot air surrounding the rise of MOOCs is beginning to subside, and the ideas will percolate other fields.

On the academic end of the spectrum, traditional academia must and will respond to the pressures that are disrupting their industry. MOOCs are different in many ways from the “distance education” of the last few decades. How will universities compete with free? How will they justify being on-campus as the virtual experience improves? How much can the traditional, intimate classroom model of learning be bastardized before it looses all meaningful value, reduced to little more than watching TV?

This 18 minute TEDx talk by Michele Pistone discusses the future of higher education, and its historical origins:

//www.youtube.com/watch?v=nsiQ6-JTOWM

(Read more comments on Pistone’s talk.)

Of greater interest to this blog, is informal and professional learning. This is the opposite situation, as MOOCs have much to teach us. If you are involved you outreach, take inspiration from MOOCs about:

• Approaches to improving online learning (adding assessment, interactivity and community)
• Adding social aspects (online forums, exploring peer review, and seeing what formats prod students to engage)
• Implementation (user interfaces, software, marketing angles)

It’s all about packaging. The underlying elements (articles, videos, forums, etc.) have been on the internet for some time, and many organizations already have these ingredients at hand. What differentiates an “online course” is how it’s all combined, the outcomes (both learning objectives and certification), and the overall cohesiveness of the package.

How can you deliver learning with online courses? (And do you want to?)

For some more background, see also our articles on “What is an online course?” (Jan 2012), “Online courses for learning skills: MoMA, NYT & knitting” (Jan 2012; BTW: NYT recently canceled their online courses),  “Higher-ed courses with massive enrollments: A revolution starts” (Jan 2012), and “Online college courses, with and without the degree” (Feb 2011).

The codes are easy to generate. Several web sites and software programs will make the codes for you.

To read the codes, users need a QR reader app to take a snapshot of the code with their device’s camera. The app returns the decoded text or web URL.

In the photo at left, a pedestrian takes a photo of a QR code promoting an Andy Warhol show.

There are hundreds of barcode-reader apps (e.g., RedLaser and QuickMark for iOS and Android devices, and the Kaywa reader for dumber smartphones), and code-reading can be included in custom apps, e.g., a museum tour.

QR codes on the rise

QR codes are currently the best way to transmit information from the real world into an app. The codes were originally designed in 1994 for tracking car parts at Toyota, but they have recently exploded in popularity, and are becoming more familiar to the public. ComScore reported that  14 million American mobile users scanned a QR code in June 2011 (6% percent of all mobile device users). Linda Kelly at the Australian Museum recently surveyed 100 visitors, and 15% said they have scanned a QR code.

The EXPLORA Science Center in Frankfurt is using QR Codes to promote their exhibition (photo at right), and extensively within the exhibition. QR codes in the exhibits at Michigan’s Cranbrook Institute of Science link to Wikipedia entries and relevant websites like the census bureau.  The Heard Natural Science Museum and Wildlife Sanctuary posts QR codes to help its visitors find maps of the sanctuary. (See more expamples in the comments on this MuseumNext page.) Last year, NYC’s central park had a display of QR codes. Here’s a 4 minute promo video:

//www.youtube.com/watch?v=7OCyfV_k2_g

Major advertising campaigns are helping propel QR codes into the public view. For example, this clever billboard shows you the rest of a Victoria’s Secret model:

Give visitors something extra

As an example, the Love Lace Exhibition (July 2011 – April 2012) at Sydney’s Powerhouse Museum has a free app for Apple iOS and Android devices. Visitors can scan the QR code on an object’s label, and see more information in the app

The QR codes are used by Love Lace visitors, but are not a hit. In the first month, the exhibit reported 572 iOS and 165 Android app downloads. People used the app an average of 5 times on iOS and 3 on Android (including when they are not in the exhibition). The QR feature was only used 844 times in the first month, with a 5% failure rate, and 2% of scanned code unrelated to the exhibiton. Visitors scanned fewer than 2 objects per app download, suggesting that visitor did not think it was worthwhile. Many objects were not scanned at all. App developer Carlos Arroyo says they intend to add more interactivity.

Annelies Valgaeren of the MAS in Antwerp says they use QR codes extensively to provide translations, and give objects a ‘voice.’

Nina Simon of The Museum of Art & History in Santa Cruz noted last month that there should be consistency in what the QR codes do, and visitors should know what they will get. In developing a woodworking exhibition which included QRCodes, her team added a sentence next to each QR code, explaining that it would yield. e.g., “Scan the QR code to see the inside of this cabinet (1 min slideshow)” or “Scan the QR code to watch the artist carving these pieces (9 min video).”

What do QR codes look like?

The QR codes (short for “Quick Response code”) are a two-dimensional version of bar codes, consisting of a box of black & white squares.  The codes can vary in complexity.

Encoding up to 15 alphanumeric characters does not require many pixels (top left), while encoding up to 395 characters requires a more densely packed matrix (top right). Also, the codes can be customized (bottom row). The codes employ error correction, so your designers can replace up to 30% of the space, and the code is still readable. However, if you get too artsy, your audience might not realize it’s a QR code.

Try them out 

QR codes are useful for promoting your work because they provide an easy way for the public to learn more about your project, and they are rapidly being adopted by many industries. Book publishers are using QR codes to link to additional content. Academics like Katy Meyers have added QR codes to her poster at a professional conference, where she got 30 more hits to her web site than usual. Washington, D.C. middle school teacher librarian Gwyneth Jones has created cool library scavenger hunts with QR codes.

If your organization is thinking about creating mobile content to complement a new exhibition, whether in an app or a mobile-friendly web site, think about what kinds of additional content, information, audio and video, interactivity or social media you can link to, so as to enrich your visitors’ experiences.

The process of painting a canvas is personal and unique to each artist. Visitors step through the sequence which Philip Pearlstein used to paint a wedding portrait. (WebExhibits) View a the sequence of layers in an Incan mummy. (National Geographic)

Problem

You need to display a time-lapse sequence, or a sequence of images, such as before and after views of deforestation, the development of an embryo, a flower opening, or MRI or PET slices of the brain.

Solution

Allow the visitor to choose a frame in the timeline sequence by using one of two methods:

• Slider: Use a slider with a knob to choose a point in time. The track for the slider should have markings to indicate that there are discrete steps.
• Filmstrip: Display a strip of thumbnails, like a sequence of film. The visitor points at the thumbnail and sees the larger frame.

Discussion

In this technique, the relationship between the frames is emphasized. Good interfaces have measurements on them, with a labeled axis. For example, if exploring a tide, label the axis with times (low tide, medium time, high tide); if looking at MRI slices, label the location within the brain. If the sequence is a loop, such as a rotating planet, instead of a linear slider, use a circular slider, and track the knob in a continuous fashion.

Weather: View temperature, expected high and low and a six-day forecast. Calendar: View the current day and date or click the calendar to reveal the days of the month. Quickly find definitions by typing all or part of a word. Flight Tracker: Enter an airline, flight number and destination or departure city. For flights in progress, a map displays the flight’s approximate location.

Problem

You need to decide between making generalized tools that all work similarly, and inventing several unique tools.

Solution

Add just the controls necessary to yield a functional information appliance, but do not add unneeded controls (excessive features) or portions (like gears) that a real appliance might have.

Discussion

Keep the user interface widgets common. For example, if you use bright green knobs in one interactivity setting, use bright green knobs in other settings. At the same time, the design of your interactive figures should always match its purpose. Use the minimum amount of complexity to achieve your purpose.

For millennia, tools have been invented to achieve just one purpose. In 1978 at Apple Computer, Jef Raskin first promoted the idea of a simple device designed around the information needs of a single function. The concept of focusing on a single function has evolved into a design strategy for interactive tools hoping to break through the complexity barrier imposed by such generic computing devices as the personal computer.

For example, the stopwatch is not useful for telling time, but it is both useful and highly usable for timing the duration of events. The stopwatch is a highly specialized information appliance that does one thing—track elapsed time—very well.

Another interface modeling sounds in Apple Logic.

Problem

You need to show dependencies between components or the key themes in a system. For example, you may need to demonstrate that an ecosystem consists of many species; that an orchestra has multiple instruments; or that the path of a comet depends on its speed, trajectory, and the mass of nearby planets.

Solution

Present the visitor with a model of the system, and allow them manipulate it using the following two methods:

• Multiple instances. The model is a short animation, 5 to 30 seconds long, and the animation depends on the starting conditions. Either randomly set the starting conditions each time the model is run or let the visitor set the starting conditions.
• Real-time changes. The model is a continuous animation, such as air flowing through a whistle, and the visitor can adjust parameters in real time, such as the position of the air entry and the dimensions of the air chamber.

Discussion

By breaking or modulating a complex system, the visitor gains a strong appreciation for how it works and how the various components interact.

This technique is particularly powerful for basic physics phenomenon, such as trajectories, orbits, and vibrations. In addition, it is one of the most effective teaching tools.

Note that virtual reality can be simulated. For example, you do not need to calculate the fluid dynamics of airflow in real-time. Rather, you can have a series of rendered frames, and recorded sounds, to create the illusion of real-time reality.

Problem

You need to explain the relationship between two variables, where one variable dependent on the other variable, and the values are continuous, such as the speed of a horse running around a track or the times in different time zones.

Solution

The following three methods all detail the boiling point of water:

1. Normal graph: The x-axis is the independent variable and the y-axis is the dependent variable. In this case, the x-axis is the height above sea level, and the y-axis is the boiling point of water.
2. Animate values with an abstracted scale: In this case, the visitor moves a knob to select different elevations, and another knob animates in real time to show the corresponding boiling points.
3. Animate values with a realistic scale: In this case, the visitor moves a small icon of a person up and down a mountain. In real time, a ruler scale adjusts to show the current height, an animated thermometer shows the boiling point of water, and an animated timer shows how the baking time varies for cookies.

Discussion

Although a normal line graph actually shows the most information, with the boiling points for all elevations shown simultaneously, line graphs are not intuitive for most users. Animated values with an abstracted scale provides the information while making learning more interesting and fun. Using animated values with a realistic scale, the visitor has the sensation of discovery, as if they are personally climbing the mountain to conduct the experiment. Additionally, you can add contextual information in your illustration, such as nature of the terrain at different elevations. By coloring the figure, the visitor better intuits the difference between a desert-like climate below sea level, and the thin cold air at alpine heights.

Visual examination of graphs helps visitors acquire insight into the complex relations embodied in a model. This technique helps reduce the number of dimensions of data you are showing. Rather than show a two-dimensional graph of elevation vs. boiling point, you show only one dimension (elevation), and one boiling point at a time.

It can be difficult to illustrate three-dimensional data, such as elevation vs. time vs. temperature of cake batter. However, by separating elevation and animating it, you can display a line graph of time vs. batter temperature, and visitors will understand that it takes longer to cook a cake at high elevations because the batter heats more slowly.

Imparting greater understanding through object manipulation.

Problem

An important component of understanding how something works is being able to dissect it into its vital components.

Solution

A web site can lend the sense of taking something apart or understanding how something works.

Discussion

To optimize learning, a presentation should not be linear, like a slide show. Rather, visitors should be able to freely interact with objects, and potentially make mistakes.

Online visitors can experience interaction with objects using independent and dependent variables; modeling and altering reality; interactive appliances; and real-life experiments.

Reducing multidimensional data enables visitors to control what they see.

Data can be more understandable if users can choose how they navigate. In this case, vote counts from the 2005 Iraqi election can be tabulated different ways. (Style.org) Choosing a species of crocodile zooms to a region on a a map, and highlights the species habitat. (National Geographic) In the WordCount exhibit, users scroll to see the most popular words in the English language. (Jonathan Harris)

Problem

You need to display multiple dimensions of data, such as a city map, onto which you want to show the roads, the subway system, crime rates, and demographics.

Solution

Reduce the amount of data shown to the visitor by offering different views through the use of two methods:

1. Predefined views: Provide a series of buttons on the edge of the city map. The visitor can choose a predefined view, such as all the roads, or just the parks.
2. Choose your view: Break down the data into simpler categories, such as streets, highways, demographics, and housing density. The user can toggle these categories on and off, to compare what interests them.

Discussion

This technique reduces multidimensional data by allowing the visitor to choose only the dimensions of interest. Dynamic queries let the user change his or her view in real time.

The origins of these ideas can be traced to a technique called “worlds within worlds,” which displays a visual structure of multidimensional data by overloading different axes and by placing each coordinate system within another. Another technique called “parallel coordinates” explored the notion of choosing subsets of data (rather than subsets of dimensions) and using the parallel placement of axes in 2D. For example, an interactive graph could simultaneously show the amounts of vitamins in different foods, and the visitor could dynamically choose different subsets of foods. This would immediately convey, for example, how both leafy greens and milk are high in calcium; but that both milk and eggs are high in protein.

Problem

You need to display quantitative information about an image, such as calories of foods, carbon dioxide output per country, or the number of voters per state.

Solution

Display a fixed key alongside the image, and display or highlight relevant data as the visitor points at the image, using either of two methods:

1. Highlight key: If the values are either present or not-present, display a key with names or icons, and flicker the icons on and off as the visitor points at the image. For example, to identify the paints used in a painting, a key containing a series of pigment names (ultramarine, ochre, charcoal, etc.) are displayed next to the image of a painting. As the user glides the cursor over the painting, the pigments in the legend flicker on and off, indicating which paints were used.
2. Dynamic graph: If there are varying amounts of a given value, such as the nutritional content of a food item, animated bars next to the words, “fat,” “sugar,” and “protein” indicate the amounts of different components in the food.

Discussion

This technique provides the visitor with clarity via simplicity. By showing the visitor only partial selections of the overall data, he or she feels less overwhelmed. The user also has a sense of discovery, since he or she needs to point at an item to discover its values. Finally, it allows the user to compare regions in an image.

Details-on-demand expands from a small collection of objects, such as insects in a database, to reveal more about their variables. This shows data on an as-needed basis, preventing clutter and allowing more of the variables to be mapped to the visualization.

Avoiding clutter while amplifying information.

The pigment composition of a painting is revealed by examining microscopic views. The caption for each cross section is dynamically shown. (WebExhibits) Visitors explore the archaeological of the Theban Necropolis through a giant aerial photograph. Annotations appear on the photograph as the mouse is moved. (Theban Mapping Project) Users choose sections of the brain, displaying captions and labels. (BBC)

Problem

You need to label an image with captions while avoiding clutter. There is too much information to fully label the image without becoming illegible, such as identifying a group of people or the anatomy of an insect.

Solution

Display and enhance the region of the image at which the visitor is pointing, using one of two methods:

1. Dynamic caption: Change the caption to correspond to the area where the user is pointing. For example, in an illustration of the planets, the user points at Saturn, and the vital statistics of Saturn are displayed.
2. Contextual pop-ups: Include details in floating windows.

Discussion

If there are only a few important regions of the image, delimit the “hot” regions by outlining, marking them with labels or numbers, or some other means, so that it is obvious where the user should point their mouse.

The floating pop-up can be opaque, semi-transparent, or have time-dependent transparency, whereby it fades after five to ten seconds so the user can see what is behind it.

If there is information for dozens (or hundreds) of sub-regions spanning the full image, it is not necessary to delimit regions because the user can point anywhere. This is especially powerful for annotating images where the interpretation is not obvious, such as an X-ray of a suitcase.

Another extension of this technique is to conceive of the contextual information through a viewing filter, such as a spyglass. For example, passing over a map of the China with a spyglass, color coding could indicate population density. More than one spyglass can be overlapped. For example, in a depiction of anatomy, one filter could reveal muscles and another could reveal nerves. In their overlap, both muscles and nerves are shown.

Superimposing images for the purpose of comparison.

An inviting way to compare related images is superimpose a spyglass. Here users compare X-ray, infrared and other views of a painting. (WebExhibits) Swap among different light spectra. (WebExhibits) Swap among colorblind simulations. (WebExhibits)

Problem

You need to compare views of the same item, or from the same viewing angle, such as comparing X-ray and normal views of a human body or simulating views of color blindness.

Solution

Superimpose the set of images and allow the user to make comparisons using one of three methods:

1. Swapping: Provide buttons next to an image that allow visitors to swap the images. For example, the buttons could be marked “X-ray” and “Regular.”
2. Spyglass: Have a movable window that people can move around a scene. The visitor can drag the spyglass around, thus showing and hiding the alternate view This approach can also be used to reveal translations, or permutations of a scene. For example, in a view of US cities on a map, a movable filter could reveal which cities have high crime rates.
3. Slider: Provide a graphically dominant knob that visitors can slide back and forth.

Discussion

Swapping is generally the easiest to implement, and is best to use if the images are similar. The human brain is especially good at detecting differences through motion. By swapping different views, it is immediately obvious to the eye how the two images relate and how they differ. The swap should be immediate, with no flicker in between.

The spyglass if helpful if the images are quite different, or viewers need a reference. For example, an X-ray can be confusing without the visual image surrounding the spyglass for reference.

A slider is helpful when it is useful to see in-between views. This is similar to adjusting the brightness of a television. For example, compare how a scene looks to an elderly viewer as their cataracts deteriorate and a scene looks more yellowed and murky. There could be a photograph of an everyday scene, with a knob on a slider beneath. The user moves the knob left and right, adjusting the scene.

Incorporating interactivity that is purposeful.

Users perform knee surgery, understanding the process and steps. (EdHeads) Exploring the properties of ocean waves. (Pearson / Prentice Hall) Another exhibit, experimenting with ocean wave periods and amplitudes with a different interface. (National Geographic (Volvo Ocean Race))

Problem

You need to explain how a process works.

Solution

Devise a virtual experience for visitors. For example, create a working model of a jet engine that visitors can deconstruct, or let visitors perform surgery. Virtual experiences are particularly appropriate for processes, such as flying or surgery, that visitors cannot do in real life.

Discussion

Do not require visitors to do steps just for the sake of interactivity. Interactivity should always be purposeful, not decorative. Adding extra animations, or requiring visitors to drag unnecessarily (e.g., “drag a specimen to the microscope to see details”) makes the experience cumbersome.

Interactive games and quizzes that test the visitor’s understanding are sometimes desirable, but such games and the quizzes should be optional lest visitors be annoyed or belittled. The only exception to the principle of simplicity is in design for young children, who often find clicking and dragging to be entertaining, and may enjoy superfluous animations. For example, “drag fruits into a blender to make a smoothie” will delight children.

Creating an online environment that fosters discovery.

The sun in Monet’s “Impression Sunrise” is oddly vivid due to a curious visual phenomenon. Users explore this phenomenon by varying color saturation and brightness. (WebExhibits)

Problem

A web site that offers only text does not encourage visitors to delve deeper into the subject matter.

Solution

Create an e-learning environment that allows visitors to make their own discoveries through analyzing data.

Discussion

By allowing users to compare data and images, your web site encourages visitors to question, explain, and make decisions about the subject matter presented. Instead of simply reading about it, they’re involved in actually doing it. This increases users’ understanding of the material, and allows them to see connections to other, seemingly unrelated, knowledge and experiences.

Comparing data and images can be incorporated into your site through virtual devices and experiences; comparing views of the same item; viewing a sequence; contextual captions; animated keys; multiple views of data; and color coding.

Interactivity helps explain why the sky is blue.

Problem

Some subjects are naturally difficult to teach, while others are perceived as tedious. Teaching through the use of static text and images leads to a passive learning experience that doesn’t engage students. As a result, students’ attentions wane and the information isn’t assimilated.

Solution

Introduce interactivity to your web site and enhance the learning experience. Interactivity makes information come alive, and is the next best thing to hands-on learning.

Interactivity can be incorporated through a variety of techniques, including comparing data and images; interacting with objects; providing visitors with insight and a context for which to assimilate information; implementing an inviting user interface; designing content for easy navigability; and creating an online community.

Interactivity makes students into detectives. Here, students look at X-ray images of a painting through a spyglass.

Discussion

Over the last two decades, many notions for displaying data and information have passed through phases of theory, exploration, abstraction, and demonstration. Computers capable of real-time visual manipulation are now mainstream and commonplace. The vast majority of online visitors now have browsers capable of advanced interactivity. Network connections and hardware allow ever-faster data transfers, and video will soon be a common component of the online experience.

Cooperative learning theory stresses that the best learning occurs when students are actively engaged in the learning process and working in collaboration with other students to accomplish a shared goal. Online education is an excellent way to facilitate cooperative learning because traditional text can be intermingled with interactive exercises, so that students have a balanced approach. For example, students can pace themselves while reading some sections and completing additional interactive experiences alone or in cooperation with others.

The best learning is experiential, as when students really go out into nature, or on ships, or to hospitals, or into outer space. Although such real-world travel is unrealistic or impossible, the use of web technology creates interactive possibilities that are limited only by the imagination.

Students become disengaged and learn less when information is presented passively, such as through lectures or static text.

Although your web site may contain a wealth of educational information, the way the information is presented may not be engaging your visitors. When learners aren’t engaged, they don’t assimilate the information presented.

Some subjects are naturally difficult to teach – such as how to fly an airplane – while others can be perceived as tedious – such as memorizing the solar system. Using static words, photos, and illustrations can make it difficult for learners to assimilate the information presented.

Incorporating interactivity into the learning experience allows you to more easily teach certain subjects. How could pilots be trained, for example, if they only had manuals to guide them and didn’t use flight simulators?

Interactivity also changes the dynamic of learning, from one of passivity to one of engagement. The Constructivism theory of learning supports the use of interactivity for what is termed “scaffolding,” where students use their existing knowledge to help them bridge the gap and grasp information that might be slightly above their current ability. Therefore, students are motivated to increase the breadth and depth of their knowledge by actively participating in the learning process. Rather than studying a manual about flying in bad weather, for example, students can introduce thunderstorms into their interactive learning experience and actually test their piloting abilities.

Learning to fly a B-29 bomber using a flight simulator not only engages students by mimicking the realism of piloting the aircraft, but it also allows students to study the aerodynamics and physics of flight, as well as to introduce a myriad of variables, such as flying in bad weather.

Presenting educational information in an interactive form enriches the learning experience and leads to better assimilation of information.