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
