June 10, 2009

Questions? Assignment Usability Research – TAKE NOTES! Finding Examples Activity Work on..

Due Monday, June 15 http://i-

design.wetpaint.com/page/Web+Design

Judith NortonChief Instructional Architect

B.E.S.T. Coffee ProgramEl Camino College

CITATION for principles referenced in this presentation:

Norton, J. (2005). What research tells us about designing online content. MERLOT International Conference. Nashville, TN.

Capability to be used by everyone including… interface, navigation, content, accessibility and compatibility issues

Red Net Networking and Internet Glossary

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

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

News and commercial websites. Eye tracking equipment ~ see

patterns used when viewing website

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

Faster?

Slower?

.025 seconds

Progress to another group

0.1 second

How manywords a minute?

300

Slower

Difference between reading screen media vs. print media.

Content should flow well.

It should be interesting.

Pertinent to topic.

Remember ~ reading slower online.

Use a smaller font

Source: Why Web Users Scan Instead of Read

Least preferred?Times

Most preferred?Verdana

Easiest to read?

VerdanaGeorgiaArial

Less than a second is spent on heading

Headings &Sub-headings

Less than a second is spent on heading

Headings &Sub-headings

Notice consistency

Less than a second is spent on heading

Source: Eyetools

Source: Eyetools

Good Headings and sub-headingsBe consistent

Same placementSame colorSame font for like things

Provide…

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

Participants first look at Textual content, then…

Photo taken from Los Angeles Times

Source: Accessibility humanized: A user-centered approach to web accessibility

Participants first look at Textual content, then…

… at photos

Photo taken from Los Angeles Times Use alt tags todescribe

non-textual information

Source: Accessibility humanized: A user-centered approach to web accessibility

Participants first look at Textual content, then…

… at photos

Exact oppositeof studies conducted

on print media

Photo taken from Los Angeles Times Use alt tags todescribe

non-textual information

Source: Accessibility humanized: A user-centered approach to web accessibility

The larger the image, thelonger viewers engaged

in page

Viewers more engaged when

image is at least 210 x 230 pixels

…have lower bandwidth

…Participants readall or part of the

story that startedwith bold text.

…Participants readall or part of the

story that startedwith bold text.

First few words on a page are critical for engaging the reader.

Placing all content in bold is not appropriate.

Participants recall information better, if…

Text ~ to remember:Facts

Names Places

Multimedia ~ New information

Conceptual in nature

Give learner’s a choice

Animation to comprehended information better?

Source: Eyetools

Animation to comprehended information better?

Sometimes…Good, descriptive

Writing is bestOther times…

Better with graphics.

Source: Eyetools

Chunking principle, http://www.chambers.com.au/glossary/chunk.htm Information Foraging: Why Google Makes People Leave Your Site Faster

http://www.useit.com/alertbox/20030630.html Penn State, Fonts for the Web,

http://tlt.its.psu.edu/suggestions/research/fonts.shtml The Best of Eyetrack III: What We Saw When We Looked Through Their

Eyes, http://www.poynterextra.org/eyetrack2004/about.htm

Usability…Considerations for Designing Online Courseshttp://pdc.cvc.edu/common/article.asp?entry=1&idx=2976

Why Users Scan Instead of Read, http://www.useit.com/alertbox/whyscanning.html

1. Take one of your favorite websites2. See if you can find an illustration on one of

the principles in this presentation3. Copy the URL to the page that you feel

illustrates one of the principles4. Return to chat5. People will be randomly called upon to

share their example

My Favorites Discussion (5 pts) Post at least 5 principles to Design Principles

wiki (10 pts) Readings Start thinking about ePortfolio