The document provides tips and guidelines for designing effective user interfaces for learning environments. It discusses principles of user interface design such as reducing extraneous cognitive load on users. Specific tips include using an F-shaped reading pattern to structure content, embedding instructions in the interface context, and testing designs with users. The key recommendation is that interface design should make tasks easy to complete while keeping users engaged in the learning process.

1. INTERFACE DESIGN
Tips and Tricks for designing for Learning
Environments
Julie Dirksen
Usable Learning

2. So, what are your challenges?

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

8. Intrinsic Cognitive Load
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.

16. • 5 +/- 2
• Grouping Like items

17. And that was kind of it…
…Umm?

18. Then I bumped into this…

19. The reason you can’t find rules…
or
…is because they frequently don’t exist

20. We design in a tunnel

21. And we fill in
gaps

22. But there are some tips:

23. Three Parts to an Elearning Interface
Global
Navigation
Local
Navigation/
Instructions
Learning
Content

24. Tip: Work with reading patterns
• Ensure that your formats follow the way people read.

25. Drag
Here

26. F-shaped Reading Pattern
http://www.useit.com/alertbox/reading_pattern.html

27. Case: Invisible Text

28. Case: Invisible Text

29. Case: Invisible Text

30. Case: Invisible Text

31. Case: Invisible Text

32. Case: Invisible Text

33. Tip 3: Make better instructions
• Match the format of the instructions to the context of use.

34. A word about instructions:

35. What is wrong with these
instructions?

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

37. What is subitizing?

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?

45. Why is Context Important?
• Behavioral Triggers

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/

50. Prototyping is your friend

51. Prototyping Tools (a few of many)
PowerPoint
Balsamiq Mockups
Axure

52. Who does Usability Testing?

53. Steps for User Testing
• Create a test plan

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.

62. User Testing Results Users wanted to
know how far
they were in the
course

63. Case: Adding Germane Cognitive Load

64. Case: Adding Germane Cognitive Load

65. Case: Adding Germane Cognitive Load

66. Case: Adding Germane Cognitive Load

67. Questions?
• Thanks for coming
• Contact:
• Julie Dirksen
• julie@usablelearning.com
• http://usablelearning.com
• Twitter: usablelearning
• Slides will be available on Slideshare:
http://www.slideshare.net/usablelearning