Presented at ELDC2011 in Utah 2011.

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

2. Understand Design

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

26. Sketchy & iMockUps

27. http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/

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?

39. Focus on the
Audience

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

92. Design for Flexibility

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

95. Testing for Usability

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

106. Wireframes
Designing the Possibilities

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

140. www.manager-tools.com

141. Podcasts

142. www.businessweek.com

143. www.istockphoto.com

144. www.thinkvitamin.com

145. www.smashingmagazine.com

146. Nancy Durate Garr Reynolds

147. www.presentationzen.com

148. www.balsamiq.com

149. www.silverback.com

150. Screencasts 101 Mini-Session
www.jingproject.com

151. www.twitter.com

152. http://www.37signals.com/svn/

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