Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interface Design for Elearning - Tips and Tricks

2,521 views

Published on

Some interface design considerations for elearning.

Published in: Design
  • Be the first to comment

Interface Design for Elearning - Tips and Tricks

  1. 1. INTERFACE DESIGN Tips and Tricks for designing for Learning Environments Julie Dirksen Usable Learning
  2. 2. So, what are your challenges?
  3. 3. Interface Design For ELearning • Principles of UI Design • Tips for UI Elearning Design • Process of Design
  4. 4. The Elements of User Experience - Jesse James Garrett http://www.jjg.net/ elements/ Jesse James Garret – Elements of User Experience
  5. 5. - Stephen Anderson http://www.slideshare.net/stephenpa/creating-pleasSurtaebpleh-einnte rAfancedse-grsetotinng w-frwomw-.tapsokes-ttpo-aeixnpteerrie.cncoems
  6. 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. 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. 8. Intrinsic Cognitive Load Extraneous Cognitive Load
  9. 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. 10. Makes the user feel in control… My mother almost never feels in control online, except for a few sites
  11. 11. The Purpose? • Reduced cognitive load • More positive user experience • Better learning outcomes
  12. 12. Knowledge in the Head vs. Knowledge in the World - Donald Norman Requires memory or cognitive processing Knowledge is embedded in the interface
  13. 13. UI Design has lots of questions or Item 1 Item 2 Item 3 Item 4 or or But what are the rules?
  14. 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. 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. 16. • 5 +/- 2 • Grouping Like items
  17. 17. And that was kind of it… …Umm?
  18. 18. Then I bumped into this…
  19. 19. The reason you can’t find rules… or …is because they frequently don’t exist
  20. 20. We design in a tunnel
  21. 21. And we fill in gaps
  22. 22. But there are some tips:
  23. 23. Three Parts to an Elearning Interface Global Navigation Local Navigation/ Instructions Learning Content
  24. 24. Tip: Work with reading patterns • Ensure that your formats follow the way people read.
  25. 25. Drag Here
  26. 26. F-shaped Reading Pattern http://www.useit.com/alertbox/reading_pattern.html
  27. 27. Case: Invisible Text
  28. 28. Case: Invisible Text
  29. 29. Case: Invisible Text
  30. 30. Case: Invisible Text
  31. 31. Case: Invisible Text
  32. 32. Case: Invisible Text
  33. 33. Tip 3: Make better instructions • Match the format of the instructions to the context of use.
  34. 34. A word about instructions:
  35. 35. What is wrong with these instructions?
  36. 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. 37. What is subitizing?
  38. 38. 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
  39. 39. 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.
  40. 40. 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.
  41. 41. Case: The Close Button More Information: x Text box that pops up at certain points during the training… Close
  42. 42. Tip 4: Create high context interfaces • Embed the triggers for behavior in the interface itself.
  43. 43. 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?
  44. 44. Why is Context Important? • Behavioral Triggers
  45. 45. High vs Low Context Your phone just rang. Better pick it up…
  46. 46. Tip 5: UI Design Patterns • ui-patterns.com/ Also: http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/
  47. 47. - Stephen Anderson Stephen Anderson www.poetpainter.com Does it change behavior? http://www.slideshare.net/stephenpa/creating-pleasurable-interfaces-getting-from-tasks-to-experiences
  48. 48. 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/
  49. 49. Prototyping is your friend
  50. 50. Prototyping Tools (a few of many) PowerPoint Balsamiq Mockups Axure
  51. 51. Who does Usability Testing?
  52. 52. Steps for User Testing • Create a test plan
  53. 53. Steps for User Testing • Recruit users (5-6 testers / 1-1.5 hours each)
  54. 54. 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
  55. 55. Watch them use it •Watch in Person • Use a lab • Remote Testing • User testing software (Morae)
  56. 56. Document the Results • User Testing Summary Report • Design Recommendations • Rinse and Repeat
  57. 57. User Testing Results Too many options, too low on the screen. We moved them up, and simplified
  58. 58. User Testing Results The options always looked available So we greyed out the unavailable ones
  59. 59. User Testing Results They had a high/low coaching option This was too complicated, so we simplified
  60. 60. User Testing Results Outlines added visual complexity to the screen We didn’t really need them, so the apples appeared as needed.
  61. 61. User Testing Results Users wanted to know how far they were in the course
  62. 62. Case: Adding Germane Cognitive Load
  63. 63. Case: Adding Germane Cognitive Load
  64. 64. Case: Adding Germane Cognitive Load
  65. 65. Case: Adding Germane Cognitive Load
  66. 66. 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

×