Designing Learning #eldc2011
3 likes693 views
This document provides information about an online conference and encourages participation through Twitter. It then summarizes the key topics of a presentation on designing content to improve learning, including understanding design, defining projects, selecting appropriate technologies, focusing on the audience, and testing for usability. Resources for further information are also listed.
Designing Learning #eldc2011
- 1. Are you on Twitter? Why not? Join today and participate in the conference backchannel #eldc2011 Designing Content to Improve Learning Nick@sealworks.com Twitter.com/NickFloro
- 3. Itʼs about communication and problem solving.
- 4. Design is how it works.
- 5. WARNING The following screens are not pretty and may cause adverse reactions.
- 9. How do you fix it?
- 11. 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?
- 12. Web
- 17. Pixels & Aspect Ratio Selecting 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
- 18. Web App
- 19. Web App
- 20. JAVASCRIPT JQuery HTML 5 CSS3 AJAX
- 21. Process Discover Define Design Develop Deliver
- 23. Sketches
- 24. Wireframes
- 25. www.balsamiq.com
- 28. Pulse for iOS
- 29. Wireframes
- 30. Design • Focus on audience • Content is key • Transparent interface
- 32. Text
- 33. 1. Create Text 2. Make a selection 3. Invert select 4. Save alpha channel Text 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
- 38. How should we Design?
- 40. Content is the key
- 41. Transparent 3 Interface
- 43. • Inherently interesting content Typography • 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
- 48. 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
- 49. Navigation Banner Secondary Nav if needed Content Flash Image
- 51. Navigation Banner Secondary Nav if needed Content Flash Image
- 52. Technology • HTML • CSS • Javascript • AJAX • Flash
- 53. Just for Me
- 54. Younique - Mini Campaign Just 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
- 55. Customize Your Cup Just 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
- 57. Design: Keep it Simple
- 61. Keep it Simple
- 62. Every click should meet userʼs expectations and lead them toward a goal.
- 63. Remember User Goals Users typically come to a site with a goal in mind
- 64. Remember User Goals Users typically come to a site with a goal in mind
- 65. Emulating common GUI elements increase usability
- 66. Avoid Unnecessary Intro • Always offer users easy access to content • Bookmark location for quick return to content
- 67. Improve Usability Avoid Remove Older Technology Unnecessary Intro • Always offer users easy Links to Materials access to content Adding Quiz Module • Bookmark location for quick return to content
- 68. Avoid Unnecessary Intro • Always offer users easy access to content • Bookmark location for quick return to content
- 70. How do we find something on the web today?
- 75. mashup
- 84. http://www.marumushi.com/apps/newsmap/ newsmap.cfm
- 85. Everyone Creates/Publishes Content Pictures Blog Video Audio 3D Models ePortfolios Micro-blogging Course Management System Multiplayer Environment
- 86. Provide Logical Navigation • Always offer users easy access to content • Bookmark location for quick return to content
- 87. Provide Logical Navigation • Keep navigation structures visible
- 88. Provide Logical Navigation • Support back button navigation
- 89. Design for Consistency • Consistency in user interface is the best way to improve your site's performance
- 90. Target Low- Bandwidth Users • 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
- 91. Design for Accessibility • make your content available to all users, including those with disabilities (508) • highly descriptive Alternate Tags allow your content to be interpreted
- 93. Design for Accessibility • make your content available to all users, including those with disabilities • highly descriptive Alternate Tags allow your content to be interpreted
- 94. Design for Accessibility • make your content available to all users, including those with disabilities • highly descriptive Alternate Tags allow your content to be interpreted
- 96. Test for Usability • Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals • Survey
- 97. Test for Usability • Test on Windows 7, Vista, XP • Internet Explorer 6.x, 7, 8, 9 • Firefox 3+ • Test on OS X − Safari 4+ − Firefox 3+
- 98. Test for Usability • Re-test the site each time you make even small changes
- 99. Quality Assurance: Test Cases
- 100. Another example...
- 102. Scaling
- 111. The New Look
- 116. Collaboration
- 119. Sneak Peak in development - don’t tell anyone
- 121. Capture & Analyze
- 122. Using CoverFlow view and Preview of Graphics
- 123. Design Scrapbook: iPhoto | LittleSnapper
- 129. Design Engineering • Workflow • Flexibility • Learning Objects • Re-expression • Experiment
- 130. Managing Expectations • Communication • Review goals prior • What works • What doesn’t work • Final Goal
- 131. Resources
- 132. Games 1. Play 2. Watch others play 3. Experiment
- 135. Resources • Designing Interactions • Bill Moggridge
- 136. Resources • Designing the Obvious: A Common Sense Approach to Web Application Design • Robert Hoekman Jr.
- 137. howconference.com
- 138. CSS3 for Web Designers Dan Cederholm | A Book Apart
- 139. Resources • A Whole New Mind: Moving from the Information Age to the Conceptual Age • Daniel Pink
- 141. Podcasts
- 142. www.businessweek.com
- 143. www.istockphoto.com
- 144. www.thinkvitamin.com
- 146. Nancy Durate Garr Reynolds
- 148. www.balsamiq.com
- 149. www.silverback.com
- 150. Screencasts 101 Mini-Session www.jingproject.com
- 151. www.twitter.com
- 153. www.launchcycle.com
- 154. Download the Presentation at: http://www.slideshare.net/nickfloro
- 155. Thank You Nick Floro nick@sealworks.com twitter.com/NickFloro Download the Presentation at: http://www.slideshare.net/nickfloro