Interface Design for Learning - ThoughtLeaders Webinar

Interface Design for Learning

By: Dorian Peters

E-Learning Guild - 12 February 2014

Webinar available for free download at:http://tinyurl.com/n8nl9j5

http://t.co/M9eiEsEXKA



Interface Design for Learning

Design Strategies for Learning Experiences

By: Dorian Peters

See also…

http://tinyurl.com/n8nl9j5 Buy from Amazon:

Twitter: @dorian_petersBlog: InterfaceDesignforLearning.com



Research & Best Practice

EducationInterface& User

ExperiencePsychology

webDesign

Share books & researchmendeley.com/groups/778381

14/02/14 ThoughtLeaders Webinar – Dorian Peters InterfaceDesignForLearning.com

What kind of designer are you?

5

• Instructional/learning designer• graphic/interface/interaction

designers?• Both• Other ?POLL

Interface Design Interface Design for Learning

Task completion

Transformation

User goals(business goals)

Learning goals(task, activity, class, course, degree, career…)

Speed satisfaction

Learning outcomes

14Feb2014 | Dorian Peters InterfaceDesignForLearning.com

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 doesn’t interrupt (pop-ups, sales pitches or tangents)

Leverage: chunking, white space and consistency, signifiers all reduce extraneous cognitive load.

“Quiet Design”Sharon Oviatt


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.

“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


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.✔

[This quiz question is from the excellent Stanford HCI course with Scott Klemmer available on Coursera]

ResourceseLearning and the Science of InstructionClark and Mayer

Graphics for Learning: Proven Guidelines for Planning, Designing, and Evaluating Visuals in Training Materials Clark and Lyons

Layers of IDL

Source: Interface Design for Learning: Design Strategies for Learning Experiences by Dorian Peters, Published by New Riders 2014

Social LearningInterface design can foster: Learner participation Social presence A sense of community


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

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

From the Reading Eggs learning program - http://readingeggs.com

Motivation & EngagementAesthetics-Usability Effect Interfaces that are more attractive are easier to use Emotions and problem-solving


Supporting engagementEmploy strategies for directing visual attentioneg. 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 DesignersColin Ware – Visual Thinking for Designers


MotivationIntrinsic I enjoy this task for its own sake

ExtrinisicI’m doing this because I’ll get something separate in return

Keys to good motivation are…

Ryan & Deci: Autonomy, competence, connectednessDaniel Pink: Autonomy, mastery and purpose


Keys to Motivation

Autonomy Mastery

Connectedness Purpose


Good Motivation

1. Intrinsic to the task (eg. I write because I love it)

OR2. Intrinsic to being human

(eg. I write because it connects me with others, increases my sense of mastery or contributes to a higher purpose.)


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


?POLL 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

How do you learn?

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


http://francotoile.uvic.ca

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


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

Evaluating IDLHeuristics, standards, best practice Usability Interaction Design Information Architecture Visual/Graphic Design


Nielsen’s 10 User Interface Design Heuristics1. Visibility of system status2. Match between system and the real world3. User control and freedom4. Consistency and standards5. Error prevention6. Recognition rather than recall7. Flexibility and efficiency of use8. Aesthetic and minimalist design9. Help users recognize, diagnose, and recover from errors10. Help and documentationSource: nngroup.com/articles/ten-usability-heuristics


11 Heuristics for the design of Learning Interfaces1. Relevance of media and reduction of extraneous load 2. Learner Control and Freedom3. Support for learning objective(s)4. Alignment with specific learner needs5. Appropriateness of look and feel6. Support for the cognitive aspects of learning 7. Support for the affective aspects of learning 8. Media and tools appropriateness9. Accessibility10. Usability11. Feedback and responsiveness

Source: Interface Design for Learning: Design Strategies for Learning Experiences by Dorian Peters, Published by New Riders 2014

Learnability - Prezi

biophilia

Show progress

Be forgiving

Make it look easy

Include a purpose

14Feb2014 | Dorian Peters

InspirationprojectNoah.org

InspirationbigHistoryProject.com

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 opportunitywww.facebook.com/HalftheGame