INTRODUCTION TO HUMAN COMPUTER

INTERACTION

DFP4023 CHAPTER 1
Course Learning Outcomes:

⊸ CLO 1: Identify the concepts of user interface design to

elevate
technical complexity for usable product that
accepted by
user (C3, PLO1)

⊸ Learning Outcomes:
▫ Relate the interaction between human and
computer
▫ Discuss human interaction usage
HUMAN COMPUTER INTERACTION:
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. ”

[ ACM SIGCHI Curricula for Human-Computer Interaction ]

WHY HCI?

To optimize
performance of
human and computer
together as a system
What is HCI?

 “the study of the interaction between people, computers

and tasks” (Johnson)
 “a very difficult business. It combines two awkward
disciplines: psychology and computer science”
(Thimbleby)
 “The ideal designer of an interactive system would have
expertise in … psychology … cognitive science …
ergonomics … sociology …computer science …
engineering … business … graphic design …technical
writing … and so it goes on” (Dix et. al)
 Teamwork and a recognition of non-Computer Science
specialisms
Fundamentals components of an
interactive system
Input Output Input
Memory Output
Process & Applied Virtual Reality
Emotion Physical Interaction
Individual Paper
differences COMPUTER Memory
HUMAN /
USER SYSTEM Processing

HCI
INTERACTIVE
PROCESS Interaction Models
Ergonomics
Interaction Styles
Context
Why is HCI Important?

⊸ HCI can assist in building products/systems that are

▫ Useful, accomplish what’s required
▫ Usable, do it easily and naturally
▫ Used, make people want to use them
⊸ Increasing participation
▫ Ensuring interfaces and systems are accessible.
⊸ Safety and Security
Interaction Between Human &
Computer

 Human characteristics
To understand the human as an information-processing system,
how humans communicate, and people’s physical and psychological
requirements
 Human information processing
characteristics of the human as a processor of information
 memory, perception, motor skills, attention, problem-solving,
learning skill, motivation, conceptual models, diversity...
 Language, communication and interaction
aspects of language
 syntax, semantics, pragmatics; conversational interaction,
specialized languages
 Ergonomics
anthropometric and physiological characteristics of people and their
relationship to workspace and the environment
 arrangement of displays and controls; cognitive and sensory
limits; effects of display technology; fatigue and health;
furniture and lighting; design for stressful and hazardous
environments; design for the disabled...
COMPONENTS OF AN INTERACTIVE
SYSTEM

HUMAN USER

NATURE OF
COMPUTER
INTERACTIVE
SYSTEM
PROCESS
HUMAN

⊸ Humans are limited in their capacity to process

information. This has important implications for design.
⊸ Information is received and responses given via a
number of input and output channels:
▫ Visual channel
▫ Auditory channel
▫ Haptic channel
▫ Movement
…HUMAN

⊸ Information is stored in memory:

▫ Sensory memory- buffer that stores sensory input

▫ Short-term (working) memory – holds a limited

amount of data for a period of time ranging from 30
seconds to two minutes.

▫ Long-term memory
Memories working
COMPUTER

⊸ A computer system comprises various elements, each

of which affects the user of the system.
⊸ Input devices for interactive use, allowing text entry,
drawing and selection from the screen:
▫ Text entry: traditional keyboard, phone text entry,
speech and handwriting
▫ Pointing: principally the mouse, but also touch pad,
stylus, and others
▫ 3D interaction devices
…COMPUTER

⊸ Output display devices for interactive use:

▫ Different types of screen mostly using some form of
bitmap display
▫ Large displays and situated displays for shared and
public use (ex: kiosk)
▫ Digital paper may be usable in the near future
⊸ Memory:
▫ Short-term memory: RAM
▫ Long-term memory: magnetic and optical disks
…COMPUTER

⊸ Processing:
▫ The effects when systems run too slow or too fast,
the myth of the infinitely fast machine
▫ Limitations on processing speed
▫ Networks and their impact on system performance

⊸ Instead of workstations, computers may be in the form

of embedded computational machines, such as parts of
spacecraft cockpits or microwave ovens.
Importance of User Interface Design

⊸ UI design focuses on anticipating what users might

need to do.
⊸ Ensuring that the interface has elements that are easy
to access, understand and use to facilitate the actions.
⊸ Important from aspects:
▫ Mobile devices
▫ Ubiquitous / Updated Computing
▫ Internet
▫ World Wide Web (www)

• Limitation on processing
speed
• Networks and their impact
on system performance
• Input devices for interactive
use, allowing text entry,
drawing and selection from
Input/output the screen.
devices • Output display devices for
interactive use

Virtual
reality
Processing
system &
speed
3D
visualisation
COMPUTER
TECHNOLOGY • Have special
interaction and display
• Short-term, long-term,
devices
capacity limitation &
access method.

Memory Physical
capacity devices • Sound, smell,
sensors
INTERFACE STYLES

⊸ Command line interface

⊸ Menus
⊸ Natural language
⊸ WIMP (windows, icon, menus, pointers)
⊸ Question/answer and query dialogue
⊸ Form-fills and spread sheets
⊸ Point and click
⊸ 3D interfaces
⊸ Web navigation
Command Line Interface

⊸ Way of expressing instructions to the computer directly

▫ function keys, single characters, short abbreviations, whole
words, or a combination

⊸ suitable for repetitive tasks

⊸ better for expert users
than novices
⊸ offers direct access to
system functionality
⊸ command names/
abbreviations should be
meaningful.
Menus

⊸ Set of options displayed on the screen

⊸ Options visible
▫ less recall - easier to use
▫ rely on recognition so names should be
meaningful
⊸ Selection by:
▫ numbers, letters, arrow keys, mouse
▫ combination (e.g. mouse plus
accelerators)
⊸ Often options hierarchically grouped
▫ sensible grouping is needed
Natural Language

⊸ Familiar to user
⊸ speech recognition or typed natural language
⊸ Problems
▫ Vague – uncertain, unclear meaning
▫ Ambiguous – open to @ having several possible meaning.
▫ hard to do well!
⊸ Solutions
▫ pick on key words

“The boy hit the dog with the stick”

Query Interface

⊸ Question/Answer interfaces
▫ user led through interaction via series of questions
▫ suitable for novice users but restricted functionality
▫ often used in information systems
▫ Example: ATM , web questionnaire

⊸ Query languages (e.g. SQL)

▫ used to retrieve information from database
▫ requires understanding of database structure and language
syntax, hence requires some expertise
Query Interface (cont…)
Form-fills

⊸ Primarily for data entry or data retrieval

⊸ Screen like paper form.
⊸ Data put in relevant place
⊸ Requires
▫ good design
▫ obvious correction
facilities
WIMP

Windows
Icons
Menus
Pointers

… or windows, icons, mice, and pull-down menus!

 default style for majority of interactive

computer systems, especially PCs and
desktop machines
Windows

⊸ Areas of the screen that behave as if they were

independent
▫ can contain text or graphics
▫ can be moved or resized
▫ can overlap and obscure each other, or can be laid out next to
one another (tiled)

⊸ scrollbars
▫ allow the user to move the contents of the window up and
down or from side to side
⊸ title bars
▫ describe the name of the window
Icons

⊸ small picture or image

⊸ represents some object in the interface
▫ often a window or action
⊸ windows can be closed down (iconifying)
▫ small representation for many accessible windows
⊸ icons can be many and various
▫ highly stylized
▫ realistic representations.
Pointers

⊸ important component
▫ WIMP style relies on pointing and selecting things
▫ Different shapes of cursor are often used to distinguish modes.
⊸ uses mouse, trackpad, joystick, trackball, cursor keys
or keyboard shortcuts
⊸ wide variety of graphical images
Point and Click

⊸ used in ..
▫ multimedia
▫ web browsers
▫ hypertext

⊸ just click something!

▫ icons, text links or location on map

⊸ minimal typing
3D Interface

⊸ virtual reality
⊸ ‘ordinary’ window systems
▫ highlighting
▫ visual affordance flat buttons …
▫ indiscriminate use
just confusing!
⊸ 3D workspaces
▫ use for extra virtual space
▫ light and occlusion give depth … or sculptured
▫ distance effects
THE ROLE OF ERGONOMICS

 Study of the physical characteristics of

interaction

 Alsoknown as human factors – but this can

also be used to mean much of HCI!

 Ergonomics good at defining standards and

guidelines for constraining the way we
design certain aspects of systems
ERGONOMICS EXAMPLES

⊸ arrangement of controls and displays

e.g. controls grouped according to function or frequency of use,
or sequentially
⊸ surrounding environment
e.g. seating arrangements adaptable to cope with all sizes of
user
⊸ health issues
e.g. physical position, environmental conditions (temperature,
humidity), lighting, noise,
⊸ use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
Bad position…
Better…
Have a look at this…
How about this…
Do not become like this…
 It’s

time…
Log on to https://kahoot.it by using PC or
your
mobile device
MODEL OF INTERACTION-
Norman’s execution-evaluation cycle

⊸ Seven stages
▫ user establishes the goal
▫ formulates intention
▫ specifies actions at interface
▫ executes action
▫ perceives system state
▫ interprets system state
▫ evaluates system state with respect to goal

⊸ Norman’s model concentrates on user’s view of

the interface
execution/evaluation loop

goal
execution evaluation
system
 user establishes the goal
 formulates intention
 specifies actions at interface
 executes action
 perceives system state
 interprets system state
 evaluates system state with respect to goal
execution/evaluation loop

goal
execution evaluation
system
 user establishes the goal
 formulates intention
 specifies actions at interface
 executes action
 perceives system state
 interprets system state
 evaluates system state with respect to goal
execution/evaluation loop

goal
execution evaluation
system
 user establishes the goal
 formulates intention
 specifies actions at interface
 executes action
 perceives system state
 interprets system state
 evaluates system state with respect to goal
INTERACTION

⊸ The communication between the user and the system.

Their interaction framework has four parts:
▫ User
▫ Input
▫ System
▫ Output