SlideShare une entreprise Scribd logo
1  sur  41
Interface Design for Learning
By: Dorian Peters

E-Learning Guild - 12 February 2014
Webinar available for free download at:
http://tinyurl.com/n8nl9j5
See also…

Interface Design for
Learning
Design Strategies for Learning
Experiences

By: Dorian Peters
Buy from Amazon:
http://tinyurl.com/n8nl9j5

Twitter: @dorian_peters Blog: InterfaceDesignforLearning.com
Research & Best Practice
Education

Psychology

web

Design
Interface
& User
Experience
Share books & research
mendeley.com/groups/778381

2/13/2014

ThoughtLeaders Webinar – Dorian Peters

InterfaceDesignForLearning.com
POLL

What kind of designer are you?
• Instructional/learning designer
• graphic/interface/interaction
designers?
• Both
• Other

5
Interface Design

Interface Design for Learning

Task
completion

Transformation

User goals

Learning goals

(business goals)

Speed
satisfaction

14Feb2014 | Dorian Peters

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

Learning
outcomes

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

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
“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
“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
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
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
Place related visuals together


Don’t separate related text and visuals.

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
Place related visuals together

✔

✔ Correct! The minimalist design allows users to focus on their task.

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
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]
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
Layers of IDL

Source: Interface Design for Learning: Design Strategies for Learning Experiences
by Dorian Peters, Published by New Riders 2014
Social Learning
Interface design can foster:
 Learner participation
 Social presence
 A sense of community

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
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.

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
Social presence = better learning
Social presence = better learning

From the Reading Eggs learning program - http://readingeggs.com
Motivation & Engagement
Aesthetics-Usability Effect



Interfaces that are more attractive are easier to use
Emotions and problem-solving

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
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
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
Keys to Motivation
Autonomy
Mastery
Connectedness
Purpose

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
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
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
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
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
14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
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
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 IDL
Heuristics, standards, best practice





Usability
Interaction Design
Information Architecture
Visual/Graphic Design

14Feb2014 | Dorian Peters

InterfaceDesignForLearning.com
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
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
Learnability - Prezi

Show progress

Include a purpose

biophilia
Make it
look easy

14Feb2014 | Dorian Peters

Be forgiving
Inspiration

projectNoah.org
Inspiration

bigHistoryProject.com
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
Inspiration
Thare Machi Education
Education saves lives
Inspiration
Half the Sky
Turning oppression into opportunity
www.facebook.com/HalftheGame

Contenu connexe

Dernier

Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioThink360 Studio
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 

Dernier (20)

Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 Studio
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Interface Design for Learning - ThoughtLeaders Webinar

  • 1. Interface Design for Learning By: Dorian Peters E-Learning Guild - 12 February 2014 Webinar available for free download at: http://tinyurl.com/n8nl9j5
  • 2. See also… Interface Design for Learning Design Strategies for Learning Experiences By: Dorian Peters Buy from Amazon: http://tinyurl.com/n8nl9j5 Twitter: @dorian_peters Blog: InterfaceDesignforLearning.com
  • 3. Research & Best Practice Education Psychology web Design Interface & User Experience
  • 4. Share books & research mendeley.com/groups/778381 2/13/2014 ThoughtLeaders Webinar – Dorian Peters InterfaceDesignForLearning.com
  • 5. POLL What kind of designer are you? • Instructional/learning designer • graphic/interface/interaction designers? • Both • Other 5
  • 6. Interface Design Interface Design for Learning Task completion Transformation User goals Learning goals (business goals) Speed satisfaction 14Feb2014 | Dorian Peters (task, activity, class, course, degree, career…) Learning outcomes InterfaceDesignForLearning.com
  • 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
  • 20. Social presence = better learning
  • 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
  • 25. Keys to Motivation Autonomy Mastery Connectedness 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
  • 30. http://francotoile.uvic.ca 14Feb2014 | Dorian Peters InterfaceDesignForLearning.com
  • 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
  • 41. Inspiration Half the Sky Turning oppression into opportunity www.facebook.com/HalftheGame

Notes de l'éditeur

  1. Mendeley – Research Sharing Group: http://www.mendeley.com/groups/778381
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.