Professional Documents
Culture Documents
Human in HCI
➢ Introduction
❖ In this chapter, we will consider the communication between user
and system: the interaction.
❖ The interface must therefore effectively translate between user and
system to allow the interaction to be successful.
❖ This translation can fail at a number of points and for a number of
reasons.
❖ The use of models of interaction can help us to understand exactly
what is going on in the interaction and identify the likely root of
difficulties. 2
Human in HCI
➢ Introduction
❖ We will look at some models of interaction that enable us to identify
and evaluate components of the interaction, and at the physical,
social and organizational issues that provide the context for it.
❖ We will also survey some of the different styles of interaction that
are used and consider how well they support the user.
3
The Interaction in HCI
➢ What is Interaction
Interaction is
❖ Communication b/n
user system
❖ exchange of information between user and system
❖ actions of the user that change the status of the system
❖ feedback to the user concerning actions of the system
❖ requires translation between the intentions of the user and the
actions of the system
4
The Interaction in HCI
➢ Some Terminologies
❖ Domain:- is the area of work under study. e.g. graphic design,
authoring and process control in a factory. It defines an area of
expertise and knowledge in some real-world activity.
❖ Task:- is action to be performed in order to solve a problem in an
application domain
➢ Some Terminologies
❖ Task analysis:- is identification of the problems space in particular
domain, goals, intentions, specific tasks
❖ User language (task language):- describes the problem to be solved in
terms familiar to the user
❖ System language (core language):- describes the functionality of the
system in terms familiar to the designer or developer
6
The Interaction in HCI
➢ Models of Interaction
❖ The most influential model of interaction is Norman’s
execution–evaluation cycle;
❖ There is another model which extends the ideas of Norman’s
cycle.
❖ Both of these models describe the interaction in terms of the
goals and actions of the user.
7
The Interaction in HCI
– Executes action
– Perceives system state
– Interprets system state Evaluation
9
– Evaluates system state with respect to goal
The Interaction in HCI
goal
execution evaluation
system
❖ If the system state reflects the user’s goal then the computer
has done what he wanted and the interaction has been
successful;
❖ Otherwise the user must formulate a new goal and repeat the
cycle. 10
The Interaction in HCI
11
The Interaction in HCI
12
The Interaction in HCI
13
The Interaction in HCI
➢ Human error - slips and mistakes
❖ Human errors are often classified into slips and mistakes. We can
distinguish these using Norman’s gulf of execution.
❖ slip
understand system and goal
correct formulation of action
incorrect action
❖ mistake
may not even have right goal!
❖ Fixing things?
▪ slip – better interface design
▪ mistake – better understanding of system
14
The Interaction in HCI
15
The Interaction in HCI
16
The Interaction in HCI
➢ The interaction framework
➢ The general interaction framework
❖ There are four main translations involved in the interaction:
▪ Articulation, O
output
▪ Performance,
▪ Presentation and
▪ Observation.
S U
System User
core task
I
input 17
The Interaction in HCI
18
The Interaction in HCI
19
The Interaction in HCI
➢ Video recorder
❖ A simple example of programming a VCR from a remote
control shows that all four translations in the interaction cycle
can affect the overall interaction.
✓ Ineffective interaction is indicated by the user not being sure the
VCR is set to record properly. This could be because the user has
pressed the keys on the remote control unit in the wrong order;
this can be classified as an articulator problem. Or
21
The Interaction in HCI
➢ Video recorder
✓ May be the VCR is able to record on any channel but the remote
control lacks the ability to select channels, indicating a coverage
problem for the performance translation.
✓ It may be the case that the VCR display panel does not indicate that
the program has been set, a presentation problem. Or
✓ May be the user does not interpret the feedback properly, an
observational error.
✓ Any one or more of these deficiencies would give rise to
ineffective interaction.
22
The Interaction in HCI
➢ Ergonomics
❖ Ergonomics is a huge area, which is distinct from HCI
❖ Its contribution to HCI is in determining constraints on the way we
design systems and suggesting detailed and specific guidelines and
standards
❖ It is the study of the physical characteristics of interaction
❖ Also known as human factors – but this can also be used to mean
much of HCI!
❖ Ergonomics good at defining standards and guidelines for
constraining the way we design certain aspects of systems
23
The Interaction in HCI
25
The Interaction in HCI
26
The Interaction in HCI
▪ feedback instruments
▪ delays
27
The Interaction in HCI
➢ Interaction Styles
❖ Interaction can be seen as a dialog between the computer and the
user.
❖ The choice of interface style can have a profound effect on the nature
of this dialog.
❖ Term covers all of the ways that users interact with a computer
system
• also referred to as communication styles or dialog styles
28
The Interaction in HCI
➢ Interaction Styles
❖ Represent alternative design strategies for the UI
– each style offers its own way of organizing the system’s functionality,
of managing the user’s inputs, and of presenting information
▪ e.g. display-based interfaces -> menus, mice, windows, widgets, icons, buttons,
function keys, etc.
❖ provide a behavioral view of how the user communicates with the
system
– look and feel
29
The Interaction in HCI
➢ Interaction Styles
❖ There are a number of common interface styles including
• Command line interface
• Menus
• Natural language
• Question/answer and query dialog
• Form-fills and spreadsheets
• WIMP
• Point and click
• Three-dimensional interfaces.
30
The Interaction in HCI
➢ Interaction Styles
1. Command line interface
❖ It was the first interactive dialog style to be commonly used.
❖ Way of expressing instructions to the computer directly
• function keys, single characters, short abbreviations, whole
words, or a combination
C > A:
❖ suitable for repetitive tasks
A > dir
➢ Interaction Styles
1. Command line interface
❖ better for expert users than novices
❖ Command line interfaces are powerful in that they offer direct
access to system functionality (as opposed to the hierarchical
nature of menus),
❖ command names/abbreviations should be meaningful!
❖ Typical example: the Unix system
32
The Interaction in HCI
2. Menu-driven interface
❖ Set of options displayed on the screen
❖ Options visible
– less recall - easier to use
– rely on recognition so names should be meaningful
❖ Selection by:
– numbers, letters, arrow keys, mouse
– combination (e.g. mouse plus accelerators)
❖ Often options ordered hierarchically or grouped logically
• sensible grouping is needed
33
❖ Restricted form of full WIMP system
The Interaction in HCI
➢ Interaction Styles
3. Natural language
❖ It is the most attractive means of communicating with computers.
❖ Natural language understanding, both of speech and written input, is
the subject of much interest and research.
❖ But the ambiguity of natural language makes it very difficult for a
machine to understand. the syntax, or structure, of a phrase may not
be clear.
❖ Relieves the burden of learning special syntax!
34
The Interaction in HCI
3. Natural language
❖ Example : The boy hit the dog with the stick.
❖ We cannot be sure whether the boy is using the stick to hit the dog or
whether the dog is holding the stick when it is hit.
❖ Its problems are:
– vague
– ambiguous
– hard to do well!
❖ Solutions
• try to understand a subset
• pick on key words 35
The Interaction in HCI
36
The Interaction in HCI
37
The Interaction in HCI
38
The Interaction in HCI
6. Spreadsheets
❖ Advantages
❑Simplifies data entry!
❑Minimal training
❖ first spreadsheet VISICALC, followed by Lotus 1-2-3
MS Excel most common today
❖ sophisticated variation of form-filling.
❑grid of cells contain a value or a formula
❑formula can involve values of other cells
e.g. sum of all cells in this column
❑user can enter and alter data spreadsheet maintains consistency
39
The Interaction in HCI
7. WIMP Interface
❑ Windows
▪ Icons
o Menus
• Pointers
40
The Interaction in HCI
❖ Used in ..
– multimedia
– web browsers
– hypertext
❖ Just click something
– icons, text links or location on map
❖ Minimal typing
41
The Interaction in HCI
1. Window
❖ There are also many additional interaction objects and techniques commonly used in
WIMP interfaces, some designed for specific purposes and others more general.
❖ Areas of the screen that behave as if they were independent
– can contain text or graphics
– can be moved or resized or closed
– 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
44
The Interaction in HCI
2. Icons
❖ They are small picture or image
❖ Shrinking a window to its icon is known as iconifying the window.
❖ They represents some object in the interface
– often a window or action
❖ windows can be closed down them
– small representation fill many accessible windows
❖ icons can be many and various
– highly stylized
– realistic representations.
45
The Interaction in HCI
3. Pointers
❖ Important component. Pointer cursors are like icons, being small
bitmap images, but in addition all cursors have a hot-spot, the location
to which they point. WIMP style relies on pointing and selecting things
❖ Uses mouse, trackpad, joystick, trackball, cursor keys or keyboard
shortcuts. It has wide variety of graphical images
46
The Interaction in HCI
4. Menus
❖ Choice of operations or services offered on the screen
❖ Required option selected with pointer
❖ Problem – take a lot of screen space
❖ Solution – pop-up: menu appears when needed
47
The Interaction in HCI
❖ 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 !!!
49
The Interaction in HCI
50
The Interaction in HCI
51
The Interaction in HCI
5. 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
52
The Interaction in HCI
6. Toolbars
❖ Which kind to use
❖ 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
53
The Interaction in HCI
8. Dialogue boxes
❖ Information windows that pop up to inform 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.
55
The Interaction in HCI
Summary
❖ Practically all current interaction styles are variations of command-
based interfaces
❖ The currently predominant interaction style is the WIMP interface
❖ Windows, icons, mouse, pull-down menus
❖ The selection among various possible interaction styles depends on
user background, task requirements, technology, and economical
factors
❖ Emerging technologies like natural language processing or intelligent
agents may cause a shift towards non-command interfaces
56
The Interaction in HCI
57
The Interaction in HCI
58
The Interaction in HCI
❖ WIMP exceptions …
pre-emptive parts of the interface
❖ modal dialog boxes
– come and won’t go away!
– good for errors, essential steps
– but use with care
59
The Interaction in HCI
❖ Make it easy to detect errors, then the user can repair them
Example:
hello, this is the Go Faster booking system
what would you like?
(user) I want to fly from New York to London
you want a ticket from New York to Boston
(user) no
sorry, please confirm one at a time
do you want to fly from New York
(user) yes
………
60
The Interaction in HCI
61
The Interaction in HCI
62
The Interaction in HCI
63
The Interaction in HCI
▪ real crackers
• cheap and cheerful!
• bad joke, plastic toy, paper hat
• pull and bang
64
The Interaction in HCI
➢ Experience, engagement and fun
❖ Designing experience
▪ virtual crackers
– cheap and cheerful
– bad joke, web toy, cut-out mask
– click and bang
65
The Interaction in HCI
closed
cracker page
open
watches recipient clicks
message
progress cracker opens ...
very slowly
open
cracker page
sender joke
links
❖Physical design
▪ Many constraints:
– ergonomic – minimum button size
– physical – high-voltage switches are big
– legal and safety – high cooker controls
– context and environment – easy to clean
– aesthetic – must look good
– economic – … and not cost too much!
The Interaction in HCI
❖Design trade-offs
▪ constraints are contradictory … need trade-offs
▪ within categories:
e.g. safety – cooker controls
• front panel – safer for adult
• rear panel – safer for child
▪ between categories
e.g. ergonomics vs. physical – MiniDisc remote
• ergonomics – controls need to be bigger
• physical – no room!
• solution – multifunction controls & reduced functionality
The Interaction in HCI
❖Fluidity
▪ do external physical aspects reflect logical effect?
▪ logical state revealed in physical state?
e.g. on/off buttons
❖inverse actions
❖ yes/no buttons
• well sort of
❖ ‘joystick’
▪ one-shot buttons
▪ joystick
▪ some sliders
❖a minidisk controller
❖physical layout
▪ controls:
logical relationship
~ spatial grouping
The Interaction in HCI
❖compliant interaction
❖Managing value
▪ people use something
ONLY IF
it has perceived value
AND
value exceeds cost
BUT NOTE
• exceptions (e.g. habit)
• value NOT necessarily personal gain or money
The Interaction in HCI
❖Weighing up value
▪ value
• helps me get my work done
• fun
• good for others
▪ cost
• download time
• money £, $, €
• learning effort
The Interaction in HCI
❖Discounted future
▪ in economics Net Present Value:
• discount by (1+rate)years to wait
❖General lesson …
▪ if you want someone to do something …
@#$% !
???
The Interaction in HCI
➢ Paradigms
4. Graphical display:- Direct manipulation
% foo.bar
ABORT
dumby!!!