Download - Chat 1
![Page 1: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/1.jpg)
June 10, 2009
![Page 2: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/2.jpg)
Questions? Assignment Usability Research – TAKE NOTES! Finding Examples Activity Work on..
![Page 3: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/3.jpg)
Due Monday, June 15 http://i-
design.wetpaint.com/page/Web+Design
![Page 4: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/4.jpg)
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.
![Page 5: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/5.jpg)
Capability to be used by everyone including… interface, navigation, content, accessibility and compatibility issues
Red Net Networking and Internet Glossary
![Page 6: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/6.jpg)
Generic term ~ refers to design features that enable something to be user-friendly.Congress Online Project Glossary
![Page 7: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/7.jpg)
Designed to be user friendly.If not designed well ~ problems with navigation, difficult for disabled, or unclear instructions.Net Mechanic Glossary
![Page 8: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/8.jpg)
News and commercial websites. Eye tracking equipment ~ see
patterns used when viewing website
![Page 9: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/9.jpg)
Eyetrack headgear used by participants in study. Photo from Eyetrack.
![Page 10: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/10.jpg)
Faster?
Slower?
![Page 11: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/11.jpg)
.025 seconds
Progress to another group
0.1 second
How manywords a minute?
300
![Page 12: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/12.jpg)
Slower
Difference between reading screen media vs. print media.
![Page 13: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/13.jpg)
Content should flow well.
It should be interesting.
Pertinent to topic.
Remember ~ reading slower online.
![Page 14: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/14.jpg)
![Page 15: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/15.jpg)
![Page 16: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/16.jpg)
Use a smaller font
Source: Why Web Users Scan Instead of Read
![Page 17: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/17.jpg)
Least preferred?Times
Most preferred?Verdana
Easiest to read?
VerdanaGeorgiaArial
![Page 18: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/18.jpg)
Less than a second is spent on heading
![Page 19: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/19.jpg)
Headings &Sub-headings
Less than a second is spent on heading
![Page 20: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/20.jpg)
Headings &Sub-headings
Notice consistency
Less than a second is spent on heading
![Page 21: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/21.jpg)
Source: Eyetools
![Page 22: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/22.jpg)
Source: Eyetools
![Page 23: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/23.jpg)
Good Headings and sub-headingsBe consistent
Same placementSame colorSame font for like things
Provide…
![Page 24: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/24.jpg)
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
![Page 25: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/25.jpg)
Participants first look at Textual content, then…
Photo taken from Los Angeles Times
Source: Accessibility humanized: A user-centered approach to web accessibility
![Page 26: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/26.jpg)
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
![Page 27: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/27.jpg)
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
![Page 28: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/28.jpg)
The larger the image, thelonger viewers engaged
in page
Viewers more engaged when
image is at least 210 x 230 pixels
![Page 29: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/29.jpg)
…have lower bandwidth
![Page 30: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/30.jpg)
…Participants readall or part of the
story that startedwith bold text.
![Page 31: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/31.jpg)
…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.
![Page 32: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/32.jpg)
Participants recall information better, if…
Text ~ to remember:Facts
Names Places
Multimedia ~ New information
Conceptual in nature
Give learner’s a choice
![Page 33: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/33.jpg)
Animation to comprehended information better?
Source: Eyetools
![Page 34: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/34.jpg)
Animation to comprehended information better?
Sometimes…Good, descriptive
Writing is bestOther times…
Better with graphics.
Source: Eyetools
![Page 35: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/35.jpg)
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
![Page 36: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/36.jpg)
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
![Page 37: Chat 1](https://reader033.vdocuments.site/reader033/viewer/2022052910/559a2aea1a28abf4758b4600/html5/thumbnails/37.jpg)
My Favorites Discussion (5 pts) Post at least 5 principles to Design Principles
wiki (10 pts) Readings Start thinking about ePortfolio