Empirically Based Web Design

(1)

Empirically Based

Web Design

Don Zimmerman, PhD.

Professor

Department of Journalism & Technical

Communication

Center for Research on Writing

& Communication Technologies

Colorado State University

Fort Collins, Colorado

Overview

•

Why do we need research-based

guidelines?

•

National Cancer Institute’s Usability

focus/ Communication Technologies

Branch

•

CSU Journalism & Technical

Communication Research

(2)

1/17/03

Empirically Based Web Design

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

Why Research-based

Guidelines?

•

Answers the “Why” behind design

questions

•

Provides evidence to support your

recommendation, guideline

(3)

1/17/03

Denver

Denver 55

National Cancer Institute--1

•

www.usability.gov

•

Being revised, post spring 2003

•

190+ guidelines

(4)

1/17/03

Denver

(5)

1/17/03

Denver

Denver 99

National Cancer Institute--2

•

Research-based guidelines for Web

•

NIH medical guidelines

•

Research paradigm

•

Best practices based on research

National Cancer Institute--3

•

Process

–

Communication Technologies Branch

selected initial guidelines

–

Identified preliminary sources

–

Team reviewed

–

Met in DC to develop & pretest rating

system

(6)

1/17/03

Denver

Denver 1111

•

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.

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

(7)

1/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

•

Rate sources on 1-5 guideline of quality

(8)

1/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

CSU Research--2

•

Communication Science based :

Testable research questions

–

Empirical social sciences

•

Communication science

•

Psychology

•

Sociology

•

Education

(9)

1/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

CSU Research--4

•

Center for Research on Writing &

–

National Institutes of Health

–

Colorado Commission on Higher

Education

–

National Park Service

(10)

1/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

CSU Research--6

•

Animation

•

Distracters

•

Frames

•

Legibility

•

Navigational

patterns

•

Navigational aids

•

Link characteristics

Scent

•

Tutorials

•

Visuals

(11)

1/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

CSU Research--8

•

Problem-solving approach

•

Wide range of methods:

–

Verbal protocol analysis

–

Card sorting

–

Tracking software

–

Surveys

–

Nominal Group Techniques

–

Focus groups

(12)

1/17/03

Denver

Denver 2323

Framework for Guidelines

Emerging Guidelines--1

•

Follow accessibility standards

–

Section 508, Feds

–

www.W3.org

•

Analyze audience

–

Content knowledge

(13)

1/17/03

Denver

Denver 2525

(14)

1/17/03

Denver

Denver 2727

Emerging Guidelines--3

•

Design for connection speeds

–

At work 66% users have fast connections

–

At home

•

14% high-speed (broadband)

•

Balance modems

–

56K Modem

(15)

1/17/03

Denver

Denver 2929

Emerging Guidelines--4

•

Fast download speed

–

40k to 70k

(16)

1/17/03

Denver

Denver 3131

•

Use standard links (?)

•

Blue underlined (?)

•

File folder Tabs

•

Buttons

(17)

1/17/03

Denver

Denver 3333

Emerging Guidelines--6

•

Use high scent links (telling)

(18)

1/17/03

Denver

(19)

1/17/03

Denver

Denver 3737

Emerging Guidelines--7

•

Provide multiple navigation aids

–

Left-hand navigational panel

–

Tabs

–

Home

–

Tab folders

(20)

1/17/03

Denver

Denver 3939

•

Provide additional navigation aids

–

Index

–

Site map

–

Search engine

–

Table of contents

(21)

1/17/03

Denver

(22)

1/17/03

Denver

Denver 4343

Emerging Guidelines--9

•

Put key information high in Web site

hierarchy

•

Put key information center and high on

page (screen)

•

Structure site broad & shallow

Vegetables &

Fruits

Celebrating

Vegetables

& Fruits

Seasonal

Vegetables

& Fruits

Fun Facts

& Ideas

Science:

Truths &

Myths

How to

Buy, Store,

& Prepare

Nutrition

Information

Buying

Storing

Preparing

(23)

1/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

(24)

1/17/03

Denver

Denver 4747

Emerging Guidelines--11

•

Use point size appropriate users

•

Use text aids for informational Web

sites

–

Bullet lists

–

Short, succinct paragraphs

–

Short sentences

•

Use vertical lists, when possible

•

Readability

–

Audience?

–

10

th

grade level?

–

Run tests (MS Word function)

–

Write tightly

(25)

1/17/03

Denver

Denver 4949

Emerging Guidelines—13

•

Use illustrations carefully

–

Functional?

–

Attract attention

•

Use animations with care

–

Attract attention?

–

Functional

–

Distract users?

(26)

1/17/03

Denver

(27)

1/17/03

Denver

Denver 5353

Emerging Guidelines—15

(28)

1/17/03

Denver

Denver 5555

(29)

1/17/03

Denver

Denver 5757

Emerging Guidelines--17

(30)

1/17/03

Denver

Denver 5959

Don Zimmerman

Center for Research on Writing &

Dept of Journalism & Technical

Communication

Fort Collins, CO 80523-1785

[email protected]