Roger Schank's most ambitious idea, The Reminding Machine, would be a massive collection of stories cataloguing what "smart people" know and how they deal with complex situations.

In leading up to my presentation at IA Summit 2010, “Think Like an Instructional Designer,” I’m posting on the important learning theories that any interaction designer would be well served to know the basics of.

Theory #5 – Case-Based Reasoning

Most famous learning theories seem to be closely associated with a personality (sometimes a pair of them), but few stand so fully in their author’s shadow as case-based reasoning does in that of Roger Schank.   Schank is a bit of a rarefied character in the world of educational psychology – probably because he has serious chops in the far sexier field of Artificial Intelligence(AI).   UX people will relate to this theory, because it is basically saying people learn by prototyping stuff.    In Schank’s model, learners create generalizations from a rich set of case histories, rather than from explicitly rendered rules or other forms of procedural knowledge.   Schank’s theories might be likened to a branching network of potential outcomes in which the learner induces her way to the correct path by failing in the other ones.   This is often not the byproduct of actual failure, but the more subtle letdown that occurs when something is not what the learner expects to see.  He calls these “expectation failures,” which he proposes are more easily indexed by the brain and therefore are a higher form of learning than, say, rote memorization.  It won’t surprise you that a variant of CBR, rule-induction, is a cornerstone of machine learning theory.

In applying CBR to instructional design, there are a few basic strategies.   Designers of expert systems are very fond of the theory, and you will see it referred to in the type of case-database applications used by customer service help desks.  But of more generalized interest, any design where cases, stories, or narrative are used to communicate instructional material can be thought of as being influenced by CBR.   Business and Law Schools are addicted to this sort of learning, of course.  But why not apply it to your web designs in order to increase their persuasive power?  To make your environment more compliant with case-based reasoning theory, there are all sorts of practical solutions you can implement:

• Develop multimedia content as a “set” of realistic and specific situations
• Be like a business school – set forward realistic examples then provide your user with a heuristic for evaluating them
• Consider the “fixed choice” option – describe a case, then provide a fixed number of plausible solutions
• Clearly articulate problem, question, or dilemma
• Allow users a safe place to test predictions, and give feedback on incorrect paths

The McKinsey careers site uses a nicely designed case-study approach. By exploring the profiles of various employees at the firm, a prospect can inference the answer to the basic questions poised below - such as "What will it be like if I join?" (design: IconNicholson)

La Salle University offers a virtual MBA online that is highly influenced by Roger Schank's work. Students study cases and simulted business scenarios in a computerized environment. This is also a great example of situated learning theory.

KANE - short for "Knowledge Acquisition in Non-Linear Environments" was an interactive laser-disc based on the film Citizen Kane. An early example of cognitive flexibility theory put into practice.

In leading up to my presentation at IA Summit 2010, “Think Like an Instructional Designer,” I’m posting on the important learning theories that any interaction designer would be well served to know the basics of.

Theory #4 – Cognitive Flexibility Theory

If ever there was a learning theory that was tailor-made for the web interaction designer, it is cognitive flexibility theory.  In fact, the theory’s emphasis on the power of hypertext would imply that it was developed with the world-wide web specifically in mind.  Yet it came to prominence in 1992, right about when the Mosaic browser started development, and before the ubiquity of the modern web .  So ironically, its most famous implementation deploys a special laserdisc of the movie Citizen Kane that serves up scenes in non-linear “random access” mode.

KANE, short for “Knowledge Acquisition in Nonlinear Environments,” is intended to show that literary “texts” offer more than one interpretation.  Random it is not. A CFT based learning environment modularizes content into “mini-cases,” then links these mini-cases to conceptual themes.  Any one mini-case can, and should, be used in multiple themes for complex schema acquisition in the learner.  The user can thus criss-cross the same material from a variety of thematic contexts.   In KANE, the film was re- edited to show just those scenes that illustrate a selected conceptual theme of the film (e. g., ‘Wealth Corrupts,” ”Hollow, Soulless Man,” etc.). “Using this option, the learner could, for example, see five scenes in a row, taken from various places in the film, that illustrate different varieties or ‘flavors’ of the ‘Wealth Corrupts’ theme.  Each scene essentially forms a miniature case of the Kane character’s behavior that illustrates the targeted theme.” (Spiro, Feltovitch, Jacobson, Coulson 1992)   Rand Spiro is the father of the theory, writing first about it in 1987.  He is also the co-creator of KANE and continues to write and blog about modern applications of the theory to domains such as Wiki-pedia and YouTube and was even interviewed by the NYTimes in 2008 about the future of reading.

Cognitive Flexibility Theory is an argument for complexity, one of my personal favorite themes in this new age of googly-ness.  People always want interaction designers to keep things simple, yet Spiro was highly suspicious of the reductive bias in terms of oversimplifying instructional material.   His central argument was that other instructional theories work fine when the domain is ordered and linear, but for higher order inference-based understanding of complex and ill-structured domains, most prescribed theories fall over.  And like Cognitive Apprenticeship Theory, CFT provides a nice middle ground between discovery learning and structured environments.  It’s limitation lies in the difficulty in applying it beyond the “text” based models of Spiro’s work (even if “text” is used in the widest Barthesian sense of the word), which is probably why Spiro has emerged as such a guru in textual based modern applications such as search and e-reading.   It also may explain why it’s very difficult to find examples of CFT used in modern applications. Hypertext (and hyperlinking) was once the de facto way of describing interactivity but feels like such an inadequate metaphor in the world of Modern Warfare 2.

To design a learning environment so that it is consistent with Cognitive Flexibility Theory:

• Use multiple case studies to insure that a variety of possible situations are presented.
• Focus on cross-case differences in how concepts and principles are applied.
• Allow users to ‘criss-cross’ the materials in flexible ways, to see the same content in different contexts
• Modularize content to exist in multiple contexts (or provide enough background information for each concept to be understood in each context)
• Consider multiple perspectives (individual points of view) as an aid to understanding the connected nature of the domain concepts and promoting flexible knowledge building.

(partial source: edutech wiki)

Like many learning theories, cognitive flexibility theory could use some updating. The metaphor of mini-cases linked via hypertext feels inadequate when describing what's possible with modern technology (such as Modern Warfare 2.)

It seems to me that we already have the perfect design pattern for cognitive flexibilty theory - faceted navigation. Here it's used to sort images by all sorts of thematic criteria in order to sell them. If the pattern was used to present learning content, it could be very powerful.

Dvd menus allow users to navigate to scenes but rarely to reorder them by theme. Adding such a feature could make the Reservoir Dogs dvd into a cognitive flexibility learning environment.

Verner Von Croy mentors Lara Croft directly within the main game play of Tomb Raider: The Last Revelation. Most games have dedicated training modules and are therefore less compliant with cognitive apprenticeship theory.

In leading up to my presentation at IA Summit 2010, “Think Like an Instructional Designer,” I’m posting on the important learning theories that any interaction designer would be well served to know the basics of.

Theory #3 – Cognitive Apprenticeship Theory

Cognitive Apprenticeship Theory can be a powerful instructional framework for interaction design, in fact it’s one of my favorites to think about, but it’s best not to take the theory too literally.  Collins and Brown, most closely associated with the theory, were writing some 20-odd years ago and they did not have computerized environments in mind at the time (they were mostly interested in classroom pedagogy.) Their genius lay in the recognition of a theoretical gap between students’ learning to integrate sub-skills and conceptual knowledge. Despite the educator’s best intentions, when the two were unintegrated, the information remained inert.  They started to notice that the most successful in-school learning had very similar characteristics to out-of-school learning (most notably the concept of “apprenticeship”.) They observed a strong interplay between observation, scaffolding, and increasing amounts of independent practice.  And while many before them had emphasized the power of conceptual learning and independent practice (see Lave), they thought more about how to provide  “internalized guides” during periods of relatively independent practice.   CAT is an extension of situated learning theory, but rather than leave things as a purely sociological construct (e.g. Lave & Wegner’s “communities of practice”) they placed a strong emphasis on methods (modeling, coaching, scaffolding, fading, articulation) and sequence (global before local, increasing complexity, increasing diversity.)

The reciprocal teaching method in reading instruction is the most famous example of Cognitive Apprenticeship Theory in action.

Its weaknesses lie in the limitations of its description: dated, hard to extrapolate beyond well-structured domains, overlapping with similar-sounding theories, and too committed to it’s inspiration within the apprentice-master models found in non-formal instructional environments (you know, traditional crafts like blacksmithing).  Unfortunately, the theory is not well applied to technological environments and modern notions of interactivity.   When it has been applied, it’s been done so mostly in classrooms in highly rigid lesson formats such as those used in Palincsar and Brown’s reciprocal teaching methods for reading instruction. But the theory does an excellent job of abstracting successful non-formal (or “out-of-school”) learning attributes into a set of principles for instructional designers to work with.  In fact, the theory does exactly what Collins and Brown claim a good educator should do – “make the invisible visible.”  It is also one of the only formal learning theories that strikes the right balance between discovery learning and structured learning – the sort of balance that video game designers have intuitively found but educational designers seem woefully behind in.  What attributes does a learning environment have if it’s influenced by cognitive apprenticeship theory?

• Expert modeling (particularly the notion of “distributed expertise” – or multiple mentors to learn from)
• Combination of scaffolding (adding help when needed) + fading (removing help gradually)
• Reflection on performance (e.g. replay and abstracted replay)
• Articulation (student demonstrations of expert performance)
• Exploration (relatively independent practice)

.

A diagram of a someone's possible schema for the concept of "egg." Source: P.Davis 1991

Schema theory is a foundational element in almost all cognitivist descriptions of learning, and this one will likely make immediate sense to user experience practitioners because it is tightly entwined with the familiar concept of mental models.  The theory emphasizes the role of prior knowledge and provides a robust explanatory framework for how expert performance is attained.  Ok, so what’s a schema?  Piaget defined the term in 1926 as a mental representation of an associated set of perceptions, ideas, and/or actions.   Think of a schema as a network of connected facts and concepts into which any newly-formed structures can be fitted.  Then think of your brain as a bigger network of overlapping schema and sub-schema.  The schema themselves are a markup language for the brain, cognitive XML if you will.  Schema theory explains why we remember things so subjectively (In Bartlett’s 1932 research on people’s memory of stories such as the “The War of the Ghosts,” he found that in reconstructing a story they added elements of their own culture.  This is famously considered evidence of schema theory’s existence.)   More interestingly to designers, the theory can be exploited to provide more effective instructional materials.

Learners generally want to read for “gist” and “theme.”  Why? So they can incorporate the new knowledge within their existing schema framework. When learners lack specific schema-based prior knowledge, they tend to apply general problem solving strategies in inefficient, even unsuccessful, ways. (see Driscoll’s 1994 book on this topic)  Worse, a lack of a proper conceptual model can transform learning into the ‘rote’ memorization of a seemingly arbitrary series of steps.  While this is an effective method in learning to tie one’s shoes or to master the alphabet, it leads to problems when things get more complex – as in, say, learning how to use a modern software application.  Donald Norman (1998) has called this disconnect between what we can conceptualize and what we are being asked to learn the “bane of modern existence.” hmm… to make a new layer in Photoshop, just press CONTOL-ALT-SHIFT-N.

Of course, the rub is that it is difficult to determine what schema a potential user already possesses and to develop an instructional method that guides them towards the task at hand.  According to Driscoll, users arrive at most learning opportunities with an “imprecise, partial, and idiosyncratic” set of mental models.  This is where schema theory dovetails nicely with situated learning theory – the more grounded the instruction is in authentic contexts and shared cultural references, the more likely it is to activate prior-knowledge and allow for the acquisition of new schema.   If you strip situated learning theory from it’s socio-cultural agenda of “authentic thoughts in authentic contexts” (I don’t believe that “situated” learning is the opposite of “symbolic-computational” learning, as some do), the two theories can work nicely together.  Pull the conceptual world into your designs by providing context.  Context can include both the “atmosphere” of the learning environment and the “background events.”  To make a design better at activating prior knowledge in learners:

• Understand and ’segment’ your audience
• Draw upon information that is likely to be familiar to learners
• Contextualize material with analogies and background events (for “gist” and “theme”)
• Develop a sense of “situational intent” (focus on benefits, outcomes, applications, examples)


Photoshop Unsharp Mask Tutorial – Typical Example. Layers Magazine provides beautiful tutorials of how to use the software but nothing about the concepts behind the tool.




Photoshop Unsharp Mask Tutorial – Schema Building Example. Cambridge in Colour takes what could be a description of an arbitrary software feature and embeds it with conceptual meaning and background information.

Microsoft's famous disaster, "Bob," was an early attempt to introduce situated learning theory to mainstream computing.

In leading up to my presentation at IA Summit 2010, “Think Like an Instructional Designer,” I’m posting on the important learning theories that any interaction designer would be well served to know the basics of.   Even if you are working on a project that is not explicitly “educational,” knowledge of how people absorb information and build meaning out of your content will strengthen your designs.

#1 – Situated Learning Theory (or “Situated Cognition”)

Stated simply, situated learning applications strive for learning that takes place directly in the context in which it is applied.   It is one of the most powerful concepts in all of instructional design.  As it was originally defined by Jean Lave and Etienne Wenger in a groundbreaking 1991 work, Situated Learning. Legitimate Peripheral Participation, situatedness is really more of an epistemology of how meaning is constructed and how new knowledge structures are built rather than a specific pedagogical strategy.   In Lave & Wenger’s world, all meaning is negotiated between learner and teacher, constructed in a social context of authenticity – what they call “communities of practice.”   The emphasis on “peripheral,” implies that learners first exist on the outer rings of existing communities of practitioners and gradually work their way into full participation.

Rather than a person being “in” an environment (“like a cherry in a bowl,” as Dewey once put it), the activities of person and environment are viewed as parts of a mutually-constructed whole. Put simply, the inside/outside relationship between person and environment is replaced by a part/whole relationship.  – Eric Bredo

Lave and Wenger were radical constructivists who sought to challenge the entire basis of institutionalized learning – classrooms, teachers, testing, and textbooks – but their theory is foundational to many other, more applied, theories of learning that are of interest to designers.

How does this theory get applied to instructional design?  Well, most classroom learning is, by definition out of context.  Applied examples of situated cognition in the instructional design field often advocate for complex social learning environments or interdisciplinary anchoring across subject domains.    But there are simple principles to make any learning environment more “situated:”

• Present in an authentic context
• Encourage social interaction and collaboration
• Consider material as tools that are used, not concepts that are read

The emphasis here is both on the social and the authentic- which differentiates the theory from other theories about contextualized and participatory learning (such as learning-by-doing theory, for instance) Why does it matter to an interaction designer?  Hmm.. a theory that tries to topple the ideas behind traditional classroom learning, the instructor’s monopoly of knowledge and the emphasis on one-way transmission of ideas?  A theory that seeks to leverage the power of communities with shared interests and skills in order to foster learning and growth?  Sounds sort of like the internet, doesn’t it?

Rosetta Stone uses a lot of images for context, but it is generally a poor example of situatedness. Here one learns the Chinese language over pictures of rodeo cowboys and european bicycle racing.

The Alelo tactical language simulators for the US armed forces are extremely situated. Soldiers participate in highly realistic, tactical missions either alone or in groups while learning basic Arabic.

Pervasive or "environmental" computing is perfect for situated learning applications. The Sports Bytes application teaches basic physics at sporting events using the Jumbo-tron screens and the cell phones of young fans.

A simple yet brilliant use of situated cognition. The Safari 7 project uses podcasts (and other media) – to create a platform where commuters, school children, subway operators can connect to New York City’s ecosystems as they travel through it on the 7 train.

A simple, but situated place to learn the Leadership Challenge is on the LinkedIN group of the same name. Leaders of different levels across companies share their experiences. Few fields have embraced situated learning theory like organizational development.

Further Reading:

Excellent post on Situated Learning Theory at InFed.org (communities of practice)

In the Diamond Age, Stephenson imagines the ultimate discovery learning environment.

Let’s look to the fictional near-future of Neil Stephenson’s The Diamond Age in order to set the tone.   Nell is the novel’s young protagonist.   She is born of limited means to a lower-class single mother named Tequila, but then rises to be a free-thinker and a leader who transcends her class with the help of a nano-technology powered instructional aid, the “The Young Lady’s Illustrated Primer.”  The Primer is state-of-the art interactive technology. A fairy tale book, of sorts, but one with amazing properties. First of all, it talks – and not in that robo-voice of the Kindle 2’s text-to-speech feature, but in an uncannily human neo-Victorian contralto.   The Primer not only recognizes the user and the details of her environment, it can actually work those into the narrative flow.  When Nell wonders aloud during one story “What’s a Raven?”-  the book stops and explains it to her – then it gives her a brief, age-appropriate quiz on how to spell the word.  It is, in other words, a rich, engaging, and perfectly scaffolded learning environment sensitive to the needs of the individual learner.

But the Primer has a key limitation, even in this speculative future of unlimited processing power.   The Primer is commissioned by a Bill Gates type kajillionaire who spares no expense on it’s development, yet the “designed” part of the interactive experience is not so fully dynamic or fluid that it replaces the need for human teachers.  Nell begins to suspect that there is a human intelligence behind her interactive book – which is, of course, exactly the case.   Behind the Primer, is actually a full time “‘ractor” (interactive actor) acting out some of the characters in the stories.  There are other characters modeled fully by the AI (or Turing machines, in the narrative) and Nell is able to fool one of these into revealing their true nature.  A major theme of Stephenson’s book is the rejection of the idea of Artificial Intelligence – favoring the term “psuedo intelligence,” and in doing so he also dismisses something that is the pot of gold at the end of any technology-oriented instructional designer’s rainbow – the automated yet fully individualized discovery learning environment.  The central theme of The Diamond Age is that these sort of designed environments will always have their limitations – even in a future where nano-technology makes diamonds cheaper and more widely available than glass.  A non-subtle illustration of this theme occurs in the novel when an army of lower-class Han Chinese girls who get a cheaper, fully automatic pirated version of the Primer (with no human ‘ractors behind the scenes) turn out to be efficient, devoted and somewhat mindless automatons.

Configuring instructional materials in such a way that they can be traversed with infinite flexibility – depending on the needs of the learner – is not possible in today’s technological landscape (nor will it be ever, if you subscribe to Stephenson’s philosophy and his take on the Theory of Computation).  Therefore strategies must be deployed to balance the desire for dynamic discovery with the practical need for pre-defined content structures and manageable levels of algorithmic complexity.  In large part, the efforts to define and test such strategies comprise the modern field of educational technology.  But the debate is not merely a technological one – it is pedagogical as well.

A Skinner Teaching Machine from the 1950's, which he was fond of saying was just as good as a private tutor. (image source: The Archives of the History of Psychology @ University of Akron)

It is useful to think of structured vs. discovery learning environments as being on a continuum.   On one side lies the extremely structured, which saw a high-point in the instructional trend of programmed instruction .   Behaviorists like Pressey and Skinner devised teaching machines that leveraged the principles of operant conditioning.   The emphasis was on logical presentation of content, and a strict system of rewards and punishment as a learner progressed through their lessons like so many laboratory rodents.   On the other side of the continuum lies the extremely un-structured, where the learner has almost complete freedom to engage with the material in an order and at a pace that suits their individual learning style.  Of course, un-structured is a misnomer – what we really mean is flexibly structured to support complex linear branching based on user input (what has been coined fractal narrative by the literary scholar Marie-Laure Ryan) and alinear hypertext relationships.  Examples at the extreme end of this continuum include Nell’s Primer, of course, or for an example more grounded in reality – a video game such as Spore, which has been used to teach concepts in astrobiology.

Most instructional designers work somewhere in the middle, varying the degree of emphasis on discovery learning depending on the nature of the material itself and the pedagogical goals for the project.   1950s style behavorialism is not fashionable among educators these days, who are dismissive of anything that smacks of rote learning.  Today’s educators want to create conceptual thinkers, who are facile in deploying metacognitive strategies to solve diverse types of problems.  This same forces shape the instructional designer’s objective.  The ID is designing not only for retention of the material but for transfer, the ability to apply the concepts in new types of challenges going forward.   Traditionally,  some educational domains are considered virtually impossible to learn by letting individuals freely explore the materials.  Take Accounting, for example, an applied field in which nearly every concept builds on the one learned before it – necessitating an ordered march through the content.   Yet it is precisely in such traditional bastions of highly structured domains like math, music, and language that the biggest educational revolutions are taking place.   The New Math controversy in the 1960s has flared up again as the New, New Math – a constructivist take on teaching math in which the traditional order of abstract math education is abandoned (and even entire areas of math such as factoring polynomials, which is considered too theoretical to be of much use) in favor of a highly situated, case-based approach.   The “creative spelling” and “whole language” movements in primary education are boldly attacking one of the most traditionally structured domains of all – first language acquisition in children.

A classic 'worked example' of the kind advocated by John Sweller

The academic literature provides ample support for both discovery and structured learning – often in complex combination with one another.    One of the more interesting findings to emerge from research in the field is something called the worked-example effect, advocated most notably by the educational psychologist, John Sweller.   Worked examples are step-by-step demonstrations of how to solve a problem.  Highly structured, worked examples lay the information for the leaner out all at once, or present it a little at a time to facilitate learning. But there is generally a high degree of guidance and modeling provided as part of the main instruction, and a minimal amount of trial and error on the learner’s part. In certain types of domains (math and physics content are often the subjects used in this type of research), worked examples are proven to facilitate learning, particularly from a cognitive load perspective.   Yet, paradoxically, a worked problem can completely backfire when the learner has a degree of prior knowledge and some of the information becomes redundant.   (This is called the “expertise reversal effect.”)  Still, in 2006 Sweller and his colleagues went so far as to challenge the entire concept of ‘minimal guidance’ and claim that the constructivist, inquiry-based, problem-based, and experiential theories of learning flat out don’t work.   This is bold refutation of what has been the single biggest intellectual trend in education dating back to John Dewey.

Molecules & Minds: the direct-symbolic version of the simulation on the gas laws. Note the step-by-step guidance on the left side. Also, in this version, the contols for such variables as temperature and pressure moved on their own as an animation.

Of more applied interest to web interaction designers, a project at NYU’s CREATE lab in 2009 called “Molecules and Minds” sought to directly compare the learning benefits of the discovery vs. worked approach in interactive learning simulations.  As research stimuli, the M & M team developed online simulations across a variety of concepts in Chemistry – such as the gas laws, kinetic theory, and equilibrium.  The same material was designed in multiple versions across two key variants – direct vs. indirect presentation of the material, and iconic vs. symbolic representation of the material.    The first variant is of particular interest to us here.  In the “direct” mode, the researchers essentially provided a ‘worked example’ by animating use of various sliders and user-controlled inputs to demonstrate the chemistry concepts.  In the “indirect” mode, the researchers let the users play with the sliders and inputs on their own until they felt like they had learned the concept.  The M & M team also experimented with providing step-by-step instructions in some versions (the “worked” versions), and none in other versions.    Another varied element included the ‘advance organizer,’ or problem explanation itself, which varied from the more explicitly stated to the more metaphorical.

The findings of the study were interesting – and not nearly as cut-and-dried as the findings in the more static, text-book style content used in Sweller’s studies.   For instance, the worked versions with animations and step-by-step textual descriptions provided the least effective instructional environment of all due to something called “split attention effect,” a cognitive load inducing phenomenon related to trying to read and follow something else at the same time.  The study also linked low prior knowledge to great difficulties in using the exploratory environment.  For instance, low prior knowledge students could play with the variables and watch how the simulation changed but struggled greatly in comprehending the role of the plotted points on the adjacent graph.  They just weren’t familiar enough with the basic variables the simulations were based upon and didn’t have enough access to guidance.   Asking them to start forming understanding of relationships to drive transfer learning was too much.  Adding scaffolding (in the form of contextual hint overlays) helped leverage both the engaging qualities of the exploratory with the instructional benefits of the worked. The study went on, over 3 years, to find that there was no simple answer to the direct vs. indirect question.  In general, the study seemed to conclude that the design aspects matter most for students with lower prior knowledge and/or lower executive function – and that there is much to be gained by continued research into how to get the right combination of exploratory + scaffolding.  Another of the most significant findings of the Molecules and Minds project, that the icons helped learners with low prior knowledge and significantly raised levels of engagement, will be the topic of a future “Think Like An Instructional Designer” post on the role of icons.

Instructional designers seek to measure not only retention, but also "transfer." The Molecules & Minds project measured both near-transfer (highly related to the instruction) and far-transfer (only conceptually related), represented here by the aerosol can of air-freshener.

Well, typically this would lead to a discussion of bad, or extraneous, cognitive load and how to avoid it in the design of multimedia materials.   Attention is a resource, and a limited one at that.   When users strain their ability to actively process material, they are forced to make decisions about what they do and do not pay attention to.  If you ask the user to process more than a few chunks of information simultaneously, working memory is easily overloaded.  Designs which add to this effect are thought to actively generate extraneous load.   You can control for this by following a few basic principles, most notably those outlined in Richard Mayer’s seminal 2001 book, Multi-Media Learning.   An example of a design principle that minimizes bad cognitive load is spatial contiguity.

Mayer’s Spatial Contiguity Principle – Student’s learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.

Integrated (top) vs. Separated Captions (bottom) in Multi-media Instructions. The Integrated Approach is Said to Reduce Extraneous Cognitive Load

There are many more of these principles in the book and all of them are worth reviewing.   Curiously, what Mayer doesn’t explicitly lay out as an anti cognitive-load principle is one you hear all the time from clients if you are in the design game – make it “less busy,” “clean,” “less cluttered,” more googley.  Surely unsightly clutter must increase extraneous cognitive load, so why doesn’t he mention this?   Because reduction of complexity is not, in itself, a sound instructional design principle.   Some material is just more complex – it has more elements and more types of element interactivity within it.   This inherent complexity is a fact of life and is thought to generate intrinsic cognitive load.    Think of this as cognitive load that the designer inherits as a baseline, only to add to it by breaking Mayer’s rules in their design process.

And now for my favorite part.  Designers can actually create good, or germane cognitive load.   Germane cognitive load “enhances” learning rather than interferes with it; this may be attributable to effects like motivation or increases in effort that can increase the amount of cognitive resources devoted to a task.  You can tell if you are getting germane cognitive load when you have a high degree of intrinsic cognitive load but learners stay within their working memory capacity due to the intelligence of the way the materials are designed.   In other words, a lot of meaningful learning activity would be impossible without cognitive load – it’s just a tougher design challenge.   Mayer’s research was focused on reducing overall cognitive load, with the assumption that mostly it was extraneous load that was effectively isolated in his study design.  But researchers still are looking for ways to measure the different types of cognitive load, so at the moment it’s unclear exactly what can be done to increase good cognitive load (see Kalyuga, 2009).

Edward Tufte Has Inspired A Generation to Create "Germanely" Loaded Data Displays

So why did I go into all of this?  Because I think people shouldn’t complain about clutter and busy-ness in web designs without pausing to think about the benefits of considered complexity.    As Don Norman has said – Simplicity is Highly Overrated.   Of course, in this essay he’s talking about products mostly – and the fact that people value and are willing to pay for complexity and additional features.   But simplicity is overrated in design circles too… complex things are beautiful and persuasive.  Nature is complex.   Sometimes the user’s task is aided by complexity in the interface.  For instance, pattern recognition is a common task for a user on a product website’s list pages, which can be  aided by having more information on a single screen, not less (particularly when it’s optimized for comparison tasks such as the famous Orbitz grid design for listing airfares, now universally imitated.)    We may not know exactly what generates germane cognitive load, but I have a strong hunch that the work of Edward Tufte does exactly that.   So let’s do both – reduce the bad cognitive load and seek to add the good stuff – and we’ll find yet another reason why we should think like an Instructional Designer.

Everybody Loves Puppies, but The Instructional Potential of This Image is Zero

Careless use of imagery – particularly photographs – is often the difference between a dull “brochure-ware” site and a persuasive information experience.   When we redesigned www.dummies.com, we initially populated our design mock-ups with the type of stock photography that professional designers mostly use… only to find that the otherwise attractive imagery added a level of generic-ness that felt downright off-brand.  Then we created a style guideline only to use imagery that had true instructional value, whenever possible framed and centered on the action that was being discussed in the content.  This applied not only to imagery embedded in the how-to articles, but also the landing page teaser thumbnail photos for the articles and videos.  This is a policy the mega-successful book line has had for years, but it wasn’t immediately obvious to us on the web design side.  Once we made this change the site felt instantly better.  The difference?  We thought like an instructional designer.

Interaction designers, graphic designers, and anybody else involved in the ongoing production of commercial websites should pay a lot more attention to instructional principles – even if the site is not overtly instructional.   What makes material good for learning also makes it good for other conversion goals – such as explaining products, services, and brand building.

Dummies.com Uses Explanatory Imagery Even in Thumbnails

In fact, why not audit your site’s imagery right now for instructional potential?  If you find that most or all of your visuals are falling into the “decorative” category – unless of course it’s fluffy puppies or blondes on the hoods of sports cars (two time-tested exceptions) – then it’s time to make a change.   Fortunately, the educational psychologist Richard Mayer has conveniently classified types of imagery in terms of their instructional benefit and effectiveness for learning.  The good folks behind the Wiley Visualizing series, which is a textbook line that is highly committed to applying cognitive theories of learning to the design of their products, put together the following summary table, which I’ve adapted with examples that might apply to a typical web designer’s challenge…

Types of Visuals Commonly Used in Instruction

Category of Visual	Instructional Potential	Examples
Decorative - visuals used for aesthetic appeal, entertainment, or to stimulate interest.	None	Caption: America's 5 Dog Friendliest Cities
Representational - visuals that portray a single object or piece of information in isolation from related objects or pieces of information.	Minimal to None	Caption: San Francisco: A Dog-Friendly City
Organizational - visuals that display relations, structures or organization among multiple objects or pieces of information.	High	Caption: America's 5 Dog Friendliest Cities
Explanative - visuals that explain how systems, processes, or cause/effect sequences work.	High	Caption: What Makes A City Dog Friendly?