Human Computer Interaction

Lecture 1
Introduction to HCI and UX Design:
Why? What? When? How? Who?
Ahmed Seffah, Salsabeel Alfalah

1/27
 Course
Information
Syllabus
 available on blackboard

Teaching methods
• PP Presentations: available
on blackboard
• Videos (interactive)
• Group work
• Assignments
• Apply your knowledge in a
specific use case
• Assessment
• Common assessment 15%
• Project 60%
• Final exam 25%

2
 The course is problem-based learning

Three one, present yourself and your

expertise

things to The course is a multidisciplinary design

do before bootcamp that aims to creating and

validating a UI/user experience, bring
your ideas for team projects
we
start… The course is project-based, form your
team
 Definition of a user interfaces

Examples of bad and good UIs

Today
lecture, Principles of UI design and
evaluation
outlines Introduction to user-centered
design

Usability
 Why human concerns and experiences are
important in software and systems design,
engineering and innovation

What really works for users meaning easy to

use and learn?
Objectives for
this course What are the HCI methods and tools for
creating usable and human-centric interactive
systems and user interfaces (based on 25 years
industry practices and academic research?

Beyond usability and user interfaces design,

how to apply HCI design and user research
methods as a tool for software engineering
innovation (Design thinking)?
 The course is appropriate for
both non-computer science as
What this well as software engineering
course is and engineering students
about and
what is not
This course is also an
covered in introduction to HCI, and
this course? hence suitable for students
interested in research, HCI is a
core field of research in ICT, CS
and Software Engineering
What Open the box, open your eyes and work
this with your team to master the big picture
of HCI in software systems
course is The course presents a holistic design
methodology for creating software
about systems that people want, buy and can
use
and what Learn from your future users and
is not incorporate their experience in the
design, engineering and innovation loop
covered
Engage stakeholders and the community
in this in your creative process of building
technology that people can use
course?
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?

8
HCI- Definition
• Human–computer interaction (HCI) “involves
the study, planning, design and uses of the
interaction between people (users) and
computers”

• HCI is also sometimes referred to as human–

machine interaction (HMI), man–machine
interaction (MMI) or computer–human
interaction (CHI)
HCI- Definition
• We don’t necessarily see a single user with a desktop computer.

• By USER we may mean: an individual user, a group of users working together, or a sequence
of users in an organization. Each dealing with some part of the task or process. The user is
whoever trying to get the job done using the technology.

• By COMPUTER we mean any technology ranging from the general desktop computer to a
large-scale computer system, a process control system or an embedded system. The system
may include non-computerized, including other people.

• By INTERACTION we mean any communication between a user and computer, direct or

indirect.
(Dix et al., 2004, p.4)

Dr. Salsabeel AlFalah

Human Computer
Interaction (HCI)

• A discipline concerned with the

• Design
• Implementation
• Evaluation
of interactive computing systems
for human use
HCI

• Concerned with the process of design

• not only the what, but also the how & the why of interface design

• Part of the larger discipline of Human Factors or Human Factors

Engineering
• known as Ergonomics
• looks at how users:
• perform activities, tasks, & jobs
• interact with systems
• use tools, machines, computers, & software
Ergonomics Definition

• Ergonomics (or human factors) is

the scientific discipline concerned
with the understanding of
interactions among humans and
other elements of a system, and
the profession that applies theory,
principles, data and methods to
design in order to optimize human
well-being and overall system
performance
13
 Ergonomics can help reduce
Dr. Salsabeel AlFalah

costs by improving safety

Differences
with related
fields-
Ergonomics
Ergonomics comprise three main
fields of research:

Organizational
Physical Cognitive
Ergonomics
 Ergonomics -
Physical

• Physical ergonomics is:

• Concerned with
human anatomy
• Concerned with
physical activity
• Important in the
medical field
 Dr. Salsabeel AlFalah

Ergonomics-
Cognitive
Cognitive ergonomics:
is concerned with mental
processes, such as memory and
reasoning, as they affect
interactions among humans and
other elements of a system
(Relevant topics include decision-
making, skilled performance,
human reliability, work stress and
training as these may relate to
human-system and HUMAN-
COMPUTER INTERACTION
DESIGN)

1
6
Ergonomics - Organizational ergonomics: is concerned
with optimizing the workplace, everything
Organizationa from teamwork to assessing teleworking
l and quality management
18
HOW PEOPLE INTERACT
WITH COMPUTERS?
What is a “User Interface”?
• The term “User Interface” refers to the methods and devices that are used to
make the interaction between machines and the humans who use them
(users) possible
• UIs can take many forms, but always accomplish two fundamental tasks:
• communicating information from the machine to the user
• communicating information from the user to the machine
What is “Designing interactive products to support
Interaction the way people communicate and interact
in their everyday and working lives”

Design Sharp, Rogers and Preece

(ID)? (2007)
User interface is around you, every where
there is human using a computing gear
Graphical user interface is the most popular, but not the only one
• Home: interactive TV, smart appliances,
• Car: e.g. dashboard, GPS, entertainment system, remote control
• Office
• Street : e.g bus stations interactive panels, ATM, mobile phones
• Hospitals : e.g medical devices
• Museums: smartphone phones based multi-language tourist guide, virtual
visit
• Critical infrastructure: e.g space shuttle and robots
• School: interactive boards and walls,
Human Computer Interface: Today and Tomorrow
Computing
Platforms
Tangible,
Wearable Sensing UI
Persuasive
Immersive
Computing

Interaction
Mobile UI
Style
GUI
Web UI
Handheld
Computing

Stationary Office
Computers
 Speech, Mobile & Augmented Interaction
“Minority Report” (2002)

“Her” (2014)

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

“Avengers” (2012)

“Star Trek: TOS” (1967)

Lora Aroyo, Web & Media Group

Lora Aroyo, Web & Media Group
 Speech, Mobile & Augmented Interaction

Lora Aroyo, Web & Media Group

Lora Aroyo, Web & Media Group
Virtual Reality

Lora Aroyo, Web & Media Group 26

 Interactive Workspaces
Mimio
Stanford Interactive Workspaces Project

BendDesk

Lora Aroyo, Web & Media Group 27

WHY HCI?
What is an interactive system and UI?

An interactive system is characterized by it user interface that:

1. Gathers the action of a single user or a group of users
2. Displays the reaction (results, errors, feedbacks) of the system

UI can take many forms, but it is always responsible of the five following
services to end users:
3. Dialog (interaction)
4. Errors and feedbacks
5. Help and support
6. Information presentation and visualization
7. Input and output devices
User interface, the past
MITRA 125 and Apple LISA, Ecole Centrale de
Lyon, France

31/27
Complex UI, good and bad consequences

European Centre for Spatial Operations (ESA, Darmstadt)

Artwork virtual world
www.osmome.com

33/27
Genomics data visualization
Project: HelmeTab smart environment
Ahmed Seffah, Jonathan Benn, and Halima Habieb Mammar. A low-cost test
environment for usability studies of head-mounted virtual reality systems. Journal of
Usability Studies, Volume 3, Issue 2. February 2008, pp. 60-73

Tablet Operator
Enhanced helmet services for
visualizing side
with sensors,
camera, detectors and sharing
data

Network

Coordination
and Control
Centre
A UI is for People that Can Used it, Should be Designed with
People
https://www.cracked.com/article_19776_6-disasters-caused-by-poorly-designed-user-
interfaces.html

https://www.sitebuilderreport.com/blog/examples-of-bad-design-in-the-real-world

Good VS Bad Design (HCI)

https://www.youtube.com/watch?v=II8TOCsoMK0

The three ways that good design makes you happy | Don Norman
https://www.youtube.com/watch?v=RlQEoJaLQRA

UX vs UI Design Explained with... BAD UX Design Memes

https://www.youtube.com/watch?v=6chQ6JZpvTQ

What is User Experience Design?

https://www.youtube.com/watch?v=Nj6x01wg2WA

What Is UX Design? - A Full Overview

https://www.youtube.com/watch?v=SRec90j6lTY

37
Bad or good user Interface?
Some error messages

Java Applet Execution

 The Broad Vision of Human Computer Interaction
http://www.sigchi.org

• HCI as a interdisciplinary research and development area concerned within several

disciplines, each with different emphases: computer science (application design and
engineering of user interfaces), psychology (the application of theories of cognitive
processes and the empirical analysis of user behavior), sociology and anthropology
(relationships between technology, work, and organization), and industrial design (human
factors in products engineering)
• HCI from the computer science and software engineering perspective is a discipline
concerned with the specification, design, evaluation and implementation of interactive
computing systems for human use and with the study of major phenomena surrounding
them.
 Who is involved in HCI?
"Because human–computer interaction studies a human
and a machine in communication, it draws from
supporting knowledge on both the machine and the
human side”.

On the human side,

communication theory, graphic
HCI
and industrial design disciplines,
On the machine side, techniques
linguistics, social sciences,
in computer graphics, operating
cognitive psychology, social
systems, programming
psychology, and human factors
languages, and development
such as computer user
environments are relevant
satisfaction are relevant. And, of
course, engineering and design
methods are relevant.

Dr. Salsabeel AlFalah

The Broad Vision of Human Computer Interaction

Task and Workflow Analysis

Interaction Devices and Styles
Semiotics Design and Prototyping
Computer
Communication Usability Testing and Empirical Science
Education Studies
Software
Cognitive Cognitive Process and User Engineering
Psychology Modeling
Industrial Design
Fine Arts Relationships between Technology,
Human Factors
Work, and Organization
Commerce Engineering
Computer Supported Collaborative
Sociology Building
Work
Engineering
Anthropology Virtual Communities
Affective and Persuasive Computing
42/27
User interface and HCI
design, some
definitions
Evaluate the Usability UI quickly? Questions to
ask

“Can’t it
“I really like be more “It doesn’t do what
it, but I don’t like I need it to do”
use it much” Google?”

“I can’t find “I don’t think it

what I’m seems
looking for” trustworthy”

“It’s very fancy, “I find it a bit

but it’s not very frustrating”
useful”
 • User friendly, cool interface!!!!! Easy to use
and easy to learn

• Usability is a high-level quality objective

[ISO 9241-11]:
“The extent to which a product (UI) can be
Usability used by specified users to achieve
specified goals (tasks) with effectiveness,
is a efficiency and satisfaction in a specified
context of use”
quality
factor • Usability is seen as one relatively
independent contribution to traditional
software quality [ISO/IEC 9126]:
“A set of software quality attributes
(quality in use factors), which bear on the
effort needed for use and on the individual
assessment of such use by a stated or
implied set of users.”
Approaches to HCI design: The story of help
on help system!!!!

Around the bush Product (UI) Orientation

Users Documentation UI Visual Metaphors

[e.g. IEEE 1063-1987] Adaptable and Adaptive UI
Training Programs Intelligent Help Systems
and Computer-Based
Wizards, Electronic Performance
Tutorials
Support Systems
Tasks-Sensitive UI

Process Development Orientation

Design Guidelines, Usability Patterns

User-Centered Design
Changing the designer mind

We need a system I designed for you a system How can I do my

for doing … tasks that offers … … tasks using …
functionalities functionalities?
We anticipate 50%
human I also tested that the system
performance performance is over 80%

Stakeholder End-User
Software Developer

- The performance
decreases (under
20%)
Fundamental Questions to Ask
When Designing

– Who will use the system? Users

profile, behavior, background and
skills level, etc.
– What kinds of tasks the users will
accomplish with the interactive
system?
– Work context and social environment
in which the system will be used
– What is technically and
technologically suitable and feasible?
(Compromise)
 Bad and good user interface
have consequences
Principles to
Adopt by
Developers Focus usability first
Principle 1 –
Changing Your
Mindset
Users has rights and is right

Design with users and for

users
The rights of a user, these are criteria for designing and evaluating a UI

John Karat from IBM proposed a set of user rights to transform the culture in which
information technology systems are designed, developed and manufactured, and to
ensure all future products are precisely what the customer expects.

• Perspective: The user is always right. If there is a problem with the use of the
system, the system is the problem, not the user.
• Installation: The user has the right to easily install and uninstall software and
hardware systems without negative consequences.
• Compliance: The user has the right to a system that performs exactly as promised.
• Instruction: The user has the right to easy-to-use instructions (user guides, online
or contextual help, error messages) for understanding and utilizing a system to
achieve desired goals and recover efficiently and gracefully from problem
situations.
• Control: The user has the right to be in control of the system and to be able to get
the system to respond to a request for attention.
 
 User-Centered Design - User is not
only right, he has rights
• Feedback: The user has the right to a system that provides clear,
understandable, and accurate information regarding the task it is
performing and the progress toward completion.
• Dependencies: The user has the right to be clearly informed about
all systems requirements for successfully using software or hardware.
• Scope: The user has the right to know the limits of the system's
capabilities.
•  Assistance: The user has the right to communicate with the
technology provider and receive a thoughtful and helpful response
when raising concerns.
•  Usability: The user should be the master of software and hardware
technology, not vice-versa. Products should be natural and intuitive
to use.
 What is Usability?

Usability is a measure of the

Summary interactive user experience
associated with a user interface, such
a website or software application.

A user-friendly interface design is

easy-to-learn, supports users’ tasks
and goals efficiently and effectively,
and is satisfying and engaging to use.
 Human-Computer Interaction is broad
domain, beyond the course scope
• The Interaction Design Foundation’s
encyclopedia chapter on Human-
Computer Interaction, by John M. Carroll,
a founder of HCI, is an ideal source for
Summary gaining a solid understanding of HCI as a
field of study:
https://www.interaction-design.org/litera
ture/book/the-encyclopedia-of-human-co
mputer-interaction-2nd-ed/human-comp
uter-interaction-brief-intro

• Keep up to date with the latest

developments in HCI at the international
society for HCI, SIGCHI: https://sigchi.org
Summary

User Experience Design?

User Experience Design (UXD) entails

conducting user research to understanding
users’ needs and preferences through user
observations, one-on-one interviews, and
creative activities that encourage users to
express their emotions, motivations, and
underlying concepts and beliefs about the steps
involved in task procedures.

By understanding the human emotions,

motivations, and beliefs that surround a task, a
user interface can be designed to accommodate
and support user behaviors in a way that users
will experience as natural and satisfying.
UX design

• What is User Experience (UX) Design?

• User experience (UX) design is the process design teams use to create products that
provide meaningful and relevant experiences to users. This involves the design of the
entire process of acquiring and integrating the product, including aspects of branding,
design, usability and function.
• What UX Designers do goes Beyond UI Design
• “User Experience Design” is often used interchangeably with terms such as “User
Interface Design” and “Usability”. However, while usability and 
user interface (UI) design are important aspects of UX design, they are subsets of it –
UX design covers a vast array of other areas, too. A UX designer is concerned with
the entire process of acquiring and integrating a product, including aspects of branding,
design, usability and function. It is a story that begins before the device is even in the
user’s hands.
• https://www.interaction-design.org/literature/topics/ux-design

55/27
UX

56/27
Summary, UX versus Usability (source https://hackernoon.com)

57/27
 • Bring examples on how a bad
design may lead to problems (and
maybe disasters)

• Keywords: poorly design, bad

Task 1 design, HCI

• Design focus
• Think ‘User’
• Involve the users

Dr. Salsabeel AlFalah