02-HCI Designs.pdf by Sujan TImalsina @CS

HCI chapter 2

1. Introduction
to
Human-Computer Interaction
www
.informat
i
cs.sussex.ac.uk/ users/johnhall/HCI.lecture.1.ppt

2. In this lecture we will...
•
Look at what HCI is
•
Ask why it is important
•
Look at some bad design
•
U
nderstand some usability principles, and
their implications for design 1 of 28

3. What is human-computer
interaction?
•
t
he study of
interaction between people
and computer-based systems
•
c
oncern with the
physical, psychological
and theoretical aspects of this process [Dix et al, p3] 2 of 28

4. Why do human-computer
interaction?
•
to enable us to design interactive products to support people in their everyday and working lives [Rogers et al, preface, v]
•
D
evelop usable products:
–
e
asy to learn
–
e
ffective to use
–
p
rovide an enjoyable experience
3 of 28

5. Why is human-computer
interaction important?
•
T
here is a lot of design about that can
cause problems for users
•
G
ood design involves understanding how
users interact with computers, and enabling them to do so effectively 4 of 28

6. Some problematic designs
•
H
ow fast am I going?
[www.baddesigns.com]
5 of 28

7. Some problematic designs (2)
•
H
ow do I get out of the lift?
[www.baddesigns.com]
6 of 28

8. Some problematic designs (3)
•
W
here does the mouse go?
[www.baddesigns.com]
7 of 28

9. To avoid problematic design we
need to...
8 of 28
•
T
ake into account
–
w
ho the users are
–
w
hat activities are being carried out
–
w
here the interaction is taking place
•
O
ptimise the interactions users have with a
product
–
s
uch that they match users’ activities and needs

10. Usability (1)
•
U
sability goals
–
E
ffectiveness
–
E
fficiency
–S
a
f
e
t
y
–
U
tility
–
Learnability
–
M
emorability
[Rogers at al, pp14-18] 9 of 28

11. Usability (2)
•
D
esign principles
–
V
isibility
–
F
eedback
–C
o
n
s
t
r
a
in
t
s
–
M
apping
–
C
onsistency
–
A
ffordance
[Don Norman: The Design of Everyday Things]
10 of 28

12. Visibility
•
T
his is a control panel for an
elevator.
•
How does it work?
•
Push a button for the floor you want?
•
Nothing happens. Push any othe
r

button? Still nothing. What do yo
u
need to do?
•
I
t’s not
visible
11 of 28

13. Visibility (2)
•
Y
ou need to insert your
room key –
a
card –
into
the slot by the buttons
•
H
ow would you make this
action more visible?
12 of 28

14. Feedback
•
S
ending information back to the user about
what has been done
•
I
ncludes sound, highlighting, animation and
combinations of these
–
e
.g. when screen button clicked on provides
sound or red highlight feedback:
“clickkk”
13 of 28

15. Constraints
•
R
estricting the possible actions that can
be performed
•
H
elps prevent user from selecting
incorrect options
•
T
hree main types
–
physical
–
c
ultural
–
logical
14 of 28

16. Physical constraints
15 of 28
•
R
efer to the way
physical objects restrict the movement of things
–
E
.g. design only one
way to insert a mouse connection; and only one way to insert a keyboard connection, and make them different

17. Logical constraints
•
Exploit people’s reasoning about relationships between objects in the world
(A) relationship between picture and object it represents means ‘it goes here’ (B) as A, but with an extra step: colour-coding
16 of 28

18. Cultural constraints
•
Learned arbitrary conventions which help us use technologies
•
C
an apply in a number of ways
–
I
cons, menus
–
K
eyboards, number pads
17 of 28

19. Mapping
•
R
elationship between controls and their
movements and the results in the world
•
W
hich is the better mapping?
18 of 28

20. Mapping (2)
•
W
hich is the better mapping, and why?
ABC
D
19 of 28

21. Consistency
•
D
esign interfaces to have similar
operations and use similar elements for similar tasks
•
F
or example:
–
a
lways use ctrl key plus first initial of the
command for an operation –
c
trl+C, ctrl+S,
ctrl+O
•
M
ain benefit is consistent interfaces are
easier to learn and use
20
of 28

22. Consistency breakdowns
•
W
hat happens if there is more than one
command starting with the same letter?
–
e
.g. save, spelling, select, style
•
H
ave to find other initials or combinations of
keys, thereby breaking the consistency rule
–
E
.g. ctrl+S, ctrl+Sp, ctrl+shift+L
•
I
ncreases learning burden on user, making
them more prone to errors
21 of 28

23. Internal and external consistency
•
I
nternal consistency refers to designing
operations to behave the same within an application
–
D
ifficult to achieve with complex interfaces
•
External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices
–
V
ery rarely the case, based on different
designers’ preference
22 of 28

24. External inconsistency
(a) phones, remote controls
(b) calculators, computer keypads
7
89
12
3
456
12
3
456 7
89
0
0
23 of 28

25. Affordances
•
R
efers to an attribute of an object that allows people
to know how to use it
–
e
.g. a mouse button invites pushing, a door handle
affords pulling
•
N
orman (1988) used the term to discuss the design
of everyday objects
•
S
ince has been much popularised in interaction
design to discuss how to design interface objects
–
e
.g. scrollbars to afford moving up and down,
icons to afford clicking on
24 of 28

26. Affordances (2)
•
P
hysical affordances
–
W
hat do the following physical objects
afford? Are the affordance obvious?
25 of 28

27. Affordances (3)
–
V
irtual affordances •
H
ow do the following screen objects afford?
•
W
hat if you were a novice user?
•
W
ould you know what to do with them?
26 of 28

28. Relationships between usability
principles
–
V
isibility
–
F
eedback
–C
o
n
s
t
r
a
in
t
s
–
M
apping
–
C
onsistency
–
A
ffordance
•
P
rinciples are not mutually exclusive
•
W
hat are the ways they can relate to each
other? 27 of 28

29. Summary
•
I
n Lecture 1 we looked at: –
definitions of HCI
–
t
he importance of HCI
–
e
xamples of bad design
–
t
he concept of usability
–
u
sability principles and their relationships
•
I
n Lecture 2 we will overview User-centred
design: how to design for usability. 28 of 28