Human-Computer Interaction (HCI)

Lecture 1: Introduction
March 15, 2024
 Class
Goals
• Introduce ourselves to each other

• Motivate the field of HCI

• Introduce with the HCI course

 What the class will look
like
• Lectures
• Readings (articles and book chapters)
• Assignments
• Presentations/seminars
• Practical case study
• Group Projects

Lecture Sessions will be Interactive !

Device-free – for your own
sake!
 Communicati
on
Everything of this course will be handled by

G-classroom !
– A closed and secret group will be created soon.
– All kind of course material will be delivered.
– Any kind of instruction, notice, CT results will be publish.
– Any query related to this course will be placed there!

For any personal issue:

– E-mail to: [email protected]
– Subject: HCI: Query

– Visit my room at 180 (BOU SST

@Gazipur)
Course
Elements
Lectures
Basic design & usability concepts
Examples of good & bad designs
Get insights of social dynamics,
privacy, accessibility
Lab sessions
Exercise in practice how to gather
information about users’ needs &
how to design and test it
Assignments
Apply your knowledge in a concrete
use case

Challenge your creativity

Which means
…
To be able to DESIGN:
How the user interaction
and experience should
work and look?

To be able to SELECT:
What user interaction design
is best for a given purpose in
a context?

To be able to EVALUATE:
How good a specific user
interaction is?
HOW PEOPLE
INTERACT WITH
COMPUTERS?
Dashboard
s

8
Wearable
s
 Sensing Affect
Blood Volume
Pressure (BVP)
earring

Interactive Pillow
as a TV remote
control
Galvanic Skin
Response
(GSR) rings
and bracelet
Speech, Mobile & Augmented
Interaction “Minority Report” (2002)

“Her” (2014)

“Star Trek: In to the Darkness” (2013)

“Avengers”
(2012)

“Star Trek: TOS” (1967)

Virtual Reality
Reality

14
 Interactive
Mimio Workspaces
Stanford Interactive Workspaces Project

BendDesk
 What is HCI?

• What is a user interface?

• Why do we care about design?

• We see this all the time.

– What’s good about the design of this error box?
• The user knows there is an error
– What’s poor about the design of this error box?
• Discouraging
• Not enough information
• No way to resolve the problem (instructions or contact info)
 Definition of 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 major phenomena surrounding them.

• ACM SIGCHI Curricula for HCI (Hewett et al. 1992)

http://sigchi.org/cdg/cdg2.html
 Definition of HCI

• HCI studies how a computer systems is designed more

practically, more easily, and more intuitively; and it
also studies how users interact with computer
systems.

• HCI can be viewed as two powerful information

processors (human and computer) attempting to
communicate with each other via a narrow-bandwidth,
highly constrained interface (Tufte, 1989)
WHY
HCI?
Typical
Frustrations
• Can’t figure out how to do simple
things

• Many not frequent use functions

• Many hidden functions

• Operations outcome not visible

• Can’t remember combinations
of digits * #
• How do we know whether
it worked
• How can we remember that
this option is ON
…
elections

The sample ballot

looked different
… Additional Context
Limitations
• People vote infrequently
• Rushed, uncomfortable
circumstances
• Elderly
 Good UI Design is
Important
• Examples of bad UI are easy
– Try to find examples of good UI

• Good UI (very subjective):

– Easy, natural & engaging interaction
– Users can carry out their required tasks
– Accounts for human limitations

• Usefulness is often context-dependent!

 HCI is Important
• It is not just ‘how big should I make buttons’ or ‘how to layout menu
choices’

• (Good/Bad) UI can affect

 Effectiveness
 Productivity
 Satisfaction
 Safety
 Learnability

• Example: a car with poor HCI

 My
• Choice
iPod by
Apple
Computers Take 5 minutes
• Pros: for everyone to write
– portable down
one common
– power device
– ease of use design
with choices
substantial
– # of controls discuss with HCI
• Cons: neighbor the pros and
cons. Howanddoes it affect
the
– scratches
you or other users?
easily
– proprietary
Why HCI?
 HCI Tools
• Sound
• 3D
• Animation
• Video
• Devices
– Size (small->very large)
– Portable (PDA, phone)
– Plasticity
• Context sensitive/aware
• Personalizable
• Ubiquitous
 Interface Design
•
Goals
Goals:
– Usability
– Universality
– Usefulness

• Achieved by:
– Planning
– Sensitivity to user needs
– Devotion to requirements analysis
– Testing
 Bad
Interfaces
 Encumbering
 Confusing
 Slow
 Trust

• What makes it
hard?
– Varies by culture
– Multiple platforms
– Variety of users
• What’s wrong with each?
– Who is affected
– Impact
• What’s a redesign solution?
Bad Interface may cause users
to
• need more time for performing their tasks

• make more errors

• feel dissatisfied

• need more time for learning how to use the software

• not learn/use the full functionality of the software

• (if given a choice:) refrain from using the software

 Requirements
1. Analysis
Ascertain users’ needs
2. Ensure proper reliability
3. Promote appropriate standardization, integration,
consistency, and portability
4. Complete projects on schedule and within
budget
Ascertain User’s
Needs
• Define tasks
– Tasks
– Subtasks
• Frequency
– Frequent
– Occasional
– Exceptional
– Repair
• Ex. difference between a space satellite,
car engine, and fighter jet
 Reliabilit
• y
Actions function as specified
• Data displayed must be correct
• Updates done correctly
• Leads to trust! (software, hardware, information)
• Privacy, security, access, data destruction, tampering
 Standardization,
Integration,
•
Consistency,
Standardization –
Portability
user-interface
common across multiple features
applications
– Apple
– Web
– Windows
• Integration – across application packages

• Consistency – common action sequences, terms,

units, layouts, color, typography within an application

• Portability – convert data and interfaces across multiple

hardware and software environments
 Cultural and
International
• Language
Diversity
• Date / Time conventions
• Weights and Measures
• Left-to-right
• Directions (!)
• Telephone #s and addresses
• Names, titles, salutations
• SSN, ID, passport
• Sorting
• Icons, buttons, colors
• Etiquette
• Evaluation:
– Local experts/usability studies
 Users with
•
Disabilities
Federal law to ensure access to IT, including computers
and web sites. (1998 Amendment to Rehabilitation Act)
• Disabilities
– Vision
• Blind
• low-vision
• color-blind
– Hearing
• Deaf
• Limited hearing
– Mobility
– Learning
• Keyboard and mouse alternatives
• Color coding
• Font-size
 Users with
•
Disabilities
Contrast
• Text descriptors for web images
• Screen magnification
• Text to Speech (TTS) – JAWS (web pages)
– Check email on the road, in bright sunshine, riding
a bike
• Speech Recognition
 Elderl
• Reduced y
– Motor skills
– Perception
– Vision, hearing, touch, mobility
– Speed
– Memory
• Other needs
– Technology experience is varied (How
many grandmothers use email? mothers?)
– Uninformed on how technology could help
them
– Practice skills (hand-eye, problem solving,
etc.)

• Touch screens, larger fonts,

louder sounds
 Childre
• n
Technology saviness?
• Age changes much:
– Physical dexterity
• (double-clicking, click and drag, and small targets)
– Attention span
– (vaguely) Intelligence
• Varied backgrounds (socio-economic)
• Goals
– Educational acceleration
– Socialization with peers
– Psychological - improve self-image, self-confidence
– Creativity – art, music, etc. exploration
 Childre
• n
Teenagers are a special group
– Next generation
– Beta test new interfaces, trends
– Cell phones, text messages, simulations, fantasy games,
virtual worlds
• Requires Safety
• They
– Like exploring (easy to reset state)
– Don’t mind making mistakes
– Like familiar characters and repetition
– Don’t like patronizing comments, inappropriate humor
• Design: Focus groups