User interface

Lessons outcomes
• Understand and apply the concept of affordance in
industrial design
• Understand and apply the concept of mapping in
industrial design
• Understand and apply the concept of constraint in
industrial design
• Awareness of user interface development process
• Assess the quality of ID interface
Introduction
• Good user interface = usable

• Focuses on
• Product usability
• End-user's experience

• Careers that focuses on user interface

• Usability professional
• UX (user experience) specialist
• Human factors engineer
Introduction
Outline
• Affordance
• Mapping
• Constraint
• User interface development process
• Designing user interface concepts
• Modelling the user interface
• Testing user interface
• Assessing the quality of ID interface
Relationships between product,
human being, perception, and
behavior evaluation
Function
and form
User
interface

Good function/form + good user interface + good anthropometry = ergonomics

Ergonomics = fit design to user
Outline
• Affordance
• Mapping
• Constraint
• User interface development process
• Designing user interface concepts
• Modelling the user interface
• Testing user interface
• Assessing the quality of ID interface
Affordance
• Affordance = to give a clue

• Refers 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

• When the affordances of a physical

object are perceptually obvious it
is easy to know how to interact
with it.
Figure 1: teapot design
 Class Activity
• Physical affordances:
How do the following physical objects afford? Are they obvious?

Figure 2: teacup design

Figure 3: chair design Figure 4: door handle design Figure 5: car radio design
Class Activity
• Virtual affordances
How do the following screen objects afford?
What if you were a novice user?
Would you know what to do with them?

Figure 6: different virtual object designs

Affordance issues

Figure 7: door handle design

Affordance issues

Figure 12: door handle design

Affordance issues

Figure 8: door handle design

Affordance issues

Figure 13: stair barrier design

Discussion
Exercise
• Evaluate design features using “affordance”
concept
 Affordance: Shape of handle affords __________
 Description: The shape of the handle encourage __________
 Conclusion: ___________

 Affordance: Hole on the handle affords __________

 Description: The hole on the handle encourage __________
 Conclusion: ___________

Improvement?
Outline
• Affordance
• Mapping
• Constraint
• User interface development process
• Designing user interface concepts
• Modelling the user interface
• Testing user interface
• Assessing the quality of ID interface
Mapping
• Mapping = relationship between controls and their
effects in the world.
• An example of a good mapping between control and
effect is the up and down arrows used to represent the
up and down movement of the cursor, respectively, on a
computer keyboard.
Mapping
Good or bad mapping?

Figure 14: elevator button designs

 Mapping

Example of a good mapping

Figure 15: automobile seat adjustment control design

 Mapping
Example of a bad mapping

Figure 16: elevator button design

 Mapping
Example of a bad mapping

Figure 17: wrist watch button design

Good or bad mapping?

Figure 18: faucet control design

Good or bad mapping?

Figure 19: faucet control design

Good or bad mapping?

Figure 20: faucet control design

Discussion
Exercise
• Evaluate design features using “mapping” concept

 Mapping: the knob design maps volume __________

 Description: the knob design without any __________
 Conclusion: ___________

Improvement?
Outline
• Affordance
• Mapping
• Constraint
• User interface development process
• Designing user interface concepts
• Modelling the user interface
• Testing user interface
• Assessing the quality of ID interface
Constraints
• Constraints are powerful tools for the designer

• Constraints are valuable in guiding behavior.

Constraints direct user for specific actions.

• There are 3 types of constraints:

• Physical,
• Cultural,
• Semantic / Logical
Physical constraint
• Physical limitations constrain possible
operations. Thus, a large peg cannot fit into
a small hole.

• With the Lego motorcycle, the windshield

would fit in only one place. The value of
physical constraints is that they rely upon
properties of the physical world for their
operation; no special training is necessary.

• With the proper use of physical constraints,

there should be only a limited number of
possible actions

• Physical constraints are made more effective

and useful if they are easy to see and
interpret, for then the set of actions is
restricted before anything has been done.

Figure 21: lego motorcycle

Physical constraint

Figure 22: physical constraint in battery

Physical constraint

Figure 23: physical constraint in battery

Physical constraint

Figure 24: physical constraint in computer ports

Cultural constraints
• Cultural constraints:
• we turn screws clockwise to tighten,
counterclockwise to loosen;
• cultural constraints dictate the placement Figure 25: cultural constraint in
of the three lights (red, yellow, green) screwdriving activity

• In the end, the apparently large

number of decisions is reduced to only
a few choices that should have been
learned or otherwise noted during the
assembly/disassembly.
Figure 26: cultural
constraint in traffic light
Semantic / Logical constraints
• Semantic constraints are those that rely
upon the meaning of the situation to
control the set of possible actions.

• In the case of the motorcycle lego, there

is only one meaningful location for the
rider, who must sit facing forward.

• The purpose of the windshield is to

protect the rider’s face, so it must be in
front of the rider.
Figure 27: semantic /
• Semantic constraints rely upon our logical constraint in lego
knowledge of the situation and of the motorcycle
world. Such knowledge can be a
powerful and important clue.
Semantic / Logical constraints
• Semantic / Logical constraints use reasoning to
determine the alternatives.
• Examples:
• If we ask the user to click on the computer five locations and
only four are immediately visible, the person knows, logically,
that there is one location off the screen.

• Suppose you take apart a leaking faucet to replace a washer,

but when you put the faucet together again, you discover a
part left over. You’ll know that it is not assembled correctly

• If two switches control two lights, the left switch should work
the left light; the right switch, the right light.
• If the orientation of the lights and the switches differ, the natural
mapping is destroyed. So the position can also be a constraint
Logical constraints

• Where do you plug the

mouse?

• Where do you plug the

keyboard?

• top or bottom connector?

• Do the color coded icons

help?
Figure 28: logical constraint in
computer port
How to design them better

(i) A provides direct adjacent

mapping between icon and
connector

(ii) B provides color coding to

associate the connectors
with the labels
Logical constraints

Figure 29: light switches

How to design them better

Figure 30: light switches

Outline
• Affordance
• Mapping
• Constraint
• User interface development process
• Designing user interface concepts
• Modelling the user interface
• Testing user interface
• Assessing the quality of ID
User interface development
process
• Designing user interface concepts
• Develop conceptual model
• Develop user interface structure
• Define interaction style
• Develop a refined design
• Develop final design

• Model the user interface

• Build a prototype to evaluate dynamics of user interface
• Software, hardware, mockup

• Test user interface

• At start of development effort
• When prototype is developed
• When marketing claims may be displayed
• Conferences, office, lunchroom
User interface development
process
• Designing user interface concepts
• Develop conceptual model
• Develop user interface structure
• Define interaction style
• Develop a refined design
• Develop final design

• Model the user interface

• Build a prototype to evaluate dynamics of user interface
• Software, hardware, mockup

• Test user interface

• At start of development effort
• When prototype is developed
• When marketing claims may be displayed
• Conferences, office, lunchroom
Designing user interface concepts
• Need to take into account:
• Who the users are – understand their behaviour, capability,
motivation etc
• What activities are being carried out
• Where the interaction is taking place

• Need to optimize the interactions users have with a product

• So that they match the users’ activities and needs

• Consider in your design:

• Affordances
• Mappings
• Constraints
Designing user interface concepts
• Need to take into account what people are good
and bad at
• Consider what might help people in the way they
currently do things
• Think through what might provide quality user
experiences
• Listen to what people want and get them involved
• Use tried and tested user-centered methods
User interface development
process
• Designing user interface concepts
• Develop conceptual model
• Develop user interface structure
• Define interaction style
• Develop a refined design
• Develop final design

• Model the user interface

• Build a prototype to evaluate dynamics of user interface
• Software, hardware, mockup

• Test user interface

• At start of development effort
• When prototype is developed
• When marketing claims may be displayed
• Conferences, office, lunchroom
Modelling user interface
• Prototyping / modelling for ID
• We have covered this in detail in the last class!!
User interface development
process
• Designing user interface concepts
• Develop conceptual model
• Develop user interface structure
• Define interaction style
• Develop a refined design
• Develop final design

• Model the user interface

• Build a prototype to evaluate dynamics of user interface
• Software, hardware, mockup

• Test user interface

• At start of development effort
• When prototype is developed
• When marketing claims may be displayed
• Conferences, office, lunchroom
Testing user interface
• Usability goal:
• Effective to use
• Efficient to use
• Safe to use
• Have good utility
• Easy to learn
• Easy to remember how to use

• Test usability of the product through

• Focus group
• Structured interview
• Direct interaction and survey evaluation
Testing user interface
Adjectives to look for during interface testing with
potential users
Desirable aspects
satisfying helpful fun
enjoyable motivating provocative
engaging challenging surprising
pleasurable enhancing sociability rewarding
exciting supporting creativity emotionally fulfilling
entertaining cognitively stimulating

Undesirable aspects
boring unpleasant
frustrating patronizing
making one feel guilty making one feel stupid
annoying cutesy
childish gimmicky
Outline
• Affordance
• Mapping
• Constraint
• User interface development process
• Designing user interface concepts
• Modelling the user interface
• Testing user interface
• Assessing the quality of ID interface
Assessing the quality of ID interface
• We can evaluate the quality of ID interface through
assessment of 3 components:
1. Quality of the interface
2. Emotional appeal
3. Ability to maintain and repair the product
Assessing the quality of ID interface
1. Quality of the interface: it is the rating of how easy the
product is to use

• Example of questions we can ask to ourselves:

• Do the features of the product effectively communicate their operation to
the user?
• Is the product’s use intuitive
• Are all features safe?
• Have all potential users and uses of the product been considered?

• Example of questions we can ask to end users:

• Is the grip comfortable?
• Does the control knob turn easily and smoothly?
• Is the power switch easy to locate?
• Is the display easy to read and understand?
Assessing the quality of ID interface
2. Emotional appeal: it is the rating of the overall consumer
appeal to the product

• Example of questions we can ask to ourselves:

• Is the product attractive?
• Does the product express quality?
• What images come to mind when viewing it?

• Example of questions we can ask to end users:

• How does the car door sound when slammed?
• Does the hand tool feel sold and sturdy?
• Does the appliance look good in on the kitchen counter?
Assessing the quality of ID interface
3. Ability to maintain and repair the product: it is the rating
of the ease of maintenance and repair

• Example of questions we can ask to ourselves:

• Is the maintenance of the product obvious?
• Do product features effectively communicate disassembly and
assembly procedures?

• Example of questions we can ask to end users:

• How easy and obvious is it to clear a paper jam in the printer?
• How difficult it is to disassemble and clean the food processor
• How long does it take to change the batteries in the remote
controller?
Summary