Role of Ergonomics

in interface Design
COURSE LEARNING OUTCOMES:

• Identify the concept of user

interface design to elevate
technical complexity for usable
product that accepted by user.
(C3, PLO1)
Ergonomics in Interface Design
• Study of the physical characteristics of
interaction
• Also known as human factors – but this can
also be used to mean much of HCI!

Prepared by Mdm Tan Phei Yee

• Ergonomics good at defining standards and
guidelines for constraining the way we design
certain aspects of systems
Role of Ergonomic in Interface Design
• arrangement of controls and displays
• e.g. controls grouped according to function or frequency of use,
or sequentially

Prepared by Mdm Tan Phei Yee

Role of Ergonomic in
Interface Design
• surrounding environment
• e.g. seating arrangements adaptable to cope with all
sizes of user
Role of Ergonomic in
Interface Design
• health issues
• e.g. physical position, environnemental conditions
• (temperature, humidity), lighting, noise
Role of Ergonomic in
Interface Design
• use of colour
• e.g. use of red for warning, green for okay,
awareness of colour-blindness, etc
ACTIVITY 1

Prepared by Mdm Tan Phei Yee

Is red on the right or left?

Are you sure we got it right?

Is the red sometimes on the other side?

Prepared by Mdm Tan Phei Yee

 The worst

Prepared by Mdm Tan Phei Yee

Do you prefer red peppers or green peppers?
How would you pick?

Prepared by Mdm Tan Phei Yee

 What is a green salad?

Prepared by Mdm Tan Phei Yee

Colour conventions
Western colour conventions
 Red – danger, hot, fire
 Yellow – caution, slow, test
 Green – go, okay, clear, vegetation, safety
 Blue – cold, water, calm, sky

Prepared by Mdm Tan Phei Yee

 Warm colours - action, response required, proximity
 Cool colours – status, background information, distance
 Greys, whites, and blues - neutrality
Physical Position (Ergonomics)
Demonstration
• Procedure:

• Each student must follow the instructions below. (Step 1- 11)

• At the end of this session, student can explain their

Prepared by Mdm Tan Phei Yee

experience about ergonomics.
Step 1
• Maintain good posture while working. Sitting up leaning back in a
chair (backrest). Make sure your knees or lower level on the sliding
of your hips and keep your feet supported.

Prepared by Mdm Tan Phei Yee

Step 2:
• Make sure your elbows in open angle (100 ° to 110 °) with your
wrists in a straight line.

Prepared by Mdm Tan Phei Yee

Step 3:
• Do not achieve the far object. Put the mouse and the keyboard in
position nearby.

Prepared by Mdm Tan Phei Yee

Step 4:
• Place the monitor in front of your half fathom.
• The top of the monitor should be slightly below the surface of
the eye.

Prepared by Mdm Tan Phei Yee

Step 5:
• Place the document to be typed in the document holder between
monitor and keyboard.

Prepared by Mdm Tan Phei Yee

Step 6:
• Use good typing technique. Move the mouse using the motion
from the elbow or shoulder. Reduce recurrent movement.

Prepared by Mdm Tan Phei Yee

Step 7:
• Adjust the height of chair.

Prepared by Mdm Tan Phei Yee

Step 8:
• Check the length of the seat (seat pan)

Prepared by Mdm Tan Phei Yee

Step 9:
• Make sure the seat pan and backrest are in the right corner.

Prepared by Mdm Tan Phei Yee

Step 10:
• Adjust the “lumbar support” and “armrests”.

Prepared by Mdm Tan Phei Yee

Step 11:
• Make a conclusion on those activity above and present to
others.

• At the end of this session, explain the experience about

Prepared by Mdm Tan Phei Yee

ergonomics through the Activity.
Mental Model
• What is a mental model?
• Norman (1988, p. 17):
... the models people have of themselves, others, the
environment, and the things with which they interact.

Prepared by Mdm Tan Phei Yee

• Mental models are used to explain observable events in terms of
unobservable structures and events
 Cognitive model: Theory of action
Norman’s (1986) 7 stage model of activity for users at an interface

1. Establish a goal建立一个目标
2. Form an intention形成一个意图
3. Specify an action sequence指定一个操作序列

Prepared by Mdm Tan Phei Yee

4. Execute the action sequence执行操作序列
5. Perceive the system state感知系统状态
6. Interpret the system state 解释系统状态
7. Evaluate system state in terms of goals and intentions系统状态
评估的目标和意图

28
Norman’s action cycle
start here

Goals
What we
want to happen

30
Execution Evaluation
What we do Comparing what happened
to the world with what we wanted to happen

THE WORLD
Action cycle: Stages of
Execution
• Goals do not state precisely what to do
• Where and how to move, what to pick up
• To lead to actions, goals must be transfered into intentions
• A goal is something to be achieved

31
• An intention is a specific set of actions to get to the goal
• Yet even intentions are not specific enough to control actions
Stages of Execution - Example
• “I am reading a book and decide to need more light”

1. My goal: get more light

32
2. Intention: push the switch button on the lamp
3. Action sequence (still a mental event) to satisfy intention: move my body,
streach to reach the switch extend my finger
4. Physical execution: action sequence executed

• Note that I could satisfy my goal with other intention and action sequences
• Instead of pushing the switch, ask another person to switch on the light
• My goal hasn’t changed, but the intention and the resulting action sequence have
Action cycle: Stages of
Execution start here

Goals
What we
An intention to act want to happen

33
so as to achieve the goal

The actual sequence of

actions that we plan to do Evaluation
Comparing what happened
with what we wanted to happen
The physical execution
of that action sequence

THE WORLD
Action cycle: Stages of
Evalution
• Evaluation side, checking up on what happened, has three stages
• Perceiving what happened in the world
• Interpreting the state of the world
• Evaluating the outcome (against our expetations)

34
Stages of Evaluation - Example
• “I am reading a book and decide to need more light”

1. My goal: get more light

35
2. Intention: push the switch button on the lamp
3. Action sequence (still a mental event) to satisfy intention: move my body,
streach to reach the switch extend my finger
4. Physical execution: action sequence executed
5. Perceive whether there is more light in room
6. Decide whether the lamp turned on
7. Decide whether the resulting amount of light is sufficient
Action cycle: Stages of
Evalution
start here

Goals
What we
want to happen Evaluation of the interpretations

36
with what we expected to happen

Execution Interpreting the perception

according to our expectations
What we do
to the world

Perceiving the state

of the world

THE WORLD
Seven stages of action
• 1 for Goals, 3 for Execution and 3 for Evaluation
• Note: only an approximate model

1. Forming the goal

2. Forming the intention

37
3. Specifying an action
4. Executing the action

5. Perceiving the state of the world

6. Interpreting the state of the world
7. Evaluating the outcome
Seven stages of action
start here

Goals
What we
An intention to act want to happen Evaluation of the interpretations

38
so as to achieve the goal with what we expected to happen

The actual sequence of

actions that we plan to do Interpreting the perception
according to our expectations

The physical execution

of that action sequence Perceiving the state
of the world

THE WORLD
Seven stages of action -
Example
• “I am reading a book and decide to need more light”

1. My goal: get more light

39
2. Intention: push the switch button on the lamp
3. Action sequence (still a mental event) to satisfy intention: move my body,
streach to reach the switch extend my finger
4. Physical execution: action sequence executed
5. Perceive whether there is more light in room
6. Decide whether the lamp turned on
7. Decide whether the resulting amount of light is sufficient
What the 7 stages model
reveals
• The difficulty in using everyday things and systems resides
entirely in deriving the relationships between the mental
intentions and interpretations (‘knowledge in the head’) and the
physical actions and states (‘knowledge in the world’)

40
• There are two gulfs that separate mental representations/states
from physical components/states of the enviroment
• The gulf of execution
• The gulf of evaluation

• These gulfs present major problems for users

What the 7 stages model
reveals
• The “Gulf of Execution”
• Does the system provide actions that correspond to the (mental)
intentions of the person?
• Gulf of Execution: The difference between the intentions and allowable

41
actions
• One measure of this gulf is how well the system allows the person to do
the intended actions directly, without an extra effort (e.g., USB interface)
• A good system: direct mappings between intentions and selections
• printing a letter: put document on printer icon vs select print from menu
• drawing a line: move mouse on graphical display vs “draw (x1, y1, x2, y2)”

Gulf of
Physical Execution
System Goals
What the 7 stages model
reveals
• The “Gulf of Evaluation”
• Can feedback (percieved phyisical state) be interpreted in terms of
intentions and expectations?
• Gulf of Evaluation: amount of effort exerted to interpret the feedback

42
(physical state of the system) and to determine how well the expectations
and intentions have been met
• a good system: feedback easily interpreted as task expectations
• e.g. graphical simulation of text page being printed (a form that is easy to
get/see, interpret and matches the way the person thinks of the system)
• a bad system: no feedback or difficult to interpret feedback

Physical
System Goals

Gulf of
Evaluation
Bridging the Gulf of Execution
and Evaluation
action
specifications
interface
mechanism execution bridge intentions

Physical Goals
System
interpretations
interface evaluations
display evaluation bridge

The 7-stage structure provides a basic checklist of questions to

ask to ensure that the Gulfs of Execution and Evaluation are
bridged!
Using the 7 stages to ask design
questions
• How easily can a user

• determine the function of the system? Goal

44
• tell what actions are possible? Execution
• determine mapping from intention to physical movement?

• perform the action?

• tell what state the system is in? Evaluation

• determining mapping from system state to interpretation?

• tell if system is in the desired state?

Using the 7 stages to ask
design questions
• Questions similar to principles of good design:
• Visibility
• By looking, the user can see state of application and alternatives for actions
• Good conceptual model
• Consistency in presentations of operations and results

45
• Coherent system image
• Good mappings
• relations between
• actions and results
• controls and their effects
• system state and what is visible
• Feedback
• full and continuous feedback about results of actions
• Principle of transparency
“the user is able to apply intellect directly to the task;
the tool itself seems to disappear”
An example: reading breaking
news on the web
1. Set goal: “find out about breaking news”
decide on news website
2. Form an intention
check out a news website
3. Specify what to do

Prepared by Mdm Tan Phei Yee

search with Google for Fairfax News website
4. Execute action sequence
find and select suitable link
5. Check what happens at the interface
see a new page pop up on the screen
6. Interpret it
confirm that the web page is correct one
7. Evaluate it with respect to the goal
read breaking news
 ACTIVITY 3

Prepared by Mdm Tan Phei Yee

Group Discussion
• In your Group, Discuss the Seven Stages of Action :
• To finish an activity such as:
1. Cooking
2. Shopping online
3. Register subject using SPMP

Prepared by Mdm Tan Phei Yee

4. Booking ticket Air Asia
5. Keep fit
6. Borrow book at library
7. Buy movie ticket online
8. Download movie online
9. Weight Gain
• Present your Findings in the class
• Submit Your Work Through CIDOS
Principles of Design
1. Provide a good conceptual model.

49
Principles of Design
2. Make things visible.

50
Principles of Design
3. Create natural mappings.

51
Principles of Design
4. Provide feedback.

52
Principles of Design
5. Be consistent.

53
Principles of Design
6. Consider affordances.

54
You know now
• Fitts’ law
• how to size and where to place your buttons and GUI menus
• Norman’s stages of human interaction
• intention, selection, execution, evaluation

55
• problems identified as gulfs of execution and evaluation
• Basic principles of good design
Interaction Framework In HCI
• components
• System, user, input, output
• input and output together form the interface
• each of the components may have its own language to describe
the objects and actions it is concerned with

Prepared by Mdm Tan Phei Yee

Interaction Framework
Interface

System
User

Prepared by Mdm Tan Phei Yee

Output
Core
Input
Task
Interactive Cycle
Interface

System
User

Prepared by Mdm Tan Phei Yee

Output
Core
Input
Task
Translations Between Components
• articulation
• user translates task intentions into the input language
• performance
• input language is translated into stimuli for the system
• presentation

Prepared by Mdm Tan Phei Yee

• system activities are translated into output language
• observation
• output language is translated into the user’s task
model
Example: Light in a Room
• controlling the lighting in a room
• articulation: “I’m going to bed now, so I better turn off the light in the
living room. To do this, I need to flip the switch.”
• task language: turn lights on/off
• input language: flip switch

Prepared by Mdm Tan Phei Yee

• system language: close/open circuit for light bulbs
• output language: lights on/off
Example (cont)
• translations
• articulation
• user decides to turn on the light, and flips a switch
• performance
• flipped switch closes the circuit
• presentation
• light bulb emits light

Prepared by Mdm Tan Phei Yee

• observation
• user notices that the light is on
• frequent problem
• multiple switches in large rooms
 Thank You

Prepared by Mdm Tan Phei Yee