TME3423/TMI3053/TMS3843/
TMT3683Human Computer Interaction
Semester 1, 2020/21
Unit 2: Interaction Design – Basic Introduction
Part 2 – Important Concepts in HCI
Topics
Understanding users
Usability and user experience goals
Mental models
Domain
Goals, tasks & actions
Environmental considerations
Hardware & software components
Elements of visual design
HCI-Sem1-2020/21 2
Adapted from Interaction Design Beyond Human Computer Interaction 5 th Edition (Sharp et al, 2019)
Understanding users
Users are people who use the product (usually on an everyday
basis) to
Work, play, learn, live
There are two types of users:
Primary users
Secondary users
Users have attributes/characteristics (more in Unit 3)
Both users are stakeholders, but the main focus is on primary
users as they are the ones directly interacting with the UI
HCI-Sem1-2020/21 3
Understanding users
Primary users Secondary users
• They interact directly with the • They interact with the product
product through the primary user, to try to
achieve their goal
• Examples
1. librarians using the library system • Examples:
2. travel agents using the ticket 1. students borrowing books from the
booking system library, from the librarian
2. customers buying tickets to go on a
holiday, from the travel agent
HCI-Sem1-2020/21 4
Understanding users
It is important to understand how users work, learn, play and live in
order to
design interactive products that can provide good UX and match user’s
needs
reveal incorrect assumptions and sensitivities about the particular user
groups
be aware of the diversity, differences and capabilities of the user groups
HCI-Sem1-2020/21 5
Understanding users
Different user groups have different needs,
for example:
Scientists working in different parts of the
world vs. customer service and sales assistants
in a departmental store
Children likes cartoon but most adults may
find it annoying
Adults likes talking head characters but
children find it boring
Activity: Can you think of other
examples of different groups of
users?
HCI-Sem1-2020/21 6
Understanding users
There may be incorrect assumptions/sensitivities about user
groups
Assuming all old people want big text/graphics because of poor
vision, but studies have revealed that some old people in their 70s,
80s or older are perfectly capable with standard-sized or small
interfaces
Assuming users want a mobile application just because mobile
application is in trend now
Assuming users want to watch TV while driving
Activity: Can you think of other examples of assumptions?
Diversity, differences and capabilities – refer to Considerations
in Unit 1
HCI-Sem1-2020/21 7
Usability and user experience goals
To help identify objectives of developing an interactive product for users,
classify these objectives in terms of
Usability goals
User experience goals
It is important to consider both together when designing for user experience
Not all usability and UX goals will be relevant to the design and evaluation of an
interactive product
Some combinations are not compatible e.g. it is not desirable for process control system to
be safe and fun
Need to understand the relationship between both types of goals and be aware of the
consequences of pursuing different combinations when designing products and highlighting
potential trade-offs and conflicts
HCI-Sem1-2020/21 8
Usability goals
Usability definition: refer unit 1, slide 8
There are 6 usability goals:
effectiveness efficiency
safety utility
learnability memorability
HCI-Sem1-2020/21 9
Usability goals - effectiveness
Refers to how good a product is at doing what it is supposed to do
It is a very general goal
Question: Is the product capable of allowing people to learn, carry
out their work efficiently, access the information they need, or buy
the goods they want?
Example:
Online shopping website users can easily complete their purchases
HCI-Sem1-2020/21 10
Usability goals - efficiency
Refers to the way a product supports users in carrying out their tasks
Question: Once users have learned how to use a product to carry out
their tasks, can they sustain a high level of productivity?
Example:
In online shopping, once users have entered all necessary details in online
form to make a purchase, they can let the website save the details so if
they make another purchase, they don’t have to re-enter those details
again
HCI-Sem1-2020/21 11
Usability goals - safety
Involves protecting users from dangerous conditions and undesirable situations
External conditions where people work
Helping any kind of user in any kind of situation avoid the dangers of carrying out unwanted
actions accidentally
Perceived fears users might have of the consequences of making errors and how this affects their
behaviours
Prevents users from making serious errors by reducing risk of pressing the wrong keys/buttons
Provide users with means of recovery if they make errors
Question: What is the range of errors that are possible using the product? What measures
are there to permit users to recover easily from errors?
Example:
Not putting the delete/quit button next to the save button
Dialog box that gives users another chance to confirm or consider their actions
Undo action
Control computers remotely in hazardous situation
HCI-Sem1-2020/21 12
Usability goals - utility
Refers to the extent to which the product provides the right kind of
functionality so that users can do what they need or want to do
Question: Does the product provide an appropriate set of functions
that will enable users to carry out all their tasks in the way they want
to do them?
Example:
High utility: an accounting software package that accountants can use to
compute tax returns
Low utility: a software drawing tool that does not allow users to draw
freehand but forces them to use a mouse to create their drawings using
only polygon shapes
HCI-Sem1-2020/21 13
Usability goals - learnability
Refers to how easy a system is to learn to use
People don’t like spending a long time learning how to use a system; they
want to get started straight away and become competent at carrying out
tasks without too much effort
It is important to determine how much time users are prepared to spend
learning a product – no point having product that provides a range of
functionalities that majority of the users are unable/not prepared to spend
time learning how to use
Interactive products can be used:
Everyday (social media, email, GPS, etc.)
Infrequently (online tax forms, course registration system, etc.)
Question: Is it possible for the user to work out how to use the product by exploring
the interface and trying out certain actions? How hard will it be to learn the whole
set of functions in this way?
HCI-Sem1-2020/21 14
Usability goals - memorability
Refers to how easy a product is to remember how to use, once learned
It is especially important for products that are used infrequently – users
should be able to remember or at least rapidly be reminded how to use it
Users should not have to keep relearning how to carry out tasks
Users need to be helped to remember how to do tasks – there are many ways of
designing the interaction to support this
Through meaning icons, command names, menu options
Structuring options and icons so they are placed in relevant categories of options
E.g.: place all the drawing tools in the same place on the screen helps user remembers
where to look for a particular tool at a given stage of a task
Question: What kinds of interface support have been provided to help users
remember how to carry out tasks, especially for products and operations they use
infrequently?
HCI-Sem1-2020/21 15
Usability criteria
Besides using questions, usability goals can be turned into usability criteria
These are specific objectives that enable a product’s usability to be assessed in terms
of how it can improve a user’s performance or not
Examples:
Time to complete a task (efficiency)
Time to learn a task (learnability)
Number of errors made when carrying out a task over time (memorability)
These usability criteria provide quantitative indicators of
The extent to which productivity is increased
How work, training, or learning have been improved
Measuring the extent to which personal, public, and home-based products support leisure
and information-gathering activities
However, they do not address the overall quality of the UX, which is where UX goals is
used
HCI-Sem1-2020/21 16
User experience goals
UX definition: refer unit 1, slide 7
Many UX goals are subjective qualities and are concerned with how a
system feels to a user
For example:
Listening to music on a high end powerful music system is highly
pleasurable, vs listening to music on a smartphone is enjoyable
Watching a movie in a cinema, vs watching a movie on the laptop
The process of selecting the terms help designers understand the UX
HCI-Sem1-2020/21 17
User experience goals
Usability goals UX goals
• Usability goals are objective – • UX goals are concerned with how
assessing how useful/productive users experience an interactive
a system is from its own product from their perspective
perspective
• More terms are used to describe
• The terms used to describe UX goals to describe the
usability goals are a small and multifaceted nature of UX
distinct set (refer usability goals
slides)
HCI-Sem1-2020/21 18
User experience goals
UX goals covers a range of emotions and felt experiences, and can
include desirable/undesirable aspects
HCI-Sem1-2020/21 19
Mental models
A mental model is a cognitive framework that can be used to explain
how humans interact and use technologies – it is important for designers
to take advantage of the mental models of users and how they use these
models
Mental models are the models people have of themselves, others, the
environment and the things with which they interact with
People form mental models through experience, training and instruction –
the more someone learns about something and how it functions, the more
their mental model develops
We all have a model of the world in our heads that enables us to
negotiate unfamiliar situations
Investigating the mental model of users’ tasks and problems helps
discover design strategies to make the system more accessible and
easily understandable
HCI-Sem1-2020/21 20
Mental models
Structural mental model
Assume that users have internalized in their
memory the structure of how a particular
device or system works
“How it works”
Develops fro a model of how the
device/system works
Example: London Underground schematic map
showing the structure of the underground train
system
HCI-Sem1-2020/21 21
Mental models
Functional mental model
Assume that users have internalized procedural
knowledge about how to use the device or system
“How to use it”
Develops from past knowledge of a similar domain
Example: London Underground map with 6 fare zones,
to help users purchase the right ticket
HCI-Sem1-2020/21 22
Domain
Domain is the area of expertise and specialist knowledge for which an
interactive product may be developed
E.g. medical, financial, process control systems
Domain description includes:
The information/concepts/terms associated with the domain
E.g. financial system: credits, debits, accounts, interest rates
Any specialized knowledge needed to perform tasks and accomplish goals
E.g. financial system: how to calculate interest rates
HCI-Sem1-2020/21 23
Domain
Domain analysis is the activity of gathering information about a
domain
Talk to, observe, and interview domain experts
Refer to existing documentation – user/training manuals
Domain experts are people who are knowledgeable and skilled in the
domain
A lack of understanding/knowledge of the domain will lead to
Error in specifying the requirements for the system
Result in a design that fails to meet the users’ needs
HCI-Sem1-2020/21 24
Domain
Domain model is the output of a domain analysis – it describes the domain
information, concepts and terms relevant to the system being developed
Domain models contain a subset of the total expert knowledge of the
whole domain – i.e. only the information relevant to the area of the
system being developed
Domain model can be:
Textual description
Graphical notation (DFD, ERD, state transition diagram, etc.)
Domain model is part of the requirement specification document
HCI-Sem1-2020/21 25
Domain
Domain model example: ATM domain knowledge
System being developed: ATM system
Need to model ATM knowledge, but no need to
model other banking knowledge
Banking knowledge includes
•Savings and checking accounts
•Mortgage
•Life insurance
ATM •Loans
knowledge •Business services
•Stocks and shares
ATM knowledge includes
Banking knowledge •Checking an account balance
•Withdrawing money
•Depositing money
•Ordering a bank statement
HCI-Sem1-2020/21 26
Goals, tasks & actions
Goals, tasks and actions are different for different people,
depending on their previous experiences and knowledge
A goal is an end result to be achieved
Accomplished by performing a particular set of tasks
A task is a structured set of related activities that are
undertaken in some sequence
Tasks are what a person has to do in order to accomplish a goal
An action is an individual step/operation that needs to be
done as part of the task
HCI-Sem1-2020/21 27
Goals, tasks & actions
The relationship between goals, tasks and actions
Goal
Task Task
Action Action Action
HCI-Sem1-2020/21 28
Goals, tasks & actions
Goal Task Action
• communicating with • Get paper and pen • Write the individual
a friend through • Find a flat surface to alphabets to form
writing write appropriate words
• Write on the paper
using the pen to
convey a message
Activity: think of a goal, then break it down into tasks and actions
HCI-Sem1-2020/21 29
Goals, tasks & actions
Task analysis is the activity that system designers use to understand
what a computer system must do and the functionalities it must
provide to support users’ needs
It is necessary to understand users’ goals and how the goals break down to
tasks and actions
Task analysis involves identifying goals, tasks, and actions
Gathering information about these can be done through interviews,
observation and relevant documentation
There are several techniques for task analysis (more in Unit 3)
HCI-Sem1-2020/21 30
Environmental considerations
Also to be considered in addition to the tasks are the factors related
to the environment within which the application will be used
Make a site visit (if possible) to observe real users doing real work
Environmental aspects will affect choices in the design of the UI
Several aspects of the environment:
Physical
Safety
Social
Organizational
User support
HCI-Sem1-2020/21 31
Environmental considerations
The physical environment
Sufficient lighting?
Comfortable temperature? Specialized conditions?
E.g. freezer
Noise levels – busy or quiet place?
Dirty?
Dusty?
Physical design and layout
How is the area laid out?
How much space is dedicated to the system?
How many people are in the space?
HCI-Sem1-2020/21 32
Environmental considerations
The safety environment
Health and safety issues
Hazards
Need special clothing? Protective clothing?
Safety critical systems?
Stress levels?
Any pollution?
Other environmental hazards?
HCI-Sem1-2020/21 33
Environmental considerations
The social environment
How users interact/prevented from interacting
Are users under pressure from deadlines/production targets?
Do they share tasks?
Do they depend on each other to complete tasks?
Do they help each other learn?
Do they distract each other?
Is there any hierarchy?
Individual offices, cubicles, open space?
HCI-Sem1-2020/21 34
Environmental considerations
The organizational environment
Organizational mission and aims
Purpose of the group
Structural working factors
Working hours, group working, job function, work practices, interruptions, management
and communications structure
Attitudes and cultural factors (policies, relations)
Flexibility, performance monitoring and feedback, pacing, autonomy, discretion
Overall culture of the group, its attitude and expectations
HCI-Sem1-2020/21 35
Environmental considerations
The user support environment
What types of user support are provided
Assistive devices
Reference manuals
Provide training
Help desk/support team
Experts to guide novices
HCI-Sem1-2020/21 36
Environmental considerations
How to environmental considerations affect UI design?
Environmental characteristic How it affects the design
The environment is noisy. The use of sound for alerting users to problems
may not be effective.
The environment is dusty or dirty or users wear Equipment might require some type of protective
protective clothing such as gloves. covering. Input devices will need to accommodate
this.
The work is highly pressured and subject to The application must allow the user to stop his or
frequent interruptions. her work and restart it later, preferably from the
point where the user left off.
There is a need for workers to share information, The workplace will need to be laid out carefully
or the work is designed so that they work in to take this factor into consideration.
groups rather than in isolation.
HCI-Sem1-2020/21 37
Reminder: Please read and refer to Guide -
Hardware components How to Use Hardware & Software
Components.pdf on how to use these
components
Devices to enter information
Keyboard
Keypad
Buttons
Pointing devices
Direct: mouse, joystick, trackball, trackpad
Indirect: touchscreen, pen
Gesture
Biometric recognition
Handwriting
Speech
Eye tracking
Other examples: refer to the interfaces types in Unit 1 HCI-Sem1-2020/21 38
Reminder: Please read and refer to Guide -
Hardware components How to Use Hardware & Software
Components.pdf on how to use these
components
Devices to output information
Screens
Speakers
Lights
Dials
Buzzers
Head up display
Head mounted display
Stereoscopic display
Other examples: refer to the interfaces types in Unit 1 HCI-Sem1-2020/21 39
Reminder: Please read and refer to Guide -
Software components How to Use Hardware & Software
Components.pdf on how to use these
components
Text (message in the form of alphabets, numbers, symbols)
Colour (property of light seen by our eyes)
Images/graphics (pictures/photographs/diagrams)
Moving images (video/animation)
Audio (sound)
Software components are usually relatively easy and cheap to change
but they should be applied in a consistent and thoughtful manner to
increase the usability of the UI.
HCI-Sem1-2020/21 40
Elements of visual design
Line Shape Space
Volume Value Colour
Textur
e
Placement of these elements are important to create impact
HCI-Sem1-2020/21 41
Elements of visual design
Line: strokes connecting two points
Shape: self-contained areas, usually formed by lines
Space: empty area around a shape
Volume: has 3 dimensions: length, width and depth
Please read the following article for more explanation on the
elements:
https://
www.interaction-design.org/literature/article/the-building-blocks-o
f-visual-design
HCI-Sem1-2020/21 42
Elements of visual design
Value: describes light and dark
Colour: element of light
Texture: the surface quality of an object
Please read the following article for more explanation on the
elements:
https://
www.interaction-design.org/literature/article/the-building-blocks-o
f-visual-design
HCI-Sem1-2020/21 43
Elements of visual design
Example of the usage of elements of visual design:
HCI-Sem1-2020/21 44
Summary
Understanding users
Usability and user experience goals
Mental models
Domain
Goals, tasks & actions
Environmental considerations
Hardware & software components
Elements of visual design
HCI-Sem1-2020/21 45
