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.
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. “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. “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. 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. 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. Place related visuals together
Don’t separate related text and visuals.
14Feb2014 | Dorian Peters
InterfaceDesignForLearning.com
13. Place related visuals together
✔
✔ Correct! The minimalist design allows users to focus on their task.
14Feb2014 | Dorian Peters
InterfaceDesignForLearning.com
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. 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. Layers of IDL
Source: Interface Design for Learning: Design Strategies for Learning Experiences
by Dorian Peters, Published by New Riders 2014
17. Social Learning
Interface design can foster:
Learner participation
Social presence
A sense of community
14Feb2014 | Dorian Peters
InterfaceDesignForLearning.com
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. 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
21. Social presence = better learning
From the Reading Eggs learning program - http://readingeggs.com
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. 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. 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
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. 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. 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. 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
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. 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. Evaluating IDL
Heuristics, standards, best practice
Usability
Interaction Design
Information Architecture
Visual/Graphic Design
14Feb2014 | Dorian Peters
InterfaceDesignForLearning.com
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. 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. Learnability - Prezi
Show progress
Include a purpose
biophilia
Make it
look easy
14Feb2014 | Dorian Peters
Be forgiving
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
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.