Interface Design for Learning: Basic Principles A-Z
This chapter is from the book
This chapter is from the book
This chapter is from the book
Accessibility
Most interface designers are well versed in the World Wide Web Consortium’s guidelines for web accessibility and in the various country-specific requirements, but abiding by these regulations is critical when it comes to education.
While it might not be immediately obvious, a well-designed, accessible learning experience helps everyone down the road. For example, kids and teens typically use secondhand equipment—special plug-ins and heavy download times can be frustrating. Programs like Flash aren’t available on all devices and may be blocked by corporate firewalls. Beautiful virtual worlds designed for classroom use may fail to run on classroom computers.
Native speakers of all languages and learners of all ages are accessing online learning from every country on the planet. The biggest reason to ensure that your designs comply with accessibility guidelines is so you can be sure to reach all your learners.
Check out the WAI-ARIA guidelines for detailed and definitive advice on making widgets, navigation, and behaviors accessible. If you need some inspiration, see the Thare Machi sidebar.
Theory in Action: Thare Machi saves lives with eLearning
Unlike the average eLearning audience in companies or higher ed, where the biggest challenges often cited are engagement or test scores, Thare Machi Education designs learning experiences on topics like human trafficking and cholera for users who are culturally and linguistically diverse, extremely poor, mostly illiterate, and totally unfamiliar with technology. How’s that for a spec?
The company’s solution is 20-minute lessons on CD-ROM that make important points about critical issues, like how disease is transmitted, in very simple terms. The lessons can be used in a health clinic waiting room in Kolkata, India, a school in Cambodia, or on a bus moving through rural China.
Trying out one of their modules is a great way to shake off unquestioned assumptions about users and their needs. Design and evaluation aren’t so easy in the context of such a demanding brief. If learners can’t read, text is removed from the designer’s toolbox. If controls can’t be explained with labels, instructions can’t be written—not even tooltips are of any use. What’s next? Colors and symbols?
Relying on color to communicate is problematic not only for the colorblind, but for users in different cultures. Using green for “go” and “red” for stop might not be relevant to a child in rural Africa who doesn’t see many traffic lights. Left and right might not be understood as forward and back when not all languages are read from left to right. Many of these learners have never used a computer system before, so how easy will a button need to be to click? How do you select imagery relevant to the learners and their environment? The photo of a toilet used in one Thare Machi course is a squat hole—how irrelevant would the pristine stock image of a porcelain flush toilet be to this audience?
But get it right, and the rewards are unsurpassed. A photo caption on the website reads:
“Our troika of recently returned Associates found a family living in a slum just feet from the tracks but sleeping under a mosquito net as a result of watching our lesson ‘Bednets Can Save Lives’ in the Bengali language.”
Thare Machi Education is making life-changing and life-saving messages accessible in audio-visual format in the languages of the developing world. Check out the company’s amazing work at www.tme.org.uk.
)
Affordances and signifiers
An affordance is something about an object that allows it to be used for a certain action. So a knob affords twisting and a cord affords pulling. Chat rooms afford fast, live social interaction, whereas forums afford longer-term, considered discussion. In the digital world, we talk a lot about affordances, but we really mean perceived affordances. After all, no matter what we do on a computer, we’re performing the same set of physical actions every time (clicking a mouse or moving a finger), so perceived affordances are aspects of the design of things like buttons, links, and interactions that communicate their purpose to the user.
The notion of affordances was originally proposed by psychologist James Gibson in the 1970s, and Don Norman helped to popularize the concept with modern designers. Norman has since acknowledged that the term has met with much confusion in the virtual world. As such, he has suggested the term signifier as a replacement. In the 2013 revision of his classic tome, The Design of Everyday Things, Norman explains, “Affordances define what actions are possible. Signifiers specify how people discover those possibilities: signifiers are signs, perceptible signals of what can be done. Signifiers are of far more importance to designers than are affordances.” Certainly, this is most obviously true in virtual design.
Here are some of the most common online examples of signifiers:
- Underlined text signals linked content. (That’s why usability experts tell you not to use underline for other purposes, lest you create the wrong expectation.)
- Buttons look clickable. (How often have you wasted time looking for what to click on because the button design didn’t signal clickability?)
- Elements that look like buttons should be buttons. (So you don’t click on something that signals button that turns out to be a header.)
Good signifiers are one important way that a design for learning can keep users focused on learning rather than on operating the interface. Signifiers can also be used to gently recommend certain options. For more on affordances and signifiers, see Norman’s books The Design of Everyday Things and Emotional Design: Why We Love (or Hate) Everyday Things.
Desirable difficulty and errors
Poor interface design can get in the way of learning by slowing it down, imposing hurdles, and using up precious cognitive load. However, things like slowness, hurdles, and challenge are essential for many kinds of learning. Educators employ tactics like deliberate slowness, appropriate challenge, desirable difficulty, and in some cases, even productive failure to improve learning every day. The difference is that, in these cases, the challenge is relevant and supports learning.
Desirable difficulty is usually designed into the learning activity by a learning designer, and not by the interface designer. But in some cases the interface designer will get involved. For example, if an interaction design creates obstacles, that might be OK if those obstacles are placed deliberately to support the learning in some well-considered way, such as to support reflection. The result should not distract the user from the learning experience.
Similarly, failure is also an option. Dimitri van der Linden and Sabine Sonnentag separate errors into three categories: positive consequence, negative consequence, and neutral consequence. Errors with a positive consequence are actions that do not give the desired result, but provide the learner with information to help her achieve an overall goal. Some educational researchers suggest providing insurmountable challenges to students because there is much to be learned from failing the first time around. However, this productive failure is a feature of the instructional design, rather than the interface design. With regard to error, the learning interface designer should
- Ensure that any obstacles are there to support the learning activity and are not simply the result of poor interface design.
- Create forgiving designs.
- Provide rich feedback.
- We’ll discuss the latter two in more detail in Chapter 9, “Learning Is Mobile.”
Expertise reversal effect
A major caveat to many of the strategies listed in this book is that guidelines sometimes break down when it comes to experts. This is known in the research world as the expertise reversal effect. In essence, strategies for interface and learning design are usually geared to novices.
If you’re teaching biology or business to nonexperts, it’s especially important not to overwhelm them with choices, and to provide them with guidance and be forgiving. However, if you’re teaching advanced concepts in biology to a doctor or management strategy to a CEO, these design strategies have less impact. Research has shown that, unlike novices, experts are more flexible and can learn just as well from text alone as they can from a combination of text and visuals. Likewise, experts don’t need information to be chunked and they can handle more control over their instruction.
In general, experts won’t be hurt by design guidelines that apply to nonexperts. In a few cases, however, the rules for novices will actually decrease learning outcomes for experts by slowing them down (for example, breaking down information too much). Therefore, if you’re designing for an audience of experts, it’s worth reading more about their requirements. Check out Ruth Clark and Richard Mayer’s book e-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning as well as the research on the expertise reversal effect.
Extraneous cognitive load
Steve Krug’s now legendary “Don’t make me think” mantra helps link learnability with interface design for learning. Why shouldn’t an interface grab the user’s attention? Because if the user is thinking about how to use the website, she’s distracted from the task at hand. For many websites, that task is finding information, making purchasing decisions, connecting with people, or meeting some other goal. In eLearning, the overarching goals are learning outcomes.
To put it absurdly simply, the more of the brain the user has to allocate to the interface, the less is available for learning (Figure 4.1). You want the user to devote as much attention as possible to learning. This might not always be feasible (the user may engage in multitasking or seek performance support on the job, for example). While you can’t design your learner’s context and environmental distractions, you can design your interface to stay out of the way. To rephrase Krug’s usability mantra for our purposes: “Don’t make me think about the interface, because I need to be thinking about the learning.”
)
Figure 4.1 In simple terms, the more of the brain the user has to allocate to the interface, the less is available for learning. You want the user to devote as much attention as possible to learning.
In educational psychology, the amount of information a human brain is attempting to process at once is referred to as cognitive load. Unsurprisingly, there’s a limit. Of course, cognitive effort directed at learning is a good thing. However, attention that must be paid to things unrelated to the learning activity (like operating the interface) can be considered extraneous. It’s the learning interface designer’s responsibility to reduce extraneous cognitive load.
A good example of extraneous load is found in what information architects refer to as “mystery meat navigation.” You know those websites you come across that, in a misguided attempt to be clever and original, use some abstracted form of navigation with labels that appear only on rollover; or terms so vague or jargony that you click the interface blindly because, as with hot dogs, you just don’t know what you’re gonna get. The telltale sign of mystery meat is often the instructions: “Click on one of the circles at right to find out more.” Should that kind of instruction be necessary?
If convention and familiarity have been tossed aside and you can’t easily understand the navigation, the brain must turn to unraveling the mystery of the interface itself. You came to the site for a reason, but now you’re thrown off task because you first have to figure out how to proceed.
Intrinsic complexity
Just as difficulty can be desirable when it aids learning, complexity can be essential. Remember that avoiding interface complexity is about reducing extraneous cognitive load. In the same way, it’s important to separate the notion of extraneous complexity, the “bad” (avoidable) complexity associated with the interface or instructional methods, from intrinsic complexity, the complexity that’s part of what is being learned.
Some learning interfaces will be necessarily complex because, for example, they involve high-fidelity simulation, like aircraft simulators, or because a large number of features and functions must be made available for authentic practice. In both cases, the interface complexity is essential to the learning experience. We’ll look at strategies for managing intrinsic complexity in Chapter 8, “Multimedia and Games.”
Learnability
We can’t talk about learning and software without a mention of learnability. For one thing, it’s important to clarify the difference between learnability and learning interface design, lest they become confused. According to the Standard Glossary of Terms Used in Software Testing, learnability is “the capability of a software product to enable the user to learn its application.” In other words, learnability is strictly about easily mastering the software without instruction, not about learning the content presented.
Theory in Action: Prezi and the learnability challenge
Upon its release, Prezi was a whole new paradigm in presentation software. Taking people out of the familiar is very risky business. Learnability was likely to be Prezi’s biggest obstacle to uptake. It’s no surprise then that the company was extremely careful in its handling of this aspect of the user experience. When I first signed up for Prezi, I didn’t get an instruction manual thrown at me, but neither was I left stranded in a new-user wasteland ready to retreat.
Prezi embedded a set of simple tasks into the experience of opening my first blank document. For example, rather than showing me an interface feature or just asking me to “scroll down to practice using the controls,” I was told to “scroll down in order to find out something.” It’s a subtle difference, but it makes the little tutorial more like a game by adding a sense of purpose and triggering curiosity.
The company also aced the “show progress” heuristic by including a simple, highly visible, progress bar at the top that told me where I was, how much I had left to do, and, critically, that I could exit at any time. Knowing that I could exit any time I wanted to made me less likely to exit the tutorial. I was also given a way to skip things without exiting completely—a very forgiving touch. In the end, I figured that I’d learn faster by doing the little tutorial and I did, thereby helping me tackle a whole new paradigm in presentation software without getting flustered.
The Prezi tutorial is a great example of so many things. You get just the right amount of information, right when you need it, and then you’re left alone to do your work. The heading typeface is friendly, the text is minimal, and there’s plenty of white space, all of which makes the experience feel like it’s going to be “easy” and “low cost to my time and effort.” As the icing on the cake, I was presented with a beautiful, relaxing nature scene to lift my mood and make me more open to learning (we’ll talk more about this in Chapter 7, “Learning Is Emotional”). The attention paid to this critical learning moment has no doubt been pivotal to the company’s success.
)
Learnability shares much territory with usability, in that it also benefits from familiar conventions, consistency, intuitive design, and usability heuristics. Learnability is especially important for software and systems in which the user must overcome a learning curve before she can make full use of them.
In contrast, interface design for learning looks at how interfaces can support learning in general, whether it’s learning how to use software, how climate change affects the earth, or how babies are made. It’s about designing interfaces for digital learning that support the cognitive and affective (emotional) aspects of learning.
Mental models
There are various contradictory ways of defining mental model, so I’ll honor Occam’s razor and go with the simplest, from usability pioneer Jakob Nielsen at Alertbox: “A mental model is what the user believes about the system at hand.” It’s the complex abstraction of the user’s understanding about how a digital environment is shaped, how it works, what it will do, and what you can do with it.
Mental models don’t necessarily have anything to do with reality, and that’s what can cause so much user strife. Why isn’t this working? Why won’t it let me do this? Why isn’t this information here? All of these are examples of user frustrations that result from an inaccurate mental model. The user believes that the system should work in such a way, should allow her to take a certain action, or that information should appear in this location. But it doesn’t.
When there’s a mismatch between what a user thinks the system should do (mental model) and the system reality, you have a few options:
- Redesign the system to conform to the user’s understanding.
- Redesign the interface to better communicate the nature of the system in order to correct the user’s mental model.
- When all else fails, as with a very innovative interface (see Prezi sidebar), educate users.
For an example of mental model mismatches, read the Nielsen Norman Group article at www.nngroup.com/articles/mental-models.
Paradox of choice
Choice and control are funny things. As human beings we’re easily sold on the idea that more choice is better than less choice. In his book Living with Complexity, Don Norman talks about our penchant for feature-rich appliances and our inclination to spend more for functions that never get used. Pointing to washing machines, he notes that technology is advanced enough to build a one-button washing machine that would do everything automatically, but that no one would buy it. Instead, we pay more for the one that requires us to select from water temperatures, levels, spin cycles, timers, and specialty options, and then we just use the default settings.
But surely it’s common sense that the more options we have, the more freedom we have, and therefore, the happier we’ll be? How little we know ourselves. In The Paradox of Choice, Barry Schwartz explains that eliminating consumer choices can greatly reduce anxiety for shoppers and reveals a global disconnect between happiness and freedom. The reality is that, despite our taste for selection, there are limits on what our brains can handle. We’re generally in a hurry and easily put off by too many choices, especially where the difference is minimal and the choices are of little importance.
In the world of technology, we often diagnose the infirmity resulting from too much choice as “featuritis.” The result is a program that fails to function under the weight of too many options and controls. Learning interface designers, take note: In learning experiences, featuritis will not only impact usability and learnability, but also impair learning outcomes. For this reason, learning experience professionals will continually be negotiating the balance between helpful choice and overwhelming choice.
On the flip side, carefully designed choices can improve learning by giving beginners the guidance they need and experts the freedom they can handle. This is sometimes referred to as choice architecture. In later chapters, we’ll look at design strategies for managing choice such as grouping options and employing defaults.
Quiet design
- Most software design guidelines state that software applications and most Web sites should not call attention to themselves; they should fade into the background and allow users to focus on their own goals.
- — JEFF JOHNSON, Designing with the Mind in Mind
There’s a lot of talk about using visuals to grab attention, but fancy media won’t make up for poorly designed content and activities. One of the biggest ways interface design can contribute to better learning is by getting out of the way.
Clichéd as it is, “less is more” heavily applies in the learning interface context. Educational interface design researcher Sharon Oviatt has used the term quiet design. A quiet design doesn’t seek attention for its own sake. It doesn’t interrupt with pop-ups, sales pitches, tangents, or obstacles. It fades into the background, emerging only when needed and only as much as needed, allowing the learner to be absorbed completely in the learning experience. Chunking and segmenting, using white space, adhering to consistency and conventions, and abiding by a minimalist color palette are all examples of ways in which interfaces can be kept discreet.
Of course, there will be exceptions. Children are far less put off by the liberal use of color. Bright colors are expected in toys and schoolrooms. But it’s interesting to note that even here, the risk of distraction remains present. A study of kindergarten classroom design by Karrie Godwin and Anna Fisher found that kids paid attention better and learned more in a minimally decorated classroom than they did in a highly decorated one. But surely there’s something sad about removing all the color and artwork that make the kindergarten class what it is? Indeed, every design decision is an exercise in balancing needs and constraints. While minimalism may yield better learning, it may be that those gains are negligible and that the psychological development of the children, from self-esteem to community building, must also be taken into account.
Online you may find other ways of balancing. Kids are attracted to colorful and decorative design, but how much is too much? There aren’t many research or public testing results to turn to for answers to this question. However, I suspect it will depend largely on how it’s handled. The beauty of the online environment is that it’s far more flexible and adaptable than a physical setting. While you can’t pin up and remove decorations from a classroom repeatedly throughout the day, online this same action is trivial. Online you can add color or graphics in one screen and pull them back when the learning activity comes around on the next. It’s like pulling focus in a film. In this way, appealing imagery can be used to introduce a space, as ambiance or for variety in between tasks, and be removed or ghosted during the learning task.
Scaffolding
- In the classroom, a scaffold is a set of activities designed by the teacher to assist the learner to move through increasingly difficult tasks to master a new skill ... activities are designed to help move students from point A to point B, to progress from what they know to what they need to know ... to bring them through the zone of proximal development to achieve their potential.
- — LINDA HARASIM, Learning Theory and Online Technologies
As with the construction variety, educational scaffolding is a kind of support structure provided to a student to help her reach a higher level than she would without it. The idea with scaffolding is that it can be progressively removed until the learner is able to complete the task independently. As Sara DeWitt of PBS KIDS said it in an interview with Wired: “Online games give us the opportunity for leveling and scaffolding, so that kids can advance to more challenging material in a way that is customized to them.”
In an eLearning environment, scaffolding can take many forms. It’s often an element of the instructional design, for instance, a document template with a preexisting structure, or a list of curated resources. Scaffolding can also be embedded into an interface. The LetterSchool app provides examples of both types of scaffolding (see Theory in Action sidebar).
Theory in Action: Learning from LetterSchool
LetterSchool, an app by Dutch game maker Boreaal, is one of the many apps on the market created to leverage the advantages of touchscreens to teach preschoolers to make letter shapes. Kids use a finger to trace and write the letters of the alphabet.
Kids can choose any letter of the alphabet, at which point they’re encouraged to move through a sequence to
- Hear the letter name along with its sound and see it in a word.
- Watch the letter being drawn.
- Trigger the start of each line to be drawn to create the letter.
- Trace the whole letter.
- Write a letter by themselves.
This set of staged options provides instructional scaffolding that allows each kid to begin at her own level and move through stages with less help as she goes. What is especially notable is the app’s excellent design for gracefully fading interface-based scaffolding (think of it as a kind of seamless contextual help or performance support). If the learner begins to struggle to correctly draw a letter, subtle visual cues, like arrows and tracer lines, appear. If she continues to struggle, these cues gradually increase. When she no longer needs the extra help, this visual support disappears completely. The app leverages the interactivity of the platform to detect struggling and adapt the interface accordingly.
The makers have described a list of other well-considered educational design decisions at letterschool.com.