Jump to ratings and reviews
Rate this book

Interface Design for Learning: Design Strategies for Learning Experiences

Rate this book
In offices, colleges, and living rooms across the globe, learners of all ages are logging into virtual laboratories, online classrooms, and 3D worlds. Kids from kindergarten to high school are honing math and literacy skills on their phones and iPads. If that weren’t enough, people worldwide are aggregating internet services (from social networks to media content) to learn from each other in “Personal Learning Environments.” Strange as it sounds, the future of education is now as much in the hands of digital designers and programmers as it is in the hands of teachers.

And yet, as interface designers, how much do we really know about how people learn? How does interface design actually impact learning? And how do we design environments that support both the cognitive and emotional sides of learning experiences? The answers have been hidden away in the research on education, psychology, and human computer interaction, until now.   Packed with over 100 evidence-based strategies, in this book you’ll learn how Design educational games, apps, and multimedia interfaces in ways that enhance learning Support creativity, problem-solving, and collaboration through interface design Design effective visual layouts, navigation, and multimedia for online and mobile learning Improve educational outcomes through interface design.

274 pages, Kindle Edition

First published November 26, 2013

15 people are currently reading
84 people want to read

About the author

Dorian Peters

4 books1 follower

Ratings & Reviews

What do you think?
Rate this book

Friends & Following

Create a free account to discover what your friends think of this book!

Community Reviews

5 stars
10 (23%)
4 stars
24 (57%)
3 stars
6 (14%)
2 stars
2 (4%)
1 star
0 (0%)
Displaying 1 - 7 of 7 reviews
118 reviews2 followers
January 31, 2015
This is an excellent introduction to a rather obscure topic - designing interfaces to applications that support learning. There's a lot of detail and a lot of examples of best practice. The target audience is both technical people like myself, and more designey folks. It attempts (and I think succeeds) to bridge the gap between interface design and UX, and educational theory, in order to help people develop software and websites that engage students and help them actually learn. I only finished reading it a week ago, and already it's enabled me to give a very knowledgeable take on gamification in a conversation. If you're even remotely working in this field, this is a worthwhile read.

Disclaimer: Dorian Peters is a colleague of mine. She is brilliant, nevertheless.
118 reviews
Read
June 25, 2017
----"Much of our own knowledge is being off-loaded to technologies so that the information that was once mostly inside our heads is now distributed onto devices and across the internet. As such, it focuses on the meta-skills that help learners evaluate, distinguish, and select valuable information from a sea of data."
----5 Key Requirements of Learning:
• Support deep conceptual understanding. Expert knowledge includes facts and procedures, but acquiring these isn’t enough. Facts and procedures are useful only when a person knows when and how to apply them, and how to adapt them to new contexts.
• Focus on learning, not just teaching. Students can gain deep conceptual understanding only by actively participating in their own learning process. The learning sciences focus on students’ learning processes as well as teachers’ instructional techniques.
• Create learning environments. The role of schools is to support students in becoming competent adult experts. This includes learning facts and procedures, but also gaining the deeper conceptual understanding necessary for real-world problem solving.
• Build on learners’ prior knowledge. Students learn best from experiences that build on their existing knowledge, which includes working with both accurate and flawed preconceptions.
• Support reflection. Learners benefit from opportunities to express their developing knowledge and to analyze their current state of understanding, whether through discussion or the creation of artifacts like papers, reports, or media.
----LMS - Moodle, Sakai (collaboration and learning envt), Blackboard (partnered with McGraw Hill), Open Class (built on google apps, free from Pearson Ed) Free courses to try a LMS - Udacity.com, EDx.com, Coursera.com - these are MOOCs, should try one out
Eportfolios - http://www.jiscinfonet.ac.uk/infokits...
-----JiTT training - skills and learning given just when you need it
-----"Companies use enterprise social networks like Yammer, tibbr, or the open source ELGG to facilitate team building and information sharing across dispersed offices, to host exercises, to conduct polls or other learning events, and for just-in-time information sharing"
------espresso.co.uk , mathletics.com
------"constructionist philosophy is evident in modern software like Scratch (http://scratch.mit.edu), Alice (www.alice.org), and the Cargo-Bot app, which enable learners age 4 to 100 to learn by programming. Lego has merged its classic block-building with sensors, motors, and programming to allow kids to create working robots (http://mindstorms.lego.com)."
------kindertown.com - reviews educational apps Also yogiplay.com
-------"Producers. Go direct to providers like PBS KIDS, or companies like Mindshapes, Toca Boca, or Busy Bee Studios. Even the legendary IDEO has partnered with Sesame Street and Fisher Price to make educational apps.", operation math code squad app Fate of the World - climate change game
-----"Significant changes coming for education are predicted each year in the New Media Consortium’s Horizon Report (http://horizon.nmc.org)"

"In 2012, Edudemic published a list of the top twenty-five most used mobile apps for education, and the majority were standard software like Twitter, Dropbox, and Bento—not eLearning programs."

Resources - http://blog.cathy-moore.com/resources... further explore the wide and colorful world of digital learning experiences, check out these resources:
• Learning designer Cathy Moore has pulled together an impressive list on her blog: http://blog.cathy-moore.com/resources....
• Plumb the depths of iTunes, Google Play, and other app directories.
• Articulate and Adobe Captivate both showcase industry eLearning work created with their tools.
• A growing database of serious games and simulations is listed at clarkchart.com.
• Check out the work of producers like BBC and PBS, as well as eLearning Studios like Second Story, Allen Interactions, and Upside Learning.
• I regularly post interesting examples on my blog at www.InterfaceDesignForLearning.com.

Go Further
• For a pocket glossary of commonly used eLearning terms and concepts, download Connie Malamed’s app Instructional Design Guru.
• For a delightful and practical guide to eLearning instructional design principles, grab a copy of Julie Dirksen’s Design for How People Learn.
• For a blend of interface and instructional design principles, check out Ruth Clark and Richard Mayer’s e-Learning and the Science of Instruction.

Think about Learning Analytics - what data is the system collecting?

"Users of computer software and Web sites often click buttons or links without looking carefully at them. Their perception of the display is based more on what their past experience leads them to expect than on what is actually on the screen."

Chunking for learning - "What this means for educational graphics is that it’s probably helpful to limit groups and choices to no more than four items."

For a fuller story on visual perception, visual thinking, and how you can design for them, check out these resources:
• Visual Language for Designers (2011) by Connie Malamed, and her blog elearningcoach.com.
• The Visual Display of Quantitative Information, 2nd ed. (2008) by Edward Tufte.
• Visual Thinking for Design (2008) by Colin Ware.
• ElearningExamples.com, a blog of educational graphics, including infographics and visualizations with plenty of inspiration.
• The National Science Foundation publishes annual visualization award winners online at nsf.gov/news/special_reports/scivis.

"Special tools like Symbaloo EDU and NetVibe make the process of constructing a personal learning environment easier."

"Research shows that we learn better when we perceive social presence. The key word here is perceive. The first step to successful interaction with other people is sensing that they’re actually there, even if they’re not."

“A core capability of any online community is its member profiles. Viewing a person’s profile should essentially provide the same feel as visiting his or her office—complete with pictures on the desk and certifications and awards on the walls.”

"Ensure that users have the option to upload profile images and thumbnails on other screens, such as forum posts."

" Clearly, Edmodo knew its audience when it stimulated initial participation by assigning a task, and pointing out that it would only take 5 minutes!" - put a little clock symbol that says how long each task will take

Design to avoid groupthink: You can find more excellent information, including a list of tools and techniques for avoiding groupthink, at www.mindtools.com/pages/article/newLD....

Go Further
The following resources are full of wisdom about design interfaces that foster social interaction, collaborative learning, and communities of practice:
• The New Social Learning by Tony Bingham and Marcia Conner offer inspirational examples, including how social media and participatory culture transformed the CIA. Far from being a fluffy trade book, it’s loaded with highly informed corporate case studies and practical advice, and it’s highly entertaining to boot.
• Digital Habitats by Etienne Wenger, Nancy White, and John D. Smith is a practical and insightful guide to understanding and supporting learning communities with technology.
• Designing Social Interfaces by Christian Crumlish and Erin Malone is an excellent reference on effective patterns for designing interfaces for social interaction.
• Etienne Wenger and his Digital Habitats coauthors created a wiki to describe and list the various tools for supporting communities (www.technologyforcommunities.com/tools).

Edward Deci’s wise advice is this: “Ask not how we can motivate people. Ask how we can create the conditions for people to motivate themselves.”

Deci and Ryan explain that intrinsic and extrinsic motivation should not be pitted against each other. According to what they call self-determination theory, the key drivers of motivation are autonomy, competence, and connectedness.

Pink recommends that extrinsic rewards be given only after the fact as a bonus, not as a carrot.


Stanford psychology professor Carol Dweck explains:
Parents must stop praising their children’s intelligence. My research has shown that, far from boosting children’s self-esteem, it makes them more fragile and can undermine their motivation and learning. Praising children’s intelligence puts them in a fixed mindset, makes them afraid of making mistakes, and makes them lose their confidence when something is hard for them. Instead, parents should praise the process—their children’s effort, strategy, perseverance, or improvement. Then the children will be willing to take on challenges and will know how to stick with things—even the hard ones.

100 Things Every Designer Needs to Know about People, Susan Weinschenk

The friendly interface: Coursera’s dynamic registration screen replies with “Nice to meet you” as you type in your name.

Research shows that views of nature can reduce stress and increase focus and attention. This phenomenon is called the biophilia effect and can be explained by the fact that, although we enclose ourselves in concrete jungles and digital spaces, we’re still carbon-based life-forms.

From a neuroscience perspective, being surprised releases a cascade of dopamine, a reward chemical. We actually get a brief high from this momentary surprise. Smiles prime learners for creativity, making this a strategy worth keeping in mind. But keep these Easter eggs subtle and few. They shouldn’t interrupt the flow of an activity, become overly predictable, or distract from the learning itself.

My ten years of data as a professor show that giving students a seemingly insurmountable challenge is the best motivator to learn.

Adding constraints to a task can obviously increase challenge, but it can also make it easier by lowering the cost of participating. For example, the success of microblogging lies in its constraint (140 characters in the case of Twitter).

No matter how dry you think your information is, using stories will make it understandable, interesting, and memorable.

Comic strips, some infographics, and even assembly graphics are other forms of visual narratives. If you’re interested in assembly instructions, Colin Ware provides cognitive principles in his bookVisual Thinking for Design. Cartoons are lovely because they achieve such efficiency, expressing a full range of human emotions in simplified line drawings.


Learners will be more motivated to engage in an activity if they can achieve real things as they do it.

If you want to make someone curious, make them aware of something they don’t know,”

Ask yourself these questions: Are you giving learners options for how they engage in, proceed through, or solve problems within a learning experience? Could you provide more choices with regard to sequence, customization of elements, topic, approach, or access to resources?

repetitive task or underwhelming content, take Anderson’s advice: “Consider playful ways for users to organize and label information themselves.” This approach draws on learners’ natural desire to find patterns and make order out of chaos.

Motivation and engagement can die fast when learners can’t tell what they’ve accomplished or what’s ahead of them. Of course, showing progress is a basic tenet of modern web design. The need to see evidence of progress is founded on the desire to have achievements recognized, to get feedback as we approach a goal, and to see that we’ve mastered new knowledge and skills.
You can also break down evidence of progress on a long-term goal, such as completing a course or getting a degree, into smaller achievements and status upgrades.

Susan Weinschenk “Look for ways to help people set goals and track them.” She points to Livemocha, a language learning site in which various forms of progress and mastery are built in.

Consider showing how far the learner has come (what he’s learned, what abilities he’s attained, how he’s improved) rather than simply, how much is left to do.

Go Further
• In Emotional Design: Why We Love (or Hate) Everyday Things, Donald Norman lets emotion out of the bag and into the usability picture.
• Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences by Stephen Anderson covers many aspects of design for motivation and engagement.
• The New York Times bestseller Drive by Daniel H. Pink and Why We Do What We Do by Edward Deci both look more deeply at intrinsic and extrinsic motivation. I also recommend the excellent TED Talks by each of them.
• Flow: The Psychology of Optimal Experience by Mihaly Csikszentmihalyi has been a powerful influence on both psychology and design.
• Positive Computing: Technology for Well-Being and Human Potential by Rafael Calvo and Dorian Peters (yes, me) includes chapters dedicated to design for positive emotions as well as motivation and engagement, and covers some of the links between well-being and learning technology.

Who needs full-on 3-D animation when 2-D can be this much fun? Bob is a slightly animated character from an eLearning course by Hitachi Systems. (From the course About Social Media Guidelines by Hitachi Data Systems; demo atwww.articulate.com/community/showca....)

physics game Ludwig (www.playludwig.com

The revolutionary game Foldit lets players solve puzzles for science.

Evoke—a ten-week crash course on how to change the world” (www.urgentevoke.com). Among her most recent work is the app SuperBetter, a mobile tool designed to support personal well-being, injury recovery, and mental and physical resilience.

Sounds can support learning when they’re used consistently to draw attention to important events.

Users are unlikely to be happy with sudden, loud sounds or repetitive sounds.
As with background sound, irrelevant text, be it print or audio, has been shown to decrease learning outcomes. Mayer gives an example of a lesson on the physics of lightning. When a fascinating story about a man who got hit by lightning was added to the lesson, students learned less. Mid-lesson tangents like this, though interesting, can impair learning.

While much is written about games for learning and gamification, there is still, unfortunately, a paucity of hard research about when and how to use them effectively for learning. This is bound to change, and if you’re designing learning games, you’re part of an ongoing experiment that’s taking our field forward. So whatever you create, test it with users, measure the learning gains, and share your findings with the community.
Many of the books available on learning games are written for instructional designers, trainers, or teachers, but here are some helpful resources for learning more about multimedia and games:
• While decidedly geared toward commerce rather than learning, Gamification by Design by Gabe Zichermann and Christopher Cunningham is a good guide to interface features and mechanics for games.
• KinderTown is both a site and an app run by tech-savvy educators that consolidates and reviews educational apps for young children. As a bonus, they often link apps to real-world games that address the same learning goals.
• If you want to be inspired, check out Reality Is Broken, game designer Jane McGonigal’s manifesto on how games can be used to change the world.


Go Further
• Explore Apple’s iOS Human Interface Guidelines, available for free fromdeveloper.apple.com.
• Read Designing Mobile Interfaces by Steven Hoober and Eric Berkman.
• Check out the continually updated reports on digital learning available from the Joan Ganz Cooney Center at the Sesame Workshop at www.joanganzcooneycenter.org.

"Many of the processes previously handled by learning theories can now be off-loaded to, or supported by, technology. Know-how and know-what is being supplemented with know-where (the understanding of where to find knowledge needed)."

mindsnacks.com, Grace app, soundamp app, aurifi app
Instructional Design Guru app

summary of the four transitions Bowles expands on, together with others that are useful for learning applications:
• Horizontal transitions (left to right) for communicating hierarchy. IHorizontal movement to the right is a well-established way of communicating the hierarchical organization of information.
• Vertical pop-ins for disruptive interactions. When windows pop up from the bottom or down from the top, they’re perceived as separate from the information and useful for login requests or calling on separate system controls.
• Flips and page curls for settings and preferences. Users expect to find background controls like settings and preferences around the back of an application and assume they can get there with flips and curls.
• Card swap for changing frame of reference. When a user switches apps on an iPad, the current screen sails behind the new one, which slots into place in front of him. This indicates a large change—he’s changing the frame of reference and entering a new hierarchy.
• Animated zoom for scale, distance, and hierarchy. Zooming in on a photo or world map is a fairly intuitive process. In general, the difference in scale from one step to the next leaves the user with some common frames of reference (
• Slide-ins for menu anchoring. Some apps provide controls in a persistent control panel on one edge of the screen. If content slides in and out from this same side of the screen, it seems to be connected or anchored to the menu that’s docked there. This communicates how to access related controls.
• Gradual build to minimize cognitive load. An opening screen can be a lot for a user to take in at once, especially if it’s highly detailed and graphical. Transitions can help him manage the load by having elements slide in one at a time, gradually building to the full screen. Amazing Alex, a physics game by the makers of Angry Birds, animates a gradual but still very fast build of the opening screen. The movement guides focus to each of the critical elements of the interface one at a time.
Go Further
• Explore Apple’s iOS Human Interface Guidelines, available for free from developer.apple.com.
• Read Designing Mobile Interf

Users learn better from feedback when Users learn better from feedback when it’s placed near the item it refers to, as in this image.

f you have a video or animation that requires explanation, include the explanation as audio narration—learners will thank you for it. If you can’t use narration, let learners read the written explanation first and then play the video, rather than including the text within the video or having it play in parallel. In this case, placing explanatory text on the same screen as the video or animation means your learners will have to process them at the same time, which is too much to take in at once.

Suggest a particular course of action, nudge people to take a first step, set up defaults, get a small initial commitment—these are the kinds of little details that can shape the path.
— STEPHEN ANDERSON, Seductive Interaction Design

Aim to design software interactions that seek to match real-world activity. As Allen advises
Match behavioral modalities. If the real-world activity would require moving something, have learners drag objects. If they would have to type a message, have them type one. If they’d have to tell a caller his credit application is being denied, have them record what they would say.
Mitchel Resnick at the MIT Media Lab is a proponent of what he calls “lifelong kindergarten.” He recommends that education be inspired by the way children learn in kindergarten, where they move through a spiral of activities in which they imagine → create → play → share → reflect.
Profile Image for Kris Patrick.
1,521 reviews90 followers
July 25, 2017
Fascinating stuff. I don't think it was meant to be consumed in one day but I did
Profile Image for Peter Edwards.
9 reviews1 follower
September 20, 2014
This is a very good review of the current state of research on e-learning and in particular its overlap with User Experience design and its overlap with Learning Experience Design.
There are few books that address both areas and this backs up its statements with research and facts.
Highly recommended for instructional designers and UX experts.
Profile Image for Joan.
30 reviews1 follower
Read
May 19, 2015
This is a handy little book! I think it is the only school text I've read cover to cover. If you are interested in this subject- it is wonderful. I also had the ebook version which was extremely useful. All links were live so I could check out the examples immediately.
Profile Image for kelly.
296 reviews1 follower
March 17, 2016
Peters strikes an excellent balance in illustrating points with current examples while highlighting timeless principles. And she's witty to boot. I wish I had discovered this book ages ago.
Profile Image for Karen.
372 reviews43 followers
June 19, 2016
An advocate for universal design with a focus on learning.
Displaying 1 - 7 of 7 reviews

Can't find what you're looking for?

Get help and learn more about the design.