Академический Документы
Профессиональный Документы
Культура Документы
COMP16212!
Human Computer
Interaction!
To optimise performance
of human and computer
together as a system!
COMP16212!
Sean Bechhofer!
sean.bechhofer@manchester.ac.uk!
http://www.flickr.com/photos/eruditorum/1794630023/!
Resources!
What is HCI?!
Alan Dix, Janet Finlay, Gregory D. Abowd and Russell Beale. HumanComputer Interaction (3rd edition). Prentice Hall, 2004.!
http://www.hcibook.com/e3/ !
Ben Shneiderman. Designing the user interface: Strategies for effective
human-computer interaction (3rd ed.). Addison-Wesley Publishing, 1998!
handouts!
Jakob Nielsen on Usability and Web Design!
http://www.useit.com/!
Donald Norman The design of everyday things. Basic Books, 2002!
William Lidwell, Kritina Holden, Jill Butler Universal Principles of Design.
Rockport Publishers, 2003!
http://www.flickr.com/photos/benadamson/370361128/!
http://www.flickr.com/photos/whiteafrican/2735720397/!
http://www.flickr.com/photos/williamhook/2830319467/!
Everyday things!
Alternatives!
http://www.flickr.com/photos/soapbeard/2654965481/!
CODE METHOD!
To set Busy:!
http://www.flickr.com/photos/montillon/3177170555/!
* Lift handset!
* Dial *70!
* Enter Destination Number (for voicemail !
enter 50101)!
* Press # key and replace handset!
http://www.flickr.com/photos/szudi/2473004057/!
To cancel Busy:!
* Lift handset!
* Dial #70!
http://www.flickr.com/photos/tomasfano/2885450065/!
Affordance!
http://www.flickr.com/photos/8586443@N03/2450347082/!
COMP16212 HCI and Accessibility
10
Interaction!
Computer-Computer
Interaction!
Well-defined protocols
(e.g. TCP/IP)!
Restricted!
No margin for error!
Human-Human Interaction !
Evolving!
Informal!
Error-prone, but corrective !
Human-Computer Interaction!
Users Conceptual Model
(UCM) !
Study of task: modelling !
Evaluation of interfaces
(experimentation) !
Design Guidelines:
distillation of design and
experimental results !
UI design must be an
integral part of system
design process, not a lastminute add-on. !
http://www.flickr.com/photos/jmmason/2093621345/!
http://www.flickr.com/photos/tea_time/3158449107/!
11
12
Humans!
Models!
BUT!
Humans are adaptable and able
to learn !
Different kinds of users!
Different kinds of tasks !
Good UI design must account
for Humans and their different
needs!!
13
Experiments!!
14
Numskulls!
Experiments!!
15
16
Working Memory!
Visual Image !
Store!
Auditory Image !
Store!
Cognitive processor!
Working memory!
Long-term memory (LTM)!
Think, analyse, recall from LTM, store in STM!
Perceptual !
Processor!
Cognitive !
Processor!
Motor !
Processor!
Motor processor!
Transmit signals to muscles etc.!
17
18
19
20
Decision Making!
Hicks Law!
Tmove = a + b log(D/S + 1) !
D: distance to move !
S: size of target !
a and b constants depending on particular context.!
In other words, to reduce time taken:!
Reduce the movement distance!
Make the target bigger!
RT = a + b log(n)!
E.g. Selecting items from a simple menu!
But not necessarily the case with complex menus with lots of text!
Killer Robot!
Martial Arts: time to block a punch increases with the number of
known blocking techniques!
Doesnt apply to tasks involving significant levels of reading and
problem solving, e.g. multiple choice exams!!
21
Modelling Interaction!
22
http://www.flickr.com/photos/curiouskiwi/486099153/!
23
24
Execution - Evaluation!
Execution - Evaluation!
Goals"
What we want !
to happen!
Execution"
What we do to!
the world!
Goals"
What we want !
to happen!
Intention"
to act!
Evaluation"
Comparing what "
happened with "
what we wanted "
to happen!
Sequence"
of actions!
Interpret"
the perception!
Execution"
of action sequence!
The World!
Perceive!
system state!
The World!
25
Execution - Evaluation!
Gulf of Execution!
Difference between users
formulation of the the actions to
reach the goal and the actions
allowed!
Evaluation"
of interpretations!
26
Gulf of Evaluation!
Distance between the physical
presentation of the system state
and the expectation of the user.!
If I dont understand the system, then I may make mistakes. E.g. I think
this button:!
http://www.flickr.com/photos/brewbooks/394853504/!
27
28
User!
2. performance!
User Interface!
1. articulation!
Interaction Styles!
Command line!
Menus!
Natural Language!
Direct Manipulation !
Form-Fill!
System!
3. presentation!
4. observation!
Output!
COMP16212 HCI and Accessibility
29
30
31
Disadvantages!
little or no prompting!
requires users knowledge of
system, programs!
relies on recall of commands
and syntax!
difficult to learn !
error prone!
32
Menu Interfaces!
Menu Interfaces!
Advantages!
Users dont have to memorize
complex commands!
Structured navigation benefits
novices and casual users!
Can shorten user learning time
and effort!
Supports recognition memory!
33
Direct Manipulation!
Disadvantages!
May not be appropriate or
efficient for some users and
tasks!
Can force user through many
levels of menus!
Users may get lost in menu
hierarchies!
Menu terms and names may
not be meaningful to users!
Use of modes forces users to
follow the systems path !
34
35
Disadvantages!
Can be hard to implement!
Requires graphics display/
pointing devices!
36
37
Form Fillin!
Disadvantages!
Requires clarification!
More keystrokes!
Unpredictable!
38
Form Fillin!
Advantages!
Simplifies data entry!
Minimal training!
39
Disadvantages!
Screen real estate!
40
Guidelines!
1.
2.
3.
4.
5.
6.
7.
8.
Consistency!
Shortcuts for frequent/trained users!
Provide informative feedback!
Design dialogues to yield closure!
Error prevention and handling!
Easy reversal!
Internal locus of control!
Reduce short-term memory load!
41
Nielsens 10 heuristics!
42
Norman!
Make it easy to determine what actions are possible at any moment!
well-designed things can only be put together certain ways (e.g.
trapezoidal cable plugs, SIM cards)!
menus only display the actions which can be carried out at that
time (other options are dimmed).!
Follow natural mappings between intentions and the required actions,
between actions and the resulting effect; and between the
information that is visible and the interpretation of the system state!
it should be obvious what the function of a button or menu is use conventions already established, don't try to design
something which changes what people are familiar with!
http://www.useit.com/!
COMP16212 HCI and Accessibility
43
44
Users in Design!
Think User!
Remember that somebody (and most likely somebody else) is going
to use the system. !
Try it out!
Sit a user down with an early version of the interface. Record
what the user thinks/does!
Involve the users!
Users will have lots of valuable knowledge about the domain. Get
them to contribute.!
Iterate!
Make early prototypes and be prepared to throw them away.!
Observations!
Interviews!
Sound experimental
methodology: how to obtain
meaningful, reliable results !
45
HCI!
Should be integral to system design !
Models and understanding of users important!
Users Conceptual Model!
Developed on a large body of scientific work!
Guidelines distilled from scientific work can be useful!
Prototyping and Evaluation!
Future technology for interfaces !
e.g. virtual reality; 3D; audio !
Further focus on this topic in 2nd Year!
47
Experiments: !
What to measure? !
effectiveness, !
efficiency, !
learning, !
errors, !
aesthetics!
When to measure it? !
during design?!
after design!
prototyping?!
46