CHAPTER 2

USER FACTOR (HUMAN),

COMPUTER AND
INTERACTION
Topics
• Introduction to User Factors: Visual, Auditory and
Haptic
• Input and Output Tools
• Memory and Data Processing
• Framework, Interaction Types and Style
• Movement, Memory Constraint and Optimal Display
INTRODUCTION TO USER
FACTORS
WHAT IS HCI?
HUMAN-COMPUTER INTERACTION
• HCI (human-computer interaction) is the
study of interaction between people
(users) and computers.
• Interaction between users and
computers occurs at the user interface
• The golden principle in HCI is that
“people should come first”.
HUMAN-COMPUTER INTERACTION
HCI consists of three parts/components:
• Human: could be an individual user or a group
of users.
• Computer: could be any technology ranging
from the general desktop computer to a large
scale computer system.
• Interaction: any direct or indirect
communication between a human and
computer.
What is Interaction Design?
Designing interactive products to support
the way people communicate and
interact in their everyday and working
lives
What is Interaction Design?
• The focus of interaction design is practice.
– How to design user experience?
• Simple analogy : Creating building
– How architects and civil engineers differ when faced with
the problem of building a house
– Architects : concerned with people and their interactions
(example: is there the right mix of family and private
spaces?)
– Civil engineers: interested in realizing the project
(concerns with cost, durability, structural, environmental,
etc)
Who is involved in Interaction Design?
Who is involved in Interaction Design?
• From Figure A, shows that
many people are involved
 multidisciplinary
teams
• Designers need to know
different thins about
users, technologies and
interaction between
them in order to create
effective user
experiences.
User Experience (UX)

How a product behaves and is used by

people in the real world
User Experience (UX)
User Experience (UX)
• It is about:
– How people feel about a product
– Their pleasure and satisfaction when
using it, looking at it, holding it, opening
or closing it.
– Overall impression of how good it is
• An important aspect is the quality of the
experience.
User Experience (UX)
• The aspects of the user experience that can
be considered:
– Usability
– Functionality
– Aesthetics
– Content
– look and feel
– Sensual and emotional
UX vs UI
• UX:
– UX Design refers to the term User Experience Design
– more analytical and technical field
– User Experience Design is the process of
development and improvement of quality interaction
between a user and all facets of a company.
– User Experience Design is responsible for being
hands on with the process of research, testing,
development, content, and prototyping to test for
quality results.
UX vs UI
UX vs UI
UX vs UI
• UI:
– UI Design stands for User Interface Design.
– UI Design is closer to what we refer to as graphic design.
– User Interface Design is its compliment, the look and feel,
the presentation and interactivity of a product.
– User Interface Design is responsible for the transference of
a brand’s strengths and visual assets to a product’s
interface as to best enhance the user’s experience.
– User Interface Design is a process of visually guiding the
user through a product’s interface via interactive elements
and across all sizes/platforms.
Issues of Concern
• Identifying end-users and
requirements

• Understanding end-user psychology

• Quality and performance

HUMAN FACTORS
Human Factors
What is Human Factors?
• Human factors is the discipline that
tries to establish a relationship
between technology and the human.

• Human factors deal with the human

behavior, abilities, limitations to the
use of software, tools and other jobs
to make their use easier.(Human
Computer Interaction – HCI)
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
Who implement Human Factor?
• Interface designers
• Engineering psychologists
The Human

 Information i/o via

• Visual
• Auditory
• Haptic or the sense of touch
• Movement channels
 Information stored in memory
 Information processed and
applied
Understanding users/humans
• Limited in their capacity to process information
• Information is received and responses given via multiple I/O channels:
– visual,
– auditorial,
– haptic,...
• Users share common capabilities but are individuals
• Emotion effects human capabilities
 In order to design, it is important to understand the capabilities and

limitations of those we are designing for.

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

Example:
• Keyboard keys cannot be smaller than finger size.
• Smaller machines must use different input facilities.
• Toilet for toddlers
• Specific door widths and heights
33
Human Factors : Physiology: Vision

• Two stages in vision

 physical reception of stimulus
 processing and interpretation of stimulus
Human Factors : Physiology: The Eye - physical reception

• mechanism for receiving light and transforming it into electrical

energy

• light reflects from objects

• images are focused upside-down on retina

• retina contains rods for low light vision and cones for colour vision

• ganglion cells (a mass of nervous tissue) detect pattern and

movement
Human Factors : Physiology: Interpreting the signal

Size and depth

• visual angle indicates how much of view object
occupies (relates to size and distance from eye)
• visual acuity is ability to perceive detail (limited)
• familiar objects perceived as constant size (in spite of
changes in visual angle when far away)
• cues like overlapping help perception of size and depth
Human Factors : Physiology: Interpreting the signal (cont)

Brightness
– subjective reaction to levels of light
– affected by luminance (perceived brightness, or grayscale level) of object
– measured by just noticeable difference
– visual acuity (clearness, or sharpness of vision ) increases with
– luminance as does flicker (a momentary flash of light )

Colour
– made up of hue, intensity, saturation
– cones sensitive to colour wavelengths
– blue acuity is lowest
– 8% males and 1% females colour blind
Interpreting the signal (cont)
• The visual system compensates for:
– Movement
– changes in luminance (perceived brightness, or grayscale level,
of a color. Luminance and chromaticity together fully define a
perceived color).
• Context is used to resolve ambiguity
• Optical illusions sometimes occur due to over compensation
Optical Illusions
Optical Illusions

The quick brown

fox jumps over the
the lazy dog.
Human Factors : Physiology: Reading
• Several stages:
– visual pattern perceived
– decoded using internal representation of language
– interpreted using knowledge of syntax, semantics, pragmatics

• Reading involves saccades and fixations

• Perception occurs during fixations (interpreting image)
• Word shape is important to recognition
• Negative contrast improves reading from computer screen
Human Factors : Physiology: Hearing
• Provides information about environment:
– distances, directions, objects etc. (using air as the medium)

• Physical apparatus:
– outer ear - protects inner and amplies sound
– middle ear - transmits sound waves as vibrations to inner ear
– inner ear - chemical transmitters are released and cause
• impulses in auditory nerve.
• Sound
– pitch - sound frequency
– loudness - amplitude
– timbre - type or quality
Human Factors : Physiology: Hearing (cont.)
• Humans can hear frequencies from 20Hz to 15kHz
– less accurate distinguishing high frequencies than low.

• Auditory system filters sounds

– can attend to sounds over background noise.
• for example, the cocktail party phenomenon
Human Factors : Physiology: Touch
• Provides important feedback about environment.

• May be key sense for someone who is visually impaired.

• Stimulus received via receptors in the skin:

– thermoreceptors - heat and cold
– nociceptors - pain
– mechanoreceptors - pressure (some instant, some continuous)

• Some areas more sensitive than others e.g. fingers.

• Kinethesis - awareness of body position affects comfort and performance.

Human Factors : Physiology: Movement
• Time taken to respond to stimulus:
reaction time + movement time
• Movement time - dependent on age, fitness etc.
• Increasing reaction time decreases accuracy in the unskilled
operator but not in the skilled operator.
Human Factors : Physiology: Reaction Time

Human reaction times (dependent on

stimulus type):
• Audio signal - 150ms
• Visual signal - 200ms
• Pain - 700ms

Examples of use:
• Design of video games
• Traffic lights
• Phone

46
Human Factors : Physiology: Movement (cont.)

Fitts' Law describes the time taken to hit a screen target:

Mt = a + b log2(D/S + 1)

where a and b are empirically determined constants

Mt is movement time
D is Distance
S is Size of target
 targets as large as possible, distances as small as possible
Human Factors : Physiology: Movement

Speed of accuracy of movement 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
48
Human Factors : Physiology: Disabilities

Designers must design so that disabled users can achieve

maximum functionality and usability from computer systems

Also devices to assist disabled users:

• Speech input and output systems (useful for blind people and
those with severe motor impairment)
• Keyboard pressing devices
• Eye movement detection devices
49
Human Factors : Physiology: Cognition
Memory
There are three types of memory function:

Sensory memories (buffers for stimuli: visual  iconic,

auditory  echoic, touch  haptic)

Short-term memory or working memory

Long-term memory
Selection of stimuli governed by level of arousal.
Human Factors : Physiology: Cognition
Short-term memory (STM)

• Scratch-pad for temporary recall

• rapid access ~ 70ms

• rapid decay ~ 200ms

• limited capacity - 7± 2 chunks

Human Factors : Physiology: Cognition
STM Examples

212348278493202
0121 414 2626
HEC ATR ANU PTH ETR EET
Human Factors : Physiology: Cognition
Long-term memory (LTM)

• Repository for all our knowledge

– slow access ~ 1/10 second
– slow decay, if any
– huge or unlimited capacity

• Two types
– episodic - serial memory of events
– semantic - structured memory of facts, concepts, skills
– information in semantic LTM derived from episodic LTM
Human Factors : Physiology: Cognition
Long-term memory (LTM)

• Semantic memory structure provides access to information

• Represents relationships between bits of information
• Supports inference

• Model: semantic network

– inheritance - child nodes inherit properties of parent nodes
– relationships between bits of information explicit
– supports inference through inheritance
Long-term memory - semantic network
Human Factors : Physiology: Cognition
Models of LTM

• Information organized in data structures

• Slots in structure instantiated with values for instance of data
• Type-subtype relationships
CAT COMOT
Fixed Fixed
legs: 4 breed of: CAT
type: persian
Default
diet: carnivorous Default
sound: meow size: 35 cm

Variable Variable
size: colour colour
Human Factors : Physiology: Cognition
Models of LTM - Scripts

• Model of stereotypical information required to interpret situation

• Script has elements that can be instantiated with values for context
Script for a visit to the vet
Entry conditions: Roles: vet examines
cat ill diagnoses
vet open treats
owner has money owner brings cat in
pays
Result: cat better takes cat out
owner poorer
vet richer Scenes: arriving at reception
waiting in room
Props: examination table examination
medicine paying
instruments
Tracks: cat needs medicine
cat needs operation
Human Factors : Physiology: Cognition
Models of LTM – Production Rules

• Representation of procedural knowledge.

• Condition/action rules
• if condition is matched
• then use rule to determine action.
IF cat is purring
THEN pat cat

IF cat is hissing
THEN run away
Human Factors : Physiology: Cognition
LTM – Storage of Information

• rehearsal - information moves from STM to LTM

• total time hypothesis

- amount retained proportional to rehearsal time:

• distribution of practice effect

- optimized by spreading learning over time:

• structure, meaning and familiarity - information easier to remember

Human Factors : Physiology: Cognition
LTM – Forgetting

• decay
– information is lost gradually but very slowly

• interference
– new information replaces old: retroactive interference
– old may interfere with new: proactive inhibition

• so may not forget at all memory is selective ….

… affected by emotion - can subconsciously `choose' to forget
Human Factors : Physiology: Cognition
LTM – Retrieval

• recall
– information reproduced from memory
– can be assisted by cues,
• e.g. categories, imagery

• recognition
– information gives knowledge that it has been seen before
– less complex than recall - information is cue (a stimulus that provides
information about what to do) .
Human Factors : Physiology: Cognition
Thinking: reasoning and problem solving

• Reasoning
– Deductive: derive logically necessary conclusion from given premises.
• e.g. If it is Friday then she will go to work
It is Friday
Therefore she will go to work.

• Logical conclusion not necessarily true:

• e.g. If it is raining then the ground is dry
It is raining
Therefore the ground is dry
Human Factors : Physiology: Cognition
Deduction (cont.)

• Human deduction poor when truth and validity clash

e.g. Some people are babies

Some babies cry
Inference - Some people cry
Correct?

• People bring world knowledge to bear

Human Factors : Physiology: Cognition
Inductive Reasoning

• Inductive: generalize from cases seen to cases unseen

– e.g. all elephants we have seen have trunks
– therefore all elephants have trunks.

• Unreliable: can only prove false not true.

• Useful though.

• Humans not good at using negative evidence

– e.g. Wason's cards.
Human Factors : Physiology: Cognition
Abductive Reasoning

• reasoning from event to cause

– e.g. Sam drives fast when drunk.
– If see Sam driving fast, assume drunk.
• Unreliable: can lead to false explanations.

to be continued on next week……..

Human Factors : Physiology: Cognition
Problem Solving

• Process of finding solution to unfamiliar task using knowledge.

• Several theories.
• Gestalt
– problem solving both productive and reproductive
– productive draws on insight and restructuring of problem
– attractive but not enough evidence to explain `insight' etc.
– move away from behaviouralism and led towards information
processing theories
Human Factors : Physiology: Cognition
Problem Solving (cont.)

• Problem space theory

– problem space comprises problem states
– problem solving involves generating states using legal operators
– heuristics may be employed to select operators
e.g. means-ends analysis
– operates within human information processing system
e.g. STM limits etc.
– largely applied to problem solving in well-defined areas
e.g. puzzles rather than knowledge intensive areas
Human Factors : Physiology: Cognition
Problem Solving (cont.)
• Analogy
– analogical mapping:
novel problems in new domain?
use knowledge of similar problem from similar domain
– analogical mapping difficult if domains are semantically different

• Skill acquisition
– skilled activity characterized by
• chunking - lot of information is chunked to optimize STM
• conceptual rather than superficial grouping of problems
- information is structured more effectively
Human Factors : Physiology: Cognition
Errors and mental models

• Two Types of errors

• 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.
Human Factors : Physiology: Cognition
Individual differences

• long term - sex, physical and intellectual abilities

• short term - effect of stress or fatigue
• changing – age
• Extra requirement for the development of Web
Site suitable for Malaysian Public / Overseas
Users?
 Human Factors : Physiology: Cognition
Cognitive Psychology and Interactive System Design

• Some direct applications

e.g. blue acuity is poor
 blue should not be used for important detail.
• However, correct application generally requires
understanding of context in psychology, and an
understanding of particular experimental conditions
BIT3163 HCI Lec 2
71
Slide
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.

72
Human Factors : Cognition
Managing Attention
• Process of selecting things to concentrate on at a point in time
• Depends on:
1. Users’ goals
» If we know exactly what we want to find out, we try to
match this with the information that is available
2. Information presentation
» Greatly influence how easy or difficult it is to digest
appropriate pieces of information
Attention
Human Factors : Cognition : User’s Goals
Interface designers need to focus attention on the users’ goals

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 UTHM
Human Factors : Cognition : Information
Presentation
Try to read the paragraph below…
According to a rscheearch at Cmabrigde Uinervtisy, it deosn't
mttaer in waht oredr the ltteers in a wrod are, the olny
iprmoetnt tihng is taht the frist and  lsat ltteer be at the rghit
pclae. The rset can be a total mses and you can sitll raed it
wouthit porbelm. Tihs is bcuseae the huamn mnid deos not
raed ervey  lteter by istlef, but the wrod as a wlohe and

the  biran fguiers it out aynawy.

How do you explain being able to read this?

76
Human Factors : Cognition : Information Presentation

Interface designers need to focus attention on

the right place:
• Structured information

VS

77
Human Factors : Cognition : Information Presentation

Interface designers need to focus attention on

the right place:
• Information grouped into meaningful parts

78
Human Factors : Cognition : Information Presentation

Interface designers need to focus attention on the right place:

• Amount of information presented not too much/little
• Read the lists in the next slide, cover it up, 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
79
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

80
 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
Human Factors : Perception
Input from the different senses
• Auditory Perception
• Haptic (Touch) Perception
• Visual Perception

We need to understand how the input information is

perceived by humans.

82
Human Factors : Perception

83
Human Factors : Perception

84
Human Factors : Perception

85
Alternative Sensory Channels

• Different sensors provide parallel channel capacity

• Sound:
– Not so easy to localize but can detect from any direction
– Grabs attention – warning mechanisms
– Good signal of causal relation – use as confirmatory feedback
– Monitoring state, ‘background information’ Disk, printer
noise etc. Example of user improvisation in use of ‘data’
Interface sound design is typically arbitrary and synthetic
Alternative Sensory Channels

• Touch and haptics: Exploit our natural ability to

‘handle’ objects
Effect of Icon Density and Color Contrast on Users’ Visual Perception in Human
Computer Interaction

• Engineering Psychology and Cognitive Ergonomics,

2015, Volume 9174
• ISBN : 978-3-319-20372-0
• Zhangfan Shen, Chengqi Xue, Jing Li, Xiaozhou Zhou
Role of Icon

• Icons are often used to transform lots of information in user

interface design, because they are thought to be more useful at
communicating ideas than words.
• When working with computers or other smart devices with
complex user interfaces, people receive large amounts of
graphical information.
• This kind of information should be presented in such a way that
its perception is accurate, fast and as effortless as possible.
Role of Icon

• Optimal properties of different graphical interface attributes:

– suitable icon size,
– appropriate icon spacing,
– applicable amount and density of icons in a user interface,
– minimum color contrast difference between background and
icon color, and
– minimum amount of brightness contrast between
background and icon color.
Icon Size and Density

• Visual search is an important activity in our everyday

life.
• It even constitutes several severe tasks, such as
controlling an aircraft, monitoring the working state of
nuclear power plants and selecting a military target.
• Therefore, icons need to be designed to optimize search
accuracy and search time.
Icon Size and Density

• Two crucial factors assumed to greatly affect users’

icon cognitive process:
– icon size and density of icon
– the effects of spacing and size of individual
interface elements on people’s perception
Literature Review on Icon Size and Density
• From literature:  
– icons smaller than 0.7 deg resulted in significantly raised search
time.
– they suggested that icons used in graphical user interfaces
should be at least about 1 deg in size (about 0.7 cm at a viewing
distance of 40 cm) for the majority of users to be able to
perform their computerized tasks with relative ease.
– decreasing luminance contrast the search times increased
strongly
Research Finding
• Propose user interface designers’ guidelines about the appropriate
density and luminance contrast of icon design.
– (1) The number of the icons should not be more than 25 in one area.
– (2) For small number of the icons, the inter-element spacing should
be more than 1/2 icon, which would make users easier to identify
them. For large number of icons, small icon spacing (1/4 - 1/2 icons)
is recommended.
– (3) High color contrast can enhance the efficiency of icon
identification. 
Metaphors
Metaphors
 Metaphors

• A conceptual model that has been developed to be similar in

some way to the aspects of a physical entity.
• Maps elements of the real world on to elements of the
system world
• Dragging a document icon across the desktop screen was
seen as equivalent to picking up a piece of paper in the
physical world and moving it.

97
 Metaphors

• Benefits of using metaphors

• Easier to learn because it is familiar to user
• Enables learning by building upon existing knowledge
• Provide a powerful way of learning the complexity of a
system
• A short cut to complete concepts

98
 Cultural and International Issues

• Beware of using text or alphabetic characters inside an icon.

Different language versions of the icon will probably be
needed. (e.g. H for home, H for help)
• Hand symbols, facial appearances, etc. vary immensely from
culture to culture! Don’t use them in icons. (may be offensive)
• Beware also of metaphors dependent on a particular culture,
for example the US mailbox for incoming mail. (Each
country’s mailbox looks different)
99
Metaphors : Recognition & Recall
• Where possible, choose a metaphor familiar
to the viewer.
• Use concrete objects wherever possible,
abstract concepts and actions are difficult to
visualise. (e.g. water tap with water drop
instead of a river to represent water)
• Provide textual labels (tooltips) 100
Stakeholders

Defined as anyone who is affected by the success and the

failure of the system

101
 Categories of Stakeholders

1. Primary
• Those who use the system

2. Secondary
• Those who don’t directly use the system but receive
the output from it
• Someone who receive reports from the system

102
 Categories of Stakeholders

3. Tertiary
• Those who do not fall into 1
and 2 but who are affected by
the success or failure of the
system
• A business competitor whose
profits increase or decrease
depending on the success of
the system
103
 Categories of Stakeholders

4. Facilitating
• Those who are involved in
designing, developing and
maintaining the system

104
Example: Classifying Stakeholders

Classifying stakeholders - An Airline Booking System

“An international airline is considering introducing a new
booking system for use by associated travel agents to sell flights
directly to the public”

105
 Classifying Stakeholders

•Primary Stakeholders
– Travel Agency staff, airline booking staff
•Secondary Stakeholders
– Customers, Airline management
•Tertiary Stakeholders
– Competitors, Civil aviation authorities, Airline Shareholders
•Facilitating Stakeholders
– Design team, IT Department staff
106
INPUT AND OUTPUT TOOLS
Input Devices
Novel Input Devices
• Foot mouse: depress one edge to move cursor in that direction. Leaves hands free for
other tasks
• Eye tracking controller: low-power laser into the eye. Angle of reflection of the beam
changes with eye movement
– Equipment too expensive
– Good for selection, not for drawing (eye movement not smooth)
– useful for HCI experiments!
– Suitable for disabled users
• Data Glove
– 3D input device
– Fibre optic sensors to measure finger position (joint angles) + sensors (ultrasound) for
3D position and wrist rotation
– Rare use
– Expensive
– `Naturalness' of interaction - can even have feedback
Novel Input Devices
• Electrophysiological sensing: electrodes on skin detect muscle
movement
• Whole body tracking
– may be laser scanned or via other sensors or cameras
– used in animation and clothing modelling
• Blow-switches: simple inputs from the mouth; useful for the disabled
• Handwriting recognition
– Current technology fairly inaccurate
– Enormous individual handwriting differences
– Letter identity depends on context
– Use of neural networks for recognition
– used in palm-tops
Novel Input Devices
• Speech recognition
– Advantages:
• New user easily trained
• Free hands and user movement
• Very suitable for disabled people
– Discrete word recognition: individual words by a specific person
– Continuous word recognition:
• Boundaries between words difficult to recognise
– Problems:
• Subject to interference from background noise
• Severe limitations in distinguishing between similar sounds
• Even after recognition, difficult to interpret by computer
– Applied with many constraints to only specialised tasks
• face/gesture recognition
– research into image-based expression detection for help systems etc!
Output Devices
INTERACTION TYPES
AND FRAMEWORK
Ergonomics

• Physical aspects of interfaces

• Also known as human factors
• 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

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

115
Interaction Types

• Interaction
– the ways a person interacts with a product or application.
• There are 4 main types:
– Instructing
– Conversing
– Manipulating
– Exploring
Interaction Types : Instructing
• Users issue instructions to a system
• This can be done by:
– Typing in commands
– Selecting options from menus in a windows environment
– Multi-touch screen
– Speaking aloud commands
– Gesturing
– Pressing buttons
– Using combination of function keys
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

118
 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

119
 Icons

• small picture or image

• represents some objects in the interface
– often a window or action
• windows can be closed down (iconised)
– small representation for many
accessible windows
• icons can be many and various
– highly stylized
– realistic representations.

120
 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

121
 Menus

Fi l e Edi t Opt i o ns Fo nt
Ty p e wr i t e r
Sc re e n
Times

• problem - menus can take up a lot of screen space

• solution - menu appears when needed
122
 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

123
 Menus
Menu systems can be
– purely text based, with options presented as numbered
choices
– graphical selected by arrow keys
– graphical selected by mouse
– combination (e.g. mouse plus accelerators)

Restricted form of full WIMP system

124
Types 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!

125
Menu Extras
• Cascading menus
– hierarchical menu structure
– menu selection opens new menu

• 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 !!!

126
 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
127
 WIMP Looks and Feel
Lots of things you can interact with:
• main WIMP components (windows,menus,icons)
• buttons
• dialogue boxes
• pallettes
Collectively known as widgets

appearance + behaviour = look and feel

128
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

129
 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
130
 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.

131
Interaction Types : Instructing

• Benefits:
– The instruction is quick and efficient
– Fitting the need of frequently repeat actions such
as saving, deleting, and organizing files.
Interaction Types : Conversing

• Where users have a dialog with a system

• This can be done by:
– Users can speak via an interface
– Type in questions to which the system replies via text or
speech output.
• Benefits:
– Allows people especially novices to interact with the system
Interaction Types : Manipulating

• Where users interact with objects in a virtual or

physical space by manipulating them
• Example:
– using kinect to control the movements of an on-
screen avatar
– Robots
Interaction Types : Manipulating

• Benefits:
– Helping beginners learn basic functionality rapidly
– Enabling experienced users to work rapidly on a wide range
tasks
– Allowing infrequent users to remember how to carry out
operations over time
– Preventing the need for error messages, except very rarely
– Helping users gain confidence and mastery and feel in control
Interaction Types : Exploring
• Where users move through a virtual environment or a physical
space
• Virtual environments include 3D worlds, augmented and virtual
reality systems
• Examples: smart rooms, interior of a building
• Benefits:
– Enable people to explore and interact with an environment by
exploiting their knowledge of how they move and navigate
through existing spaces
Frameworks

• Framework is a set of interrelated concepts and/or a

set of specific questions that is intended to inform a
particular domain area
• To help designers constrain and scope the user
experience for which they are designing
• Types of frameworks.
Recent framework : Garret’s (2010)
Completion

Conception
Garret’s (2010)

• Comprises 5 planes:
– Surface
– Skeleton
– Structure
– Scope
– Strategy
• Top plane: being the most concrete
• Bottom plane : the most abstract
Garret’s (2010)

• Each plane is dependent to the planes below it

• Shows that decision made early affect those further
up planes
API

• API : Application Programming Interface

• set of routines, protocols, tools, and definitions that
allow communication between technology products
such as applications and websites
• help programmers to add new features to
applications, and improve the speed and efficiency of
the development process
Example of API
Categories of API
• Web-based system
• A web API is an interface to either a web server or a web browser. These APIs are
used extensively for the development of web applications. These APIs work at either
the server end or the client end. Companies like Google, Amazon, eBay all provide
web-based API.
• Some popular examples of web based API are Twitter REST API, Facebook Graph API,
Amazon S3 REST API, etc.
• Operating system
• There are multiple OS based API that offers the functionality of various OS features
that can be incorporated in creating windows or mac applications.
• Some of the examples of OS based API are Cocoa, Carbon, WinAPI, etc.
Categories of API
• Database system
• Interaction with most of the database is done using the API calls to the
database. These APIs are defined in a manner to pass out the requested data
in a predefined format that is understandable by the requesting client.
• This makes the process of interaction with databases generalised and thereby
enhancing the compatibility of applications with the  various database. They
are very robust and provide a structured interface to database.
• Some popular examples are Drupal 7 Database API, Drupal 8 Database API,
Django API.
Categories of API
• Hardware System
• These APIs allows access to the various hardware components of a system.
They are extremely crucial for establishing communication to the hardware.
Due to which it makes possible for a range of functions from the collection
of sensor data to even display on your screens.
• For example, the Google PowerMeter API will allow device manufacturers
to build home energy monitoring devices that work with Google
PowerMeter.
• Some other examples of Hardware APIs are: QUANT Electronic, WareNet
CheckWare,OpenVX Hardware Acceleration, CubeSensore, etc.
GUI

• GUI: Graphical User Interface

• refers to a software platform that displays back-end data in a
visually coherent way to help users interact with a computer
application
• How to interact with GUI:
– Mouse
– Touch screen
– Keyboard
API vs GUI
• Interacting parties
– API : communication between two programs
– GUI : interaction between human & computer program
• Complexity
– API : doesn’t require too much technical know-how; requires few
resources
– GUI : require high technical skills to leverage ; requires a lot of
things, including back-end storage that is backed by a logical
architecture, a library of scripts, and regular management
API vs GUI
• Time Factor
– API : communication between two programs
– GUI : interaction between human & computer program
• Complexity
– API : doesn’t require too much technical know-how; requires few
resources
– GUI : require high technical skills to leverage ; requires a lot of
things, including back-end storage that is backed by a logical
architecture, a library of scripts, and regular management
API
• An API has three primary elements:
• Access: is the user or who is allowed to ask for data or services?
• Request: is the actual data or service being asked for (e.g., if I give you
current location from my game (Pokemon Go), tell me the map around that
place).  A Request has two main parts:
– Methods: i.e. the questions you can ask, assuming you have access (it also
defines the type of responses available).
– Parameters: additional details you can include in the question or
response.
• Response: the data or service as a result of your request.
Disadvantages of API

• APIs are often difficult to use, and programmers at all

levels, from novices to experts, repeatedly spend
significant time learning new APIs.
• APIs are also often used incorrectly, resulting in bugs
and sometimes significant security problems.
• APIs must provide the needed functionality, but even
when they do, the design could make them unusable.
Improving API Usability

• Based Nielsen’s “heuristic evaluation” guidelines

– Visibility of system status.
• It should be easy to check the state (such as whether a file is open or not),
• appropriate feedback
– Match between system and real world.
• Names given to methods and the organization of methods into classes should
match the API users’ expectations.
• For example, there is a class in Java called File, but it is a high-level abstract
class to represent file system paths, and API users must use a completely
different class (such as FileOutputStream) for reading and writing;
Improving API Usability

• Based Nielsen’s “heuristic evaluation” guidelines

– User control and freedom.
• API users should be able to abort or reset operations
and easily get the API back to a normal state.
– Consistency and standards.
– Error prevention.
– Recognition rather than recall.
Improving API Usability

• Based Nielsen’s “heuristic evaluation” guidelines

– Flexibility and efficiency of use.
– Aesthetic and minimalist design.
– Help users recognize, diagnose, and recover from
errors.
– Help and documentation.
Q&A