Interface Design for Learning - ThoughtLeaders Webinar

10,250 views

Published on

Strategies for the visual design of learning Experiences. These slides supported the ThoughtLeaders Webinar interview with Dorian Peters, author of the book Interface Design for Learning published by New Riders (Voices that Matter). The webinar was offered by the eLearning Guild.

Published in: Design
5 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
10,250
On SlideShare
0
From Embeds
0
Number of Embeds
6,915
Actions
Shares
0
Downloads
97
Comments
5
Likes
14
Embeds 0
No embeds

No notes for slide
  • Mendeley – Research Sharing Group: http://www.mendeley.com/groups/778381
  • Newspaper make money when they instill fear and anger in their users. Fear can also sell products. A lot of media thrives on encouraging people to be judgemental, or highly competitive or feeling like they need to protect their intersts – none of this makes for a thriving collabroative learning environment. Learners can benefit from amounts of stress or pressure sometimes, but it depends on the learning goals. Creative thinking thrives in an environment where people are happy and positive and where they feel it’s safe to take risks and put there ideas out there. Design to support thinking – in some cases business are quite happy for you to buy something without thinking. Buy it now button in Amazon is a good example. Impulse items at the cash register as you wait in line. Learning activities are designed to make you think so as interface designesr we want to support the kind of thinking that needs to go on. Not lure them to act without thinking by hiding certain options and making others huge and easy, but supporting the learning activity itself and making thinking tools like diagrams, charts, resources easy to access and interpret.
  • Avoiding interface complexity is about reducing Cognitive load. We need to assess the “extraneous complexity” associated with instructional methods or interfaces separately from the “intrinsic complexity” associated with the primary learning task. There is a lot of talk about using visuals to “grab attention”. I’d like to be the devil’s advocate here and present a principle of interface design. That the content and activity should be the heart of engagement. Otherwise your attention will last no more than a few seconds. Only the content (and learning design) can ignite intrinsic motivation. If you’re relying on the design of your interface to keep people interested, you wont get far.
  • eLearning can sometimes be a solitary affair, but research shows we learn better when we perceive social presence. That’s fairly intuitive. If we feel someone real is paying attention to us, we will pay attention to them. As opposed to the sense that you’re reading an anonymously written piece of paper. That doesn’t mean every eLearning program has to be collaborative. What’s interesting is how little it takes for the benefits of our social brain to kick in. Far from having someone learning in the room with us, research shows, simple changes can provide the social presence cues necessary for better learning.
  • eLearning can sometimes be a solitary affair, but research shows we learn better when we perceive social presence. That’s fairly intuitive. If we feel someone real is paying attention to us, we will pay attention to them. As opposed to the sense that you’re reading an anonymously written piece of paper. That doesn’t mean every eLearning program has to be collaborative. What’s interesting is how little it takes for the benefits of our social brain to kick in. Far from having someone learning in the room with us, research shows, simple changes can provide the social presence cues necessary for better learning.
  • eLearning can sometimes be a solitary affair, but research shows we learn better when we perceive social presence. That’s fairly intuitive. If we feel someone real is paying attention to us, we will pay attention to them. As opposed to the sense that you’re reading an anonymously written piece of paper. That doesn’t mean every eLearning program has to be collaborative. What’s interesting is how little it takes for the benefits of our social brain to kick in. Far from having someone learning in the room with us, research shows, simple changes can provide the social presence cues necessary for better learning.
  • eLearning can sometimes be a solitary affair, but research shows we learn better when we perceive social presence. That’s fairly intuitive. If we feel someone real is paying attention to us, we will pay attention to them. As opposed to the sense that you’re reading an anonymously written piece of paper. That doesn’t mean every eLearning program has to be collaborative. What’s interesting is how little it takes for the benefits of our social brain to kick in. Far from having someone learning in the room with us, research shows, simple changes can provide the social presence cues necessary for better learning.
  • eLearning can sometimes be a solitary affair, but research shows we learn better when we perceive social presence. That’s fairly intuitive. If we feel someone real is paying attention to us, we will pay attention to them. As opposed to the sense that you’re reading an anonymously written piece of paper. That doesn’t mean every eLearning program has to be collaborative. What’s interesting is how little it takes for the benefits of our social brain to kick in. Far from having someone learning in the room with us, research shows, simple changes can provide the social presence cues necessary for better learning.
  • Interface Design for Learning - ThoughtLeaders Webinar

    1. 1. Interface Design for Learning By: Dorian Peters E-Learning Guild - 12 February 2014 Webinar available for free download at: http://tinyurl.com/n8nl9j5
    2. 2. See also… Interface Design for Learning Design Strategies for Learning Experiences By: Dorian Peters Buy from Amazon: http://tinyurl.com/n8nl9j5 Twitter: @dorian_peters Blog: InterfaceDesignforLearning.com
    3. 3. Research & Best Practice Education Psychology web Design Interface & User Experience
    4. 4. Share books & research mendeley.com/groups/778381 2/13/2014 ThoughtLeaders Webinar – Dorian Peters InterfaceDesignForLearning.com
    5. 5. POLL What kind of designer are you? • Instructional/learning designer • graphic/interface/interaction designers? • Both • Other 5
    6. 6. Interface Design Interface Design for Learning Task completion Transformation User goals Learning goals (business goals) Speed satisfaction 14Feb2014 | Dorian Peters (task, activity, class, course, degree, career…) Learning outcomes InterfaceDesignForLearning.com
    7. 7. Interface Design for Learning     More attention to extraneous cognitive load Design for emotions that support learning Design to support thinking Measure learning outcomes 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    8. 8. “Don’t make me think” [about the interface] Steve Krug “If you find you’re needing to provide instructions, redesign the screen….” if a lot of help is needed, the design is poor.” Lidwell, Holden and Butler, Universal Principles of Design 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    9. 9. “Quiet Design” Sharon Oviatt One of the biggest ways interface design can contribute to better learning is by getting out of the way.  The overuse of color decreases performance on memory/recognition tasks.  Adding interesting but unnecessary material [graphics, words, sounds] can harm learning. Quiet design doesn’t interrupt (pop-ups, sales pitches or tangents) Leverage: chunking, white space and consistency, signifiers all reduce extraneous cognitive load. 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    10. 10. Signifiers online Clues that indicate what can be done    Underlined text looks clickable Buttons should look like buttons Things that look like buttons should act like buttons. 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    11. 11. Simplify visuals  To promote understanding, simplify visuals or make them abstract. “It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.” Antione de Saint Exupery 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    12. 12. Place related visuals together  Don’t separate related text and visuals. 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    13. 13. Place related visuals together ✔ ✔ Correct! The minimalist design allows users to focus on their task. 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    14. 14. Place related visuals together ✔ ✔ Correct! The minimalist design allows users to focus on their task. [This quiz question is from the excellent Stanford HCI course with Scott Klemmer available on Coursera]
    15. 15. Resources eLearning and the Science of Instruction Clark and Mayer Graphics for Learning: Proven Guidelines for Planning, Designing, and Evaluating Visuals in Training Materials Clark and Lyons
    16. 16. Layers of IDL Source: Interface Design for Learning: Design Strategies for Learning Experiences by Dorian Peters, Published by New Riders 2014
    17. 17. Social Learning Interface design can foster:  Learner participation  Social presence  A sense of community 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    18. 18. Participation   Look and Feel can help establish boundaries & expectations Design cues (like badges and stats) motivate participation Source: “Using interface cues in online health community boards to change impressions and encourage user contribution” Hyang-Sook Kim, S. Shyam Sundar (2011) Proceedings of the 2011 annual conference on Human factors in computing systems - CHI '11
    19. 19. Social presence = better learning   People learn better when they perceive social presence. Eg. Text written in first person conversational tone leads to better learning. 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    20. 20. Social presence = better learning
    21. 21. Social presence = better learning From the Reading Eggs learning program - http://readingeggs.com
    22. 22. Motivation & Engagement Aesthetics-Usability Effect   Interfaces that are more attractive are easier to use Emotions and problem-solving 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    23. 23. Supporting engagement Employ strategies for directing visual attention eg. visual hierarchies, accent colors, simplified visuals, etc. Convey relevance eg. Using graphics to contextualize (“make personal”) topic Stimulate creativity Providing the right level of challenge and support eg. Scaffolding, tool-tips. Books: Connie Malamed – Visual Language for Designers Colin Ware – Visual Thinking for Designers 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    24. 24. Motivation Intrinsic I enjoy this task for its own sake Extrinisic I’m doing this because I’ll get something separate in return Keys to good motivation are… Ryan & Deci: Autonomy, competence, connectedness Daniel Pink: Autonomy, mastery and purpose 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    25. 25. Keys to Motivation Autonomy Mastery Connectedness Purpose 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    26. 26. Good Motivation 1. Intrinsic to the task (eg. I write because I love it) OR 1. Intrinsic to being human (eg. I write because it connects me with others, increases my sense of mastery or contributes to a higher purpose.) 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    27. 27. Interface Design & Motivation    Leverage aesthetics and aesthetic cues to appeal to the key motivators for the topic Reward progress not talent (mastery) We can set a positive mood for creative thinking 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    28. 28. POLL How do you learn? If I said: go learn how to fold an origami fox in 10 minutes, what would you do next?      Look for a book on origami Search for a video on how to fold a fox Look for instructions on the web Call a friend other
    29. 29. Multimedia  Tailor to learning content and goals Use animations to teach physical procedures and still images to teach processes.   Avoid irrelevant video, audio, stories. Use it when it provides something that medium can uniquely provide
    30. 30. http://francotoile.uvic.ca 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    31. 31. Games “That’s what games are, in the end. Teachers. Fun is just another word for learning.” “When a game stops teaching us, we feel bored. Boredom is the brain casting about for new information.” Ralph Koster, A Theory of Fun for Game Design 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    32. 32. Games    Support Transfer - retain contextual cues in the visual environment Align game goals with learning goals Drive interest with intrinsic, and/or good extrinsic motivation. (autonomy, mastery, connectedness, purpose) University of Arizona - MineSAFE Numbers League Kratt’s Creatures – Creature Power
    33. 33. Evaluating IDL Heuristics, standards, best practice     Usability Interaction Design Information Architecture Visual/Graphic Design 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    34. 34. Nielsen’s 10 User Interface Design Heuristics 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation Source: nngroup.com/articles/ten-usability-heuristics 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    35. 35. 11 Heuristics for the design of Learning Interfaces 1. Relevance of media and reduction of extraneous load 2. Learner Control and Freedom 3. Support for learning objective(s) 4. Alignment with specific learner needs 5. Appropriateness of look and feel 6. Support for the cognitive aspects of learning 7. Support for the affective aspects of learning 8. Media and tools appropriateness 9. Accessibility 10. Usability 11. Feedback and responsiveness Source: Interface Design for Learning: Design Strategies for Learning Experiences by Dorian Peters, Published by New Riders 2014
    36. 36. Learnability - Prezi Show progress Include a purpose biophilia Make it look easy 14Feb2014 | Dorian Peters Be forgiving
    37. 37. Inspiration projectNoah.org
    38. 38. Inspiration bigHistoryProject.com
    39. 39. Inspiration: TME Audience characteristics • culturally diverse (representing 50+ languages), • totally unfamiliar with technology • mostly illiterate, • extremely poor • training requirements are on topics like human trafficking, aids prevention and cholera. How's that for a spec? 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
    40. 40. Inspiration Thare Machi Education Education saves lives
    41. 41. Inspiration Half the Sky Turning oppression into opportunity www.facebook.com/HalftheGame

    ×