69
+ Human-Computer Interaction Chapter 1- An Introduction
+
Human-Computer Interaction
Chapter 1- An Introduction
+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?
+
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%
+ The Perfect User (every designer ‘s wish)
+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
+ What is HCI?
Short for human-computer Interaction.A discipline concerned with the study, design, construction and implementation of human-centric interactive computer systems.
+HCI DefinitionsFrom 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.
+HCI DefinitionsFrom 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 (http://en.wikipedia.org/wiki/Human computer_interaction):
HCI involves the study, planning, and design of the interaction between people and computer.
+HCI Disciplines
Fig 1: HCI disciplines ( source: cs3240hci.wordpress.com)
+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
+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
+
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
Ergonomics13
+
arrangement of controls and displayse.g. controls grouped according to function or frequency of use, or sequentially
(mapping)
surrounding environmente.g. seating arrangements adaptable to cope with all sizes of user (movie theatre)
health issuese.g. physical position, environmental conditions (temperature, humidity), lighting,
noise
use of coloure.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
Ergonomics - examples 14
+HCI Interrelationships
Fig 2: HCI interrelationship (source: sigchi.org)
+
16
Understanding UsersWho 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.
+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
IconicEchoicHaptic
Short term memory
Or Working memory
Long term memoriesattention rehearsal
Fig 3: A model of the structure of memory (source Dix, et al. 2009)
+The Human: Human Memory-Sensory Memory1. 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
+The Human: Human Memory-LTM3. 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
+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
+
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?
+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 interactivesystems.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
+
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
+
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.
27
Human factors : Cognition
Managing Attention• Process of selecting things to concentrate on at a point in
time • Depends on:
1. Users’ goalsIf we know exactly what we want to find out, we
try to match this with the information that is available
2. Information presentationGreatly influence how easy or difficult it is to
digest appropriate pieces of information
Human factors : Cognition : User’s Goals
Everyday my sister goes to shooclMy two cats lvoe fishI am a Klua Lmpr University graduateThey are sudtying at UNITEN
Try to read the sentences below…
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)
+
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
Human factors : Cognition : Information Presentation
VS
+
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, 56Cat, 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
Human factors : Cognition : Information Presentation
+ 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
+ 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.
+
34
Human factors - Perception
+Human factors - Perception
+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
+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)
+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
+The Human- Errors & mental modelTypes 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
+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
+The Computer When we interact with computers or other electronic
devices, what are we trying to achieve?
+ 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
+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
Interaction Model
• The most influential model of interaction is Donald Norman’s (http://www.jnd.org/) :
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
+
45
Understanding InteractionExecution
– 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
+
46
Understanding interactionEvaluation
– 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
+ 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
+ The Interaction Model: execution/evaluation loop
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
system
evaluationexecution
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
system
evaluationexecution
goal
The Interaction Model: execution/evaluation loop
+
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
system
evaluationexecution
goal
The Interaction Model: execution/evaluation loop
+ Common interaction styles
command line interfacemenusnatural languagequestion/answer and query dialogueform-fills and spreadsheetsWIMPthree–dimensional interfaces
51
+ 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
52
+ 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
53
+ Query interfaces
Question/answer interfaces 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
54
+ 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
55
+ 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
56
+ 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 …
… or sculptured
click me!
57
+ 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
58
+ 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
59
+ 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.
60
+ 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
61
+ 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!
62
+ 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 !!!
63
+ 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
64
+ 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
65
+ Toolbars
long lines of icons …… but what do they do?
fast access to common actions
often customizable:choose which toolbars to seechoose what options are on it
66
+ 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.
67
+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 .
+Assignment 1Go to:
metalab.uniten.edu.my/~rubi
Folder: HCI
