3. Interface Design For ELearning
• Principles of UI Design
• Tips for UI Elearning Design
• Process of Design
4. The Elements of User Experience
- Jesse James
Garrett
http://www.jjg.net/
elements/
Jesse James Garret – Elements of User Experience
5. - Stephen Anderson
http://www.slideshare.net/stephenpa/creating-pleasSurtaebpleh-einnte rAfancedse-grsetotinng w-frwomw-.tapsokes-ttpo-aeixnpteerrie.cncoems
6. What is the purpose of good user
interface design?
Makes a system
usable
Allows the user to
complete their task(s)
Keeping the user from
getting frustrated
Makes the interface
invisible
Reducing extraneous
cognitive load
7. Interface design to reduce cognitive
load
Intrinsic Cognitive
Load
Germane
Cognitive Load
Extraneous
Cognitive Load
If it’s in the “How to use
this training” It’s
probably Extraneous
Cognitive Load
9. What is the purpose of good user
interface design?
Makes a system
usable
Makes the user feel that they
are in control…
Allows the user to
complete their task(s)
Keeping the user from
getting frustrated
Makes the interface
invisible
10. Makes the user feel in control…
My mother almost never
feels in control online, except
for a few sites
11. The Purpose?
• Reduced cognitive load
• More positive user experience
• Better learning outcomes
12. Knowledge in the Head vs. Knowledge in
the World
- Donald Norman
Requires memory or cognitive
processing
Knowledge is embedded in the
interface
13. UI Design has lots of questions
or
Item 1
Item 2
Item 3
Item 4
or
or
But what are the rules?
14. So I went looking:
• Fitts’ Law: The time to acquire a target is a function of the
distance to and size of the target
Click
Click
15. • Chromostereoposis
Putting things that are blue
next to things that are red
Messes with your depth
perception.
Weird, huh? And different people
react differently to this.
36. What are the purposes for screen
instructions?
• Set up the situation / scenario /
learning context
• Tell the learner what they are
going to do on the screen
• Help them figure out what to do
next
39. Tip: Use Fitts’ Law
Fitts’ Law:
The time to acquire a
target is a function of the
distance to and size of
the target
Click
Click
40. Case: The Close Button
Situation: Users were doing a software
simulation that periodically needed to
include some extra explanation.
The Problem: Users were being slowed
down by irritating pop up boxes.
41. Case: The Close Button
More Information: x
Text box that pops up
at certain points
during the training…
To close the box,
they clicked
here.
42. Case: The Close Button
More Information: x
Text box that pops up
at certain points
during the training…
Close
43. Tip 4: Create high context interfaces
• Embed the triggers for behavior in the interface itself.
44. Quick Poll
If you have to study for a test, where would you rather
study:
1. In a quiet Library?
2. In your favorite coffee shop?
3. In the grey, window-less classroom with the noisy
HVAC system?
46. High vs Low Context
Your phone just
rang. Better pick
it up…
47. Tip 5: UI Design Patterns
• ui-patterns.com/
Also: http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/
48. - Stephen Anderson
Stephen Anderson www.poetpainter.com
Does it
change
behavior?
http://www.slideshare.net/stephenpa/creating-pleasurable-interfaces-getting-from-tasks-to-experiences
49. Tip 6: The Biggest Rule of All
• Test your designs
Image by Gluemoon cc license
http://www.flickr.com/photos/gluemoon/90804324/sizes/l/in/photostream/
54. Steps for User Testing
• Recruit users (5-6 testers / 1-1.5 hours each)
55. Steps for User Testing
• Write a script
• Let you know why you are here
• Testing the Interface – not you
• You can’t do anything wrong
• I probably won’t help you because we want to see how people use
the course when they are alone
• Talk aloud while you go through it
56. Watch them use it
•Watch in Person
• Use a lab
• Remote Testing
• User testing software
(Morae)
57. Document the Results
• User Testing Summary Report
• Design Recommendations
• Rinse and Repeat
58. User Testing Results
Too many
options, too low
on the screen.
We moved them
up, and
simplified
59. User Testing Results
The options
always looked
available
So we greyed
out the
unavailable
ones
60. User Testing Results
They had a
high/low
coaching option
This was too
complicated, so
we simplified
61. User Testing Results
Outlines added
visual
complexity to
the screen
We didn’t really
need them, so
the apples
appeared as
needed.