Download - Interface Design for Learning - 20 min
Interface Design for Learning
By: Dorian Peters
@dorian_peters
Research & Best Practice
Education
Interface& User
ExperiencePsychology
webDesign
Learning is visual Learning is social Learning is emotional Learning is mobile Multimedia and games Designing the space
4
What kind of designer are you?
• How many have a title like graphic/interface/interaction designer?
• How many do graphic design work?
POLL
Interface DesignInterface Design for
Learning
Task completion
Transformation
User goals(business goals)
Learning goals(task, activity, class, course, degree, career…)
Speed satisfaction
Learning outcomes
Interface Design for Learning More attention to extraneous
cognitive load Design for emotions that support
learning Design to support thinking Measure learning outcomes
“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
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”Sharon Oviatt
“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
Signifiers online
Underlined text looks clickable Buttons should look like buttons Things that look like buttons should
act like buttons.
Clues that indicate what can be done
Simplify visuals To promote understanding, simplify
visuals or make them abstract.
Place related visuals together Don’t separate related text and
visuals.
Place related visuals together
✔ Correct! The minimalist design allows users to focus on their task.
✔
Place related visuals together
✔ Correct! The minimalist design allows users to focus on their task.✔
Learning is social
Social Learning
Interface design can foster: Convey social presence Encourage learner participation Promote a sense of community
Social presence = better learning People learn better when they perceive social
presence. Eg. Text written in first person conversational tone
leads to better learning.
Social presence = better learning
Social presence = better learning
Participation Look and Feel can help establish boundaries &
expectations Design cues (like badges and stats) motivate participation
“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
Learning with Multimedia
2. Animation & video for physical procedures
Research: 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
3. Video can be interactive
“Video is a more powerful learning medium when it is embedded within a larger context of use…[that] can be used in many creative ways to encourage learning interactions”
Annotations
Questions
Links to detail
Tags and Chapter Markers
Student DIYvideos
Schwartz, D. L., and Kevin Hartman. 2007. “It Is Not Television Anymore: Designing Digital Video for Learning and Assessment.” Pp. 335–48 in Video research in the learning sciences, edited by R. Goldman, S. Derry, R. Pea, and B. Barron. Mahwah, NJ: Erlbaum.
Learning is emotional
Learning is emotional “Emotions change the way the human mind
solves problems…” “Positive emotions are critical to learning,
curiosity and creative thought…” 1
Research shows positive affect increases ones ability to be thorough, flexible and creative in problem solving,
It also improves learning.
1 Norman, Donald A. 2005. Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books2 Estrada, C. A., Isen, A. M., & Young, M. J. (1997). Positive affect facilitates integration of information and decreases anchoring in reasoning among physicians. Organizational behavior and human decision processes, 72(1), 117-135.
Multimedia can promote positive affect
Usablility
Supporting engagement
Employ strategies for directing visual attentioneg. visual hierarchies, accent colors, simplified visuals, etc.
Convey relevance eg. Using graphics to contextualize (“make personal”) topic
Providing the right level of challenge and support eg. Multiple representations, Scaffolding
Inspiration
Inspiration: TMEAudience 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?
InspirationThare Machi Education
Education saves lives
InspirationHalf the SkyTurning oppression into opportunity
Research, updates, tips…
mendeley.com/groups/778381
InterfaceDesignforLearning.com
@dorian_peters+
EXTRA
References
email: [email protected]
mendeley.com/groups/778381
• Norman, Donald A. 2005. Emotional Design: Why We Love (or Hate) Everyday Things. Basic BooksEstrada, C. A., Isen, A. M., & Young, M. J. (1997).
• Positive affect facilitates integration of information and decreases anchoring in reasoning among physicians. Organizational behavior and human decision processes, 72(1), 117-135.
• 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
• Schwartz, D. L., and Kevin Hartman. 2007. “It Is Not Television Anymore: Designing Digital Video for Learning and Assessment.” Pp. 335–48 in Video research in the learning sciences, edited by R. Goldman, S. Derry, R. Pea, and B. Barron. Mahwah, NJ: Erlbaum.
• Clark, Ruth Colvin, and Richard E. Mayer. 2008. E-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning. Pfeiffer.
• More at…