PROGRAMMING INTERACTIVE

SYSTEM (CSC541)

Instructor Name :- Suzana Binti Ahmad

Room No :- T1-44
E-mail :- suzana@tmsk.uitm.edu.my
Week Topics
1 Introduction to Human Computer Interaction
2 User Interface Programming
3 Peripherals, Software Architectures and MVC
4 Software Architectures and MVC
5 Psychology and Motor Performance
6 Cognition Aspects
7 User Centered Design
8 User Centered Design :- Data gathering, Analysis and Interpretation
9 User Centered Design :- Design, Prototyping and Construction
10 Conceptual Design
11 Heuristic Evaluation
12-13 Introduction to Web Development
14 The Emergent of Interfaces and Interactions
 Assessment
• Coursework:
– Assignment 10%
– Project Design & Development 20%
– Project evaluation 10%
• Test 30%
• Final Examination 30%
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%

5
The Perfect User (every designer ‘s wish)

6
Common Issues in User Interface Design
• Software developers are forced to “do it all”
• Often based on intuition and experience
than on theory-based models
• Tendency to let the art of interface design
beats its usability
• Inconsistent features that do not fit into a
good user interface design criteria

7
 Why Study HCI?
Business view :
to employ people more productively and
effectively
- people costs now far outweigh hardware and software
costs
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

8
 Why Study HCI?

Human Factors view :

Humans have limitations.
Errors are costly in terms of
- loss of time & money
- loss of lives in critical systems
- loss of morale

9
 What is HCI

Short for human-computer Interaction.

A discipline concerned with the study, design, evaluation
and implementation of interactive computing systems for
human use and with the study of major phenomena
surrounding them

10
 What is HCI

Design of interactive systems that are:

•Enjoyable to use – useful – enhance the
lives of the people that use them
•Accessible
•Usable
•Engaging

11
 What is HCI

Methods for:
•Capturing what people want to do rather than just what
the technology/designer can do
•Understanding how to translate from what people wants
to good design
•Involving people in the design process
•Designing for diverse users and uses

12
 What is HCI
• The Human
– Single user, groups, I/O channels, memory,
reasoning, problem solving, error, psychology
• The Computer
– Desktop, embedded system, data entry devices,
output devices, memory, processing
• The Interaction
– Direct/indirect communication, models,
frameworks, styles, ergonomics
 History of HCI
• Douglas Engelbart, 1962
“Augmenting Human Intellect: A
Conceptual Framework”
• In 1968, workstation with a mouse,
links across documents, chorded
keyboard
 History of HCI
• XEROX Alto and Star • Apple LISA and Mac
– Windows – Inexpensive
– Menus – High-quality
– Scrollbars graphics
– Pointing – 3rd party
– Consistency applications
 History (and future) of HCI
• Large displays • Speech recognition
• Small displays • Multimedia
• Peripheral displays • Video conferencing
• Alternative I/O • Artificial intelligence
• Ubiquitous • Software agents
computing
• Recommender
• Virtual environments systems
• Implants • ...
 The goal of HCI

The goals of HCI are to develop or improve

the safety, utility and effectiveness of
systems that include computers, often
through improving usability.

17
 The goal of UI Design

• 5 (plus 1) measurable factors

– Time to learn
– Speed of performance
– Error rate
– Retention over time
– Subjective satisfaction
– Cost

18
 Interaction Design
Designing interactive products to support the
way people communicate and interact in their
everyday and working lives
• creating user experiences that enhance
and augment the way people work,
communicate and interact
 Is Interaction Design Beyond HCI?
• The main difference between Interaction
Design (ID) and Human-Computer Interaction
(HCI) as on of scope
 Is Interaction Design Beyond HCI?
• ID – concerned with theory, research and
practice of designing user experiences for all
manner of technologies, systems and products
• HCI – narrower focus which concerned on the
design, evaluation and implementation of
interactive computing systems for human use
and with the study of major phenomena
surrounding them
 Is Interaction Design Beyond HCI?
• Ergonomics and Human Factors are closely
overlapping goals with HCI, being concerned
with understanding the interactions among
humans and other aspects of a system in
order to optimize human well-being and
overall system performance
 Process of Interaction Design
1. Identify needs and establish requirements
2. Develop alternative designs that meet those
requirements
3. Build interactive versions of the designs so
that they can be communicated and assessed
4. Evaluate what is being built throughout the
process
 User Experience
• Study of how a product behaves and is used
by people in the real world
 User experience
• How a product behaves and is used by people
in the real world
• How people feel about the product and their
satisfaction when using it, looking at it,
holding it, and opening or closing it
• One cannot design a user experience only
design for a user to experience
 User experience
• Example – outside case of a cell phone can be
design smooth, silky and fit in the palm of a
hand; when held, touched, looked at and
interacted with, that can provoked a sensual
and satisfying user experience.
 Human-centered computing
• Study of humans, as individuals and in social
groups, by focusing on the ways that human
beings adopt, adapt, and organize their lives
around computational technologies
 User-centered design
• A design philosophy and a process in which
the needs, wants, and limitations of the end
user of an interface or document are given
extensive attention at each stage of the design
process
 Universal Usability
• Design of products with built-in flexibility
enabling use by all people, regardless of age
and ability
 What is usability?
• Usability can simply be thought of as the practical
implementation of good HCI, but, more formally :

– Usability means easy to learn, effective to use and

providing an enjoyable experience

30
 How to design and build usable UIs?

UI Development process :
• User Profiling
• Usability goals
• Task analysis & understanding the process
• Prototyping
• Evaluation
• Programming

31
 Important!!!

• users should be involved throughout the

development of the project (How?)

• specific usability and user experience goals need to

be identified, clearly documented and agreed at the
beginning of the project

32
Good and Poor Design
 How to avoid bad design?
• Identify needs and establish requirements
• Develop alternative designs to meet these
• Build prototypes with increasing complexity
and interactivity that can be communicated
and assessed by users
• Evaluate what is being built throughout the
process
 How to avoid bad design?
• Less but not least
– Project goals need to be identified, clearly
documented and agreed at the beginning
– Users should be involved throughout the process
– Iteration is part of the process – sometimes by
throwing away previous prototype
 Proper design should consider
• Physical Interaction
– system input – mouse, speech (or noise), gesture
– System output – visual, audio, haptic?
• Conceptual Interaction
– Do we know how the system works and what we
should do?
 Proper design should consider
• Affected by (PACT framework)
– People
– Activities
– Contexts
– Technologies
– A student uses a phone to send a text message whilst sitting on a bus
– Air traffic controller work together using computers and flight strips to ensure
smooth running of an airport in the air traffic control centre
– A 70-year-ole woman programs various buttons to set the intruder alarm in
her house
 Design Principles
• Used by interaction designers to aid their thinking
when designing for the user experience
• The best known design principles are concerned
with how to determine what users should see
and do when carrying out their tasks using and
interactive product
• Most common describes are – visibility, feedback,
constraints, consistency and affordance
 Design Principles
• Visibility
– The more visible functions are the more likely it is that
users will be able to do next
• Norman (1988) describes the control of a car to emphasize
this point
• The controls for different operations are clearly visible
– Indicators, headlights, horn (indicating can be done)
• The relationship between the controls have been positioned
in the car and what they do makes it easy for the driver to
find the appropriate control for the task at hand
• In contrast, when the functions are out of sight, it makes
them more difficult to find and know how to use
 Design Principles
• Feedback
– Involves sending back information about what action
has been done and what has been accomplished,
allowing the person to continue with the activity
• Various kind of feedback are available for interaction –audio,
tactile, verbal, visual, and combination of these
• Using feedback in the right way can also provide the
necessary visibility for user interaction
• Example – trying to play the guitar
 Design Principles
• Constraints
– Determining ways of restricting the kinds of user
interaction that can take place at a given moment
• Example – deactivate certain menu options by shading them
gray, thereby restricting the user only to actions permissible
at that stage of activity
• Advantages of this form of constraining is that it prevents
the user from selecting incorrect options and thereby
reduces the chance of making a mistake
 Design Principles
• Consistency
– Refers to designing interfaces to have similar
operations and use similar elements for achieving
similar task
• Example – a consistent operation using the same input
action to highlight any graphical object at the interface, such
as always clicking the left mouse button
• Benefits – easier to learn and use. Users have to learn only
single mode of operation that is applicable to all objects
 Design Principles
• Affordance
– Refers to an attribute of an object that allows people
to know how to use it
• Example – a mouse button invites pushing, a door handle
affords pulling etc.
• Graphical elements like buttons, icons, links and scrollbars
are talked about with respect to how to make it appear
obvious how they should be used
Other Things to Ponder
 What do humans do well?
• Sense low level stimuli
• Pattern recognition
• Inductive reasoning
• Multiple strategies
• Adapting
• “Hard and fuzzy things”, paraphrasing George
Miller
 What do computers do well?
• Counting and measuring
• Accurate storage and recall
• Rapid and consistent responses
• Data processing/calculation
• Repetitive actions
• “Simple and sharply defined things”
paraphrasing George Miller
 The Interaction
At a high level,
let humans do what humans do well
and let computers do
what computers do well
 The Interaction
• Let humans do:
– Sensing of low level • Let computers do:
stimuli – Counting and measuring
– Pattern recognition – Accurate storage and
– Inductive reasoning recall
– Multiple strategies – Rapid and consistent
– Adapting responses
– Creating – Data processing
– Calculation
– Repetitive actions
Limitations of Short-Term Memory
• Miller’s 7 +/- 2 magic number
– People can recognize 7 +/- 2 chunks of
information at a time and hold these chunks in
memory for 15-30 seconds
• Chunking
– ability to cluster information together
– size of chunk depends on knowledge, experience,
and familiarity
 Guidelines

• Users prefer shorter • Users should be advised

response times of long delays
• Shorter response times • Modest variability in
lead to less thinking response time is
• Longer times (>15 sec) are acceptable
disruptive
• Unexpected delays may
• Faster times may increase
productivity, but also be disruptive
error rates • Empirical tests can help
set response times
End of lecture