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 project at hand is not overtly
instructional. What makes material good for learning also makes it good for
other conversion goals – such as explaining products, services, and
strengthening brands. This presentation gives an overview of several key
learning theories valued by instructional designers, with real-world examples
of how they make a difference in all sorts of consumer applications (such as in
banking, how-to, and entertainment). The principles include: learning from
visuals, cognitive load theory, situated learning, cognitive flexibility
theory, scaffolded vs. discovery learning, and case-based reasoning. The
emphasis will be on using the instructional designer's theoretical toolkit to
build an evaluation framework, or heuristic, for reviewing non-instructional
designs.
1. THINK LIKE AN INSTRUCTIONAL DESIGNER APPLIED LEARNING THEORIES FOR INTERACTION DESIGN Todd Toler Director of User Experience John Wiley & Sons IA Summit 2010 April 9 th WWW.SOLIDSTATEUX.COM
3. WWW.SOLIDSTATEUX.COM HEURISTIC LENSES Definition of a Design Lens ” A design lens allows you to view the user experience through the eyes of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.” - Bill Scott, Theresa Neil, & Rochele King www.designingwithlenses.com
This is the ‘research and evaluation’ track – so I should address how this presentation fits into that. I think when you come to a conference like this, there’s a danger of coming back with a lot of ideas about methodologies. Some of them are variations on the same thing – but people call them different things or give them a different emphasis. So I was very wary of introducing a new one. Rather than think of this is a ‘system’ of evaluation, it may be better to embrace the concept of design lenses – something that you can layer into what you are already doing. The lenses are like a deck of cards, many of them from other disciplines. Bill Scott just published on this last week in UX booth, and I was quick to incorporate it. Today I’ll introduce 6 new lenses that come from research in the field of educational psychology and cognitive science.
I think if you look at this page as an information architect – it’s a pretty good page. If you look at it from the point of view of an educator – you have to think of it as a missed opportunity.
We face these challenges all the time. Branding challenges, product positioning challenges – yet I wonder how many marketers think like a modern educator would. These are some sites where the ‘conversion’ is not really based on a quickly understood feature – it requires some higher order thinking to understand the value proposition. But it’s hard to stick to this – the design instinct is different sometimes, and we can be fooled by that ‘pro’ instinct – something looks ‘pro.. In a final review of this powerpoint I realized I was using these blocks pretty gratuitously. Mostly ‘cause I wanted to get my $29 dollars worth of the stock art I bought. Let’s get rid of those.
You can’t really get into any discussion of learning theories without a background slide with some old white guys.
It’s been understood since the 1950’s that human cognitive processing capacity is severely limited. In fact, you can put a more or less precise number on the amount of discrete pieces of information that a person can manage in their working memory at any given time – the “magic number” of seven. (see Miller, 1956 ) When asked to repeat a list of random digits or tones (e.g. 5,6,2,10), most people can manage about 5 to 7 of these “chunks” of information when drawing only from their working memory. It is no accident that we can all remember our phone numbers but only the most acquisitive of us can remember our credit card numbers.
Mostly Mayer is concerned about stuff like this.
But what Mayer did that was really useful for web designers it to classify images based on their instructional potential.
Really makes you wonder if you should ever be doing things like this. Honestly, I look at this sort of thing and think that it’s thoughtless, lazy even.
Angewandte does a nice thing with their covers – they use the actual figures from the featured article. These chemical structures are real, and the images are from some florescence miscroscopsy images from the real research. An art-director lays them out a bit, but the imagery comes from the science itself. Authors pay for to be on the cover – it’s very prestigious. You’ll notice that Science – the most influential journal of all uses decorative imagery – which adds a generic feel.
We tried a lot of designs for Dummies.com – and it felt wrong for a long time until one of the book editors happened to be on a design review and told us the philosophy for using images in the books themselves. No decorative images – show the action, center the frame so that the user can learn from the image.
So we dropped the stock photos throughout the entire site. It immediately felt better and more branded.
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. 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:” 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 Ar
Anything environmental or pervasive is a good candidate for ‘situatedness.’ 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.
Situated learning has that emphasis on social learning – so even something simple like a LinkedIN group can be powerful if it’ s focused enough on a curriculum or a branded pedagogy – such as The Leadership Challenge.
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.
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.
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.)
Video game designers have intuitively absorbed these principals – probably the only interaction designers to do so – and all because what drives learning also drives ‘flow’ and engaged game play. If you want to design for flow, think about how and why games work. 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.
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.
DVD menus would be an obvious place to explore CFT, yet few allow users to reorder scenes by theme.
It seems to me that we already have a good design pattern for CFT – faceted browse & search. Yet the facets on most sites are used to help people find something to buy rather than to learn content.
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: