What Research Tells us About Designing Online Content Judith Norton Chief Instructional Architect B.E.S.T. Coffee Program El Camino College MERLOT International Conference Nashville, TN July 2005

Usability Capability to be used by everyone including… interface, navigation, content, accessibility and compatibility issues Red Net Networking and Internet Glossary

Usability Generic term ~ refers to design features that enable something to be user- friendly. Congress Online Project Glossary

Usability Designed to be user friendly. If not designed well ~ problems with navigation, difficult for disabled, or unclear instructions. Net Mechanic Glossary

Eyetracking Study ~ Estlow Center, University of Denver, Poynter Institute, Eyetools News and commercial websites. Eye tracking equipment ~ see patterns used when viewing website

Eye Headgear used in study Eyetrack headgear used by participants in study. Photo from Eyetrack.

How do people read online? Faster? Slower?

Read word or group of words.025 seconds Progress to another group 0.1 second How many words a minute? 300

25% Slower Difference between reading screen media vs. print media.

For Students Reading.. Content should flow well. It should be interesting. Pertinent to their success. Remember ~ reading slower online.

Read

Scan

Want them to Read the page? Use a smaller font Source: Why Web Users Scan Instead of Read

Fonts Least preferred? Times Most preferred? Verdana Easiest to read? Verdana Georgia Arial

Headings and Sub-headings Headings & Sub-headings Notice consistency Less than a second is spent on heading

Eye Movements Source: Eyetools

Eye Priority Zones Source: Eyetools

For your students…. Good Headings and sub-headings Be consistent Same placement Same color Same font for like things Provide…

Shorter paragraphs work best Study found that participants spent twice as much time with shorter paragraphs as material in longer paragraphs. Chunk material 5 – 9 lines long Use 50% fewer words than print media Source: Chunking Principle

Using photos to enhance your topic Participants first look at Textual content, then… … at photos Exact opposite of studies conducted on print media Photo taken from Los Angeles Times Use alt tags to describe non-textual information Source: Accessibility humanized: A user-centered approach to web accessibility

Image size The larger the image, the longer viewers engaged in page Viewers more engaged when image is at least 210 x 230 pixels

Some students…. …have lower bandwidth

95% of time… …Participants read all or part of the story that started with bold text. First few words on a page are critical for engaging the reader. Placing all content in bold is not appropriate.

Text? or Multimedia? Participants recall information better, if… Text ~ to remember: Facts Names Places Multimedia ~ New information Conceptual in nature Give learner’s a choice

Process? Procedure? Animation to comprehended information better Sometimes… Good, descriptive Writing is best Other times… Better with graphics. Source: Eyetools

Use Captivate or Camtasia sequential steps to complete a problem… audio is not necessary Orientation… Audio recommended

User Driven Medium Source: Information Foraging: Why Google Makes People Leave Your Site Faster Allows for user interaction through exploration

Learner Retention for following types of knowledge involvement Source: Forrester report, Online Training Needs a New Course, August 2000 Reading Seeking Hearing Collaboration Doing 20% 10% 25% 70% 80%

Remember… Font size & style Headings & Sub-headings Consistency Use of bold Paragraph length Image size Use of leading paragraphs Multimedia where appropriate Provide options for exploration

Resources Chunking principle, Information Foraging: Why Google Makes People Leave Your Site Faster Penn State, Fonts for the Web, The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes, Usability…Considerations for Designing Online Courses Why Users Scan Instead of Read,

For further information, contact Judith Norton Cell: