WEEK 2

HCI OVERVIEW

HCI101 – HUMAN-COMPUTER INTERACTION

• Define the overview and meaning of HCI
• Enumerate the scope, goals, and benefits of learning HCI.
• Understand the relevance of HCI and why it is important
• Explain the design rules for HCI
• Elaborate on its principles and guidelines.

2
WEEK 2: HCI OVERVIEW

• Human: Individual user, a group of users working together, a

sequence of users in an organization
• Computer: Desktop computer, large-scale computer system, Pocket
PC, embedded system (e.g., photocopier, microwave oven),
software (e.g., search engine, word processor)
• User interface: Parts of the computer that the user contacts with
• Interaction: Usually involve a dialog with feedback & control
throughout performing a task (e.g., user invokes “print” command
and then interface replies with a dialog box)

3
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

4
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Conceptual Framework Overview

• The image presents a conceptual framework for Human-

Computer Interaction HCI.
• Focus areas include social organization, human-machine
fit, and adaptation.
• Highlights the importance of user-centered design in HCI.
• Core principle: Effective interaction systems must balance
human factors and technological capabilities.

5
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Essential Elements in HCI

• Dialogue and Communication C2, C3, C5 Central to

effective interaction, emphasizing information exchange.
• Input and Output Devices C1 Importance of physical
and cognitive compatibility.
• Ergonomics: Ensures user comfort and accessibility in
interface design.
• Integration: Balancing technical functionality with user-
friendly design for seamless interaction.

6
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Development Process in HCI

Title: Iterative Design and Evaluation

• Development Process D1, D2, D3, D4 Involves iterative

design, implementation, and evaluation.
• Case Studies and Evaluation Techniques: Practical,
evidence-based approach to refining systems.
• User Feedback: Continuous adaptation based on real-
world testing and user input.
• Outcome: Creation of HCI systems that effectively meet
user needs through dynamic refinement.

7
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Key Takeaways

• The framework provides a comprehensive view of HCI,

integrating social, technical, and ergonomic factors.
• Emphasizes the importance of dialogue, user-centered
design, and iterative development.
• Highlights the need for continuous feedback and
adaptation to create effective and intuitive human-
computer interactions.

8
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Human Computer Interaction

o Definition: Interaction between humans and computers,

emphasizing usability and user experience.
o Importance: Crucial for designing intuitive and accessible
technology.
o Scope: Encompasses various fields such as psychology, design,
and computer science.

9
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Human Computer Interaction

∙ What is HCI?
o Definition: Study and practice of designing interactive digital
products.
o Focus: Enhancing user satisfaction by improving usability,
accessibility, and pleasure.

10
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Human Computer Interaction

• The term HCI was adopted in mid-1980s: Association for

Computing Machinery (ACM): “discipline concerned with the
design, evaluation & implementation of interactive computer
systems for human use & with the study of major phenomena
surrounding them” (1992)
• Carroll: “HCI is the study and practice of usability. It is about
understanding and creating software and other technology that
people will want to use, will be able to use, and will find effective
when used.” (2002)

11
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Scope, Goals, and Benefits of Learning HCI

∙ Scope
o Includes user interface design, user experience, interaction
design, and accessibility.
∙ Goals
o Create user-friendly interfaces.
o Improve user satisfaction.
o Enhance productivity.

12
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

HCI Goals Example

Use Microsoft WORD as an example:

13
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Scope, Goals, and Benefits of Learning HCI

∙ Benefits
o Better product design.
o Improved user experience.
o Increased marketability of products.

14
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

HCI Benefits
• Gaining market share
• People intend to buy/use products with higher usability e.g.,
Google’s search engine has the largest market share because it is
easy to use with higher efficiency
• Improving productivity
• Employees in a company perform their jobs in a faster manner e.g.,
Workers in a mainland company needed to press a lengthy sequence
of buttons in performing a task. An IAS student helped to increase
their productivity via writing a batch program for the button pressing
operation e.g., Intranet can increase employees’ efficiency
15
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

HCI Benefits
• Lowering support costs
• If the product is not usable, calls to customer support can be
enormous e.g., If a washing machine is difficult to use even after
reading the instruction manual, many users will call the
customer service and the cost per call can be over $100
• Reducing development cost
• Avoid implementing features users don’t want and creating
features that are annoying or inefficient e.g., If there are too
many unnecessary confirmation dialog boxes in using a word
processor, it is likely this product needs to be redeveloped
16
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Why is HCI Relevant or Important?

• HCI takes advantage of our everyday knowledge of the world to
make software and devices more understandable and usable for
everyone. For example, using a graphic of a miniature folder in a
computer’s interface helps the user understand the purpose of the
folder, as everyone has experience with real paper folders in their
everyday lives.
• Ultimately, if a system is well designed with HCI techniques, the
user should not even have to think about the intricacies of how to
use the system. Interaction should be clear, intuitive, and natural.

17
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Relevance and Importance of HCI

•Relevance
o Vital in today's tech-driven world.
o Ensures technology is user-centric.
• Importance
o Enhances product usability.
o Reduces errors and increases efficiency.
o Improves accessibility for diverse user groups.

18
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Design Rules for HCI

∙ Design Principles
o Consistency: Uniformity in design.
• Consistency has been one of the cardinal rules of design. If
the interface is consistent (even if poorly designed), the end
user can adapt to it. Is consistency as important as it
appears?
• There are several types of consistency.
- Internal consistency: the same appearance, meaning and
operation holds true for all the user’s interactions within the
same application.
o

19
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

20
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

• Analogical consistency: the correspondence between the system’s

representation and the real-world phenomenon in terms of
appearance, meaning and operation.

21
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

• External consistency: the same appearance, meaning and

operation holds true for the user’s interactions across applications.
Example :-Use of Cut, Copy, Paste shortcut keys has same
operation in all the applications.

22
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Design Rules for HCI

∙ Design Principles
o Feedback: Providing users with clear responses.
• Control and feedback go hand in hand. Providing feedback is
probably the most accepted guideline in the design of any
interaction.
• However, it is important to understand the rationale for each
specific feedback instance.
• Feedback can support three important factors of user activity:
motivation, control and learning.

23
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Design Rules for HCI

∙ Design rules for feedback to promote control
• Feedback should correspond to goals and intentions.
• Feedback should help evaluate goal accomplishment.
• Feedback should be sufficiently specific to control user
activity.
• Feedback should help develop accurate mental models.
• Feedback should fit the task representation (verbal and
visual).
• Feedback should fit the type of behavior (controlled,
automatic).

24
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Design Rules for HCI

∙ Design Principles
o Visibility: Ensuring essential elements are noticeable.
o Affordance: Design elements suggesting their function.
∙ Examples
o Button design: Clear labels and feedback when clicked.
o Navigation menus: Consistent layout across pages.

25
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Principles and Guidelines of HCI

• Principles
o User-Centered Design: Involving users throughout the design process.
o Flexibility: Accommodating a wide range of users.
o Efficiency: Minimizing user effort for maximum output.

∙ Guidelines
o Heuristic Evaluation: Assessing usability through expert reviews.
o User Testing: Conducting tests with real users.
o Accessibility Standards: Following WCAG guidelines.

26
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Principles and Guidelines of HCI

• The Web Content Accessibility Guidelines (WCAG) are a set of

internationally recognized standards designed to make web content
more accessible to people with disabilities. These guidelines are
developed by the World Wide Web Consortium (W3C) and are an
essential part of creating inclusive digital experiences.

27
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Principles and Guidelines of HCI

Key Principles of WCAG
1. Perceivable: Information and user interface components must be
presentable to users in ways they can perceive.
2. Operable: User interface components and navigation must be
operable.
3. Understandable: Information and the operation of the user interface
must be understandable.
4. Robust: Content must be robust enough to be reliably interpreted by a
wide variety of user agents, including assistive technologies.

28
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Principles and Guidelines of HCI

• Examples of WCAG Guidelines

• Text Alternatives: Providing alternative text for non-text content.

• Keyboard Accessibility: Ensuring all functionality is available from a

keyboard.
• Readable Content: Making text content readable and understandable.

• Adhering to WCAG guidelines helps ensure that websites are

accessible to a wide range of users, including those with visual,
auditory, physical, speech, cognitive, language, learning, and
neurological disabilities.
29
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

Examples and Best Practices

∙Example Project
o Redesigning a website: Starting with user research, creating
wireframes, conducting usability tests, and iterating based on
feedback.
∙ Best Practices
o Involve users early and often in the design process.
o Continuously test and refine the interface.
o Stay updated with the latest HCI research and trends.
30
HCI101 – HUMAN-COMPUTER INTERACTION
WEEK 2: HCI OVERVIEW

References

1. Norman, D. (2013). The Design of Everyday Things. Basic Books.

2. Krug, S. (2014). Don't Make Me Think: A Common Sense Approach to
Web Usability. New Riders.
3. Various research papers from ACM SIGCHI Conference on Human
Factors in Computing Systems.
o .

31
HCI101 – HUMAN-COMPUTER INTERACTION