IT3405: User Interface Design (UID) : Introduction To Human-Computer Interaction (HCI)

IT3405: User Interface design
(UID)
Introduction to Human-Computer
Interaction (HCI)
(4 hrs.)
Prof. K. P. Hewagamage
Intended Learning outcomes
• Identify the importance of human-computer interaction for

the success of a software product
• Recognize components of HCI and describe its underline

model
• Describe the evolution of HCI from past to present
Prof. K. P. Hewagamage User Interface Design (UID)

2
Sub Topics
1.1. Importance of Human‐Computer Interaction

1.2. Components of HCI Model
1.3. What is Interface?
1.4. Risk of Poor User Interface
1.5. Developing Interaction
1.6. HCI as a discipline and its short history

3
1.1.
IMPORTANCE OF HUMAN
COMPUTER INTERACTION
4
What is Human Computer Interaction (HCI)?
User definition:
HCI, also known as man-machine interaction, is a
discipline that organizes interaction between man and
computing devices to make it more successful
Developer Definition:
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.

5
HCI: A subject of multidisciplinary
HCI is a subject which is directed to many disciplines of

other study streams.
HCI is a sub-field of computer studies
HCI consultants should have good knowledge or

understanding of those disciplines
What are these other study streams?

6
Related study areas to HCI
Psychology and cognitive science

• to give someone knowledge of the user’s perceptual, Cognitive
and problem-solving skill
Ergonomics
• for the user’s physical capabilities
Sociology
• to help her understand wider context of the interaction
Computer Science and Engineering
• to be able to build the necessary technology
Business/Management
• to be able to market it
Arts
• Graphic designer’s to produce effective interaction
Writing
• Technical writing to produce the manuals
7
Why we need to consider many disciplines?
A beautifully designed graphic display may be unstable if it

ignores dialog constraints or the psychological limitations
of the user
Do you agree?
What are your experiences?

8
Is HCI a Science or a Craft?
Theoretically, it is a marriage of art and science
• But it is not always true,

[a beautiful woman + a wise man] ->
handsome and intelligent child
• Beautiful and/or novel interfaces are artistically pleasing

and motivate fulfilling the tasks required
• Scientific view/reasoning: why certain things are

successful whilst others are not? Then allow creative
nature to feed off this information
HCI is required to be both a craft and a science in order

to be successful
9
Role of HCI – develops the relationship
• Some users not only cannot work but also cannot live
without their computers in everyday life ):-
• E.g. emails, Facebook, …
What are type of tasks for which

people could use computers?
Computers now affect every person in
society
ICT literacy – fundamental right in a society
“Product success may depend on ease of
use, not necessarily power of machine” –
find reasons to justify this
10
Challenge of developing products for everyone
HCI takes advantage of our everyday knowledge of the world

to make software and devices more understandable and
usable for everyone.
e.g. Desktop Computers – Consider introducing a computer
for a very beginner
Designing interactive systems is concerned with many

different aspects of a product.
e.g. ask a question from visiting foreigner in your village
aspects : language, understanding, interpretation, finding
answer(solution), …..

11
What are Interactive systems?
Consider crying at a dead person. He cannot answer your

questions
Two way communication

in the same language,
a dialog
ability to understand or interpret
………
What are current – very popular – interactive systems?
• Second Life
• Facebook

12
Fills the gap between human and computing
Human users and their contexts are major components of
the design problems that cannot be neglected since
they are complex.
In fact, the largest part of program code in an

interactive system deals with the user interaction.
what is the percentage of core system ?– 30-40%
what is the rest of the system
Inadequate attention to users and task context not only

lead to bad user interfaces, it puts entire system at
risk.
People will definitely refuse to use poor/difficult
products
13
1.2.
COMPONENTS OF HCI MODEL

14
1.
Components of HCI Model
•Human User
•Computer
•Interaction
The user is interacting with the
computer in order to
accomplish something
(he has a goal !)

15
Describe Human Users
An individual
A group of users working together
A sequence of users in an organization (each

dealing with some parts of task)
? Give examples for each type of users.

16
How to classify or understand human users?
• Physical abilities
• Personality
differences
• Skill differences
• Cultural diversity
• Motivation
• Special needs

17
Different types of computers
PC
• Desktop, laptop(*), PDA, …….
A large scale computer system

• Examples?
A process control system (computing devices)
An embedded system
• Examples?
Mobile computing devices

18
What is Interaction?
A communication between a user and computer

be it direct and indirect
Two types of interaction:
Direct: a dialog with feedback and control

throughout the performance of the task
Indirect: Batch processing or intelligent sensors

controlling the environment
Identify direct and indirect interaction in MS Office.

19
Goals of Interaction Design
Allow users to carry out tasks

• Safely
• Effectively
• Efficiently
• Enjoyably

20
Two types of interaction design
User-centered design
• In order to optimize the system functionality and
resources, human user is considered main stakeholders
to satisfy
Task-centered design
• “Tasks are what the user is carrying out in a way he/she
wants.

21
1.3.
WHAT IS INTERFACE?

22
What is interface?
Interaction happens through the interface
Interface facilitates the communication between the user

and system
How?
The interface needs to provide some mechanisms for

• people to provide instructions and enter data into the system:
‘input’.
• the system to tell people what is happening: ‘feedback’
• the system to display the content (i.e. information, pictures,
movies, animations) : ‘output’.

23
1.terfacInteractive interfaces
The interface to an interactive system is all those

parts of the system with which people come into
contact,
• physically (by pressing buttons or moving levers)
• Perceptually (by displaying things on a screen, or making
noises)
• Conceptually (by providing messages and other displays)

24
Ways to extend the interface of a device
The device can be handled in different ways to do the

same (multiple ways)
Use the devices to increase the productivity (simplify
the interface)
Single device to multiple tasks (multitasking)
Change the device to use it easily to do the task
(Customization)
Some people like to do in a specific way
(personalized)

25
1.4.
RISK OF POOR USER INTERFACE

26
Good and bad interfaces
Poor user interfaces

• Can cripple a system that is outstanding in all other
respects
• Can be very irritating for the user
• Can be hard to learn or remember
• Can loose productivity
• Could literally become a life or death situation
Good user interfaces (User Friendly …)

• Find features of good user interfaces
• Find examples of good user interfaces

27
Examples of poor UI design
Strange message???
Too many tabs???

28
1.5.
DEVELOPING INTERACTION

29
Developing Interactions / interfaces
When developing interactions in a system, the

designer should
• understand the human capacities of the user
• understand the consequences of using
information technology as a tool for solving work
related tasks
• develop and evaluate the system by putting the
user at the center of the design process.

30
Developing Interactions
Interaction / interfaces
Computing devices are used for specific tasks by

users (People)
Interfaces should be designed to support these tasks
by designers (People)
• People = People
• User = Designer -> trivial job
• User != Designer -> not so difficult
• What is the main reason for this complexity?

31
Developing Interfaces for good interaction
Interface is not the last thing to do

• Should be developed integrally with the rest of the
system
• Iterative work that goes with evaluation
Good interfaces
• Suitable for the task
• Easy to use (appropriate, adaptable to the user’s
knowledge and experience)
• Feedback on performance
• Display information to useful for the user
• Confirms to the “Principles of Software Ergonomics”

32
References for Readings
Human-computer interaction (HCI) is an area of research and

practice that emerged in the early 1980s, initially as a
specialty area in computer science embracing cognitive
science and human factors engineering …….
http://www.interaction-
design.org/encyclopedia/human_computer_interaction_hci.
html

33
1.6.
HCI AS A DISCIPLINE AND ITS
SHORT HISTORY
34
Key people: Father of HCI
Vannevar Bush
Postulated Memex device
• Can store all records/articles/communications
• Large memory
• Items retrieved by indexing, keywords, cross
references
Vannevar Bush established
• Can make a trail of links through material the U.S. military / university
• etc. research partnership that
later developed the
Envisioned as microfilm, not computer ARPANET (The First Internet ),
and wrote the first visionary
description of the potential
use for information
Read “As we may think” at
technology, inspiring many
http://www.theatlantic.com/magazine/archive/1945/07/as-we-may- of the Internet's creators.
think/303881/

35
History of HCI – Key people
J.R. Licklider
1960 - Postulated “man-computer symbiosis”
• Couple human brains

and computing machines
tightly to revolutionize
information handling

36
History of HCI
Mid 1960’s
Computers too expensive for individuals
And those were timesharing
Need
• increased accessibility
• interactive systems, not jobs
for
• text processing, editing HCI
• email, shared file system
• Read
http://grouplab.cpsc.ucalgary.ca/saul/hci_topics/pdf_files/history.pdf
http://www.cs.cmu.edu/~amulet/papers/uihistory.tr.html

37
History of HCI
Ivan Sutherland
SketchPad - ‘63 PhD thesis at MIT
• Hierarchy - pictures & subpictures
• Master picture with instances (ie, OOP)
• Constraints
• Icons
• Copying
• Light pen as input device
• Recursive operations
Watch at:
https://www.youtube.com/watch?feature=player_embedded&v=USy
oT_Ha_bA
38
History of HCI
• Land mark developments affected HCI
Video Display Units (VDU)

•More suitable medium than paper
•Sutherland’s Sketchpad as landmark system
•Computers used for visualizing and manipulating data
•Who developed VDU?
•Discuss the Evolution of display units from CRT to LED
•

39
History of HCI
Douglas Engelbart
Landmark system/demo:
• hierarchical hypertext,
multimedia, mouse, high-res
display, windows, shared files,
electronic messaging, CSCW,
teleconferencing, ...
Inventor
of mouse device

40
History of HCI
Alan Kay
Dynabook - Notebook sized
computer loaded with multimedia
and can store everything
Personal Computing
•System is more powerful if it’s easier to use
•Small, powerful machines dedicated to individual
•Importance of networks and time-sharing
•Kay’s Dynabook, IBM PC
41
History of HCI
• Personal computing and GUI development
Personal Computers
• Text and command-based
• Sold lots
PCs with GUIs
Xerox PARC - mid 1970’s
• local processor, bitmap
display, mouse
• Precursor to modern GUI,
windows, menus, scrollbars
• LAN - ethernet

42
History of HCI
• Development of GUI for common people
• Apple Inc. reinvented more user

friendly devices with graphic Lisa
interface
• Apple Lisa -1983
• Apple Macintosh -1984
Macintosh

43
History of HCI
Tim Berners-Lee
World Wide Web
• a system of globally unique
identifiers for resources (URL/URI)
• the publishing language HyperText
Markup Language (HTML);
• the Hypertext Transfer Protocol
(HTTP).

44
History of HCI
Main characteristics of HCI – Past

• Function/process centered
• Not much use of graphics
• Early PC and mouse
• High learning curve

45
History of HCI
• 2000- present
• XBOX 360 – Video Game Console- 2005
• Nintendo Wii – 7th generation Console
• Android – Linux based phone OS -2007
• iPhone – Apple’s smartphone- 2007
• Windows 8 – Popular Microsoft’s OS - 2012
• HMZ-T1- Sony HD and 3D viewer 2012

46
History of HCI
Main characteristics of HCI – Present

• User centered
• OS development
• New technologies aimed at
• Natural feel
• motion capture
• Touch screen
• Multi-touch
HCI Future?
http://www.informit.com/articles/article.aspx?p
=24103
http://www.networkworld.com/article/2217838/
virtualization/the-future-of-human-computer-
interaction.html

47
History of HCI
Continue the discussion of

History of HCI in forums

48
Additional resources – HCI Seminars
http://www.academicearth.org/courses/human-computer-
interaction-seminar
https://www.coursera.org/course/hciucsd
http://videolectures.net/Top/Computer_Science/Human_Com
puter_Interaction/
http://www.hci-international.org/

49

IT3405: User Interface Design (UID) : Introduction To Human-Computer Interaction (HCI)

Uploaded by

Copyright:

Available Formats

IT3405: User Interface Design (UID) : Introduction To Human-Computer Interaction (HCI)

Uploaded by

Document Information

Original Title

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

IT3405: User Interface Design (UID) : Introduction To Human-Computer Interaction (HCI)

Uploaded by

Copyright:

Available Formats

IT3405: User Interface design

• Identify the importance of human-computer interaction for

• Recognize components of HCI and describe its underline

• Describe the evolution of HCI from past to present

Prof. K. P. Hewagamage User Interface Design (UID)

1.1. Importance of Human‐Computer Interaction

Prof. K. P. Hewagamage User Interface Design (UID)

Prof. K. P. Hewagamage User Interface Design (UID)

HCI is a subject which is directed to many disciplines of

HCI is a sub-field of computer studies

HCI consultants should have good knowledge or

What are these other study streams?

Prof. K. P. Hewagamage User Interface Design (UID)

Psychology and cognitive science

A beautifully designed graphic display may be unstable if it

Prof. K. P. Hewagamage User Interface Design (UID)

Theoretically, it is a marriage of art and science

• But it is not always true,

• Beautiful and/or novel interfaces are artistically pleasing

• Scientific view/reasoning: why certain things are

HCI is required to be both a craft and a science in order

What are type of tasks for which

HCI takes advantage of our everyday knowledge of the world

Designing interactive systems is concerned with many

Prof. K. P. Hewagamage User Interface Design (UID)

Consider crying at a dead person. He cannot answer your

Two way communication

Prof. K. P. Hewagamage User Interface Design (UID)

In fact, the largest part of program code in an

Inadequate attention to users and task context not only

Prof. K. P. Hewagamage User Interface Design (UID)

Prof. K. P. Hewagamage User Interface Design (UID)

A group of users working together

A sequence of users in an organization (each

? Give examples for each type of users.

Prof. K. P. Hewagamage User Interface Design (UID)

Prof. K. P. Hewagamage User Interface Design (UID)

A large scale computer system

A process control system (computing devices)

Mobile computing devices

Prof. K. P. Hewagamage User Interface Design (UID)

A communication between a user and computer

Two types of interaction:

Direct: a dialog with feedback and control

Indirect: Batch processing or intelligent sensors

Identify direct and indirect interaction in MS Office.

Prof. K. P. Hewagamage User Interface Design (UID)

Allow users to carry out tasks

Prof. K. P. Hewagamage User Interface Design (UID)

Prof. K. P. Hewagamage User Interface Design (UID)

Prof. K. P. Hewagamage User Interface Design (UID)

Interaction happens through the interface

Interface facilitates the communication between the user

The interface needs to provide some mechanisms for

Prof. K. P. Hewagamage User Interface Design (UID)

The interface to an interactive system is all those

Prof. K. P. Hewagamage User Interface Design (UID)

The device can be handled in different ways to do the

Prof. K. P. Hewagamage User Interface Design (UID)