Interface Design for Learning - 20 min.
-
Upload
dorian-peters -
Category
Education
-
view
116 -
download
0
description
Transcript of Interface Design for Learning - 20 min.
![Page 1: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/1.jpg)
Interface Design for Learning
By: Dorian Peters
@dorian_peters
![Page 2: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/2.jpg)
Research & Best Practice
Education
Interface& User
ExperiencePsychology
webDesign
![Page 3: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/3.jpg)
Learning is visual Learning is social Learning is emotional Learning is mobile Multimedia and games Designing the space
![Page 4: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/4.jpg)
4
What kind of designer are you?
• How many have a title like graphic/interface/interaction designer?
• How many do graphic design work?
POLL
![Page 5: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/5.jpg)
Interface DesignInterface Design for
Learning
Task completion
Transformation
User goals(business goals)
Learning goals(task, activity, class, course, degree, career…)
Speed satisfaction
Learning outcomes
![Page 6: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/6.jpg)
Interface Design for Learning More attention to extraneous
cognitive load Design for emotions that support
learning Design to support thinking Measure learning outcomes
![Page 7: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/7.jpg)
“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
![Page 8: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/8.jpg)
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
![Page 9: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/9.jpg)
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
![Page 10: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/10.jpg)
Simplify visuals To promote understanding, simplify
visuals or make them abstract.
![Page 11: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/11.jpg)
Place related visuals together Don’t separate related text and
visuals.
![Page 12: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/12.jpg)
Place related visuals together
✔ Correct! The minimalist design allows users to focus on their task.
✔
![Page 13: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/13.jpg)
Place related visuals together
✔ Correct! The minimalist design allows users to focus on their task.✔
![Page 14: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/14.jpg)
Learning is social
![Page 15: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/15.jpg)
Social Learning
Interface design can foster: Convey social presence Encourage learner participation Promote a sense of community
![Page 16: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/16.jpg)
Social presence = better learning People learn better when they perceive social
presence. Eg. Text written in first person conversational tone
leads to better learning.
![Page 17: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/17.jpg)
Social presence = better learning
![Page 18: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/18.jpg)
Social presence = better learning
![Page 19: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/19.jpg)
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
![Page 20: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/20.jpg)
Learning with Multimedia
![Page 21: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/21.jpg)
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
![Page 22: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/22.jpg)
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.
![Page 23: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/23.jpg)
Learning is emotional
![Page 24: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/24.jpg)
![Page 25: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/25.jpg)
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.
![Page 26: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/26.jpg)
Multimedia can promote positive affect
Usablility
![Page 27: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/27.jpg)
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
![Page 28: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/28.jpg)
Inspiration
![Page 29: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/29.jpg)
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?
![Page 30: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/30.jpg)
InspirationThare Machi Education
Education saves lives
![Page 31: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/31.jpg)
InspirationHalf the SkyTurning oppression into opportunity
![Page 32: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/32.jpg)
Research, updates, tips…
mendeley.com/groups/778381
InterfaceDesignforLearning.com
@dorian_peters+
![Page 33: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/33.jpg)
EXTRA
![Page 34: Interface Design for Learning - 20 min.](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c715ec4a7959040e8b4583/html5/thumbnails/34.jpg)
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…