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: dorian.peters@sydney.edu.au

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…