Downloaded 60 times
Uploaded byDorian Peters
UX Design for the learning experience
The document discusses UX design specifically for learning experiences, emphasizing the importance of considering both cognitive and emotional aspects to enhance learning outcomes. It outlines strategies to reduce cognitive load, provide timely feedback, and engage learners through social presence and motivation. The document also stresses the necessity of setting clear learning objectives and aligning design elements with those objectives to measure success effectively.
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.
- 19. Dorian Peters (dorian-peters.com)- UX Australia, August 2017 19 2. Support Social Presence Positive Emotions = Better 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
Editor's Notes
- #2 Design for wellbeing and learning
- #4 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.
- #5 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.
- #6 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.
- #7 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!
- #8 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.
- #9 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.
- #10 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.
- #11 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.
- #12 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…
- #13 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.
- #14 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.
- #15 >> 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
- #16 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.
- #17 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.
- #18 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.
- #19 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.
- #20 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.
- #21 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…
- #22 Even if what we want them to do is just “know” something – what do we really mean?
- #23 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…
- #24 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.
- #25 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.
- #26 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.