Empirically Based Web Design - STC RMC Based Web Design copyright 2003 Don Zimmerman CU Denver 9 National Cancer Institute--2 • Research-based guidelines for Web • NIH medical

Empricially Based Web Guidelines Rocky Mountain STC 16 January 2003

1/17/03

Copyright 2003 Don Zimmerman Colorado State University 1

Empirically Based Web Design

Don Zimmerman, PhD.ProfessorDepartment of Journalism & Technical CommunicationCenter for Research on Writing& Communication TechnologiesColorado State UniversityFort Collins, Colorado

1/17/031/17/03

Empirically Based Web Design Empirically Based Web Design copyright 2003 Don Zimmerman CU copyright 2003 Don Zimmerman CU

Denver Denver 22

Overview• Why do we need research-based

guidelines?• National Cancer Institute’s Usability

focus/ Communication Technologies Branch

• CSU Journalism & Technical Communication Research

• Selected guidelines


1/17/03


1/17/031/17/03


Denver Denver 33

Why Research Based Guidelines?• Enhances the effectiveness of Web

sites • Tells what works and what doesn’t

work• Adds to your credibility

1/17/031/17/03


Denver Denver 44

Why Research-based Guidelines?• Answers the “Why” behind design

questions• Provides evidence to support your

recommendation, guideline


1/17/03


1/17/031/17/03


Denver Denver 55

National Cancer Institute--1

• www.usability.gov• Being revised, post spring 2003• 190+ guidelines• 475+ sources identified

1/17/031/17/03


Denver Denver 66


1/17/03


1/17/031/17/03


Denver Denver 77

1/17/031/17/03


Denver Denver 88


1/17/03


1/17/031/17/03


Denver Denver 99


• Research-based guidelines for Web • NIH medical guidelines• Research paradigm• Best practices based on research

1/17/031/17/03


Denver Denver 1010


• Process– Communication Technologies Branch

selected initial guidelines– Identified preliminary sources– Team reviewed– Met in DC to develop & pretest rating

system


1/17/03


1/17/031/17/03


Denver Denver 1111

National Cancer Institute--4• NCI Staff & Contractors• Janice Nall, Chief Communication Technologies

Branch• Sanjay Koyni, Usability Engineer• Crag Lafond, Project Manager• Susan Allison• Shruthi Nawab• Conrad Mulligan, McNeil Technologies• Kent Bailey, Mind Design, Inc.

1/17/031/17/03


Denver Denver 1212

National Cancer Institue--5• Bob Bailey, President

Computer Psychology• Barbara Chaparro,

Software Usability Res. Wichita State U.

• Melody Ivory, Inform. School, U of Wash.

• Bonnie John, HCI MS program, Carnegie Mellon U.

• Judy Ramey, Tech Comm, U. of Wash, University

• Ginny Reddish, Redish& Associates.

• Jean Schultz NIST• Tom Tullis, Human

Interface Design• Don Zimmerman, CSU


1/17/03


1/17/031/17/03


Denver Denver 1313

National Cancer Institute--6• Classify each guideline

– Hypothesis testing– Non-hypothesis-oriented experiment– Ethnography– Meta-analysis– Exploratory– Usability report or test– Model-based evaluation– Expert opinion

1/17/031/17/03


Denver Denver 1414


• Rate sources on 1-5 guideline of quality• Rated confidence of rating on 1-5


1/17/03


1/17/031/17/03


Denver Denver 1515

CSU Research--1

• MS Tech Comm launched 1988• Given graduates have solid, writing,

editing & production skills • Value added

– Skills in identifying & analyzing audiences– What does research say about what works

and what doesn’t work

1/17/031/17/03


Denver Denver 1616

CSU Research--2

• Communication Science based : Testable research questions– Empirical social sciences

• Communication science• Psychology• Sociology• Education• Human computer interaction


1/17/03


1/17/031/17/03


Denver Denver 1717

CSU Research--3• Faculty generated $6+ million research • Center for Research on Writing &

Communication Technologies– Hewlett Packard– IBM– Environmental Protection Agency– National Cancer Institute– USDA Forest Service

1/17/031/17/03


Denver Denver 1818

CSU Research--4

• Center for Research on Writing & Communication Technologies– National Institutes of Health– Colorado Commission on Higher

Education– Colorado State University– National Park Service– National Science Foundation


1/17/03


1/17/031/17/03


Denver Denver 1919

CSU Research--5

• Research studies & evaluations • Usability/Design: 1000+ participants• First Web Study

– 1993-1994– Linda Bilsing: new “thing” Web & HTML

• Surveys & adoption studies 3000+ participants

1/17/031/17/03


Denver Denver 2020

CSU Research--6• Animation• Distracters• Frames• Legibility• Navigational

patterns

• Navigational aids• Link characteristics

Scent• Tutorials• Visuals


1/17/03


1/17/031/17/03


Denver Denver 2121

CSU Research--7• Computer & Web

anxiety, Learning styles, Situated cognition

• Visual cognition, visual memory

• Cognitive science• Map reading

• Technology Transfer

• Diffusion of innovations--Web forms usage, professional Web site usage

• Web usage studies

1/17/031/17/03


Denver Denver 2222

CSU Research--8 • Problem-solving approach• Wide range of methods:

– Verbal protocol analysis– Card sorting– Tracking software– Surveys– Nominal Group Techniques– Focus groups– Surveys


1/17/03


1/17/031/17/03


Denver Denver 2323

Framework for Guidelines

1/17/031/17/03


Denver Denver 2424

Emerging Guidelines--1

• Follow accessibility standards– Section 508, Feds– www.W3.org

• Analyze audience– Content knowledge– Hardware & connection speeds


1/17/03


1/17/031/17/03


Denver Denver 2525


• Design for 800 x 600 resolution (?)

1/17/031/17/03


Denver Denver 2626


1/17/03


1/17/031/17/03


Denver Denver 2727

1/17/031/17/03


Denver Denver 2828


• Design for connection speeds– At work 66% users have fast connections– At home

• 14% high-speed (broadband) • Balance modems

– 56K Modem– Telephone line speed? 26K?


1/17/03


1/17/031/17/03


Denver Denver 2929

Emerging Guidelines--4• Fast download speed

– 40k to 70k– Download ? Less minute

1/17/031/17/03


Denver Denver 3030


1/17/03


1/17/031/17/03


Denver Denver 3131


• Use standard links (?)• Blue underlined (?)• File folder Tabs• Buttons• Breadcrumbs

1/17/031/17/03


Denver Denver 3232


1/17/03


1/17/031/17/03


Denver Denver 3333


• Use high scent links (telling)• Prefer text over graphics

1/17/031/17/03


Denver Denver 3434


1/17/03


1/17/031/17/03


Denver Denver 3535

1/17/031/17/03


Denver Denver 3636


1/17/03


1/17/031/17/03


Denver Denver 3737

1/17/031/17/03


Denver Denver 3838


• Provide multiple navigation aids– Left-hand navigational panel– Tabs– Home– Tab folders– Breadcrumbs


1/17/03


1/17/031/17/03


Denver Denver 3939

1/17/031/17/03


Denver Denver 4040


• Provide additional navigation aids– Index– Site map– Search engine– Table of contents– Links at bottom of page


1/17/03


1/17/031/17/03


Denver Denver 4141

1/17/031/17/03


Denver Denver 4242


1/17/03


1/17/031/17/03


Denver Denver 4343


• Put key information high in Web site hierarchy

• Put key information center and high on page (screen)

• Structure site broad & shallow

1/17/031/17/03


Denver Denver 4444

Vegetables &Fruits

CelebratingVegetables

& Fruits

SeasonalVegetables

& Fruits

Fun Facts& Ideas

Science:Truths &

Myths

How toBuy, Store,& Prepare

NutritionInformation

Buying

Storing

Preparing


1/17/03


1/17/031/17/03


Denver Denver 4545


• 55-60 character line: understanding • Use Verdana, Arial, Helvetica or other

sans-serif font• Provide good contrast

– Black text on white background– Avoid patterned backgrounds

1/17/031/17/03


Denver Denver 4646


1/17/03


1/17/031/17/03


Denver Denver 4747


• Use point size appropriate users• Use text aids for informational Web

sites– Bullet lists– Short, succinct paragraphs– Short sentences

• Use vertical lists, when possible

1/17/031/17/03


Denver Denver 4848


• Readability– Audience?– 10th grade level?– Run tests (MS Word function)– Write tightly– Edit, but don’t write to readability formulas


1/17/03


1/17/031/17/03


Denver Denver 4949

Emerging Guidelines—13

• Use illustrations carefully– Functional?– Attract attention

• Use animations with care– Attract attention?– Functional– Distract users?

1/17/031/17/03


Denver Denver 5050


• Use photos, video, & sound with care


1/17/03


1/17/031/17/03


Denver Denver 5151

1/17/031/17/03


Denver Denver 5252


1/17/03


1/17/031/17/03


Denver Denver 5353


• Provide printable version

1/17/031/17/03


Denver Denver 5454


1/17/03


1/17/031/17/03


Denver Denver 5555


• Signal leaving site

1/17/031/17/03


Denver Denver 5656


1/17/03


1/17/031/17/03


Denver Denver 5757


• Signal page length

1/17/031/17/03


Denver Denver 5858


1/17/03


1/17/031/17/03


Denver Denver 5959

Don Zimmerman

Center for Research on Writing & Communication Technologies

Dept of Journalism & Technical Communication

Colorado State University

Fort Collins, CO 80523-1785

[email protected]

Telephone 970-491-5674

Documents

Empirically Based Web Design - STC RMC Based Web Design copyright 2003 Don Zimmerman CU Denver 9 National Cancer Institute--2 • Research-based guidelines for Web • NIH medical