Designing Learning #eldc2011

1,626 views

Published on

Presented at ELDC2011 in Utah 2011.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,626
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
98
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing Learning #eldc2011

  1. 1. Are you on Twitter? Why not?Join today and participate in the conference backchannel #eldc2011Designing Content to Improve Learning Nick@sealworks.com Twitter.com/NickFloro
  2. 2. Understand Design
  3. 3. Itʼs aboutcommunication andproblem solving.
  4. 4. Design is how it works.
  5. 5. WARNINGThe following screens are not pretty and may cause adverse reactions.
  6. 6. How do you fix it?
  7. 7. 7 Questions to Define the Project What is the budget?What is the goal? What are the learning objectives? Does the content exist?What is the timetable? Who is the audience and how will they use it? Current technology or solution in place?
  8. 8. Web
  9. 9. Pixels & Aspect RatioSelecting a Size Android Xoom 1280 x 720 HTC Incredible iPad 800 x 480 1024 x 768 iPhone 4 960 x Droid 854 x 480 iPhone 480 x 320
  10. 10. Web App
  11. 11. Web App
  12. 12. JAVASCRIPT JQuery HTML 5 CSS3 AJAX
  13. 13. ProcessDiscover Define Design Develop Deliver
  14. 14. Sketches
  15. 15. Wireframes
  16. 16. www.balsamiq.com
  17. 17. Sketchy & iMockUps
  18. 18. http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
  19. 19. Pulse for iOS
  20. 20. Wireframes
  21. 21. Design • Focus on audience • Content is key • Transparent interface
  22. 22. Text
  23. 23. 1. Create Text 2. Make a selection 3. Invert select 4. Save alpha channelText 5. Deselect 6. Load Alpha Channel 7. Load Color 8. Offset 9. Apply Blur 10. Reposition 11. Save 12. If the copy changed, start over
  24. 24. How should we Design?
  25. 25. Focus on theAudience
  26. 26. Content is the key
  27. 27. Transparent 3 Interface
  28. 28. • Inherently interesting contentTypography • Multilevel readership that encourages scanning • Headlines that make me want to know more • Subheads that complete the story • Intriguing captions • Well-built text – Alex White, Thinking in Type
  29. 29. Layout & Grid “Information presented with clear and logically set out titles, subtitles, texts, illustrations, and captions will not only be read more quickly and easily but the information will also be better understood and retained in memory. This is a scientifically proved fact and the designer should bear it in mind constantly.” Josef Müller-Brockman, Grid systems in graphic design
  30. 30. Navigation BannerSecondaryNav if needed ContentFlashImage
  31. 31. Navigation BannerSecondaryNav if needed ContentFlashImage
  32. 32. Technology • HTML • CSS • Javascript • AJAX • Flash
  33. 33. Just for Me
  34. 34. Younique - Mini CampaignJust for Me • Younique - Mini Campaign • 95% buyers customized the vehicle • 50% name the car • Starbucks - Customize your cup • 19,000 ways to order your coffee • Car Industry • 1995 - 910 cars • 2003 - 1314 cars
  35. 35. Customize Your CupJust for Me • Younique - Mini Campaign • 95% buyers customized the vehicle • 50% name the car • Starbucks - Customize your cup • 19,000 ways to order your coffee • Car Industry • 1995 - 910 cars • 2003 - 1314 cars
  36. 36. Design: Keep it Simple
  37. 37. Keep it Simple
  38. 38. Every click should meet userʼs expectations and lead them toward a goal.
  39. 39. RememberUser Goals Users typically come to a site with a goal in mind
  40. 40. RememberUser Goals Users typically come to a site with a goal in mind
  41. 41. Emulating common GUI elements increase usability
  42. 42. AvoidUnnecessaryIntro • Always offer users easy access to content • Bookmark location for quick return to content
  43. 43. Improve UsabilityAvoid Remove Older TechnologyUnnecessaryIntro • Always offer users easy Links to Materials access to content Adding Quiz Module • Bookmark location for quick return to content
  44. 44. AvoidUnnecessaryIntro • Always offer users easy access to content • Bookmark location for quick return to content
  45. 45. How do we find something on the web today?
  46. 46. mashup
  47. 47. http://www.marumushi.com/apps/newsmap/ newsmap.cfm
  48. 48. Everyone Creates/Publishes Content Pictures Blog Video Audio 3D Models ePortfolios Micro-blogging Course Management System Multiplayer Environment
  49. 49. ProvideLogicalNavigation • Always offer users easy access to content • Bookmark location for quick return to content
  50. 50. ProvideLogicalNavigation • Keep navigation structures visible
  51. 51. ProvideLogicalNavigation • Support back button navigation
  52. 52. Design forConsistency • Consistency in user interface is the best way to improve your sites performance
  53. 53. Target Low-BandwidthUsers • Smaller the download, the better • Initial screen download should be no more than 100k, including all macromedia flash files, html and images • Reducing download time • Flash - use the Load Movie action only when the user specifically requests a file
  54. 54. Design forAccessibility • make your content available to all users, including those with disabilities (508) • highly descriptive Alternate Tags allow your content to be interpreted
  55. 55. Design for Flexibility
  56. 56. Design forAccessibility • make your content available to all users, including those with disabilities • highly descriptive Alternate Tags allow your content to be interpreted
  57. 57. Design forAccessibility • make your content available to all users, including those with disabilities • highly descriptive Alternate Tags allow your content to be interpreted
  58. 58. Testing for Usability
  59. 59. Test forUsability • Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals • Survey
  60. 60. Test forUsability • Test on Windows 7, Vista, XP • Internet Explorer 6.x, 7, 8, 9 • Firefox 3+ • Test on OS X − Safari 4+ − Firefox 3+
  61. 61. Test forUsability • Re-test the site each time you make even small changes
  62. 62. Quality Assurance: Test Cases
  63. 63. Another example...
  64. 64. Scaling
  65. 65. WireframesDesigning the Possibilities
  66. 66. The New Look
  67. 67. Collaboration
  68. 68. Sneak Peakin development - don’t tell anyone
  69. 69. Capture & Analyze
  70. 70. Using CoverFlow view and Preview of Graphics
  71. 71. Design Scrapbook: iPhoto | LittleSnapper
  72. 72. DesignEngineering • Workflow • Flexibility • Learning Objects • Re-expression • Experiment
  73. 73. ManagingExpectations • Communication • Review goals prior • What works • What doesn’t work • Final Goal
  74. 74. Resources
  75. 75. Games 1. Play 2. Watch others play 3. Experiment
  76. 76. Resources • Designing Interactions • Bill Moggridge
  77. 77. Resources • Designing the Obvious: A Common Sense Approach to Web Application Design • Robert Hoekman Jr.
  78. 78. howconference.com
  79. 79. CSS3 for Web DesignersDan Cederholm | A Book Apart
  80. 80. Resources • A Whole New Mind: Moving from the Information Age to the Conceptual Age • Daniel Pink
  81. 81. www.manager-tools.com
  82. 82. Podcasts
  83. 83. www.businessweek.com
  84. 84. www.istockphoto.com
  85. 85. www.thinkvitamin.com
  86. 86. www.smashingmagazine.com
  87. 87. Nancy Durate Garr Reynolds
  88. 88. www.presentationzen.com
  89. 89. www.balsamiq.com
  90. 90. www.silverback.com
  91. 91. Screencasts 101 Mini-Session www.jingproject.com
  92. 92. www.twitter.com
  93. 93. http://www.37signals.com/svn/
  94. 94. www.launchcycle.com
  95. 95. Download the Presentation at:http://www.slideshare.net/nickfloro
  96. 96. Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro

×