Teaching Human-Computer
Interaction Using Participatory
Design Methods
Dr. Jerry Weinberg, SIUE
Dr. Mary Stephen, SLU
Ms. Kristin Caufield
Supported by a grant from the
National Science Foundation
Human-Computer Interaction
&
User-Centered Design
• Programs are used by somebody
– In a general sense this means designing for
human hardware/software capabilities and
limitations:
» Short term memory: Miller’s magic number
» Long term memory: recognition vs. recall
» Limits of perception: color pollution
Human-Computer Interaction
&
User-Centered Design
• Programs are used by somebody
– More specifically this means designing for how
the user thinks about the tasks the application is
supporting:
»
»
»
»
How do they organize the work?
What strategies do they use to accomplish tasks?
How is information recorded and communicated?
What is their conceptual model?
Human-Computer Interaction
&
User-Centered Design
• Typically students (and many programmers) take
a system-centered view of design.
• Design is a creative activity of making artifacts
that are usable for a specific purpose.
• “Usable” requires the designer take into account
who is using the system, what they are using it
for, and how does it fit within their overall
activities.
Usable Vs. User-Friendly
HTML
Checker
Version 1
Version 2
Potential
Design
Participatory Design Methods
• Participatory design methods create situations in which
the user becomes a partner in the design process.
– User-Centered Design [Landauer]
– Human-Centered Systems [Flanagan, Huang, Jones, and
Kasif]
– Participatory Design [Muller and Kuhn]
– Contextual Design [Beyer and Holtzblatt]
The Designer/Programmer
• As a computer professional, they are most
likely going to be both the designer and
programmer of a system.
• Poor design results in non-use, misuse,
abuse, and (potentially severe) errors
Case of the Tell-Tale Heart
Project Goal
• Develop an experiential learning environment
– learn and practice methods for collecting user
data
– modeling user data,
– and designing from the data
Participatory Design &
Human-Computer Interaction Curriculum
• Present & practice Ethnographic Techniques
• Team design project that encompasses entire
process from gathering data to prototyping an
application
• Create a lab environment for team design activities
and user interaction
• Students from lower division courses become
potential users of the project application
Overview of Contextual Design
• Contextual Inquiry
– Gathering raw data
– Ethnographic Techniques: interviewing, observation, and field
notes
• Work modeling
– Visual representations of work
• Consolidation
– Drawing conclusions about the general population of users from
individuals
• Visioning
– Brainstorming solutions
• User Environment Design
– System Blueprint and interface specification
• Paper Prototyping
– Lo-fidelity testing of interfaces
HCI Course Description
• Covers human aspects of interaction
design, on technological aspects of
interface design, and design
methodologies.
• 15 week, required course
• Prerequisite is Interaction Programming
• Enrollment is between 15 and 30
• Course is usually taken in the junior year
prior to the Senior Project course
What Is Ethnographic Research?
Attempt to understand what is happening
in natural setting and use that
understanding to make implications.
Components
•
•
•
•
Observations
Field notes
Interviewing skills
Analyzing data
Observational Data
• Rough materials collected during
observation
• Relevant data needed to improve and/or
change systems
Focus of Observations
•
•
•
•
•
•
•
Physical setting
Activities
Human, social environment
Formal interactions
Informal interactions
Non-verbal communications
What does not happen
Characteristics of Field Notes
•
•
•
•
•
Accurate
Detailed, thorough
Descriptive
Content part and reflective part
Different formats
Types of Interviews
•
•
•
•
•
Informal conversational interview
General interview guide
Standardized open-end interview
Closed, fixed response interview
Focus group interview
Student Examples
Click to play
Click to play
Click to play
Types of Questions
•
•
•
•
•
•
•
Descriptive
Follow-up
Experience/example based
Compare/contrast
Opinion
Background/demographics
Role-laying/simulation
Wording of Questions
• What is your opinion of this application?
• Who was the project director?
• What types of information were you
looking for at this stage?
• When did you interview people?
• How did the changes you make affect the
way people used the program?
• What have you learned in this course?
Sample Exercises
• Interview another student about his/her job.
Students videotaped pairs of students doing
interviews and then critiqued the interviews.
• Observe someone working in a public area
for 10 minutes. Record field notes related to
observation.
Work Modeling
Click to play
Affinity Diagram
Paper Prototypes
Paper Prototypes
Click to play:
Click to play:
Hi-Fi Prototypes
Human-Computer Interaction
Software Design & Usability Testing Lab
Design War Room
User Interaction Room
Original Conceptual Design
Joe Grant,
Grant Consulting
Design War Room
• Design & Brainstorming Sessions
• “Working on the Wall”
 Create a shared understanding & group Memory
 Immersion in the data – “Walking the Wall”
 Group Memory – Group Conscience
Design War Room
• Writing Walls with Metal Backing
 Poster sized paper for models & design ideas
 Magnets allow multiple teams to use as a “War Room”
• Re-Configurable Tables
 Conference room - access to the working wall area
 Observation room – clear view of video monitor
User Interaction Room
• User Interviewing
• Paper Prototyping
• Usability Testing
• Cameras for observation and
videotaping
• Monitor in Design War Room is
slaved to user’s computer
User Interaction Room
• User sessions video taped to view
later for details and review
• Two cameras – user’s face, user’s
actions
• One camera can be rotated to focus on
the table or the computer screen
• Microphones are mounted in
the ceiling
• Partition provides a division
to reduce user anxiety
Evaluation
General Questions
The project looks at two general questions with
respect to the HCI students:
1. How well do the course material and lab
experiences translate to an understanding of
design principles and practices?
2. How well does the HCI students’
understanding of design principles and practices
relate to their actual design practices.
Components of Evaluation Plan
• Questionnaires
• Student interviews
• Analysis of videotapes of students working
on projects
• Following students in senior project course
using interviews, analysis of project
materials, and observations
Observations from Fall 2000 Class
• Students rated ethnographic skills activities
as very useful.
• Some students with work experience in
computing reported viewing their jobs
differently after the course.
“I made the transition at work from being a
software engineer to a software designer. I
didn’t know there was a difference between
the two job titles. Now I do.”
“I had an internship and all I did was sit in a
cubicle and code all day. They kept telling me
that that was all there was to it – sit in a
cubicle and code, and I was really
disappointed. So, when I got to this class, it
was a relief to me because I realized that’s not
all there is to it. I had hoped there was a way
you could work with people but I had no idea
it was so intense with the interviews and all.”
• Traditional students reported no previous
experience with a group project in
computing courses, and exhibited
discomfort at the prospect of a group
project.
• Traditional students reported this was their
first experience with the design phase of a
project.
“At the beginning of the semester, I was
pretty scared at the thought of a group
project. I didn’t think everyone would do
their share. After my experience [in this
course], I think you should definitely keep
the group project.”