A quick look at 9 design strategies for Learning Experiences. How to support both the cognitive and emotional sides of learning as well as design and measure for learning impact. For UX/UI designers.
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
UX Design for the learning experience
1. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 1
Design for
the Learning
Experience
Positive Computing Lab
Brain and Mind Centre
Sydney School of Education & Social Work
University of Sydney
Dorian Peters
2. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 2
What kinds of learning experiences
do you design for?
Schools/children
University/TAFE
Workplace
Consumer learning/ learnability
?
3. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 3
UX for Learning (v. “normal” UX)
Design for the cognitive side of learning
Design for the emotional side of learning
Measure success via learning objectives
4. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 4
UX for Learning (v. “normal” UX)
Design for the cognitive side of learning
Design for the emotional side of learning
Measure success via learning objectives
5. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 5
UX for Learning (v. “normal” UX)
Design for the cognitive side of learning
Design for the emotional side of learning
Measure success via learning objectives
6. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 6
UX for Learning (v. “normal” UX)
Design for the cognitive side of learning
Design for the emotional side of learning
Measure success via learning objectives
7. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 7
Design for the
cognitive side of
learning
1
– Reduce Extraneous Cognitive Load
– Design for Timely Feedback
– Target the media to the learning
8. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 8
1. Reduce Extraneous Cognitive Load
Research says…
– Adding interesting but unnecessary extras can harm learning.
– Overuse of colour decreases performance on memory tasks.
– Avoid elements that don’t directly support the learning objective.
sounds
graphics
animations
colours Learning
Clark, R. C., & Mayer, R. E. (2008).E-Learning and the Science of Instruction: Proven Guidelines for Consumers and
Designers of Multimedia Learning.Elearning (Vol.2).Pfeiffer.
9. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 9
Simplify visuals or make them abstract.
Other ways to reduce load & support cognition…
Research shows that we recognize a line drawing of an
object as fast as a realistic photo and we
remember the drawing better.
Clark, R. C., & Mayer, R. E. (2008).E-Learning and the Science of Instruction: Proven Guidelines for Consumers and
Designers of Multimedia Learning.Elearning (Vol.2).Pfeiffer.
10. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 10
Other ways to reduce load & support cognition…
Don’t separate related text and visuals.
Research shows placing text next to the image to
which it refers improves learning outcomes.
Clark, R. C., & Mayer, R. E. (2008).E-Learning and the Science of Instruction: Proven Guidelines for Consumers and
Designers of Multimedia Learning.Elearning (Vol.2).Pfeiffer.
11. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 11
Thyroid
a large ductless gland in the neck which
secretes hormones regulatinggrowth and
development throughthe rate of metabolism.
Other ways to reduce load & support cognition…
Don’t separate related text and visuals.
12. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 12
– Design to allow for the provision of both operational and
rich instructional feedback.
– Place feedback near its related item
– Trigger feedback instantaneously when possible.
✔ Correct! The minimalist design allows users to focus on their task.
✔ Correct! The minimalist design
allows users to focus on their task.
2. Design for Timely Feedback
13. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 13
Research demonstrates that people learn motor skills
better with video or animation
Wong, A. et al. 2009.“Instructional Animations Can Be Superior to Statics When Learning Human Motor Skills.” Computers in
Human Behavior 25(2):339–47
Animation & video are great for physical procedures
3. Target the media to the learning
14. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 14
– Practice Dangerous things first-hand
(Defusing a bomb, surgery, work with radioactivity, etc.)
– Experience inaccessible things first-hand
(Historical time periods, distant locations)
– Experience things out of scale
(like an atom or the solar system)
– Make decisions, experience consequences
(control the action and experience realistic consequences; intrinsic feedback)
IMPORTANT:
In order for learners to transfer their learning to the real world
the virtual setting should mimic the real one (include real-world cues).
(ie. don’t set your corporate skills training on an alien planet even if it’s cool).
When to consider virtual worlds…
VR & simulated environments can be great for:
Mikropoulos,T.A., & Natsis,A. (2011).Educational virtual environments:A ten-year review of empirical research (1999–2009).
Computers & Education,56(3), 769–780.http://doi.org/10.1016/j.compedu.2010.10.020
15. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 15
Design for the
emotional side of
learning
– Support a positive mood
– Support social presence
– Support “good” motivation
16. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 16
1. Support a Positive Mood
Norman, Donald A. 2005. Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books
– Positive emotion increases our ability to be
thorough, flexible and creative in problem solving, and it
improves learning
– “Positive emotions are critical to learning, curiosity and creative
thought” – Don Norman
Positive Emotions = Better Learning
17. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 17
– Don’t stress out your learners.
(avoid timers, highly negative cues, signs of surveillance)
– Keep your design friendly & forgiving
(a safe place to experiment, make mistakes and retry)
– Include delighters
(Just do so sparingly, don’t interrupt the learning with them, and test your
ideas on your users first.)
Staying positive…
18. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 18
2. Support Social Presence
Social Presence = Better Learning
Moreno,R., & Mayer, R. E. (2000).Engaging students in active learning:The case for personalized multimedia
messages.Journal of educational psychology,92(4),724.
Writing in a first person conversational
tone improves learning.
20. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 20
3. Support “Good” Motivation
Effective engagement comes from motivation that is…
Intrinsic to the task
(eg. I do it because I love it)
Ryan, R., & Deci, E. (2000). Intrinsic and Extrinsic Motivations: Classic Definitions and New Directions.
Contemporary Educational Psychology, 25(1), 54–67.
OR
Intrinsic to being human (autonomous extrinsic)
(eg. I do it because it connects me with others, increases my
sense of mastery, helps me achieve my goals and values.
Tap into meaning.
21. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 21
Interface Design & Motivation
Example: Styling like a race primes learners to value speed,
efficiency and competition, while styling it like an adventure
could call on an inherent love of story and character.
Use aesthetics to tap into
meaningfulmotivators for the topic
22. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 22
Interface Design & Motivation
Example: Styling like a race primes learners to value speed,
efficiency and competition, while styling it like an adventure
could call on an inherent love of story and character.
Use aesthetics to tap into
meaningfulmotivators for the topic
23. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 23
Measure success via
learning objectives
– Set learning objectives
– Align design and media to those objectives
– Assess for those objectives
24. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 24
XXX
Anatomy of a learning objective
By the end of the experience the learner
will be able to…
know understand believe
25. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 25
Anatomy of a learning objective
Be able to what?
What do we mean by “learn”
26. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 26
Anatomy of a learning objective
Bloom’s Taxonomy…
Remember
Understand
Apply
Analyse
Evaluate
Create
What do we mean by “learn”
27. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 27
Anatomy of a learning objective
REMEMBER UNDERSTAND APPLY ANALYSE EVALUATE CREATE
IDENTIFY EXPLAIN DEMONSTRATE DEVELOP COMPARE DESIGN
RECOGNISE INTERPRET USE DIFFERENTIATE MEASURE CONSTRUCT
DEFINE CLASSIFY ILLUSTRATE CATEGORISE CRITIQUE COMPOSE
SELECT DESCRIBE INTERPRET DISTINGUISH INTERPRET PRODUCE
Learning types & verbs
28. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 28
Start with a quality Learning Objective
Learning Activity
How will they learn?
learning objective
What should they
be able to do?
Assessment
“How will we know
they have learned?”
1
2 3
“By the end of the lesson the learner
will be able to demonstrate a Tango 8-step”
29. Dorian Peters (dorian-peters.com) - UX Australia, August 2017 29
Delve Deeper: Interface Design for Learning
Design Strategies for Learning Experiences
Thank you.
@Dorian_Peters
Notes de l'éditeur
Design for wellbeing and learning
Today I’ll talk about 3 aspects of designing for Learning experiences that make them a bit different from other user experiences.
>>First, we need to design to support the cognitive aspects of learning.
>>We need to Design for the emotions that support learning (as opposed to the emotions that support shopping, or socialising, entertainment, etc.)
>>Finally, we need to evaluate our success differently. Metrics like downloads, and user satisfaction won’t matter unless users have also learned.
All the strategies I mention today are drawn from the research in design, psychology, and education.
So first up, we’ll look at design for cognition.
Learning requires mental work and we can make this work more engaging, satisfying and effective by following some principles. For example, rule number one – we need to reduce extraneous cognitive load and I’ll explain that next.
We need to make sure feedback is provided, both operational and instructional, and we need to choose media and tools based on how our brains learn.
Reduce extraneous cognitive load is about removing anything within the experience that takes brain power away from the learning. That might be decorative graphics, background sounds, or exciting by irrelevant sidebars.
>> Even colour is information that needs processing by our brains so the overuse of colour has been found to decrease learning performance.
This doesn’t mean we can never use colour or sound but rather that we should be doing it very selectively and to directly support the learning objective.
On the home screen or reward screens you have more leeway, but when your learner is in the midst of the learning, think Zen.
Another way to reduce load is to pare your graphics right down to essentials.
For example, do you need medical students to be able to distinguish parts of a real brain in a human specimen? Or label the various brain structures? Or maybe you just need the idea of a brain like -use the simplest image available for your learning goal and in many cases a simple line drawing will be the best choice.
> In fact, research shows that we recognize the line drawing of an object just as fast as we do a realistic photo AND we remember the drawing better!
Another way to reduce load is to keep related things together.
Sounds basic but we see this all the time: This diagram is labelled with letters and the terms are stuck into a caption. So the learner has to do the mental work of mapping the terms to the letters. People are going to learn better if the diagram is labelled directly. <
Of course in a book you might argue that there isn’t enough space, but the beauty of digital is that you can hide detail until it’s needed.
We can use interaction to hide and reveal detail on tap which means we can put lots of information directly beside the image to which it refers.
Next up is feedback. And we have to think not only about operational feedback but also rich instructional feedback. In most cases, as the designers, we’re not writing instructional feedback ourselves, but we may be designing the screens that will display that feedback so we need to keep it in mind.
And while you’re at it, don’t forget to display that feedback next to the item it’s referrring to. The quiz at the left has feedback on the bottom, but the one on the right has it just beside the item it refers to and will therefore lead to better learning.
Different media have different advantages so you want to choose the media that best serves on the learning goal. For example, It turns out that we’ve been learning by watching other people do things for thousands of years so, perhaps unsurprisingly, video and animation can be great ways to learn observable skills. There’s no evidence they’re superior for abstract concepts but for physical gross motor skills they work great.
While the jury is still out on proof for what works best for learning VR, we do know there are some features that only immersive environments can provide or provide uniquely well. These include…
And now to the emotional side of learning. Learning is emotional and here are 3 things we can do about that.
We can support a positive mood
Support social presence and
Support the more effective types of motivation.
When we’re in a good mood we’re more likely to be thorough, flexible and creative – ergo we’re more likely to learn.
This is good news because it means you have scientific reasons to make your learners happy.
>> For example, don’t stress them out.>>
I’m not saying there’s never a place for pressure, but remember that stress-inducing things like big ticking timers, or signs of being judged are going to decrease their ability to learn. >>
>> Therefore, keep your learning designs friendly and forgiving. Make sure it’s a safe place to make mistakes, retry and experiment. >>
>> You might also want to think about including the odd deligher, which may just be an unexpected positive message or maybe it’s the friendly way you write your feedback (with personality or a bit of humor). Just do so sparingly, don’t interrupt the learning with them, and test your ideas on your users first
Research shows we learn better when we perceive social presence – when we feel like there are others around. Even if they’re not! What do I mean? Consider this… >>
Research shows, that simply writing text in a first person conversational tone improves learning. We learn better when it feels like someone talking directly to us. Even if we know they are not. It cleary doesn’t take much to trigger our social brain so lets use this fact to improve learning.
When there are other learners in a program, we can help to visualise their presence.
Here are two examples – we can group learners, by location, or interest, so they seek out connections.
Or at the bottom is just a simple google map in which students at an MIT MOOC were asked to place themselves on the map. It’s Techncially ridiculously simple but still very effective at getting across social presence.
Finally, we want to support the best types of motivation. Of course this is a very complex topic with decades of research and theory behind it but I’m going to put it in an absurdly simple nutshell for our purposes today >>
The most effective motivation is either intrinsic to the task, or intrinsic to being human. And that is about meaning.
Let’s face it, we won’t always be intrinsically motivated. I may not intrinsically enjoy learning the new payroll system but I still need to do it.
In these cases, we want to try and tap into the meaning behind the topic.
Take ZenPayroll (now Gusto), payroll may be one of life’s most boring tasks – but at Gusto they tapped deep into the meaning and the humanity behind the task to discover it’s really about gratitude and celebration! They then designed their payroll software to treat payroll as a celebration –as an opportunity to connect with others by showing gratitude for their work. And this was a huge success.
Connecting to others is one of the three key motivators that is intrinsic to being human. Connectedness, mastery and autonomy which has to do with having influence over our lives and acting in alignment with our goals and values. This is the stuff that has meaning.
Even just simple visual design decisions can be important.
For example, if you’re creating a story writing game for kids, you could style it as a formula one race because racing is fun – but is that tapping into what’s intrinsically exciting about writing. No, in fact this will prime them to focus on speed and competition.
>> Instead, you could style it to evoke fantasy, adventure, magical wizards – in other words, the worlds and characters that are so intrinsically compelling about narrative.
If you can’t figure out what’s intrinsically compelling about a particular topic, talk to the people who love it. Talk to the nerds who are passionate about whatever your topic. If no one’s passionate about the topic then use laddering to delve deeper into what the meaning and humanity are that lie beneath people’s motivations for doing things.
Finally, when it comes to learning, we need to be measuring for learning. And doing that well, is all about starting with the right objectives.
A basic principle of educational design is that you need to start with a clear learning objective before you do anything else.
In a nutshell, a learning objective should look like this…
Not know, not understand, not believe, but “be able to” because this forces us to define something specific and measurable…
Even if what we want them to do is just “know” something – what do we really mean?
Based on Bloom’s Taxonomy, we may simply just wantthem to “remember” something. Or perhaps we may want them to understand what they’ve remembered, or apply what we’ve come to understand, then analyse and evaluate and at the very top – perhaps they should be able to create something new based on their new knowledge and abilities… what’s wonderful about this taxonomy is that…
It comes with verbs. Tables like this one, and there are millions online with many more verbs to choose from--help us write learning objectives that are specific and measurable – which also then suggests appropriate designs.
If I know my users will need to be able to “recognise” something, then I can give them activities that give them practice with “recognition”. If they’ll need to classify or construct – I can think of activities from drag and drop to presenting a video or building a prototype that apply to each of those verbs. You can suddenly see what an impact it makes to have a well designed learning objective.
So the learning objective suggests how the learning should be measured or assessed, which in turn suggests how we can design a learning experience to get them there.
So in a sense I’ve ended at the beginning. Before you do anything else, make sure you have beautifully designed learning objectives – everything else can follow from there.
if you’re interested in delving further, there’s a lot more detail and many more strategies in my book, Interface Design for Learning. And I’m happy to connect on tiwitter as well. Until next time, happy designing.