Designing Learning #eldc2011

Designing Contentto Improve Learning

Nick@sealworks.comTwitter.com/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

www.balsamiq.com

Sketchy & iMockUps

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

Pulse for iOS

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...

Scaling

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.businessweek.com

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 Floronick@sealworks.comtwitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro