1. Human-Computer Interaction
Chapter 1- An Introduction

2. Learning outcomes To define the HCI concept.
To identify what a human can do, perceive, feel and response.
To describe the effect of system interface design to a human or user.

3. Why Bother? 3

4. Why Systems Fail? Inadequate requirements 13%
Lack of user participation 12%
Inadequate resources 11%
Unrealistic expectations 10%
Lack of support at senior level 9%
Changing specification 8%
Lack of planning 8%
What is the conclusion that can be derived from the statistics? 4

5. The Perfect User (every designer ‘s wish)

6. Why Study HCI? 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

7. What is HCI? Short for human-computer Interaction.
A discipline concerned with the study, design, construction and implementation of human-centric interactive computer systems.
Short for human-computer Interaction, a discipline concerned with the study, design, construction and implementation of human-centric interactive computer systems.

8. HCI Definitions From www.pcmag.com:
The design and implementation of computer systems that people interact with. It includes desktop systems as well as embedded systems in all kinds of devices.
HCI is a large discipline that deals not only with the interface design but with the reasoning for building the functionality into the system in the first place.
It is also concerned with the consequences of using the system over time and its effects on the individual, group and company.

9. HCI Definitions From ACM SIGCHI (http://old.sigchi.org/cdg/cdg2.html):
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.
Wikipedia ( computer_interaction):
HCI involves the study, planning, and design of the interaction between people and computer.

10. HCI Disciplines
Fig 1: HCI disciplines ( source: cs3240hci.wordpress.com)

11. HCI Disciplines
Cognitive Psychology: Understanding human behavior and mental processes
Neuroscience: Neuroscience enables us to build more accurate and robust models of human cognitive functions. These models may allow us to evaluate usability and predict user behavior. Has potential to close the gap between human and computers.
Ergonomics or Human Factors: User- Equipment Design- Environment
Engineering & Computer Science: faster machines, faster systems, building better interfaces.
Design: Interface layout

12. HCI Disciplines Anthropology: User body shape
Sociology: Groupware.Considers introduction of IT in society
Philosophy: Philosophy of technology. Create consistency.
Linguistics: language for commands
Artificial Intelligence: simulating human behaviour

13. Ergonomics Physical aspects of interfaces
Study of the physical characteristics of interaction
Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems – to suit the environments/users

14. Ergonomics - examples arrangement of controls and displays
e.g. controls grouped according to function or frequency of use, or sequentially (mapping)
surrounding environment
e.g. seating arrangements adaptable to cope with all sizes of user (movie theatre)
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.

15. HCI Interrelationships
Fig 2: HCI interrelationship (source: sigchi.org)

16. Understanding Users Who are they? Individual user
A group of users working together or a sequence of user in organization each dealing with some part of the task or process.
Limited in their capacity to process information
In order to design, it is important to understand the capabilities and limitations of those we are designing for. 16

17. The Human How do you interact with the outside world?
Input-Output channel – Vision, Audio, Touch and Movement
How do you remember things?
Human memory – sensory, short term and long term memory
Example???
How do you processed and applied information?
Learning, problem solving, reasoning, skill, error, experience, etc.
Sensory memories
Iconic
Echoic
Haptic
Short term memory Or
Working memory
Long term memories
attention
rehearsal
Fig 3: A model of the structure of memory (source Dix, et al. 2009)

18. The Human: Human Memory-Sensory Memory
Buffers for stimuli received through senses
iconic memory: visual stimuli
echoic memory: aural stimuli
haptic memory: tactile stimuli/touch
Examples
“sparkler” trail
stereo sound
Continuously overwritten

19. The Human: Human Memory-LTM
3. Long Term Memory
Repository for all our knowledge
huge or unlimited capacity
Two types
episodic – serial memory of events
semantic – structured memory of fact, concepts, skills
semantic LTM derived from episodic LTM

20. The Human: Human Memory-LTM
Three main activities related to LTM:
Storage/Remembering of Information
Forgetting
Information Retrieval

21. Human Factors
We look at the human factors that affect how people interact with computers and computer programs:
Physiology - physical make-up, capabilities
Cognition - thinking, reasoning, problem-solving, memory
Perception - how a person perceives what input they get through their senses
Emotions – feelings that affect the human behaviour 21

22. Human Factors : Physiology
The design of devices are often be affected by the human physiology
Some constraints can be introduced and applied based on the physical built up of the users
Examples:
Keyboard keys cannot be smaller than finger size
Smaller machines must use different input facilities
Toilet for toddlers
Specific door widths and heights (home, hospitals)
Anymore? 22

23. Human Factors : Physiology: Reaction Time
Human reaction times:
Audio signal - 150ms
Visual signal - 200ms
Pain - 700ms
Examples of use:
Design of video games
Traffic lights
Phone

24. Human Factors : Physiology: Movement
Speed or accuracy of movement are important for interactive
systems.
Examples:
Mouse - keyboard movement (affects choice of which devices/controls operate which actions of the system)
Time taken to move to a target on screen
Careful arrangement of menu
items so that frequent choices
are placed first 24

25. Human Factors : Physiology: Disabilities
Designers must design so that disabled users can achieve maximum functionality and usability from computer systems
Examples:
Speech input and output systems (useful for blind people and those with severe motor impairment)
Keyboard pressing devices
Eye movement detection devices 25

26. Human Factors : Cognition
The processes by which we become acquainted with things, how we gain knowledge, familiarity
What goes in our heads when we carry out our everyday activities
Involves understanding, thinking, remembering, reasoning, memorizing, attending, awareness, acquiring skills, creating new ideas. 26

27. Human factors : Cognition
Managing Attention
Process of selecting things to concentrate on at a point in time
Depends on:
Users’ goals
If we know exactly what we want to find out, we try to match this with the information that is available
Information presentation
Greatly influence how easy or difficult it is to digest appropriate pieces of information 27

28. Human factors : Cognition : User’s Goals
Interface designers need to focus attention on the users’ goals
(If we know exactly what we want to find out, we will try to match this with the information that is available)
Try to read the sentences below…
Everyday my sister goes to shoocl
My two cats lvoe fish
I am a Klua Lmpr University graduate
They are sudtying at UNITEN

29. Human factors : Cognition : Information Presentation
Interface designers need to focus attention on the right place – plan and structure the information presentation to allow for usability and to suit the task flow :
Structured information VS

30. Human factors : Cognition : Information Presentation
Interface designers need to focus attention on the right place
avoid too much/little information:
Read the following lists and then try to recall as many of the items as possible
3, 12, 6, 20, 15, 49, 81, 76, 8, 97, 13, 56
Cat, house, paper, laugh, people, red, yes, number, shadow, broom, rain, plant, lamp, chocolate, radio, one, coin
t, k, y, w, n, o, c, d, e, q, p, r

31. Human factors : Cognition : Information presentation
According to George Miller’s (1956) theory, 7 ± 2 chunks of information can be held in short – term memory at any time.
How to apply this in interface design?
Design tips…
Have only 7 options on a menu
Display only 7 icons on a menu bar
Place only 7 items on a pull down menu

32. Human factors : Perception
How a person perceives what input they get through their senses
Capabilities and limitation of visual processing and understand how we perceive size and depth, brightness and colour

33. Human Factors : Perception
Input from the different senses
Auditory Perception (sound effects)
Haptic (Touch) Perception (game controller)
Visual Perception (pictures/images)
We need to understand how the input information is perceived by humans. 33

34. Human factors - Perception
What can you see, ask each student 34

35. Human factors - Perception

36. The Human-Emotion
Emotion involves both cognitive and physical responses to stimuli
James-Lange: emotion is our interpretation of a physiological response to a stimuli

37. The Human-Emotion
The biological response to physical stimuli is called affect
Affect influences how we respond to situations
positive  creative problem solving
negative  narrow thinking
“Negative affect can make it harder to do even easy tasks; positive affect can make it easier to do difficult tasks”
(Donald Norman)

38. The Human-Emotion Implications for interface design
stress will increase the difficulty of problem solving
relaxed users will be more forgiving of shortcomings in design
aesthetically pleasing and rewarding interfaces will increase positive affect

39. The Human- Errors & mental model
Types of error
slips
right intention, but failed to do it right
causes: poor physical skill, inattention etc.
change to aspect of skilled behaviour can cause slip
mistakes
wrong intention
cause: incorrect understanding
humans create mental models to explain behaviour.
if wrong (different from actual system) errors can occur

40. The Computer A computer system is made up of various elements
Each of these elements affects the interaction
input devices – text entry and pointing
output devices – screen (small & large), digital paper
virtual reality – special interaction and display devices
physical interaction – e.g. sound, haptic, bio-sensing
paper – as output (print) and input (scan)
memory – RAM & permanent media, capacity & access
processing – speed of processing, networks

41. The Computer
When we interact with computers or other electronic devices, what are we trying to achieve?

42. The Interaction
Interaction -> in this context, is a process of information transfer, from the user to a computer and from a computer to the user
input
output

43. 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

44. Execution-Evaluation cycle
Interaction Model
The most influential model of interaction is
Donald Norman’s ( :
Execution-Evaluation cycle
Norman divides interaction into :
Execution
User activities aimed at making the system do something
Evaluation
Evaluating whether the system did actually do what the user wanted 44

45. Understanding Interaction
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 45

46. Understanding interaction Good Design aims to reduce these gulfs
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
E.g ATM
Good Design aims to reduce these gulfs 46

47. The Interaction Model Donald Norman’s model 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

48. The Interaction Model: execution/evaluation loop
system
evaluation
execution
goal
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

49. The Interaction Model: execution/evaluation loop
system
evaluation
execution
goal
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

50. The Interaction Model: execution/evaluation loop
system
evaluation
execution
goal
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

51. Common interaction styles
command line interface
menus
natural language
question/answer and query dialogue
form-fills and spreadsheets
WIMP
three–dimensional interfaces

52. 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!
Typical example: the Unix system, DOS prompts

53. Menus Set of options displayed on the screen Options visible
less recall - easier to use, use of images/icons to help
rely on recognition so names should be meaningful to reflect the tasks to be executed
Selection by:
numbers, letters, arrow keys, mouse
combination (e.g. mouse plus accelerators)
Often options hierarchically grouped
sensible grouping is needed

54. Query interfaces Question/answer interfaces Query languages (e.g. SQL)
user led through interaction via series of questions
suitable for novice users but restricted functionality
often used in information systems
Query languages (e.g. SQL)
used to retrieve information from database
requires understanding of database structure and language syntax, hence requires some expertise

55. Form-fills Primarily for data entry or data retrieval
Screen like paper form
Data put in relevant place
Requires
good design
Sequential/suitable information structure
obvious correction facilities

56. Spreadsheets first spreadsheet VISICALC, followed by Lotus 1-2-3.
MS Excel most common today
Sophisticated variation of form-filling.
grid of cells contain a value or a formula
formula can involve values of other cells e.g. sum of all cells in this column
user can enter and alter data spreadsheet maintains consistency

57. Three dimensional interfaces
virtual reality
‘ordinary’ window systems
highlighting
visual affordance
indiscriminate use just confusing!
3D workspaces
use for extra virtual space
light and occlusion give depth
distance effects
flat buttons …
click me!
… or sculptured

58. … or windows, icons, mice, and pull-down menus!
WIMP Interface
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

59. 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

60. Icons small picture or image represents some objects in the interface
often a window or action
windows can be closed down (iconised)
small representation fi many accessible windows
icons can be many and various
highly stylized
realistic representations.

61. Pointers important component
WIMP style relies on pointing and selecting things
uses mouse, track pad, joystick, trackball, cursor keys or keyboard shortcuts
wide variety of graphical images
Relies on learnability and then cognition

62. Kinds of Menus Menu Bar at top of screen (normally), menu drags down
pull-down menu - mouse hold and drag down menu
drop-down menu - mouse click reveals menu
fall-down menus - mouse just moves over bar!
Contextual menu appears where you are
pop-up menus - actions for selected object
pie menus - arranged in a circle
easier to select item (larger target area)
quicker (same distance to any option) … but not widely used!

63. Menus extras Cascading menus hierarchical menu structure
menu selection opens new menu
and so in ad infinitum
Keyboard accelerators
key combinations - same effect as menu item
two kinds
active when menu open – usually first letter
active when menu closed – usually Ctrl + letter
usually different !!!

64. Menus design issues which kind to use what to include in menus at all
words to use (action or description)
how to group items
choice of keyboard accelerators/short keys

65. Buttons
individual and isolated regions within a display that can be selected to invoke an action
Special kinds
radio buttons – set of mutually exclusive choices
check boxes – set of non-exclusive choices

66. Toolbars long lines of icons … … but what do they do?
fast access to common actions
often customizable:
choose which toolbars to see
choose what options are on it

67. Dialogue boxes
information windows that pop up to inform of an important event or request information.
e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.

68. Summary We have covered the concept of HCI. The human characteristics.
The importance to understand the effect of interface design to its user.
The interaction model which help to analyse how easy or difficult for users to express their needs and get what they want .

69. Assignment 1
Go to: metalab.uniten.edu.my/~rubi Folder: HCI