Designing Learning #eldc2011
155
Designing Content to Improve Learning [email protected] Twitter.com/NickFloro Are you on Twitter? Why not? Join today and participate in the conference backchannel #eldc2011
-
Upload
nick-floro -
Category
Technology
-
view
1.243 -
download
0
description
Presented at ELDC2011 in Utah 2011.
Transcript of Designing Learning #eldc2011
Designing Contentto Improve Learning
[email protected]/NickFloro
Are you on Twitter? Why not?Join today and participate in the conference backchannel #eldc2011
Understand Design
Itʼs about communication and problem solving.
Design is how it works.
WARNINGThe following screens are not pretty and may cause adverse reactions.
How do you fix it?
7 Questions to Define the Project
What is the goal?
What are the learning objectives?
Who is the audience and how will they use it?
What is the timetable?
Current technology or solution in place?
What is the budget?
Does the content exist?
Web
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x
iPhone480 x 320
Droid854 x 480
Web App
AppWeb
HTML 5CSS3 AJAX
JAVASCRIPT JQuery
Process
Discover Define Design Develop Deliver
Sketches
Wireframes
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Wireframes
Design• Focus on audience
• Content is key
• Transparent interface
Text
Text1. Create Text2. Make a selection3. Invert select4. Save alpha channel5. Deselect6. Load Alpha Channel7. Load Color8. Offset9. Apply Blur10. Reposition11. Save12. If the copy changed,
start over
How should we
Design?
Focus on the
Audience1
is the keyContent
2
Transparent
Interface3
Typography• Inherently interesting content
• 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
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
Navigation
Banner
Content
FlashImage
Secondary Nav if needed
Navigation
Banner
Content
FlashImage
Secondary Nav if needed
Technology• HTML
• CSS
• Javascript
• AJAX
• Flash
Just for Me
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
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
Customize Your Cup
Design: Keep it Simple
Keep it Simple
Every click should meet userʼs expectations and lead them
toward a goal.
Remember User Goals Users typically come to a site
with a goal in mind
Remember User Goals Users typically come to a site
with a goal in mind
Emulating common GUI elements increase usability
Avoid Unnecessary Intro • Always offer users easy
access to content
• Bookmark location for quick return to content
Avoid Unnecessary Intro • Always offer users easy
access to content
• Bookmark location for quick return to content
Improve Usability
Remove Older Technology
Links to Materials
Adding Quiz Module
Avoid Unnecessary Intro • Always offer users easy
access to content
• Bookmark location for quick return to content
How do we find something on the web today?
mashup
http://www.marumushi.com/apps/newsmap/newsmap.cfm
Everyone Creates/Publishes Content
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
Provide Logical Navigation • Always offer users easy
access to content
• Bookmark location for quick return to content
Provide Logical Navigation • Keep navigation structures
visible
Provide Logical Navigation • Support back button
navigation
Design for Consistency • Consistency in user interface
is the best way to improve your site's performance
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
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
Design for Flexibility
Design for Accessibility • make your content available
to all users, including those with disabilities
• highly descriptive Alternate Tags allow your content to be interpreted
Design for Accessibility • make your content available
to all users, including those with disabilities
• highly descriptive Alternate Tags allow your content to be interpreted
Testing for Usability
Test for Usability
• Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals
• Survey
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+
Test for Usability
• Re-test the site each time you make even small changes
Quality Assurance:Test Cases
Another example...
WireframesDesigning the Possibilities
The New Look
Collaboration
Sneak Peakin development - don’t tell anyone
Capture & Analyze
Using CoverFlow view and Preview of Graphics
Design Scrapbook: iPhoto | LittleSnapper
Design Engineering
• Workflow
• Flexibility
• Learning Objects
• Re-expression
• Experiment
Managing Expectations • Communication
• Review goals prior
• What works
• What doesn’t work
• Final Goal
Resources
Games1. Play
2. Watch others play
3. Experiment
Resources
• Designing Interactions
• Bill Moggridge
Resources• Designing the Obvious:
A Common Sense Approach to Web Application Design
• Robert Hoekman Jr.
howconference.com
CSS3 for Web DesignersDan Cederholm | A Book Apart
Resources • A Whole New Mind: Moving from the Information Age to the Conceptual Age
• Daniel Pink
www.manager-tools.com
Podcasts
www.istockphoto.com
www.thinkvitamin.com
www.smashingmagazine.com
Nancy Durate Garr Reynolds
www.presentationzen.com
www.balsamiq.com
www.silverback.com
Screencasts 101 Mini-Session
www.jingproject.com
www.twitter.com
http://www.37signals.com/svn/
www.launchcycle.com
Download the Presentation at:http://www.slideshare.net/nickfloro
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
