User-Centered Website

Development: A Human-
Computer Interaction Approach

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Daniel D. McCracken
City College of New York
Rosalee J. Wolfe
DePaul University
With a foreword by:
Jared M. Spool, Founding Principal,
User Interface Engineering
PowerPoint slides by Dan McCracken, with thanks
to Rosalee Wolfe and S. Jane Fritz, St. Joseph’s
College

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 1. Human-Computer
Interaction: An Overview
In this chapter you will learn about:
The benefits of making a website more usable
The history and goals of Human-Computer
Interaction
The methodology of User-Centered Development

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 1.1 Introduction
Have you ever been unable to find something in
a website that you know is there?
Have you ever been enraged by a useless or
misleading error message?
Have you ever wondered why a website needs
to know your e-mail address, and left the site for
fear it might be misused?

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 It doesn’t have to be that way

You can design websites that

Are pleasant and convenient for your users
Let them accomplish their goals
The key: think about your users
Learn about them
Watch them work, in their workplace
Interview them, also in their workplace

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 1.2 Benefits of Usable Web sites
Gaining a competitive edge
Reducing development and maintenance costs
Improving productivity
Lowering support costs

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Gaining a competitive edge, continued

Conversion rate is the percentage of visitors who

take an action you want them to take, such as
making a purchase
Increasing the conversion rate lowers the
advertising cost of individual sales
Higher the conversion rate , better the sales and
greater the profit margins.
Ease of use is the most important driver of high
conversion rates

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Reducing development and maintenance
costs

Learn about users first, and you will avoid

Implementing features users don’t want
Creating features that are annoying or inefficient
High cost of making changes late in the development
cycle

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Improving productivity

For e-commerce, productivity means that users

find what they want—and succeed in buying it
For a company intranet, productivity means
employees become more efficient

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Lower support costs

Calls to customer support are very expensive for

the vendor: estimates range from $12 to $250
per call
A website that reduces support calls can save
major dollars

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 1.3 What is HCI?
“Human Computer Interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computing systems
for human use and with the study of the major
phenomena surrounding them.”
As defined by the Special Interest Group on Human-
Computer Interaction (SIGCHI) of the Association for
Computing Machinery (ACM)

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 A major cost shift

50 years ago the cost of a computer would pay

the salaries of 200 programmers for a year
People were expected to work hard to save computer
time
Today the salary of one programmer for a year
will buy 200 computers—each vastly more
powerful than the early machines
Now the goal is to make computers easy to use, to
save people time

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 How do we make computers easy to use?

By applying the principles of Human-Computer

Interaction
By being, as an HCI practitioner, the advocate
for the user

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 1.4 Goals of HCI
To develop or improve the
Safety
Utility
Effectiveness
Efficiency
Usability
Appeal
. . . of systems that include computers

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Safety

Safety of Users—think of
Air traffic control
Hospital intensive care
Safety of Data—think of
Protection of files from tampering
Privacy and security

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Utility and effectiveness

Utility: what services a system provides;

examples:
Information
Instruction
Purchases
Effectiveness: user’s ability to achieve goals;
examples:
Find desired information
Enter credit card data

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Utility and effectiveness are distinct

A web site might provide all necessary services,

but if users can’t find the items they want to
buy, the site lacks effectiveness

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Efficiency

A measure of how quickly users can accomplish

their goals or finish their work using the system

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Usability

Ease of learning
Ease of use
Can be an entire graduate course!

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Appeal

How well users like the system

First impressions
Long-term satisfaction

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 1.5 User-Centered Development
Methodology
User-centric, not data-centric
Involves users in the design process
Usability can be quantified and measured
Highly Iterative
Involves testing and revision
Interdisciplinary and eclectic, building on a
dozen different disciplines

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Fields that HCI builds on

Computer Science
Implementation of website or other interface
Engineering
Faster, cheaper equipment
Ergonomics
Design for human factors
Graphic design
Visual communication
Technical writing
Textual communication

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Fields that HCI builds on, continued

Linguistics, artificial intelligence

Speech recognition, natural language processing
Cognitive psychology
Perception, memory, mental models
Sociology
How people interact in groups
Anthropology
Study of people in their work settings
A highly eclectic field, obviously, which offers
both challenges and satisfactions

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 The stages of user-centered
development

Needs analysis
User and task analysis
Functional analysis
Requirements analysis
Setting usability specifications
Design
Prototyping
Evaluation

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Needs analysis

Summarizes the nature and purpose of the

system
Type of system (website, video game, spreadsheet)
People it will serve
Benefits it will provide

Example: The Woods Bay website will promote tourism for

Woods Bay cottages in Bamfield, British Columbia. It will
describe the accommodations, surroundings, fishing,
snorkeling, hiking and other local attractions for potential
visitors. In addition, it will provide information about travelling
to Bamfield, current rates, and booking a cabin.

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 User and task analysis

User analysis - characterizes the people who will

use the site:
General considerations (age, education, experience
with computers)
Task analysis - what users will do
User’s goals - what they want to accomplish
Tasks or activities carried out to achieve the goals

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Functional analysis

Functionality or computer services that users

will need and what will be automated
Close correspondence between functions and tasks
Examples: travel site task: “find all flights to xyz,
ordered by price”
Needs search function and sorting capability
Music CD site: task “buy a CD”
Needs secure on-line transaction functionality

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Requirements analysis

Describes the formal specifications required to

implement the system:
Data dictionaries
Entity-relationship diagrams
Object oriented modeling
Similar to types of specifications in software
engineering

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Setting usability specifications

Answers question “How good is your site?”

Performance measures (such as number of tasks
completed, number of errors, etc.)
Preference measures (such as first impression,
overall satisfaction)

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Design

Organization
Visual organization to create clarity and consistency
Layout
Appearance
“Look and feel”
Now you can begin to sketch layout of pages—
because you know your users and what they
want to do

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Prototyping

Greek “proto” = first

Prototype is an original model or pattern
Model is created from which the website will (later)
be implemented.
Global: entire site
Local: selected parts of the site
Prototypes
Evolutionary: becomes the final project
Throw-away: serves as a pattern
High fidelity: resembles final product
Low fidelity: just rough sketch - not close to final

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 A low-fidelity prototype

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 A high-fidelity prototype

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Note: implementation

This is where the website or other interface is

implemented, in HTML or a programming
language

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Evaluation

Similar to testing a program

Two types of evaluation
Expert-based evaluation
 Bring in a usability expert

User-based evaluation
 Test the website or other interface with users

In this course we emphasize user-based

evaluation

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 1.6 Characteristics of User-Centered
Development
Highly iterative: cycle continues until all user specifications are met

DESIGN

PROTOTYPE

EVALUATE

MEET USER READY TO

SPECIFICATIONS? IMPLEMENT
NO YES

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall

 Summary

In this chapter you have learned that a user-

centered design methodology:
Is industry-proven
Lets you build websites or other interfaces that meet
user expectations
Leads to cost-effective and timely implementation
Is highly interactive
You have also learned that HCI is a highly eclectic
field, building on a dozen other disciplines

Chapter 1: Introduction to HCI Copyright © 2004 by Prentice Hall