際際滷

際際滷Share a Scribd company logo

7 Principles for Effective Interface Design for Learning

Dorian Peters
Dorian Peters

This document outlines 7 principles of effective interface design for learning. It discusses how interface design impacts both the cognitive and emotional sides of learning. Key points include: using "quiet design" that gets out of the way to allow focus on learning; reducing extraneous cognitive load through simplifying visuals and keeping related text and images together; targeting different media like videos for motor skills; supporting positive emotions and motivation; and conveying social presence. The document provides research and examples to support implementing these principles in interface design.

1 of 35
Downloaded 27 times
Dorian Peters University of Sydney, 2018 1 7 Principles of Effective Interface Design for Learning Positive Computing Lab Brain and Mind Centre Sydney School of Education & Social Work University of Sydney Dorian Peters
Dorian Peters University of Sydney, 2018 2 What is Interface Design? Graphics 2 Navigation Cues for action Layout
Dorian Peters University of Sydney, 2018 3 Mythbuster #1 Myth: visuals are just decoration and dont really impact learning. Fact: aesthetics have been proven to improve usability, and increase learning gains. (or decrease both if not done well). 3
Dorian Peters University of Sydney, 2018 4 Design for the cognitive side of learning 1 Reduce Extraneous Cognitive Load Design for Timely Feedback Target the media to the learning
Dorian Peters University of Sydney, 2018 5 ThinkQuiet Design 1
Dorian Peters University of Sydney, 2018 6 Quiet Design One of the biggest ways interface design can contribute to better learning is by getting out of the way. Sharon Oviatt
Dorian Peters University of Sydney, 2018 7 1. Reduce Extraneous Cognitive Load sounds graphics animations colours 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.
Dorian Peters University of Sydney, 2018 8 Not Quiet Design The overuse of color decreases performance on memory/recognition tasks.
Dorian Peters University of Sydney, 2018 9 Source: Savv-e eLearning Solutions pty ltd. Colour = Meaning Quiet design draws focus
Dorian Peters University of Sydney, 2018 10 Quiet Design = relevant material Adding interesting but unnecessary material (graphics, words, sounds) can harm 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.
Dorian Peters University of Sydney, 2018 11 Relevant visuals engage & teach Convey learning content eg. Examples, Diagrams Convey relevance eg. Real world contexts, (make it personal) Provide the right level of challenge and support eg. Scaffolding, tool-tips.
Dorian Peters University of Sydney, 2018 12 Takeaways A good interface gets out of the way so the learner can focus on learning Use colour selectively and to communicate meaning Stick to relevant material (to provide learning content, context or scaffolding) Simplify graphics by removing any unnecessary detail Line drawings are more memorable Keep related text and visuals together
Dorian Peters University of Sydney, 2018 13 Simplify visuals & keep related things together 2
Dorian Peters University of Sydney, 2018 14 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.
Dorian Peters University of Sydney, 2018 15 Other ways to reduce load & support cognition Dont 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.
Dorian Peters University of Sydney, 2018 16 Thyroid a large ductless gland in the neck which secretes hormones regulating growth and development through the rate of metabolism. Other ways to reduce load & support cognition Dont separate related text and visuals.
Dorian Peters University of Sydney, 2018 17 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. Feedback
Dorian Peters University of Sydney, 2018 18 Target the media to the learning 3
Dorian Peters University of Sydney, 2018 19 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):33947 Animation & video are great for physical procedures 3. Target the media to the learning
Dorian Peters University of Sydney, 2018 20 Design for the emotional side of learning Support a positive mood Support social presence Support good motivation
Dorian Peters University of Sydney, 2018 21 Nature views increase focus The biophilia effect states that environments rich in views and imagery of nature can reduce stress and increase focus and concentration
Dorian Peters University of Sydney, 2018 22 Mythbuster #2 Myth 1: Learning is strictly a cognitive process. Myth 2: Being emotional is the opposite of being rational. Fact: Emotions are critical to decision making and shape our ability to learn.
Dorian Peters University of Sydney, 2018 23 Positive Emotions = Better Learning 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
Dorian Peters University of Sydney, 2018 24 Attractive things work better Aesthetics-Usability Effect: Interfaces that are more attractive are easier to use. - Donald A. Norman. Aesthetics makes things work better because they make people work better.
Dorian Peters University of Sydney, 2018 25 Support positive emotions 5
Dorian Peters University of Sydney, 2018 26 Dont 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, dont interrupt the learning with them, and test your ideas on your users first.) Staying positive
Dorian Peters University of Sydney, 2018 27 Takeaways Positive mood boosts learning Dont stress out your learners. (avoid timers, highly negative cues, signs of surveillance) Keep your design friendly & positive (a safe place to experiment and make mistakes) Include delighters (the occasional unexpected treat)
Dorian Peters University of Sydney, 2018 28 Convey social presence 6
Dorian Peters University of Sydney, 2018 29 2. 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.
Dorian Peters University of Sydney, 2018 30 2. Show Social Presence
Dorian Peters University of Sydney, 2018 31 Tap into meaningful motivation 7
Dorian Peters University of Sydney, 2018 32 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), 5467. OR Intrinsic to being human (autonomous extrinsic) (eg. I do it because it connects me with others, increases my sense of competence, helps me achieve my goals and values. Tap into meaning.
Dorian Peters University of Sydney, 2018 33 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 meaningful motivators for the topic
Dorian Peters University of Sydney, 2018 34 Autonomy Provide meaningful choices, flexibility, ways to redo and experiment, (and solid usability!) Competence Provide the right level of challenge and support (eg. Multiple representations, Scaffolding) Reward progress not talent Relatedness Support collaboration and social presence Purpose Convey relevance, use graphics/video to contextualize (make a topic personal). Takeaways - supporting motivation
Dorian Peters University of Sydney, 2018 35 Interface Design for Learning Design Strategies for Learning Experiences Thank you. @Dorian_Peters

More Related Content

7 Principles for Effective Interface Design for Learning

  • 1. Dorian Peters University of Sydney, 2018 1 7 Principles of Effective Interface Design for Learning Positive Computing Lab Brain and Mind Centre Sydney School of Education & Social Work University of Sydney Dorian Peters
  • 2. Dorian Peters University of Sydney, 2018 2 What is Interface Design? Graphics 2 Navigation Cues for action Layout
  • 3. Dorian Peters University of Sydney, 2018 3 Mythbuster #1 Myth: visuals are just decoration and dont really impact learning. Fact: aesthetics have been proven to improve usability, and increase learning gains. (or decrease both if not done well). 3
  • 4. Dorian Peters University of Sydney, 2018 4 Design for the cognitive side of learning 1 Reduce Extraneous Cognitive Load Design for Timely Feedback Target the media to the learning
  • 5. Dorian Peters University of Sydney, 2018 5 ThinkQuiet Design 1
  • 6. Dorian Peters University of Sydney, 2018 6 Quiet Design One of the biggest ways interface design can contribute to better learning is by getting out of the way. Sharon Oviatt
  • 7. Dorian Peters University of Sydney, 2018 7 1. Reduce Extraneous Cognitive Load sounds graphics animations colours 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.
  • 8. Dorian Peters University of Sydney, 2018 8 Not Quiet Design The overuse of color decreases performance on memory/recognition tasks.
  • 9. Dorian Peters University of Sydney, 2018 9 Source: Savv-e eLearning Solutions pty ltd. Colour = Meaning Quiet design draws focus
  • 10. Dorian Peters University of Sydney, 2018 10 Quiet Design = relevant material Adding interesting but unnecessary material (graphics, words, sounds) can harm 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.
  • 11. Dorian Peters University of Sydney, 2018 11 Relevant visuals engage & teach Convey learning content eg. Examples, Diagrams Convey relevance eg. Real world contexts, (make it personal) Provide the right level of challenge and support eg. Scaffolding, tool-tips.
  • 12. Dorian Peters University of Sydney, 2018 12 Takeaways A good interface gets out of the way so the learner can focus on learning Use colour selectively and to communicate meaning Stick to relevant material (to provide learning content, context or scaffolding) Simplify graphics by removing any unnecessary detail Line drawings are more memorable Keep related text and visuals together
  • 13. Dorian Peters University of Sydney, 2018 13 Simplify visuals & keep related things together 2
  • 14. Dorian Peters University of Sydney, 2018 14 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.
  • 15. Dorian Peters University of Sydney, 2018 15 Other ways to reduce load & support cognition Dont 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.
  • 16. Dorian Peters University of Sydney, 2018 16 Thyroid a large ductless gland in the neck which secretes hormones regulating growth and development through the rate of metabolism. Other ways to reduce load & support cognition Dont separate related text and visuals.
  • 17. Dorian Peters University of Sydney, 2018 17 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. Feedback
  • 18. Dorian Peters University of Sydney, 2018 18 Target the media to the learning 3
  • 19. Dorian Peters University of Sydney, 2018 19 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):33947 Animation & video are great for physical procedures 3. Target the media to the learning
  • 20. Dorian Peters University of Sydney, 2018 20 Design for the emotional side of learning Support a positive mood Support social presence Support good motivation
  • 21. Dorian Peters University of Sydney, 2018 21 Nature views increase focus The biophilia effect states that environments rich in views and imagery of nature can reduce stress and increase focus and concentration
  • 22. Dorian Peters University of Sydney, 2018 22 Mythbuster #2 Myth 1: Learning is strictly a cognitive process. Myth 2: Being emotional is the opposite of being rational. Fact: Emotions are critical to decision making and shape our ability to learn.
  • 23. Dorian Peters University of Sydney, 2018 23 Positive Emotions = Better Learning 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
  • 24. Dorian Peters University of Sydney, 2018 24 Attractive things work better Aesthetics-Usability Effect: Interfaces that are more attractive are easier to use. - Donald A. Norman. Aesthetics makes things work better because they make people work better.
  • 25. Dorian Peters University of Sydney, 2018 25 Support positive emotions 5
  • 26. Dorian Peters University of Sydney, 2018 26 Dont 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, dont interrupt the learning with them, and test your ideas on your users first.) Staying positive
  • 27. Dorian Peters University of Sydney, 2018 27 Takeaways Positive mood boosts learning Dont stress out your learners. (avoid timers, highly negative cues, signs of surveillance) Keep your design friendly & positive (a safe place to experiment and make mistakes) Include delighters (the occasional unexpected treat)
  • 28. Dorian Peters University of Sydney, 2018 28 Convey social presence 6
  • 29. Dorian Peters University of Sydney, 2018 29 2. 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.
  • 30. Dorian Peters University of Sydney, 2018 30 2. Show Social Presence
  • 31. Dorian Peters University of Sydney, 2018 31 Tap into meaningful motivation 7
  • 32. Dorian Peters University of Sydney, 2018 32 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), 5467. OR Intrinsic to being human (autonomous extrinsic) (eg. I do it because it connects me with others, increases my sense of competence, helps me achieve my goals and values. Tap into meaning.
  • 33. Dorian Peters University of Sydney, 2018 33 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 meaningful motivators for the topic
  • 34. Dorian Peters University of Sydney, 2018 34 Autonomy Provide meaningful choices, flexibility, ways to redo and experiment, (and solid usability!) Competence Provide the right level of challenge and support (eg. Multiple representations, Scaffolding) Reward progress not talent Relatedness Support collaboration and social presence Purpose Convey relevance, use graphics/video to contextualize (make a topic personal). Takeaways - supporting motivation
  • 35. Dorian Peters University of Sydney, 2018 35 Interface Design for Learning Design Strategies for Learning Experiences Thank you. @Dorian_Peters