حاسب وانسان

CS487 - Human Computer Interaction
Introduction
~ Lecture 1 ~
Samar Alsaleh
Summer 2021
Today’s Agenda
01 Course Overview
02 Introduction to HCI
03 A Brief History
04 Course Mini-Project
05 Finishing Thoughts
Today’s Agenda
01 Course Overview
03 A Brief History
About This Course
✗ The first 40 years of computer science were concerned mainly with
computers themselves—making them faster, smaller, more reliable,
and better understood mathematically
✗ Perhaps that's still the main concern of the field as a whole, but
today computer scientists devote increasing attention to computers
in their real-world context, which usually involves the people who
use them
✗ Computers may be complex systems, but human beings are even
more complex, and when we try to understand how computers and
people work together—well, there's a lot to cover
What This Course is…

✗ This course will introduce the broad field of human-computer
interaction (HCI):
✗ the psychological basis of cognition and perception;
✗ the variety of interaction devices, media, and styles;
✗ methods for designing systems and evaluating their usability; and
✗ the principles and guidelines the field has developed
➡ The success of most systems today, especially consumer products,

depends largely on HCI decisions
What This Course is NOT…

✗ This course does not focus on programming tools and methods for
implementing interfaces. Of course that's a valuable topic, but eight
weeks is barely enough for the topics and techniques we do cover
✗ Once you know how to design and assess a good user interface,
learning the libraries and tools for implementing them is relatively
straightforward
✗ Since nearly everyone in the class is an upper division student with
a technical background, we will discuss technical issues and make
technical arguments from time to time, but this course doesn't
require particular software development expertise
Topics to be Covered
2 Understanding the problem
3 Understanding users and user studies
4 Task & requirement analysis
5 Design and prototyping
6 Models of human information processing and interaction
7 Cognitive walkthrough
8 Psychological and physiological constraints
9 Heuristic evaluation
10 Perspectives & overview of the UI design process
7

Learning Objectives
Upon successfully completing this course, students will be able to:
✗ Ideate and propose interaction design solutions
✗ Study existing design practices and challenges
✗ Explore potential design opportunities and tradeoffs
✗ Evaluate designs and view them from critical perspectives
✗ Validate designs with rapid prototyping and iteration
✗ Communicate the tackled problems and proposed designs
Textbook and Course Materials
Human-Computer Interaction,
by Alan Dix et al., 3rd Edition, 2000
The Design of Everyday Things, by Don
Norman, Revised and Expanded Edition, 2013
Alternative, Any textbook that covers
course topics
* Lecture notes and additional reading material will be available on Blackboard

9

Course Assessment
10% Mini-Project - Weeks (Varies)
10% Quizzes - Weeks 2 & 6
20% Mid Exam 1 - Week 4
20% Mid Exam 2 - Week 7
40% Final Exam - Week 8

10
Ethics Code
Principles of Academic Integrity
✗ All deliverables must be your own original work
✗ Collaboration is encouraged but cheating is not
✗ Sharing solutions, doing work for, or accepting work from others is
cheating
✗ Work in teams only on explicit team projects
✗ Be honest, fair, responsible, respectful, and trustworthy
✗ Consider the severe repercussions of academic misconduct
11
Other Logistics
Students are expected to participate and contribute to the

collaborative learning environment
Please, mute your microphone if you’re not using it!
Late/missing submissions are subject to grade reduction

penalties and no make-up exams will be allowed
Students must attend at least 75% of the total lectures
12
Communication
asamar@taibahu.edu.sa
- Include your name/ID in every email
- Place course number/section and email topic in the subject line
(e.g. CS487 - Project Question)
Microsoft Teams
- Individual/group meetings can be set up upon request
All announcements regarding the course will be posted on
Blackboard and/or emailed to your TaibahU email address
Check detailed course syllabus on blackboard!
13

Today’s Agenda
01 Course Overview
03 A Brief History
Why are we here?
✗ Computing is everywhere!
✗ From desk-top to set-top to palm-
top to flip-top to wrist-top …
✗ User interfaces matter
✗ for efficiency, for convenience, for
commercial success, even for life
and death
✗ People time is more expensive than
computer time
✗ Everyone has stories of bad
interaction with user interfaces
15
How Did we Get Here?

✗ Once, it was enough if the system just worked (most of the time)
✗ Once, the burden was on the user
✗ Today, you have to care about:
✗ Success of the system+ well-being of the users
➡ Both depend on good UI, hence, HCI
16

So What is HCI?
✗ HCI examines what happens when a human and a computer system
interact to perform a task
✗ Task might be playing, learning, communicating, ...
■ Examples: write document, calculate budget, solve equation, learn topic,
drive home, monitor air traffic, …
✗ Narrowly: 1 user, 1 computer
✗ Focus on software, layout and operation of UI
✗ Broadly: people and computers
✗ Users’ mental processes, work practices
✗ Training; collaboration; management
✗ Social/organizational/health issues
17

HCI More Formally

✗ HCI (human-computer interaction) is the
study of how people interact with computers
and to what extent technology is or is not Psychology,
Engineering, Sociology,
developed for successful interaction with Computer Ethnography
human beings sience
HCI
✗ HCI discipline is mainly concerned with:
✗ Design, evaluation and implementation of
interactive computing systems for human use Design
✗ Study of the major phenomena surrounding
interactive computing systems for human use
18
Why is This Important?

✗ Most human activities involve technology
✗ No longer just about the desktop!
✗ Computer systems (in one way or another)
now affect every person in society
✗ Product success depends largely on ease of
use, not necessarily power
➡ Usability is crucial!
19

Usability Goals
✗ Combination of:
✗ Satisfaction (utility, effectiveness, experience)
✗ Safety/robustness (low user error rate)
✗ Efficiency (performance speed, movement)
✗ Learnability (time to learn to get work done)
✗ Memorability (retention over time or when using infrequently)
✗ So, a usable system is easy to learn, easy to remember how to use,
effective, efficient, safe, and enjoyable to use
20

HCI != Usability
✗ Usability is only one part of HCI, but has been one of its main goals
✗ HCI studies involve:
✗ Developing guidelines and standards that support designers
✗ Developing methods to evaluate the user experience of a given
product/system
✗ Using mathematical models to predict users’ performance with a
system (e.g., laws for mouse movement time and models that predict
search time or mental effort)
✗ Investigating new interaction paradigms or new ways of integrating
technology in our lives (think smart clothes, touch displays, VR/AR,
voice-based interfaces, ...)
21

How Do We Improve Interfaces?

✗ Educate software professionals
✗ Draw upon fast accumulating body of knowledge regarding H-C
interface design
✗ Integrate UI design methods & techniques into standard software
development methodologies now in place
22

How Do We Know a UI is Good?

✗ “Looks good to me” isn’t good enough!
✗ Analyze using “common sense”
✗ Utilize both subjective and objective metrics
✗ Develop a theory of “human cognitive processing” to predict users’
problems
✗ Test the UI on actual users; problems arise
✗ Generalize findings and develop guidelines for avoiding problems, i.e.
usability engineering
23

Above All Else…

✗ Know the user!
✗ Physical & cognitive abilities (& special needs)
✗ Personality & culture
✗ Knowledge & skills
✗ Motivation
✗ Two fatal mistakes:
1. Assume all users are alike
2. Assume all users are like the designer
24

Famous Quotes
✗ “It is easy to make things hard. It is hard
to make things easy.” – Al Chapanis, 1982
✗ “Learning to use a computer system is like
learning to use a parachute – if a person
fails on the first try, odds are he won’t try
again.” – anonymous
25

Six Aspects of HCI

✗ Human abilities (perception, memory, ...)
✗ Technologies (windowing, mouse, VR, ...)
✗ Design methods (prototyping, lifecycles, ...)
✗ Evaluation methods (experiments, observation, ...)
✗ Guidelines and results (what has been proven to work in particular
situations, e.g., typography)
✗ Implementation tools and techniques (another course)
26

HCI’s Impact on Society

✗ We can now use computers as an every-
moment- partner
✗ Less and less training is required for most
application and devices
✗ Some examples
✗ Touch screen: direct interaction with objects
✗ Voice control: for some people the only way
to interact with computers
27

HCI’s Impact on Culture

✗ Smartphones have changed how we spend
our "empty times": should we read the news?
answer emails? chat with friends? play a
game? should we just be bored?
✗ Social Media have influenced how we stay in
touch with each other and how to find new
friends
✗ Games, more than entertainment, can be
used as social and even productive tools
28
HCI’s Impact on Economy

✗ Massive increase in productivity
✗ HCI found how to speed up input and
reduce its complexity
✗ People can perform tasks faster than
they used to
✗ Reduced need for training
✗ More people can use technology than
ever before
29

Today’s Agenda
01 Course Overview
03 A Brief History
A Walk Through Time
Classical HCI Contemporary HCI

1 3
Modern HCI
31

A Walk Through Time

- First Wave, Early 80’s -
1 3
All cognition happens

inside a user’s brain
Modern HCI
32

Classical HCI
✗ Key concepts:
✗ Applying psychology research
✗ Cognitive modeling —>
✗ Methods:
✗ Controlled lab experiments
✗ User modeling
✗ Rigid guidelines
✗ User requirements
33
A Walk Through Time

1 3
Maybe cognition doesn’t all

happen inside a user’s brain
Modern HCI
- Second Wave, Late 80’s, Early 90’s -
34

Modern HCI
✗ Key concepts:
✗ External & distributed cognition —>
✗ Situated action
✗ Ethnomethodology & ethnography
✗ Activity theory
✗ Methods:
✗ Intensive, long term involvement
✗ Rapid prototyping
✗ Iterative (co-)design & evaluations
35
A Walk Through Time

- Third Wave, Mid to Late 2000’s -
1 3
We need to take culture and

context into account, too
Modern HCI
36

Contemporary HCI
✗ Key concepts:
✗ Turn to design
✗ Turn to culture
✗ Turn to the wild —>
✗ Turn to embodiment
✗ Methods:
✗ Exploratory, creative methods (inspiration seeking)
✗ User involvement
✗ Co-design, accounting for human values and social norms
37
Today’s Agenda
01 Course Overview
03 A Brief History
Project Theme
Improve Something Out There!
Project Overview
Summary:
✗ Evaluate the usability of an interface (of a website, an application or any
computational system) and propose a validated redesign that will improve
the user experience
Goals:
✗ Evaluate existing computing-related task or problem
✗ Develop interface design alternatives for the task or problem
✗ Implement a prototype of your design
✗ Evaluate your design
Teams:
✗ Groups of 3 students
40
* Project concept and details are courtesy of Prof. David G. Kay @UCLA

What to Improve?
✗ Think about the problems people face when:
✗ Traveling
✗ Shopping
✗ Gaming
✗ Health care
✗ Working
✗ Can be any aspect of daily life!
✗ Design to support one particular kind of activity or relationship
that is important to you but which is not sufficiently well
supported by current tools
41
Characteristics of a Good Project

✗ You are passionate about it
✗ The problem itself is clear: your prototype will fulfill a clear goal
✗ It is novel
✗ It needs to be well scoped
✗ It is not just another app :)
42
Project Phases
✗ The project is organized around the following milestones:
Part 0 - Team formation & topic choice
Part 1 - Existing system evaluation
Part 2 - Design alternatives and evaluation
Part 3 - New design proposal
✗ Each team is expected to deliver a report at the end of each phase
43

Deliverables Details
✗ P0 - Team formation & topic choice - (Week 1)
✗ Submit a one-page document with a team name, members names and
IDs, and topic or existing system to be studied
✗ P1 - Existing system evaluation - (Week 2)

✗ Determine three or four typical tasks that a user might perform on the site
or with the application
✗ Find at least three typical users of the system and do a walkthrough,
following the guidelines discussed in class, of the users attempting to
complete each of your selected tasks
✗ Submit a usability evaluation report that briefly describes your evaluation
process and at more length what results you found
44

Deliverables Details (cont.)

✗ P2 - Design alternatives and evaluation - (Week 5)
✗ Use the knowledge gained in Part 1 and from class to develop a design
alternative that improves the problematic areas you identified in your
usability evaluation (you can have more than one design)
✗ Build a prototype of your new design using any prototyping tool
✗ Test your prototype on at least three people, asking each to perform the
original selected tasks, and follow the guidelines for working with users
✗ As flaws or improvements become apparent during your user testing,
iteratively adjust your design and prototype and re-test the changed aspects
✗ Submit a report that includes your design details and describes the prototype
and evaluation process and what changes resulted from the user testing
45
Deliverables Details (cont.)

✗ P3 - New design proposal - (Week 6)
✗ Write a proposal describing your improved design
✗ The major part of the proposal should describe the new design and how it
improves the usability issues you identified in Part 1
✗ Of course you can include illustrations as appropriate
✗ Submit your design proposal document along with a document that
describes the contributions made by each member of the team (one or
two sentences for each member is sufficient).
46

General Reports Guidelines

✗ Each report should:
✗ include team members names and IDs
✗ be of at least 2 and at most 4 pages (except P0 report)
✗ follow the following styling specifications:
■ Body font size: 12
■ Line spacing: 1.5 lines
■ Page margins: Normal (1” or 2.54cm top, bottom, left, and right)
✗ be submitted at the end of its respective week (Saturday, by midnight)
✗ Only one member of the team should do the submission
47

Project Presentation
✗ Final week of classes (Week 7)
✗ 10-15 minute project summary
✗ Motivation - what existing problem are you addressing?
✗ Evaluation (existing) - what problems does existing system have?
✗ ReDesign - what does your solution look like?
✗ Evaluation (new) - what did you do and what were the results?
✗ Conclusions - if you had more time, what would you do next?
48

Finally, Project Grading

✗ Design is subjective, and so is this course
✗ I can't really run a unit test and grade your design :)
✗ Wow us with your work and respect the deadlines
✗ The entire process is designed around feedback
✗ Milestones will be graded and feedback will be provided when needed
✗ You must act on feedback (does not mean saying yes!)
✗ Focus on putting effort on the design and searching for feedback!
49

Semester Timeline & Important Due Dates
Semester Weeks
1 2 3 4 5 6 7 8
(May 23) (May 30) (June 6) (June 13) (June 20) (June 27) (July 4) (July 11)
Project * P0 P1 P2 P3 Present
Quizez Q1 Q2
Mid ^ M1 M2
Final ◆
* All project reports are due by the end of the Saturday of their respective weeks
^ Midterm exams will be held during the first lecture of their respective weeks
50
Today’s Agenda
01 Course Overview
03 A Brief History
What’s Next?
Usability principles & techniques
User-centered design process
To Do:
Read: How HCI augments our everyday experience
(3-5 min)
Think about a bad experience you had interacting
with a user interface
52
Comic Relief :)
53
Resources & More…
Textbooks Chapters:
✗ Human-Computer Interaction - Ch1 and Ch2
Credits:
✗ Some slides content and illustrations are courtesy of:
✗ Prof. David G. Kay @UCLA, <link>
✗ Prof. John T. Stasko @GeorgiaTech, <link>
✗ Nigini Oliveira et al. @The Allen School, <link>
✗ Slides design and infographics, <slidescarnival.com>
54
Thanks!
Any questions?
Remember, you can find me at:
✗ Microsoft Teams
✗ asamar@taibahu.edu.sa

Understanding the Problem

(Part 1)
~ Lecture 2 ~
Samar Alsaleh
Summer 2021
Today’s Agenda
01 Usability Principles
02 User-Centered Design
Today’s Agenda
What Makes a Good UI?
✗ Functionality
✗ Speed & efficiency
✗ Reliability, security, data integrity
✗ Standardization, consistency
✗ USABILITY !
Usability
“Extent to which a product can be used
by specified users to achieve specified
goals with effectiveness, efficiency and
satisfaction in a specified context of use.”
Remember…
✗ A usable system is:
✗ easy to use
✗ easy to learn
✗ easy to remember how to use
✗ effective to use
✗ efficient to use
✗ safe to use
✗ enjoyable to use
Why is Usability Important?
✗ A GOOD user-interface can: ✗ A BAD user-interface can:

✗ Earn a company billions ✗ be annoying, embarrassing,
✗ Increase users loyalty frustrating, or even deadly
✗ Increase users trust ✗ Increase mistakes in data entry
✗ Makes users happy :) and system operation
✗ Decrease functions accessibility
✗ Cause system failure because of
7
user rejection

How Hard Is It?
✗ It is not simple to make usable user interfaces

✗ Basic misconceptions:
✗ If I (the developer) can use it, everyone can use it
✗ If our non-technical staff can use it, everyone can
✗ Good user interfaces are applied common sense
✗ A system is usable if all style guidelines are met
How to Ensure Usability?

Definition Charectarestis Example
Advice on UI design
Principles General and abstract Be consistent
issues
Suggestions on how Be consistent in the way that you
Guidlines General and semi-detailed
to increase usability have users leave menus
Provide an “Escape” option in the
Instructions on dialog in which users may want to
Rules principle/guideline Specific and detailed leave the dialog box without
implementation making any changes or selecting
any options. -> “Cancel” button
ISO 9241 multi-part standard
Set by national or
Standards Specific and mandated covering ergonomics of human-
international bodies 9
computer interaction
Principles, Guidelines, Rules, and Standards
Abstract Generic
Principles “Design to avoid errors.”
Guidelines, “Don’t offer invalid menu choices.”

Standards
“Make all unavailable menu choices
Rules gray and not selectable.”
Concrete Specific 10
Why Principles & Guidelines?

✗ …Because, well, not everything goes…
✗ Principles and guidelines are intended to prevent many bad
designs, before they begin, or evaluate existing designs on a
scientific basis
✗ They are established based on previous designs and experimental
findings
✗ However, rules can all be “broken” (but usually in order to satisfy
another principle)
11
The Variety
✗ No “cookbooks” (sorry:/)
✗ No simple, universal checklists
✗ There are many concepts, principles, and guidelines to help you!
✗ You need to:
✗ Think from perspective of user
✗ Understand the higher level principles that apply across situations,
display types, etc.
✗ Implement the standards and guidelines following the specified rules
12

Golden Rules and Heuristics

✗ “Broad brush” design rules
✗ Useful check list for good design
✗ Better design using these than using nothing!
✗ Different collections, e.g.
✗ Dix’s UI design principles (1998, see chapter 7)
✗ Shneiderman’s 8 golden rules (1998)
✗ Nielsen’s 10 usability heuristics (1994)
✗ Norman’s 7 principles (1988)
✗ And many more… 13

UI Design Principles (Dix et al.)

✗ Three main categories of principles:
1. Learnability principles
■ aim to support the ease with which new users can begin
effective interaction and achieve maximal performance
2. Flexibility principles
■ aim to support the multiplicity of ways a task can be done or the
user and system exchange information
3. Robustness principles
■ aim to improve the level of support provided to the user to
successfully achieve their goals 14

Golden Rules of UI Design (B. Shneiderman)
✗ Eight rules for good interaction design:

1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
15

Usability Heuristics (J. Nielsen)

✗ Ten general principles for interaction design:
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition over recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors 16
10.Help and documentation

Fundamental Principles (D. Norman)

✗ Seven key UI design principles:
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge the gulfs of Execution and Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and artificial.
6. Design for error.
7. When all else fails, standardize.
✗ Interesting watch: 3 ways good design makes you happy 17
(TED talk by Don Norman)

Levels of Consideration
1. Meta-display level
✗ Apply to the whole system, across media & across displays
✗ Focus on this in Basic Layout Stage
2. Display Layout
✗ Apply to groups of elements in a display
✗ Focus on this in Prototyping and Redesign
3. Element level
✗ Details about specific parts of a display
✗ Colors, sound attributes, symbols
18

Application of These Principles
✗ In doing design and implementation of

your project, revisit this list
✗ Assess your design against these usability
principles
✗ REMEMBER: There are other principles!
19
Today’s Agenda
Good Design, The Goal!
“Every designer wants to build a high-
quality interactive system that is admired by
colleagues, celebrated by users, circulated
widely, and imitated frequently.”
— Shneiderman, 1992
...and anything goes!...

Examples of Bad Designs
22
Can you identify what’s bad about each?
More Bad Examples
23
Closer to Fine: A Philosophy
“The human user of any system is the focus
of the design process. Planning and
implementation is done with the user in
mind, and the system is made to fit the user,
not the other way around.”
— Bruce Walker

“Good Design” Means

✗ Systems are built for humans; must be designed for the user
✗ Recognize individual differences; appreciate design implications of
these human factors
✗ Recognize that the design of things, procedures, etc., influences
human behavior and well-being
✗ Emphasize empirical data and evaluation
✗ Rely on the scientific method
✗ Things, procedures, environments, and people do not exist in
isolation
25

“Good Design” Is Not…

✗ NOT just applying checklists and guidelines
✗ These can help, but UI design is a whole philosophy
✗ NOT using oneself as the model user
✗ Know your real users; recognize variation in humans
✗ NOT just common sense
✗ Knowing how to design a fire alarm so it will be heard over
background noise is not something we all know
✗ The human factors specialist knows where or how to get the
information needed to answer design questions
26

Methodologies, Traditional vs User-Centered (cont.)
Traditional:
Requirements
✗ Sequential
Design
✗ Concerned with producing
Implementation software, software specification,
Validation maintainability, and testing
Maintenance
✗ Considers the interface to be just
another software component
Example, Waterfall Model
27

Methodologies, Traditional vs User-Centered (cont.)
User-Centered:
Requirements
✗ Iterative
Design
✗ Focuses on an understanding of
Implementation the users and their context
Validation ✗ Interface design and evaluation
Users Needs Maintenance
are built in from the first stage of
projects, through implementation
Lots of Feedback!
28

So What is User-Centered Design? (cont.)
✗ A way to force yourself to identify and consider

the relevant human factors in your design
✗ “User-Centered Design (UCD) is a user interface
design process that focuses on usability goals,
user characteristics, environment, tasks, and
workflow in the design of an interface.”
— Shawn Henry
✗ In UCD, “all development proceeds with the
user as the center of focus.” — Jeffrey Rubin 29

So What is User-Centered Design? (cont.)
✗ UCD seeks answers to:

✗ What is important to users
✗ The tasks users do, how frequently, and in
what order
✗ The users' work environment
✗ The users' problems and constraints
✗ Users’ expectations in terms of functionality
✗ Output required & in what form
✗ How can the design of this ‘product’ facilitate
30
users' cognitive processes?

Why Bother With UCD?
“UCD can improve the usability (ease-of-use) and usefulness

(relevance) of everything from “everyday things” to software
to information systems to processes. . . anything with which
people interact.” — D. Norman
✗ It can also:
✗ Reduce the number of decisions made out of the blue
✗ Help focus design activities
✗ Help document and defend decisions for later review 31
✗ Cut costs and increases user satisfaction and productivity

UCD, The Goals
✗ Easy-to-use products
✗ Satisfy customers
✗ Decrease expenditures on technical
support and training
✗ Advertise ease-of-use successes
✗ Ultimately increase market share
32

UCD, The Principles

1. Set clear goals 4. Evaluate Designs
➡ Determine target market, intended ➡ User feedback is gathered early
users, and primary competition and often to drive product design
2. Understand users 5. Assess competitiveness
➡ If you want a user to understand ➡ Whatever the majority of
your product, you must first customers are using today to
understand the user carry out the tasks
3. Design the total user experience 6. Manage users
➡ Everything a customer sees, hears, ➡ Continue to monitor and listen to
and touches is designed to satisfy your users, and let their feedback
user’s needs inform your decisions 33

UCD, The Process

✗ Essential activities in a user-centered design project include:
Requirements Requirements Design Evaluation

Gathering Specification Producing designs Carrying out user-
Understanding Specifying the user and prototypes based assessment
and specifying and organizational of the product 34
the context of use requirements
UCD, The Methods

✗ Common methods used in UCD include:
Method Cost When to use?
Focus groups Low Requirement gathering
Usability tetsing High Design & Evaluation
Card sorting High Design
Participatory design Low Design
Questionnaries Low Requirement gathering & Evaluation

35
Interviews High Requirement gathering & Evaluation
UCD, The Pros and Cons
Pros Cons
Products are more efficient, effective, and safe It is more costly
Assists in managing users’ expectations and
It takes more time
levels of satisfaction with the product
Users develop a sense of ownership for the May require involving additional design team
product member and a wide range of stakeholders
Products require less redesign and integrate May be difficult to translate some types of
into the environment more quickly data into design
The product may be too specific for more
The collaborative process generated more
general use, thus not readily transferable to
creative design solutions to problems
other clients 36
Today’s Agenda
What’s Next?
Human roles and capabilities
To Do:
Watch: 3 Goals of UX Design (< 3 min)
Watch: Human-centered design in 60 seconds!
Form a project team and start working!
38

How the customer How the project How the team

explained it leader understood it designed it
Comic Relief :)
39
Resources & More…
Textbooks Chapters:
✗ Human-Computer Interaction - CH2, CH3, CH4, and CH7
Credits:
✗ Slides design and infographics <slidescarnival.com/>
40
Thanks!
Any questions?
Remember, you can find me at:
✗ Microsoft Teams

Understanding the Problem

(Part 2)
~ Lectures 3 & 4 ~
Samar Alsaleh
Summer 2021
Today’s Agenda
01 More About UCD
02 All About Human
Today’s Agenda
01 More About UCD
02 All About Human
More About The UCD Process
✗ UCD is not just adding steps to an existing process—really
rethinking design!
✗ New priorities in allocating and timing use of resources
✗ Front-loaded, both in time and money
✗ Data-driven decision-making
How Do You Do User-Centered Design?

✗ You start with user-centered issues and questions
✗ You seek answers in a form that will support making design
decisions
✗ You use methods appropriate to your issues/questions and your
point in the development process
✗ e.g. early contextual inquiry; usability testing; etc.
The 9 Steps of UCD

✗ A precise approach to UCD includes the following steps:
1. Define the Context
2. Describe the User
3. Task Analysis
4. Function Allocation
5. System Layout / Basic Design
6. Mockups & Prototypes
7. Usability Testing
8. Iterative Test & Redesign
9. Release, Update & Maintain 6

Design Implications
✗ At each stage, consider how the details of your discovery process
affect your design
✗ For example:
Fact ➡ Implications
Range of text sizes
Users 16-80 yrs ➡ Range of grip strength
Some French speakers ➡ Multilingual interface
Astronaut users ➡ Extensive training available
Aesthetics less of an issue
Military context ➡ Ruggedness is critical 7

UCD Step1: Define the Context

✗ First off, you need to determine what the context is
✗ Context is the larger type of world that your system needs
to exist in
✗ This can mean the “type” of uses and applications such as:
✗ Life critical systems, applications
✗ Industrial, commercial, military, scientific, consumer
✗ Office, home, entertainment
✗ Exploratory, creative, cooperative
✗ Market and customer (not the same as the User)
✗ And most importantly, 8
➡ what are the design impacts of the context?
UCD Step2: Describe the User

✗ Consider their:
✗ Physical attributes ➡ age, gender, size, reach, …
✗ Perceptual abilities ➡ hearing, vision, heat sensitivity, …
✗ Cognitive abilities ➡ memory span, reading level, math, …
✗ Physical work places ➡ table height, sound levels, lighting, …
✗ Personality and social traits ➡ likes, dislikes, preferences, …
✗ Cultural and international diversity ➡ languages, dialog box
flow, symbols, …
✗ Special populations, (dis)abilities 9

UCD Step3: Task Analysis

✗ Talk to and observe users (NOT customers)
doing what they do
✗ List each and every TASK
✗ Break tasks down into STEPS
✗ ABSTRACT into standard tasks:
✗ monitor, diagnose, predict, control, inspect,
transmit, receive, decide, calculate, store,
choose, operate, etc.
10

UCD Step4: Function Allocation

✗ Consider the whole system!
✗ Decide who or what is best suited to perform each
task (or each step)
✗ e.g., system remembers login id, and reminds the
user, but user remembers the password
✗ Base this on knowledge of system hardware,
software, human users’ abilities, culture,
communications protocols, privacy, etc.
✗ Allocation constraints: Effectiveness; Cognitive/
affective; Cost; Mandatory
11
✗ Don’t forget the design implications!…

UCD Step5: System Layout / Basic Design

✗ Summary of the components and their basic design
✗ Cross-check with any
✗ Requirements documents
✗ Human factors refs
✗ Hardware specs
✗ Budgets
✗ Laws , … etc.
✗ Ensure that the system will support the design
and comply with constraints
✗ This corresponds to Verification and Validation, 12
in the language of software engineering
UCD Step6: Mockups & Prototypes

✗ “Informed Brainstorming”
✗ RAPIDLY mock up the user interfaces for
testing with real people
✗ Pen and paper or whiteboard to start
✗ Iterate, iterate, iterate!!
✗ Increasingly functional & veridical
✗ List audio and visual details at same levels
of detail in the prototypes
✗ i.e. don’t forget either of them 13

UCD Step7: Usability Testing

✗ Get real (or representative) users to do what they
do, using the prototypes
✗ Collect subjective and objective feedback.
✗ Sometimes users “want” features that actually yield
poor performance
✗ Video tape, lots of notes
✗ Be rigorous wherever possible (stats, etc.)
✗ Feedback into the iterative evaluation & redesign
of the system
✗ “Discount” usability testing can be very effective, 14
using fewer subjects, more rapid results

UCD Step8: Iterative Test & Redesign

✗ Repeat cycles of testing and reworking the system,
subject to cost/time constraints
✗ Focus on Functionality First !
✗ Plan for several versions during development
✗ Important advices:
✗ Keep an open mind
✗ Don’t get wedded to an idea
✗ Be prepared to abandon bad ideas!!
■ It’s just an idea, not a measure of your worth!
✗ Don’t let design review become about whose
idea wins 15

UCD Step9: Release, Update & Maintain

✗ In-the-field feedback, telemetry, user
data, logs, surveys, etc.
✗ Analyze and make iterative redesign/test
recommendations
✗ Updates and maintenance plan as part of
the design!
➡ design it so it can be fixed or updated!
16

Focusing Your Design

✗ Revisit the design implications at each step
✗ Remember, there are real-world constraints
✗ Optimize the efficiency of each step
✗ Cutting out steps is not the way to economize!
✗ Here, focus on the context and the user, to get
the most value for the time spent
17

Today’s Agenda
01 More About UCD
02 All About Human
Why Do We Care?
✗ Well, knowing the user informs the design
✗ If we’re designing interfaces for human users, it only makes sense
to know something about “how people work”
✗ This leads to better design and improved user performance!
✗ Time and effort expended to complete tasks
✗ Our brains don’t just “take pictures”; They process, select,
categorize, model, …
✗ Also, models of behavior are only part of the information we need
for successful design 19

The Human…
✗ In order to design something for someone, we need to better
understand them!
✗ To gain an understanding of what human are really like, we need to
know:
1. Human role
2. Human sensor
3. Human memory
4. Human cognition
20
5. Human performance
1
The Human Role
How is Human Viewed in HCI?
✗ Different roles engender different frameworks
✗ Human considered to be a…
1. Sensory processor
■ Experimental psych, sensory psych, …
2. Interpreter/Predictor
■ Cognitive psych, AI, …
3. Actor in environment
■ Activity theory, ethnography psych, …
22

Taking These Roles Into Account
Human considered Usability results when Example evaluation

to be a… the system… methods…
Fits within human Quantitative
Sensory processor
limits experiments
Fits with human Task analysis,
Interpreter/Predictor
knowledge cognitive walkthrough
Fits with task and Ethnographic field work,
Actor in environment
social context participatory design
23

2
The Human Sensors
Input-Output Channels
✗ Human interact with computes using input and output channels
1. Human Input
■ Input in human occurs mainly through the senses
● Sight, hearing, touch, taste and smell
➡ What senses do you use when using a computer?
2. Human Output
■ Output happens through the motor control of the effectors
(Responders)
● Limbs (arms, legs), fingers, eyes, head and vocal system
25

1. Input Via Senses
✗ The three current dominant senses for

interacting with an interface are:
1.1. Vision (sight)
1.2. Audition (voice)
1.3 Tactile (touch)
26

1.1. Input Via Senses: Vision
✗ Vision is the primary source of information for

the average person
✗ There are two stages of visual perception:
1. Physical reception of the stimulus (event) from
the outside world
2. Processing and interpretation of that stimulus
➡ Processing allows construction of images
from incomplete information
27

1.1. Input Via Senses: Vision (cont.)
Visual Abilities
✗ Thee important features: sensitivity, acuity,
and movement
✗ Human vision abilities vary and usually
decrease with age
✗ Design implication:
➡ Font size and location depends on task;
➡ Much done by context and grouping 28

Color Vision
✗ Our perception of a color is affected by
the surrounding color
✗ Saturated colors (i.e., pure colors) require
more focusing than desaturated (i.e.,
pastels)
Does it hurt to read
this message?
➡ Avoid saturated colors;
➡ Use redundant color coding when 29
possible

Color Deficiency
✗ 9% of the population are color blind (totally
or partially)
Want to test it?
✗ Color blind people tend to be more sensitive
to differences in brightness and saturation
➡ UI should be understandable even
without colors; 30
➡ Use different hatched fills as well as colors

Visual Perception
✗ How human perceive size, depth, relative
distance, brightness, and color
What do you see?
✗ Our expectations affect the way an image

is perceived
✗ Design implication ➡ UI Context is used to
resolve ambiguity
31

Are they the same size? (Distance) Optical Illusion

✗ Optical illusions are needed to be
aware of in interface design
✗ Our perception of size is not
completely reliable!
✗ We also tend to magnify horizontal
Which line is larger? (Edges) lines and reduce vertical
✗ Design implication ➡ again, use
context to resolve ambiguity and try 32
to use illusions to your advantage!

Reading
“IS THIS EASY TO READ?” ✗ Reading from computer screen is slower
(Vs) than from a book
✗ 200 wpm on paper vs 180 wpm on screen
“Is This Easy To Read? ”
✗ Also, WORDS WRITTEN IN BLOCK CAPITALS
take longer to read than those in lower case
✗ Word shape is important to recognition
✗ Design implication ➡ Use shorter lines and
fewer words in a page; and UPPERCASE only 33
for individual letters and non-words
33
Read-Flow Principle
✗ Analyzing how people read and view
content on web pages, for page design
➡ Action items (buttons, links) should
support the flow of the user in the
same way as reading occurs;
➡ The last action should be the most-
likely action to avoid backtracking 34
FLOW
34

1.2. Input Via Senses: Audition

✗ Sounds typically provide information about the
environment (distances, directions, objects, …)
✗ Sound properties in relation to human capabilities
(best-case scenario):
✗ pitch - property of frequency (20 - 20,000 Hz)
✗ loudness - property of intensity (30 - 100dB)
✗ timbre - property of richness (lots of instruments)
✗ location (5° source & stream separation)
✗ Human ear can distinguishing frequency changes
at low frequency, but is less accurate at high ones
35
✗ People are selective in their hearing

1.2. Input Via Senses: Audition

✗ Two main types of sounds in UI:
✗ Speech sound ➡ used to convey information
✗ Non-speech sound ➡ used for attention,
confirmation, status information, …
✗ Example uses of sounds:
✗ Warning sounds/Notifications
✗ User attention to a critical situation
✗ Confirmation of an operation (Deleting a file)
✗ Supporting navigations with sound effects
✗ Design implication ➡ Use sound especially while 36
eyes are busy, make sure to check sound properties

1.3. Input Via Senses: Tactile

✗ Stimulus received via receptors in the skin:
✗ heat and cold
✗ Pain and pressure
✗ May be key sense for someone who is visually
impaired
✗ Important tactician properties include
sensitivity, dexterity, flexibility, and speed
➡ Important in I/O, VR, surgery, …
✗ Design implication ➡ Use touch interaction
when possible to give the user an integrated 37
interaction experience
What About Smell and Taste?

✗ The senses we call upon when interacting with technology are
restricted; We mostly rely on vision and hearing, and increasingly
touch, but taste and smell remain largely unused
✗ Smell and taste are under-explored in the context of interactive
experiences
✗ The integration of the physical and chemical senses into technology
will transform existing interaction paradigms
✗ Multi-sensory research creates new knowledge and stimulates the
appetite for innovation!
? Question fo you, assuming the necessary hardware was available, 38

how would you use the senses of smell and taste in UI?

1.4. Input Via Senses: Other Senses

✗ Sense of urgency
✗ Sense of direction
✗ Musical sense
✗ Intuitive sense
✗ Moral sense
✗ Common sense
? Do you think these have any implication on the design of an
interactive system? 39

2. Output Via Responders
✗ During an interaction, human can

respond to an interface via:
✗ Limps (fingers, hands, arms)
■ Moment to control or respond
✗ Vocal System (voice)
■ Voice to control or respond
✗ Eyes
■ Movement to track or read
✗ Head
■ Movement to track, control or respond 40
2. Output Via Responders (cont.)

✗ Capabilities
✗ Range of movement, reach, speed, strength, dexterity, accuracy, …
✗ Often cause of errors
✗ Wrong button
✗ Double-click vs. single click
✗ Some principles
✗ Feedback (from human) is important
✗ Minimize eye movement
✗ Count for possible human errors
41

3
The Human Memory
Let’s Talk Memory
✗ Can you
✗ name the last person you met yesterday?
✗ count the number of items you last purchased from market?
✗ Names/Objects are often missed out or recalled in wrong order
✗ Why?
✗ Its our ability to store and retrieve information
✗ This is the job of our memory system!
43
The Memory System

✗ Involves encoding and recalling knowledge and acting
appropriately
✗ We don’t remember everything
✗ Involves filtering and processing
✗ Context is important in affecting our memory
✗ We recognize things much better than being able to recall things
✗ The rise of the GUI over command-based interfaces
✗ Better at remembering images than words
✗ The use of icons rather than names 44

A Mode of Memory
✗ There are three types of memory function:
Attention
Rehearsal
45
Sensory Memory
✗ Buffers for the information received via senses
➡ Stores visual and auditory impressions
➡ Creates a persistent image
➡ Provides play-back of information
✗ Constantly overwritten by new information
✗ Very brief, but veridical representation of what
was perceived
✗ Details decay quickly (~.5 sec)
➡ Attention prevents decay
➡ Another task prevents attention 46

Short-Term Memory (STM)

✗ Also known as working memory
✗ Store intermediate results for about 20-30 seconds
✗ After which info is either committed to LTM or lost
all together
✗ Used as a scratch-pad for temporary recall of
information
✗ New info can interfere with old info
✗ Can be accessed rapidly, ∼ 70ms, and decay rapidly ∼
200ms
✗ Memory flushing
47
✗ ATM machine provides ATM card to user before cash
Short-Term Memory (STM) (cont.)
✗ STM has limited capacity

✗ Measuring memory capacity:
✗ determining the length of a sequence with
0092514454251 order
Vs. ✗ freely recalled in any order
0092 51 44 54 251
✗ The average person can remember 7±2 digits
0321 51 55 043
✗ Chunking and patterns can increase the STM
capacity
48
Tray it out!
Long-Term Memory (LTM)

✗ Organized as a network of connected chunks of
knowledge
✗ Store factual information, experiential
knowledge, etc.
✗ Seemingly permanent and unlimited
✗ Access is harder, slower
✗ Slow access time∼1/10sec
✗ Slow decay, if any
✗ Stores information from STM through rehearsal
49
✗ Activity helps (we have a cache)

Long-Term Memory (LTM) (cont.)

✗ Two types of long-term memories:
✗ Episodic memory
■ Memory of events and experiences in serial form
➡ what you had for dinner, where you went on
Saturday?
■ Reconstruction of events possible
✗ Semantic memory
■ Structured record of facts, concepts, skills acquired
➡ what different words mean, how many inches in a
foot?
■ Semantic LTM derived from episodic LTM 50
Memory Characteristics
✗ Things move from STM to LTM by rehearsal and practice and by use
in context
✗ We “forget” things due to decay and interference
Unclear if we ever Lack of use Similar/newer gets

really forget something in way of old
51

Improve Your Memory

✗ Repetition alone is not enough
✗ Difficult to remember information that is not meaningful
✗ Let’s try it out:
✗ Set 1: Age, Cold, Logic, Idea, Value, Past
✗ Set 2: Elephant, Ant, Horse, Bee, Camel, Mosquito
? Which set is easy to remember?
✗ Things that can help you remember:
✗ Visualizing things
✗ Creating associations between them 52
✗ Try mind empowerment games ➡
Lumosity

Memory Role in Interface Design

✗ Don’t play with user’s memory
✗ Enter date in the following formats:
■ **/**/**
■ **/**/****
■ **/***/** ?
✗ Change of QWERTY keyboard to AZERTY keyboard
✗ Give users visual and audible cues to complete their tasks
✗ Beep for an error message
✗ Copying of data (progress bar/chart gradually filled in)
✗ Users are not expected to remember a different sequence of events 53
Memory Role in Interface Design (cont.)
✗ Stroop effect
✗ People will read whatever you put in
front of them
✗ Conflicting information cause slower
processing
Read text first and then the text color
✗ Design implications:
➡ Don’t interfere with the user’s natural
thought process
➡ Keep mixed messages to a minimum 54
4
The Human Cognition
Human Cognitive System
✗ Cognation is the mental action or process of acquiring
knowledge and understanding through thought,
experience, and the senses
✗ Humans are limited in their capacity to process
information; This has important implications for design
✗ There are four main processes of cognitive system:
✗ Selective Attention
✗ Learning
✗ Problem Solving
✗ Language 56
1. Selective Attention
✗ Many competing stimuli, but only limited capacity
✗ need to focus, and select
✗ We can focus on one particular thing
✗ Attention focus is voluntary or involuntary
✗ Factors affecting attentional focus include:
✗ meaningfulness, structure of display, use of color,
intensity, …
✗ Salient visual/auditory cues facilitate focus
✗ Boldface, blinking and beeping
57
✗ Can you think of other examples?
1. Selective Attention (cont.)

➡ Design to assist attentional focus in the right place and help user:
■ attend his/her task not the interface
■ decide what to focus on, based on their tasks, interest, etc.
■ to stay focused, do not provide unnecessary distractions
➡ Use alerts (only) when appropriate!
➡ Use techniques that make things stand out like color, ordering,
spacing, underlining, sequencing and animation
➡ Avoid using too much colors just because the software allows it
➡ Avoid cluttering the interface - follow the google.com example of 58
crisp, simple design

1. Selective Attention (cont.)

✗ An example of cluttered user interface
➡ For more examples, visit <Is My Website Too Cluttered?> 59

2. Learning
✗ Two types:
✗ Procedural Learning - How to do something
✗ Declarative Learning - Facts about something
✗ Involves memorization, understanding concepts & rules and
acquiring motor skills
✗ Facilitated by analogy, structure & organization, incremental units,
and repetition
✗ Hindered by previous knowledge (move from Mac to Windows)
✗ Design implication ➡ Use user’s previous knowledge in interface 60

3. Problem Solving
✗ Thinking involves reasoning and problem solving
✗ They both are based on storage of information in LTM, then application
of knowledge
✗ Reasoning can be:
✗ Deductive - If A, then B
■ E.g: It’s Monday, therefore we have an HCI lecture!
✗ Inductive - Generalizing from previous cases to learn about new ones
■ If every bird we have ever seen has wings, we infer all birds have wings
✗ Abductive - Reasoning from a fact back to the action/state that caused it
■ If our friend, always talks too fast when she is nervous 61
➡ Friend talks too fast → infer she is nervous

3. Problem Solving (cont.)

✗ Reasoning about a UI
✗ Deductive: If I want to delete something, I must first select it
✗ Inductive: I could make text bold by selecting it and then using the
Bold command. Maybe I could italicize in the same way
✗ Abductive: Timeout on the web browser if not connected
➡ Allow flexible shortcuts
➡ Allow multiple ways of doing tasks
■ Forcing plans will bore user
➡ Have active rather than passive help 62
■ Recognize dead ends and inefficient methods

4. Language
✗ Rule-based
✗ How do you make plurals?
✗ Productive
✗ We make up sentences
✗ Key-word and positional
✗ Patterns
✗ Should systems have natural language interfaces?
63
5
The Human Performance
Human Performance
✗ Humans position themselves on the speed-
accuracy trade-off in a manner that is both
comfortable and consistent with their goals
✗ We may do multiple task, such as using computer,
taking with friends and listen to the music
✗ Human performance is
✗ correlated to their reaction time
✗ affected by emotions
✗ prone to errors
✗ subject to individual differences 65

Human Performance - Reaction Time

✗ Human performance is correlated to their reaction time
✗ Reaction time is defined as the delay between the occurrence of a
single fixed stimulus and the initiation of a response assigned to it
✗ Reacting approximate value of
✗ 150 ms (auditory),
✗ 200 ms (visual),
✗ 300 ms (smell),
✗ 700 ms (pain)
✗ Design implication ➡ Revisit your design if you’re measuring 66
significantly larger reaction time

Human Performance - Emotions

✗ Human performance is also affected by emotions
✗ Emotional response to situations affects how we perform:
✗ Positive emotion → creativity, solve complex problem
✗ Negative emotion → in narrow, focused thinking
✗ Relax → easy to solve problem
“Negative affect can make it harder to do even

easy tasks; positive affect can make it easier to
do difficult tasks.” — D. Norman 67
Human Performance - Errors

✗ Human performance is prone to errors
✗ Two types of error:
✗ Slips
■ right intention, but failed to do it right
■ causes: poor physical skill, inattention etc.
✗ Mistakes
■ wrong intention
■ cause: incorrect understanding
✗ Humans create mental models to explain behavior
✗ If wrong (different from actual system) errors can 68
occur
Human Performance - Errors (cont.)

✗ Typically errors are reported as the ratio of
incorrect per all trials, often reported as a
percent (x100)
✗ Human error is often studied by examining
how and why errors occur, for example:
✗ Is this the failure due to human error?
✗ Was there a control problem with the input
device?
✗ Were errors due to the user pressing keys
adjacent to correct keys?
69
✗ Were the keys too small?
Human Performance - Individual Differences
✗ Assumption as everyone has similar

capabilities and limitation -> make
generalizations.
✗ But humans are not all the same
✗ Individual differences can be”
✗ Long term: sex, physical capabilities and
intellectual abilities
✗ Short term: stress, fatigue, health
✗ Changing through time: age 70

Today’s Agenda
01 More About UCD
02 All About Human
Comic Relief :)
Resources & More…
Textbooks Chapters:
✗ Human-Computer Interaction - Ch1
Credits:
Thanks!
Any questions?
You can find me at:
✗ Microsoft Teams

Understanding Users and

User Studies I
~ Lecture 6 ~
Samar Alsaleh
Summer 2021
Today’s Agenda
01 All About Usability Testing
02 Usability Testing ‘How-To’
Today’s Agenda
What Do You Remember About UCD?
✗ Most common method for UCD is Usability Testing
✗ “Testing” might be the wrong word
✗ exploratory more often than evaluative
■ Exploratory = qualitative
■ Evaluative = quantitative
✗ Combinations can be very effective
✗ Like all of UCD, issue-driven
✗ Scalable, from “discount” approaches to large validation exercises
✗ Watching the user DOING stuff 4
✗ immersion in the task is critical!

So What is Usability Testing?

✗ The process by which the human-computer interaction
characteristics of a system are measured, and weaknesses are
identified for correction
✗ It involves evaluating a product or service by testing it with
representative users
✗ Typically, during a test, participants will try to complete typical
tasks while observers watch, listen and takes notes
✗ The end goal is to identify any usability problems, collect
qualitative and quantitative data and determine the participant's
satisfaction with the product 5

User vs. Usability Testing
6
?✗ Can you identify which one is which?
Usability Testing Goals
✗ The goals of usability testing vary by study, but they usually include:
✗ Ultimately, an effective usability test will answer the important

question of “Have we built the right product?” 7
Usability Testing Benefits

✗ Usability tests help us to
➡ Know difficult areas where the user gets stuck or confused
➡ Learn things like the user’s behavior, needs, and expectations
➡ Learn if participants are able to complete specified tasks
successfully
➡ Identify how long it takes to complete specified tasks
➡ Find out how satisfied participants are with your product
➡ Identify changes required to improve user performance and
satisfaction
➡ Analyze the performance to see if it meets your usability
8
objectives

Does it Really Help?

✗ The term "user-friendly" was coined in 1982 at Apple
by Don Norman (the grandfather of UCD)
✗ Today, users experience (UX) and UCD are as strong
as ever at Apple
✗ Not only do apple follow strict human interface
guidelines, they conduct extensive usability testing
✗ For example, developers at Apple made a few
tweaks in Apple’s Mac UI after usability testing
✗ As the outcome of it, the company got 90% fewer
support calls!
9
✗ So YES, it does really help :)

Core Elements of Usability Testing

✗ There are many different types of usability testing, but the core
elements in most usability tests are:
10
Flow of Information
✗ A usability-testing session involves a
participant and a facilitator who gives
tasks to the participant and observes
the participant’s behavior
✗ The facilitator administers tasks to the
participant
✗ As the participant performs these tasks,
the facilitator observes the participant’s
behavior and listens for feedback
✗ The facilitator may also ask followup
questions to elicit detail from the 11
participant
Today’s Agenda
Usability Testing Process
✗ To run an effective usability test, you need to:
1. Come up with a test plan
2. Recruit/Choose your test participants
3. Perform/Conduct the test
4. Analyze/Document/Report the findings
5. Plan the revision
13

1
The Plan
Planning a Usability Test
✗ One of the first steps in each round of usability testing is to develop
a plan for the test
✗ In this phase of the usability testing process, the team
✗ identifies the scope,
✗ defines goals,
✗ designates tasks,
✗ chooses the metrics to examine, and
✗ delegates testing roles
15

Elements of a Test Plan - The Scope
✗ Define the scope of work

✗ Indicate what you are testing:
✗ Give the name of the Web site, Web application, or
other product
✗ Decide the features and functionalities that we
want to test
✗ Specify how much of the product the test will cover
■ e.g. the prototype as of a specific date; the
navigation; navigation and content 16

Elements of a Test Plan - The Objectives
✗ Provide a road map on how to conduct the

session
✗ Answers to the below questions can provide
clarity to define the objective of the session.
✗ What do we want to achieve through this test?
✗ What kind of insights do we expect?
✗ What do we want to show to our stakeholders?
17
Elements of a Test Plan - The Tasks

✗ The tasks in a usability test are realistic activities
that the participant might perform in real life
✗ Create lists of tasks or questions that a typical user
should be able to complete in the designated time
(say an hour)
✗ Tasks should not be too simple nor too difficult to
accomplish
✗ Some examples:
✗ Find a concert show you want to see
✗ Purchase tickets online 18
✗ Find directions to the venue

Elements of a Test Plan - The Metrics

✗ This is the most important step because we have to measure
the usability of the application based on the user feedback
✗ Metrics can be:
✗ Subjective
■ Include the questions you are going to ask the participants
➡ prior to the sessions (e.g., background questionnaire)
➡ after each task scenario is completed (ease and satisfaction
questions about the task)
➡ when the sessions is completed (overall ease, satisfaction and
likelihood to use/recommend questions)
✗ Quantitative:
■ Indicate the quantitative data you will be measuring in your test 19
(e.g., successful completion rates, error rates, time on task)
Elements of a Test Plan - The Roles
✗ Include a list of the staff who will participate in the

usability testing and what role each will play
✗ The usability specialist should be the facilitator of
the sessions
✗ The usability team may also provide the primary
note-taker
✗ Other team members should be expected to
participate as observers and, perhaps, as note-
takers 20

2
The Participants
Recruiting Usability Test Participants
✗ Screening and recruiting is arguably the most
difficult part of running a usability test
✗ With a usability test, the participants should
resemble your actual user base as closely as possible
✗ You shouldn’t be testing any random person
✗ Participants are chosen based on their
✗ demographics (age, sex, location, …) and
✗ the probability of them using the application i.e target
customer
✗ Ideally, we should recruit both experts and 22
beginners for this testing for better insights
Reaching Your Target Audience
✗ Identify how are you going to reach

your target audience
✗ What will you give as a gratuity?
✗ e.g. money, gift card, discount, tickets,
lifetime access to your product, etc.
➡ Make sure that the offer is fair for
what you’re asking
✗ It’s not recommended to use a
company’s own employees for a
usability test (why?) 23

How Many Participants are Enough?

✗ The number of participants needed for a usability test
varies depending on the type of study
✗ For a typical qualitative usability study of a single user
group, it is recommend to use five participants
✗ 5 users of a given target audience lets you find almost as many
usability problems as you'd find using many more participants
✗ Quantitative studies (aiming at statistics, not insights)
require a higher number to get statistically significant
numbers
✗ Note: If you plan to do iterative (repeated) usability testing,
you will need to recruit a new group for each test 24
✗ Factor that into your planning, recruitment, and budgeting
Screening Participants
✗ How would you make sure they come from

the target audience?
➡ Make a screener!
✗ Participant screeners are composed of
questions that will help those recruiting for
your test to rule individuals in or out of
contention
✗ They may be as simple as gender and age
or as complex as your target audience
25
dictates

3
The Test
Running a Usability Test
✗ Once you have planned your test and

recruited your test participants, it’s time
to get ready to conduct your test
✗ To do so, you’ll want to:
➡ think about which moderating technique
is right for your test,
➡ set up your space and equipment, and
➡ make sure that you do a pilot test prior
to testing with actual participants 27

Choosing a Moderating Technique

✗ Some common moderating techniques include:
✗ Silent observation
■ Watch the user without talking
■ Good to avoid biasing users, or rationalizations by user
✗ Think-aloud
■ Watch the user and ask them to explain actions
■ Good to understand mental model, goals, intentions
✗ Constructive interaction
■ Watch two users work together
■ More normal, comfortable than Think-aloud
➡ It’s important to weigh the pros and cons when you are 28
trying to decide which technique to use

Conducting the Session
✗ Introduce yourself and explain the process to the user

✗ User will be asked to perform a set of pre-defined tasks
(but do not tell them how many or how long each will take)
✗ Speak only to give a new task and take notes during the
process
✗ Collect basic data, for example:
✗ Could the user complete the task?
✗ Did they need help?
✗ Track how much time it took them
✗ Note any stumbling blocks (problems/obstacles)
29
✗ Overall observations, commentary
Post Session Summary & Survey
✗ Once the usability test session is over, you need to prepare:

✗ A short summary of the session and the results
■ Outline specific problem areas and any unexpected results
■ Include any personal observations
✗ A survey (online or in paper) form for the user to fill out
after they have completed the testing process
■ Questions should include what the user thought the
interface was like: graphics, logic, content, navigation, and
their overall satisfaction
■ Gather data about overall effectiveness of the interface in
relation to the goals of each task 30

Example Survey Questions

✗ Demographic Questions
✗ What is your gender? age? computer skill level
✗ Simple Post-Test Questions
✗ What are two things about the design that you really
liked/didn’t like?
✗ Ease of Use Questions
✗ Can you easily get back to a previous page? Is the text
is easy to read?
✗ Provoked Emotions Questions
✗ Did you find this software: enjoyable, entertaining, 31
helpful, challenging, boring, annoying, or frustrating?

Best Test Practices

✗ Treat participants with respect and make them feel comfortable
✗ Remember that you are testing the site not the users
✗ Remain neutral – you are there to listen and watch
✗ If the participant asks a question, reply with “What do you think?” or
“I am interested in what you would do.”
✗ Do not jump in and help participants immediately and do not lead
the participant
✗ If the participant gives up and asks for help, you must decide whether to
end the scenario, give a hint, or give more substantial help
✗ Decide how much of a hint you will give and how long you will allow the 32
participants to work when they are going down an unproductive path

Best Test Practices (cont.)

✗ Take good notes! Note-takers should capture what the participant did
in as much detail as possible as well as what they say (in their words)
✗ The better the notes are that are taken during the session, the easier the
analysis will be
✗ Measure both performance and subjective (preference) metrics
✗ People’s performance and preference do not always match. Often users
will perform poorly but their subjective ratings are very high. Conversely,
they may perform well but subjective ratings are very low.
✗ Performance measures include: success, time, errors, etc
✗ Preference measures include: user's self reported satisfaction and
comfort ratings 33

4
The Findings
Analyzing The Results
✗ At the end of usability testing you will have collected
several types of data depending on the metrics you
identified in your test plan
✗ Start by analyzing each test one at a time and identify any
usability issue
✗ Where did they get stuck? Why did they get stuck? How
long did it take them to figure things out?
✗ Then you can start to compare tests side by side
✗ Did all of the users have the same problems? What similar
feedback did you get from participants?
✗ Look for trends and keep a count of problems that
occurred across participants
35
➡ If you can’t interpret the results, then your tests are
essentially useless!

Recording Collected Data
Quantitative Data: Qualitative Data:

✗ Enter data in a spreadsheet to record ✗ Record data related to:
it or make calculations such as: ✗ Observations of participants pathways
✗ Success rates, ✗ Problems experienced
✗ Task time, ✗ Comments/recommendations
✗ Error rates, and ✗ Answers to open-ended questions
✗ Satisfaction questionnaire ratings
✗ Make sure your problem statements
✗ Add participant’s demographic data are exact and concise, for example:
so that you can see if any of the data
✗ Good: Clicked on link to Research
differ by the demographic variables instead of Clinical Trials.
✗ Make sure you identify the task ✗ Poor: Clicked on wrong link (or) Was 36
scenarios for each of the metrics confused about links.
Reporting Usability Test Results

✗ Focus primarily on your findings and recommendations
that are differentiated by levels of severity
✗ Critical: If we do not fix this, users will not be able to
complete the scenario.
✗ Serious: Many users will be frustrated and may give up if
we do not fix this.
✗ Minor: Users are annoyed, but this does not keep them
from completing the scenario. This should be revisited
later.
✗ Include the pertinent information from the test plan
and present just enough detail so that the method is
identifiable 37
Writing the Usability Test Report

✗ In general, your report should include
✗ a background summary,
✗ your test methodology,
✗ test results,
✗ findings and recommendations.
✗ Keep the sections short, use tables to display the
metrics, and use visual examples to demonstrate
problem areas, when possible
✗ There are a number of report templates that you
may adapt to assist you in reporting your findings 38
➡ Check the ones here!

5
The ReDesign
So What’s Next?
✗ For a usability test to have any value, you must use what you learn
to improve the interface
✗ You may not be able to implement all the recommendations as
developing any product is a series of trade-offs in which you balance
schedule, budget, people's availability, and the needed changes
✗ If you cannot implement all the recommendations, develop
priorities based on fixing the most global and serious problems.
✗ As you prioritize, push to get the changes that users need
✗ Remember that the cost of supporting users of a poorly-designed
interface is much greater than the cost of fixing the interface while 40
it is still being developed

Make Changes, Rinse, and Repeat

✗ Usability testing is an ongoing process;
Testing should be viewed as a continuous
loop; there is no start and finish
✗ It’s not just meant for the initial launch of a
website or a redesign; You’ll need to make
design changes that improve the user
experience based on your findings
✗ But once those changes have been made,
you can’t just assume that everything is fixed
✗ Continue running usability tests to see if
there has been a noticeable improvement in 41
the user experience

Final Critical Tips
✗ For much more efficient testing:

✗ Use clear and neutral instructions
✗ Keep an eye out for visual cues
✗ Compensate participants for their time
✗ Keep an even tone
✗ Remain silent as much as possible
✗ Don’t spend a fortune
42

Today’s Agenda
Comic Relief :)
44
To Do:
Follow the process you learnt today to evaluate the
existing system in your mini-project (part of P1 report)
Check out the following articles:
Usability Testing 101
Usability Testing Guide
Watch the following mini video series (< 3 min each)
1st Pillar of Usability Testing: Typical Users
2nd Pillar of Usability Testing: Appropriate Tasks
3rd Pillar of Usability Testing: Skilled Facilitator
45
Resources & More…

Textbooks Chapters:
✗ Human-Computer Interaction - Ch6 and Ch9
Credits:
✗ Usability.gov ➡ the leading resource for UX
✗ NNgroup.com ➡ world leaders in research-based UX
46
Thanks!
Any questions?
You can find me at:
✗ Microsoft Teams

حاسب وانسان

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

حاسب وانسان

Uploaded by

Copyright:

Available Formats

CS487 - Human Computer Interaction

What This Course is…

➡ The success of most systems today, especially consumer products,

What This Course is NOT…

Textbook and Course Materials

* Lecture notes and additional reading material will be available on Blackboard

10% Mini-Project - Weeks (Varies)

10% Quizzes - Weeks 2 & 6

20% Mid Exam 1 - Week 4

20% Mid Exam 2 - Week 7

40% Final Exam - Week 8

Students are expected to participate and contribute to the

Please, mute your microphone if you’re not using it!

Late/missing submissions are subject to grade reduction

Students must attend at least 75% of the total lectures

Check detailed course syllabus on blackboard!

How Did we Get Here?

HCI More Formally

Why is This Important?

How Do We Improve Interfaces?

How Do We Know a UI is Good?

Above All Else…

Six Aspects of HCI

HCI’s Impact on Society

HCI’s Impact on Culture

HCI’s Impact on Economy

Classical HCI Contemporary HCI

A Walk Through Time

All cognition happens

A Walk Through Time

Classical HCI Contemporary HCI

Maybe cognition doesn’t all

A Walk Through Time

We need to take culture and

Characteristics of a Good Project

✗ P1 - Existing system evaluation - (Week 2)

Deliverables Details (cont.)

Deliverables Details (cont.)

General Reports Guidelines

Finally, Project Grading

Semester Timeline & Important Due Dates

CS487 - Human Computer Interaction

Understanding the Problem

Why is Usability Important?

✗ A GOOD user-interface can: ✗ A BAD user-interface can:

How Hard Is It?

✗ It is not simple to make usable user interfaces

How to Ensure Usability?

Principles “Design to avoid errors.”

Guidelines, “Don’t offer invalid menu choices.”

Why Principles & Guidelines?

Golden Rules and Heuristics

UI Design Principles (Dix et al.)

Golden Rules of UI Design (B. Shneiderman)

✗ Eight rules for good interaction design:

Usability Heuristics (J. Nielsen)

Fundamental Principles (D. Norman)

Application of These Principles

✗ In doing design and implementation of

Examples of Bad Designs

“Good Design” Means

“Good Design” Is Not…

Methodologies, Traditional vs User-Centered (cont.)

Methodologies, Traditional vs User-Centered (cont.)