Interface Design for Learning: Basic Principles A-Z
- Go further
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.
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.
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.”
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.
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.
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.
- 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.
- 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).