CHAPTER 1

Introduction to HCI

Sub-top-
ics
Introduction to the Concept of
Human-Computer Interaction

Definition, Goals and

Challenges
The Importance of
Human-Computer Media Application
Interaction
Introduction to the concept of
Human-Computer Interaction
Why you need to learn HCI?
How do you feel?
 Why bother ?
UI takes up to 47% - 66% of projects code, 40% of
development effort & 80% of unforeseen fixes.

70% of projects fail due to lack of user acceptance.

UI = user interface
UX = user experience

 Define usability requirements up front, avoiding rework

 Reduce the risk of building the wrong product
 Results in lower costs, increased retention and increased market share UX
helps !!!
 Why system fails ?
13% 12% 9% 8%

10% 11% 8%

Inadequate requirements Lack of support at senior level

Lack of user participation Changing specification
Inadequate resources Lack of planning
Unrealistic expectations
The perfect user (every designer’s wish)
 Common issues in UI design
Tendency to let the art of interface
design beats its usability
.
Often based on intuition and Inconsistent features that do not
experience than on theory- fit into a good user interface
based models design criteria

Human Factor &

Software developers are Ergonomics – concern for
forced to “do it all” health & safety issue in
human working
environment
 HCI definition

INTERACTION

COMPUTER
HUMAN (USER INTERFACE)
 What is HCI ?
Computer
Human 02 Desktop computer, large-scale
Individual user, a group of 01 computer system, Pocket PC,
users working together, a embedded system (e.g.,
sequence of users in an photocopier, microwave oven),
organization software (e.g., search engine,
word processor)
04
Interaction
User interface Usually involve a dialog with
Parts of the computer that 03 feedback & control throughout
the user contacts with performing a task (e.g., user invokes
“print” command and then interface
replies with a dialog box)
 What is HCI?

A discipline concerned with the study, design,

construction, evaluation and implementation
of interactive computing systems for human
use and with the study of major phenomena
surrounding them.
Interdisciplinary nature of HCI?
 Interdisciplinary nature of HCI
HCI needs input from a range of disciplines; for
example:
computer science (application design and
engineering of human interfaces)
psychology (the application of theories of
cognitive processes and the empirical
analysis of user behavior)
sociology and anthropology (interactions
between technology, work, and
organization), and
industrial design (interactive products)”.

Therefore, HCI has “science, engineering, and design aspects”.

HCI: Past vs Now
HCI experts tended to
be consulted later in the
design process

WRONG
Design should be developed
integrally with the rest of
the system
The Importance of
HCI

Business view

Human factors view

 Why study HCI ?
Business view :
 to employ people more
productively and
effectively
- people costs now far outweigh
hardware and software costs
 people now expect “easy to
use” systems
- generally they are not tolerant of
poorly designed systems
- if a product is hard to use, they
will seek other products
 Why study HCI ?
Human Factors view :
 Humans have limitations.
 Errors are costly in terms of
• loss of time & money
• loss of lives in critical
systems
• loss of morale
 The importance of HCI
• Increase Productivity
• Individual : improved turnover, greater flexibility and better use
of staff
• Organizational : job content, personnel policies, job
satisfactions, power and influence and working environment
• Both factors will increase revenue, product sales, customer
satisfaction and excellent return on investment
• 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
 The importance of HCI
• 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
 HCI goals

The goals of HCI are to develop or

improve the safety, utility and
effectiveness of systems that include
computers, often through improving
USABILITY.
What is usability ?
Usability can simply be thought of as the
practical implementation of good HCI,
more formally :

effective to use enjoyable

easy to learn experience
What is usability ?
Knowledge to be considered
Human

 psychological abilities and limitations

 e.g: designing software for children age of
2 years old or user who are computer
illiterate

Technology/machine

 input/output technique, computer graphics,

dialog style and architecture.
 e.g. the use of touch screen for factory
workers, voice recognition system
How to design & build usable UIs
involve the user as much
as possible so that she/he
testing can be done to check that
can influence the system
the design does indeed meet
design
users’ requirements

Involving Integrating different

the user kinds of knowledge and Making the design
expertise: process iterative

integrate knowledge and

expertise from the different
disciplines that contribute to
HCI design
 UI development process
User Profiling

Usability goals
Task analysis & understanding the
process
Prototyping

Evaluation

Programming
 What is interface ?
Human interact with computer through interfaces
Importance of interfaces
 Good interfaces versus poor interface

Good interface Poor interface

• Allowing tasks to be • Loss of productivity

performed easily • Accident / Disaster
• Increase in productivity • Frustration and
• Increase in job confusion in handling
satisfaction daily works
HCI is not about ‘looking good’ or
‘making things look pretty’,
instead about making the interface
work for the user!
 Example of Good Design:Facebook
Good Interface Design and Bad Interface Design: An Example Each
Posted on August 23, 2012 by CS3240 Team 11 from https://cs3240team11.wordpress.com
 Example of Good Design
Visibility of status updates & comments
 Example of Good Design
Personalized Options
 Example of Good Design
Tabbed Chat
 Example of Good Design
Modal Windows with Darkened Background
 Example of Bad Design: SIPhawai.com
e-commerce website
Cluttered design
 Example of Bad Design: SIPhawai.com
e-commerce website
Too wordy
 Example of Bad Design: SIPhawai.com
e-commerce website
Too many pictures
 Therefore, it is important to take into
account where it is going to be used and
who is going to use it.

USER-CENTERED DESIGN
 Important..!!
 users should be involved throughout the
development of the project (How?)
 specific usability and user experience goals need to
be identified, clearly documented and agreed at
the beginning of the project
 Diversity of Computer Systems
• Critical system
• e.g. Nuclear Reactors, air traffic control, nuclear warhead
system, submarine system

• Commercial and industrial

• e.g. Banking, e-commerce, web sites

• Office, home and entertainment

• e.g. operating systems, packages, mobile phones, video games
Understanding interaction
User centric design is the formula for usability

The key to User-centered Design is to understand

interaction

We need to understand :
• What interaction is
• What are the elements involved
Interac-
Donald Norman’s
tion model
The most influential model of interaction is

Donald Norman Model

Donald Norman’s (http://www.jnd.org/) :
Model .
Execution-Evaluation cycle

1 Execution
User activities aimed at making the
system do something
.

2 Evaluation
Evaluating whether the system did actually do
what the user wanted
 Execution
 If User cannot make system do what they want
 e.g. cannot understand how to do it, unclear icons, unclear
indication etc.
 Will result in the Gulf of Execution
 e.g. difference between the user’s formulation of the action and
the actions allowed by the system
 Evaluation
 If user cannot see what happened to system
• e.g. if system has done what they want but no feedback
is given to the users etc.
 Will result in the Gulf of Evaluation
• i.e. difference between the representation of the
system state/result and the expectations of the user
• Good Design aims to reduce these gulfs
Challenges of Future
HCI
Shift from user experience to
community experience.
Support successful aging
strategies
Design novel input and
Promote lifelong learning
output devices
Stimulate rapid interface Secure cyberspace
learning
Shift from user experience to community
experience
 User experience designers have to shift to
 community experience design,
 social media participation,
 game theoretic mechanisms,
 motivational strategies
 Purpose: engage growing communities in
constructive ways
 Support successful aging strategies

 The growing population of older adults want to maintain

their health and independence while aging in place.
 They could benefit from interfaces
 collect data from sensors
 encourage healthy diet and exercise
 promote social connectedness
 enable balanced involvement from caregivers
 How might the growing Internet of Things (IoT) help
older adults improve quality of life?
 Promote lifelong learning

 Traditional educational systems are expanding

 online learning (massive open online courses (MOOCs)
 professional just-in-time training
 learning through games
 many kinds of social learning
 Developing best practices for a range of ages,
motivations, and cultures will help to make these
systems more reliably successful for large numbers of
diverse users.
 Stimulate rapid interface learning
 Multilayer user interfaces enable new users to become
experts with basic features;
 then users can control their progress to advanced features as
needed.
 Multilayer user interfaces also simplify design for diverse
users and users with disabilities.
 Design novel input and output devices
 As user input continues to shift from keyboards to gestures,
speech, and body movement, users will need reliable
mechanisms to express their intentions.

Secure cyberspace
 Designing for usable privacy and security will help ensure
that benefits are retained, intrusions minimized, and
expectations of safety realized.
 Media Application

 A type of software that can be used to

create, edit and play games, videos and
animations.
 Multimedia application contains 5 elements :
audio, video, text, image & animation
 e.g: Facebook – watch video, listen to music, play
animation & game
 Aim: improve interaction with the users  engage users with the application.
 Software is needed to create those content.
 Software and its functions
Software Description
Windows/Mac: Lightworks, Blender, Shotcut Create & edit video
IoS/Android: Magisto, Hyperlapse, InShot
Adobe Animate, Powtoon, Animaker, Blender Create animation in 2D or
3D
Game engine: Design & develop a
• Unity ( Pokemon Go, Angry Bird 2) 2D/3D game in various
• Unreal Engine (ABC Augmented Reality, Lineage II: Revolution) platforms
• Cocos2D-X (Angry Birds Fight, Clash of Kings)
• Stencyl, RPG Maker, GameSalad

Pixlr, Adobe Photoshop, Adobe Illustrator, Photo Creator, Pablo Create & edit text, image
(93% - 94% champion)

Computer: Audacity, FL Studio 12 Create & edit audio

Android: Audio Evolution Mobile Studio, Audio editor for Android
IoS: Garageband