Human Computer Interaction

SCV 1203
Instructor by

Dr. Nor Azman (Co-(Co-ordinator),

ordinator), Prof Dr. Dzulkifli,
Dzulkifli,
Dr. Shahrizal,
Shahrizal, Cik Suhaimi,
Suhaimi, Datin Normal, Aida Ali,
Muhammad Najib and Nur Zuraifah

Department of Computer Graphics & Multimedia, Faculty of

computer Science & Information System,
University Technology Malaysia

HCI at FSKSM
„ Prof Dr. Dzulkifli
„ Dr. Nor Azman „ Datin Normal
„ Dr. Mohd Sharizal „ Aida Ali
„ Cik Suhaimi „ Muhammad Najib
„ Nur Zuraifah Syazrah

1
 Lectures (Weeks 1-3)
Week/Lecturer Content Activity
Week 1 1.0 Introduction to Human Computer Individual Activity (5%):
Dr. Nor Azman Interaction (HCI)
1.Evolution of Human Computer Interaction a.Comparing and measuring the
2.Interfaces and Interactions effectiveness of web services
(e.g. email, search engine,
airplane/bus/train services)

Weeks 2-3 1.Design

Dr. Nor Azman 1.Introduction to Usability Group Activity 1 (10%):
2.Design of Everyday Things
Mr. Muhammad 3.Modelling Users: Personas and Goals a.Task Analysis and
Najib 4.Dialogue techniques (inc windows, Storyboarding exercise (e.g.
menus, icons and pointer (WIMPs)) ATM banking, Kiosk, and SMS)
5.Mobile Design
6.Direct manipulation and mental models
7.User Interface Software Architecture
8.Human Capabilities
9.Output Models
10.Input Models and Fitts law
11.Conceptual Models and Metaphors

Lectures (Weeks 4-6)

Weeks 4-5 1.User-centred design Group Activity 2 (20%):
1.The process of interaction design a.Project Proposal
Datin Normal 2.Design, prototyping and construction b.Design structured interview
3.Introducing evaluation questionnaire for identifying
needs and establish
requirements
c.Conduct one structured
interview with actual users (min:
5 users) in supporting related
prototype design
d.Designing Low Fidelity
Prototype (using MS Visio and
MS PowerPoint or Flash)

Weeks 6 1.User Interface Design Guidelines and Group Activity 3 (10%):

Principles
Prof Dzul and Aida 1.Usability Goals and Designing Good
Interfaces
2.Human Interface Guidelines
3.Computer Graphics Design
a.Leverage heuristic evaluations
and iterate your low fidelity
prototype based on this
feedback. You may redesign Low
Fidelity prototype (using MS Visio
and MS PowerPoint or Flash)

2
 Lectures (Weeks 8-14)
Weeks 8-9 1.User interface Programming Group Activity 4 (25%):
Mr. Cik Suhaimi Yusof 2.User Interface Toolkits
& Research Assistants a.Attending crash course of VB.NET
or FlashLite (in week 8) in supporting
the development of High Fidelity
Weeks 10-11 1.Evaluation approaches
prototype
Dr. Nor Azman 1.Field studies
2.Usability testing
b.Design and build an interactive High
Nur Zuraifah Syazrah 1.The Process for Conducting a Test
Fidelity prototype (Week 9 to 12)
2.Analyze Data and Observations
3.Analytical evaluation
c.Conducting experiment through
1.Heuristic evaluation
Usability testing of High Fidelity
2.Walkthroughs
prototype and testing with actual
3.Predictive models
users
1.The GOMS model
2.Keystroke Level model
d.Disseminate final report (web
3.Fitts’ law
format) and presentation of
Week 12 Research topic in Human Computer Interaction experimental high fidelity prototype
Dr. Mohd Shahrizal Introduction to some of HCI research and evaluation analysis)
1.Computer Supported Collaborative
Work (CSCW)
2.Adaptive Interfaces
3.Information Visualization
4.Speech & Multimodal
5.Tangible and Haptic Interaction
6.Augmented Reality
Week 13-14 Project Presentation
All Lecturers

Grading, Group Activities and Projects

(Teams of 3 students or less)

„ Individual Activity (5%)

„ Group Activity 1 (10%)
„ Group Activity 2 (20%)
„ Group Activity 3 (10%)
„ Group Activity 4 (25%)
„ Final Exam (30%)

3
 Activity Flow
„ Individual Activity: Comparing and measuring the effectiveness of
of
web service

„ Group Activity 1: Task Analysis and Storyboarding exercise (e.g.

ATM banking, Kiosk, and SMS)
„ Group Activity 2:
- Project Proposal
- Design structured interview questionnaire for identifying needs
and establish requirements
- Conduct one structured interview with actual users (min: 5 users)
users)
in supporting related prototype design
- Designing Low Fidelity Prototype (using MS Visio and MS
PowerPoint or Flash)

Activity Flow
„ Group Activity 3:

- Leverage heuristic evaluations and iterate your low fidelity

prototype based on this feedback. You may redesign Low Fidelity
prototype (using MS Visio and MS PowerPoint or Flash)

4
 Activity Flow
„ Group Activity 4:
- Attending Crash course of VB.NET or FlashLite (in week 8) in
supporting the development of High Fidelity prototype

- Design and build an interactive High Fidelity prototype (Week 9 to

12)

- Conducting experiment through Usability testing (with actual

users) of your group High Fidelity prototype

- Disseminate final report (web format) and presentation of

experimental high fidelity prototype and evaluation analysis)

PART 1

Introduction to Human Computer

Interaction (HCI)

5
 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

6
An introduction

7
 Human Computer Interaction
Is a discipline concerned with the
„ Analysis
„ Design

„ Implementation and

„ Evaluation

of interactive computing system for human use

Why an interface design process?

8
Design

Applied Psychology

Computer Science

The Field of HCI

9
 Meta Models of Human Computer Interaction (HCI)

PART 2

Evolution of Human Computer Interaction

10
Raymond Loewy

11
Henry Dreyfuss

Digital Computing

12
 Compilers

Graphical UI

13
Mouse, Hypertext

14
 History of HCI

„ Vannevar Bush, 1945

“As We May Think”
„ Vision of post-war
activities, Memex
„ “…when one of these
items is in view, the other
can be instantly recalled
merely by tapping a
button”

History of HCI (con’d)

„ JCR Licklider, 1960 “Man-Computer Symbiosis”
- Tightly coupled human brain and machine,
speech recognition, time sharing, character
recognition

15
 History of HCI (con’d)

„ Douglas Engelbart, 1962

“Augmenting Human
Intellect: A Conceptual
Framework”
„ In 1968, workstation with a
mouse, links across
documents, chorded
keyboard

History of HCI (con’d)

„ XEROX Alto and Star „ Apple LISA and Mac
„ Windows „ Inexpensive
„ Menus „ High-
High-quality graphics
„ Scrollbars „ 3rd party applications
„ Pointing
„ Consistency

16
 History (and future) of HCI
„ Large displays „ Speech recognition
„ Small displays „ Multimedia
„ Peripheral displays „ Video conferencing
„ Alternative I/O „ Artificial intelligence
„ Ubiquitous computing „ Software agents
„ Virtual environments „ Recommender systems
„ Implants „ ...

The Reactable: a multitouch interface for playing

music. Performers can simultaneously interact
with it by moving and rotating physical objects on
its surface. Reactable was developed by Sergi
Jordà and colleagues at the Universitat Pompeu
Fabra, Barcelona. Icelandic songstress Björk used
one on her 2007 tour

The HotHand device: a ring worn by electric

guitar players that uses motion sensors and a
wireless transmitter to create different kinds of
sound effects by various hand gestures.

17
 Talk to the hand…
From the first mobile phone ‘brick’
to the latest Apple iPhone: as the
size reduces, the potential expands.

The Rovio robotic webcam is

wirelessly connected to the Internet.
It roams around the home providing
an audio and video link to keep an eye
on family or pets when you’re out.

New way of family living

Audiovox’s Digital Message Center is designed to be

attached to the refrigerator, letting families scribble
digital notes and leave audio and video messages for
each other.

18
ART+COM’s artistic installation called Duality, located at the exit of a
metro station in Tokyo. Passers-by provoke virtual ripple effects with their
footsteps, as if walking across a pond.

19
 From Minority Report Movie

UMPC - Future
„ Video 1
„ Video 2

20
 PART 3

Interfaces and Interactions

Introduction
„ Until the mid-
mid-1990s, interaction designers concerned themselves
largely with developing efficient and effective user interfaces for
desktop computers aimed at the single user.
„ This involved working out how best to present information on a screenscreen such that
users would be able to perform their tasks, including determining
determining how to structure
menus to make options easy to navigate, designing icons and other other graphical
elements to be easily recognized and distinguished from one another,
another, and
developing logical dialog boxes that are easy to fill in.
„ Advances in graphical interfaces, speech and handwriting
recognition, together with the arrival of the Internet, cell phones,
phones,
wireless networks, sensor technologies, and an assortment of
other new technologies providing large and small displays, have
changed the face of human-
human-computer interaction.

21
 Goals of UI Design
„ 5 (plus 1) measurable factors
„ Time to learn
„ Speed of performance

„ Error rate

„ Retention over time

„ Subjective satisfaction

„ Cost

What do humans do well?

„ Sense low level stimuli
„ Pattern recognition
„ Inductive reasoning
„ Multiple strategies
„ Adapting
„ “Hard and fuzzy things”, paraphrasing George
Miller

22
 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” again
paraphrasing George Miller

The Interaction
At a high level,
let humans do what humans do well
and let computers do
what computers do well

23
 The Interaction
„ Let humans do: „ Let computers do:
„ Sensing of low level „ Counting and measuring
stimuli „ Accurate storage and recall
„ Pattern recognition „ Rapid and consistent
„ Inductive reasoning responses
„ Multiple strategies „ Data processing
„ Adapting „ Calculation
„ Creating „ Repetitive actions

Principles of Design
„ Provide a good conceptual model
„ How does it work?
„ What does it say to the user?

„ Make things visible

„ What can user see/feel/grab/push?
„ What does it look like it will do?

24
 Interface types
„ Many, many kinds now
„ 1980s interfaces
Command
WIMP/GUI

„ 1990s interfaces
Advanced graphical (multimedia, virtual reality, information visualization)
visualization)
Web
Speech (voice)
Pen, gesture, and touch
Appliance

„ 2000s interfaces
Mobile
Multimodal
Shareable
Tangible
Augmented and mixed reality
Wearable
Robotic

WIMP/GUI interfaces
„ Xerox Star first WIMP -> rise to GUIs
„ Windows
„ could be scrolled, stretched, overlapped, opened, closed, and
moved around the screen using the mouse
„ Icons
„ represented applications, objects, commands, and tools that
were opened when clicked on
„ Menus
„ offering lists of options that could be scrolled through and
selected
„ Pointing device
„ a mouse controlling the cursor as a point of entry to the
windows, menus, and icons on the screen

25
 Windows
„ Windows were invented to overcome
physical constraints of a computer display,
enabling more information to be viewed
and tasks to be performed
„ Scroll bars within windows also enable
more information to be
„ Multiple windows can make it difficult to
find desired one, so techniques used
„ Listing, iconising, shrinking

Apple’s shrinking windows

26
 Selecting a country from a
scrolling window

Some research and design issues

„ Window management
„ enabling users to move fluidly between different
windows (and monitors)
„ How to switch attention between them to
find information needed without getting
distracted
„ Design principles of spacing, grouping, and
simplicity should be used

27
 Menus
„A number of menu interface styles
„ flat lists, drop-
drop-down, pop-
pop-up, contextual, and expanding
ones, e.g., scrolling and cascading
„ Flat menus
„ good at displaying a small number of options at the same
time and where the size of the display is small, e.g., iPods
„ but have to nest the lists of options within each other,
requiring several steps to get to the list with the desired
option
„ moving through previous screens can be tedious

Expanding menus
„ Enables more options to be shown on a
single screen than is possible with a single
flat menu
„ More flexible navigation, allowing for
selection of options to be done in the same
window
„ Most popular are cascading ones
„ primary, secondary and even tertiary menus
„ downside is that they require precise mouse control
„ can result in overshooting or selecting wrong options

28
 Cascading menu

Contextual menus
„ Provide access to often-used commands
that make sense in the context of a current
task
„ Appear when the user presses the Control
key while clicking on an interface element
„ e.g., clicking on a photo in a website together with holding
down the Control key results in options ‘open it in a new
window,’
window,’ ‘save it,’
it,’ or ‘copy it’
it’
„ Helpsovercome some of the navigation
problems associated with cascading menus

29
 Icon design
„ Icons are assumed to be easier to learn and
remember than commands
„ Can be designed to be compact and
variably positioned on a screen
„ Now populate every application and
operating system
„ represent desktop objects, tools (e.g., paintbrush),
applications (e.g., web browser), and operations
(e.g., cut, paste, next, accept, change

Icons
„ Since
the Xerox Star days icons have
changed in their look and feel:
„ black and white -> color, shadowing, photorealistic
images, 3D rendering, and animation
„ Many designed to be very detailed and
animated making them both visually
attractive and informative
„ GUIs now highly inviting, emotionally
appealing, and feel alive

30
 Icon forms
„ Themapping between the representation and
underlying referent can be:
„ similar (e.g., a picture of a file to represent the object file),
file),
„ analogical (e.g., a picture of a pair of scissors to represent
‘cut’
cut’)
„ arbitrary (e.g., the use of an X to represent ‘delete’
delete’)
„ Most effective icons are similar ones
„ Many operations are actions making it
more difficult to represent them
„ use a combination of objects and symbols that capture the
salient part of an action

Early icons

31
 Newer icons

Simple icons plus labels

32
 Advanced graphical interfaces
„ Advanced graphical interfaces exist now
that extend how users can access, explore,
and visualize information
„ e.g. interactive animations, multimedia, virtual
environments, and visualizations
„ Some designed to be viewed and used by
individuals
„ Others by users who are
collocated or at a distance

Virtual reality and virtual

environments
„ Computer-generated graphical simulations
providing:
„ “the illusion of participation in a synthetic
environment rather than external observation of
such an environment” (Gigante, 1993)
„ provide new kinds of experience, enabling
users to interact with objects and navigate
in 3D space
„ Create highly engaging user experiences

33
 Activity/Assignment
Individual Activity (5%):

Comparing and measuring the

effectiveness of web services

The End

34