BIM 30503

HUMAN-COMPUTER INTERACTION

DESIGN AND PROTOTYPING PROCESS

1
Design Principles

2
 Learning Outcomes

• At the end of this lecture, you should be able to :

• Identify a range of usability design principles and of how

they can be applied in design
• Evaluate the existing products or systems based on the design
principles
 Design Principles

• Visibility
• Feedback

• Constraints
• Mapping
• Consistency
• Affordances

(Nielsen,1998)
 Visibility

One of the most important design principles is

visibility

Visibility is achieved by placing the controls in a highly visible

location

Visibility is often violated in order to make things "look good"

Designing for visibility means that just by looking, users can see
the possibilities for action
 Visibility

This is a control panel for an

elevator.
How does it work?
• Push a button for the floor you want?

• Nothing happens. Push any other button? Still

nothing. What do you need to do??
• It is not visible as to what to do!

www.baddesigns.com
 Visibility

…you need to insert your room card in

the slot by the buttons to get the elevator
to work!

How to make this action more visible?

– make the card reader more obvious ?

– provide an auditory message, that says what to
do (which language?)
– provide a big label next to the card reader that
flashes when someone enters?
– Other?
 Visibility

…the flusher is on the floor !!

How to make this function more visible?

 Feedback

• Feedback is the provision of information to a

user about the result of an action

• When feedback is used in design, the system

tells the user that it has done something in
response to the user's input
 Feedback

Why add push-down effect

when the button is pressed? Is this useful?

Why progress bar? Why does the telephone

touchpad provide audible
feedback when the keys are
pressed?
 Constraints

• Constraints are properties of an object

that limit the ways in which it can be
used
• When constraints are used in design, we
reduce the possibility of users making
errors
• Jigsaws puzzle pieces utilise shape as
well as the printed picture/pattern to
provide constraints
 Constraints
– Three main types to represent constraints (Norman, 1999)
Physical
Logical
Cultural A professor emeritus at University of
California, San Diego, works mostly
with cognitive science in the domain
of usability engineering. Co-founded
the Nielsen Norman Group, a
consulting group on matters of
usability which also includes Jakob
Nielsen and Bruce Tognazzini.
 Constraints (Physical)

- The design of floppy disk drives allows

the disk to be inserted in the correct
way only
- The design of video cassette drives
allows the cassette to be inserted in the
correct way only
- Bank card can be inserted in certain
way, keys on a pad can only be pressed
in certain way. (ATM machine)
 Constraints (Logical)

• Where do you plug the

mouse and keyboard?
• top or bottom
connector? trial and
error? experience?
• Do the colour coded
icons help?
www.baddesigns.com

Do you find them ambiguous?

How to design them more logically?
 Constraints (Logical)

How to design them more logically?

(i) A provides direct

adjacent mapping
between icon and
connector

(ii) B provides colour coding

to associate the
connectors with the
labels
 Constraints (Cultural)
How to represent Danger!??
 Constraints (Cultural)

Cultural constraints rely on learned conventions

(e.g. red for warning, certain audio signals for danger,
smiley face for happy emotions)

Once accepted by more than one cultural groups, they

become universally accepted conventions.
 Constraints (Cultural)

Which are universal and which are culturally-specific?

 Constraints

• Restricting the possible actions that can be performed

• Helps prevent user from selecting incorrect options

 Natural Mapping

• Mapping is a relationship between controls

and their action or effect in the world
• Natural mapping takes advantage of physical analogies and
cultural standards to provide the user with an understanding of
how something works
 Mapping

Why is this a poor mapping of control buttons for the

sequence of actions of fast rewind, rewind, play and fast
forward?

Suggest a better mapping

 Mapping

Why is this a better mapping?

Mapping
Consistency

• Design interfaces to
have similar
operations and use
similar elements for
similar tasks
• For example:
– Use of short cut keys
– always use ctrl key
plus first initial of the
command for an
operation
– ctrl+C, ctrl+S,
 Affordances
– properties of an object that indicate how it can
be used

This set of doors connects a walkway

between two buildings

• Although both sides of both sets of

doors have handles, only the outer
handles are meant to be pulled
• Using either set of doors once inside
the walkway, to exit, one needs to
push
• Feel trapped??
 Affordances (Physical)
• Physical affordances:
• How do the following physical
objects afford?
• Are they obvious?
 Affordances (Logical)
– Virtual affordances (logical)
• How do the following screen
objects afford?
• What if you were a novice user?
• Would you know what to do with
them?
 Design Principles revisited
• Visibility
– Placing the controls in a highly visible location
• Feedback
– provision of information about the result of an action
• Constraints
– Restricting the possible actions that can be performed helps
prevent user from selecting incorrect options
• Mapping
– Mapping is the relationship between controls and their action or
effect in the world
• Consistency
– Internal consistency refers to designing operations to behave the
same within an application
– External consistency refers to designing operations, interfaces,
etc., to be the same across applications and devices
• Affordances
– properties of an object that indicate how it can be used
Q&A