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
• Usability goals are objective –
assessing how useful/productive
a system is from its own
perspective
• The terms used to describe
usability goals are a small and
distinct set (refer usability goals
slides)
UX goals
• UX goals are concerned with how
users experience an interactive
product from their perspective
• More terms are used to describe
UX goals to describe the
multifaceted nature of UX
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