INTRODUCTION TO

HUMAN COMPUTER INTERACTION

Slide
1

INSY4122
 HUMAN COMPUTER INTERACTION
 “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”

 Main elements of HCI are:

People
Computers
Interaction
Activities
Environment

Why people interact with the

computing systems ? Slide
2

INSY4122
 HCI
 The interaction and interface between a human and a
computer performing a task
Tasks might be work, play, learning, communicating, etc.
Write a document, calculate monthly budget, learn about
places to live in , drive home…
 …not just desktop computers!

Slide
3

INSY4122
 DESIGN FOR PEOPLE

 People’s tasks, goals, and values drive development

 Work with users throughout the process

 Assess decision from the vantage point of users, their

work and their environment
 Pay attention to people’s abilities and situation
 Talk to the actual experts ?

Slide
4

INSY4122
 D EFINITIONS
Definition: interaction technique
An “interaction technique” starts when the user does something
that causes a computer to respond, and includes the direct
feedback from the computer to the user. Interaction techniques
are generally reusable across various applications
Wikipedia’s definition:
“An interaction technique, user interface technique or input
technique is a combination of hardware and software elements that
provides a way for computer users to accomplish a single task.”
Foley & van Dam, 1990:
“An interaction technique is a way of using a physical input/output
device to perform a generic task in a human-computer dialogue.”

Slide
5

INSY4122
 “INTERACTION TECHNIQUES”
 Scroll bars, buttons,
text fields
 But also:
Drawing a new
object in an editor
Copy-and-paste
Selecting a cell in a
spreadsheet
 How high level?
Text editor widget,
but not Word
Scroll bar is
composed
of buttons, etc. Slide
6

INSY4122
 THEPAST:
THEERA OF “HCI”

Users as information processors

USERS

Dominance of cognitive psychology and engineering for

modelling behaviour
TECHNOLOGY

At the desktop both literally and metaphorically

GOAL

To model users and system behaviour so as to maximize

productivity and efficiency in the office

Slide
7

INSY4122
 THEPRESENT:
THE“MOBILE”,“PERVASIVE”AND “ubiquitous”ERA

Users as players in a bigger system

USERS

As entities whose activities can be modelled,

predicted, sensed and augmented
TECHNOLOGY

Everywhere and anywhere (mobile, pervasive, ubiquitous)

Converging ?
Smart environments

To model user and system behaviour so as to maximize

GOAL

productivity and efficiency anytime, anyplace

To make users more effective through intelligent
environments and tools
Slide
8

INSY4122
OVERVIEW: MAPOF HUMAN COMPUTER
INTERACTION
Use and Context

Social Organization andWork Human-Machine Fit and Adaptation

Application Areas
Human Computer
Dialogue Computer
Human Techniques Graphics
Information
Processing
Aa
Dialogue Dialogue
Language, Genre Architecture
Communication Input and
and Interaction Ergonomics Output Devices

Example Systems
Evaluation and Case Studies Implementation
Techniques Techniques and Tools
Design
Approaches Slide
Development Process 12
9

INSY4122
 WHY STUDY INTERACTION
TECHNIQUES?
 Used extensively
Everyone who uses a computer
uses copy-paste, etc.
So can have an enormous impact
 And new interaction techniques are created all
the time:
Google POLI HCI Interaction Technologies
Patent on “Bounce at end of scrolling” for
iPhone submitted by Bas Ording in 2007 (right
before 1st iPhone was released in 2007)
“Pull down to refresh” – patent submitted in
2010 by Twitter, became popular in 2013
Many new CHI & UIST conference papers every
year with new ones

Slide
10

INSY4122
 WHYSTUDY INTERACTION
TECHNIQUES, CONT.
 Interaction Techniques have a high economic value
Often the subject of patents and lawsuits
 Can’t patent overall look and feel
“Apple Wins Over Jury in Samsung Patent Dispute,
Awarded $1.05 Billion in Damages (Live Blog)”
“Jury orders Samsung to pay $290M to Apple in patent
case”
 Need new ones
Text entry on smartphones is a big barrier
Selecting individual elements, characters on smartphones

Slide
11

INSY4122
 GOALS OF HCI
 Allow users to carry out tasks
Safely

Efficiently

Enjoyably

Slide
12

INSY4122
 DESIGN EVALUATION
 Both subjective and objective metrics
 Some things we can measure
Time to perform a task
Improvement of performance over time
Rate of errors by user
Retention over time
Subjective satisfaction

Slide
13

INSY4122
 USER TEST RESULTS
 Functionally the system is fantastic
But….

Slide
14

INSY4122
 UIDESIGN /DEVELOP PROCESS
 User-Centered Design
Analyze user’s goals & tasks
Create design alternatives
Evaluate options
Implement prototype
Test
Refine
IMPLEMENT

Slide
15

INSY4122
 KNOW THY USERS!
 Physical & cognitive abilities (& special needs)
 Personality & culture

 Knowledge & skills

 Motivation

 Two Fatal Mistakes:

Assume all users are alike
Assume all users are like the designer

Slide
16

INSY4122
 EXAMPLE:CHECK BOX
 How many “states” can it be in?

 How many “states” can it be in?

Checked, not-checked, partial checked
Disabled, not-disabled
Hover, not-hover (can’t be
hover+disabled)
Pressed-inside, pressed-outside, not-
pressed (can’t be pressed + disabled,
can’t be pressed-inside + not-hover)
Keyboard focus, not-focus

Slide
17

INSY4122
 A USABLEWEBBASEDINFORMATION SYSTEM
 Merger of skills from various genre of people
 This can be described with the different skills required for each role:
 User Experience (UX) Designer = Research + Design
 UI Developer = Design + HTML/CSS/JS
 Application Developer = Back-End coding + HTML/CSS/JS + SQLetc.
etc.

Slide
18

INSY4122
 …A USABLEWEBBASEDINFORMATION
SYSTEM
 U X Designers combine their research and design skills
together to understand the user needs and produce
concepts/solutions/designs that people want to use
This requires a focus on human behaviours, psychology and
understanding why people do what they do. It’s all the soft
squishy, creative stuff on the right-side of the brain
Most UXers can tell you what it should do and why it should do
it, but can’t actually build something that works
 UI Developers fill the middle ground by combining both
design sensibilities and technical skills together. They are
skilled at making something both look good and function
in a browser/device at the same time
They have the production skills to be able to produce visual
designs in Photoshop and then turn them in to HTML code that
deals with the wonders of browser compatibilities
This requires in-depth understanding of how browser rendering
engines behave to be able to implement a design for the web
that renders correctly and get all those pesky pixels to line up Slide
perfectly 19

INSY4122
 HCI DESIGN: NIELSEN’SHEURISTICS.
1. Visible System Status

- For any activity expected to take over 3-5sec, give status feedback to user

MS Windows: search IE: download

No estimate oftime Better feedback

- For each action, system should respond in some way; e.g. in a web form,
clicking a submit button  button changes color, or a clicking sound is made
Slide
20

INSY4122
 HCI DESIGN: NIELSEN’SHEURISTICS..
2. Messages must match real world, not program objects

Example:
ATM machine message when trying to withdraw some money:

Poor: Better:
User does not care what is X.25 Tells user what they can do;
What is the ‘Local limit’ ? Blocks out restricted actions

Slide
21

INSY4122
 HCI DESIGN:NIELSEN’SHEURISTICS…
3. User controland freedom
- For choice made by error, provide a ‘way back’[e.g. undo, redo], or
a method to re-start [e.g. Home button on website]

undo, redo link to home where you are

Slide
22

INSY4122
 HCI DESIGN:NIELSEN’SHEURISTICS….
4. Use Consistent (or better, Standard) terminology and icons

- Do not use multiple words/names for same function in different places

- Consistent terminology in prompts, menus, and user-guides

- Use icons/images without ambiguous meanings

- Consistent color, layout, capitalization, and fonts throughout the application

MS Internet explorer: US road signs:

Search in page, or Print Preview? Which one is for “curvy roadahead?

Slide
23

INSY4122
 HCI DESIGN:NIELSEN’SHEURISTICS…..
5. Eliminate potentialerrors

Avoid possibility for user to make errors

No calendar !

Slide
24

INSY4122
 HCI DESIGN: NIELSEN’S
HEURISTICS……
6. Recognition is better than recall
- show the choices made by user at an earlier stage, instead of having
to remember earlier actions
Example: NikeID

Previous choices

What remains?

Slide
25

INSY4122
 HCI DESIGN: NIELSEN’S
HEURISTICS…….
7. Flexibility and efficientuse

For novice users, provide easy (though longer) interactions),

For advanced/frequent users, provide: short-cut, special keys, macros, …

Example: Special keys

Example: shortcut
ALT+e

ALT+e+t
Slide
26

INSY4122
 HCI DESIGN: NIELSEN’S HEURISTICS……..
8. Help the user to recognize, diagnose, and recover from error

Error messages should be expressed in plain language (no codes),

precisely indicate the problem, and constructively suggest a solution.

Poor design examples:

Slide
27

INSY4122
 HCI DESIGN: NIELSEN’S
HEURISTICS………
9. Help and Documentation

- Must provide help/manual/user-guide

- Language and format of User-guide should use simple, standardterminology
MS Help: (Good design)
- standardized format; provides search; book-metaphor; use of links

Slide
28

INSY4122
 HCI DESIGN: NIELSEN’S HEURISTICS
10.Aesthetics and minimalist design

- Do not put too much, irrelevant information in Dialog boxes

- Use standard and commonly accepted controls (sliders, buttons etc.)

- Select fonts/sizes that are suited for screen display to maximize

readability
Fonts designed for web use (readable on-screen in large/small font
size):
This is an example of Verdana and smaller

This is an example of Georgia

Others: Arial, Comic Sans MS, Adobe Minion web (Internet Explorer
default)
Slide
How to ensure your font is used on client? Cascading Style Sheets 29
(XML)
INSY4122
END OF CHAPTER 1 Slide
30

INSY4122