Académique Documents
Professionnel Documents
Culture Documents
SCV 1203
Instructor by
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)
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
3
Activity Flow
Individual Activity: Comparing and measuring the effectiveness of
of
web service
Activity Flow
Group Activity 3:
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
PART 1
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
8
Design
Applied Psychology
Computer Science
9
Meta Models of Human Computer Interaction (HCI)
PART 2
10
Raymond Loewy
11
Henry Dreyfuss
Digital Computing
12
Compilers
Graphical UI
13
Mouse, Hypertext
14
History of HCI
15
History of HCI (con’d)
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 ...
17
Talk to the hand…
From the first mobile phone ‘brick’
to the latest Apple iPhone: as the
size reduces, the potential expands.
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
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
Subjective satisfaction
Cost
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?
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
26
Selecting a country from a
scrolling window
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
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
33
Activity/Assignment
Individual Activity (5%):
The End
34