11. Navigating the interface
p guidelines#:
• Sample g
– Standardize task sequences
– Ensure that embedded links are descriptive
– U unique and d
Use i d descriptive h di
i ti headings
– Use check boxes for binary choices
– Develop pages that will print properly
– Use thumbnail images to preview larger images
# NCI 2006 : National Cancer Institute’s guidelines on design of informative web
pages
1-11
2-11
12. Organizing the display
• High-level goals#
– Consistency of data display
• terminology, colors, format, capitalization
– Efficient information assimilation by the user
• Neat columns of data, left & right justification,
spacing
– Minimal memory load on the user
• minimize recall
– Fl ibilit f user control of d t di l
Flexibility for t l f data display
• order of columns & sorting of rows to be
changeable by users
1-12
#Smith and Mosier (1986) 2-12
13. Getting the user’s attention
• Intensity
– use levels to draw attention
• Marking
– underline, enclose in box, use an indicator/sign
• Size
– large size attract attention, use upto 4 sizes
• Choice of fonts
– Use upto 3 fonts Inverse Video: A computer
• Blinking display technique whereby the
background and text colour
g
• C l
Color
values are swapped, .
• Audio
On older computers this was
computers,
the way text was displayed 1-13
by default. 2-13
14. Principles
More fundamental, widely applicable, & enduring.
Application of principles lead to (established)guidelines.
1-14
2-14
18. 2 Consistency
Ensure consistent use of colours names
colours, names,
layout and so on.
delete/insert character delete/insert character
delete/insert character
delete/insert word remove/insert word
remove/bring word
delete/insert line delete/insert line line
destroy/create
delete/insert paragraph
d l t /i t h delete/insert paragraph
d kill/bi th paragraph1-18
kill/birth t
l t /i hh
19. 3 Familiarity
Use language and symbols that the user will be
familiar ith
f ili with or use a suitable metaphor t help
it bl t h to h l
them transfer similar and related knowledge from
a more familiar domain
domain.
1-19
20. 3 Familiarity
Metaphors
– Metaphora : to carry over, transfer
– The transference of the relation between one set of objects
to another set for the purpose of brief explanation.
– A resemblance , an agreement or likeness between things
in some circumstances or effects, when the things are
otherwise entirely diff
th i ti l different.
t
1-20
21. 3 Familiarity
Metaphor – Example
• The Desktop - started at Xerox PARC
• Idea was to organize information in a way to allow
people to use it in the way they use information on
their desktops.
– make the screen act as if there were objects on it.
Computer objects as visible, moveable objects.
p j , j
Objects represented as icons. Objects can be
“picked up” and “moved” on a surface. Objects can
p
be “copied”
1-21
27. 3 Familiarity
Metaphor - Key points
Metaphors help borrow behaviors from systems familiar to
p p y
users.
Metaphor isn't always necessary.
Some metaphors don't cross cultural/local boundaries well
well.
1-27
29. 5 Constraints
• Provide constraints so that people do not try to
do things that are inappropriate
inappropriate.
1-29
30. 6 Navigation
Provide support to enable users to move
around the parts of the system.
d th t f th t
1-30
31. 7 Feedback
Rapidly feed back information from the
system to people so that they know what
effect their actions have had
had.
The user should never have to think
"did th t work?"
that k?"
1-31
32. 8 Recovery
Enable recovery from actions particularly
actions,
mistakes and errors, quickly and
effectively.
effectively
1-32
33. 9 Flexibility
Allow multiple ways of doing things so as
to accommodate users with different
levels of experience and interest in the
systems.
1-33
34. 10 Style – Aesthetically Pleasing
Designs should be visually
appealing, polite, pleasant, friendly.
1-34
35. Theories
Th i
Descriptive, Explanatory or Predictive
D i ti E l t P di ti
Motor, perceptual, or cognitive
D R Y
1-35
2-35
36. Descriptive , Explanatory, Predictive
• H l f li d
Helpful in developing consistent
l i i t t
Descriptive terminology for objects and
actions.
• D
Describe sequence of events and
ib f t d
Explanatory where possible cause and effect
• Enable designers to compare
Predictive
P di ti proposed d i
d designs f execution1-36
for ti
time or error rates
2-36
37. • Helpful in developing consistent
Descriptive terminology for objects and
actions.
actions
User interface styles : menus, form fill-ins, commands
User personality styles :
Technical attitude: novice, knowledgeable, expert
, g , p
Technical aptitude: spatial visualization, reasoning
1-37
2-37
38. • Describe sequence of events
q
Explanatory and where possible cause and
effect
State and Action alternatives
should be visible.
Norman’s Action Theory;
There should be a good
•Forming the goal conceptual model and
•Forming th i t ti
F i the intention consistent system image.
•Specifying the action
•Executing the action
Executing Interface should reveal good
mappings that reveal the
•Perceiving the system state relationship between stages.
•Interpreting the system state
p g y
•Evaluating the outcome Users should receive 1-38
continuous feedback. 2-38
39. • Enable designers to compare
Predictive p p
proposed designs for execution
g
time or error rates
Fitts’ Law
It is a model of human psychomotor
p y
behavior developed in 1954.
1-39
2-39
40. Fitts’ Law
It is a model of human psychomotor
behavior developed in 1954.
1-40
2-40
41. Fitts’ Law
It is a mathematical model that predicts
how long will it take to point at a target.
It takes into account the size of the object
and h
d how f f
far from th mouse it i
the is.
1-41
2-41
42. Fitts’ Law
If the target is larger , the user can use large
movements of mouse to get to the object despite
the di t
th distance. 1-42
2-42
43. Fitts’ Law
If the target is small, the user can use large
movements to cover the distance and then make
fine
fi movements to get to the object.
t t t t th bj t 1-43
2-43
44. Fitts’ Law
As designers, we want to
keep objects large enough
and close enough to where
people are ‘looking’ !
looking
If the target is kept near, the time to reach
the target reduces
reduces.
1-44
2-44
45. Fitts’ Law
The time to move and point to a target of width W at a distance
A is a logarithmic function of the spatial relative error (A/W)
MT = a + b log2(A/W + c)
• MT is the movement time
• a and b are device dependent constants.
• c is a constant of 0, 0.5 or 1
• A is the distance (or amplitude) of movement from start to
target center
• W is the width of the target which corresponds to “accuracy”
target, accuracy
1-45
2-45
49. Motor, Perceptual, Cognitive Theories
• Motor skill performance predictions
Motor
e.g. key stroking, pointing times.
• Predicting reading times for free text,
Perceptual lists,
lists formatted displays auditory
displays,
tasks
• In understanding short term, long term,
sensory memory; its role in problem
y y; p
Cognitive
solving and play ; and productivity as 1-49
a function of response time 2-49
50. Lecture 2- key points
Design principles and guidelines emerge from
p
practical experience.
p
Golden rules of Interface Design – VCFAC
g
NFRFS
1-50
2-50
51. Lecture 2- key points
Traditional psychological th i must b
T diti l h l i l theories t be
extended and refined to accommodate complex
human learning memory and problem solving
learning,
required in user interfaces.
In spite of growing set of theories, guidelines
and principles user interface is a complex and
highly creative process. 1-51
2-51
