PUSL3122 HCI, Computer

graphics and visualisation

 About the PUSL3021 module ..

• HCI
• Computer graphics
• Visualisation

Slide 2
COURSE TEXT? COVERS ≈ 50% OF
COURSE

Slide 3
TOPICS COVERED THIS
LECTURE (LECTURE 1)
• Interaction design, User experience, User
experience goals, design principles
• IxD activities: Discovering requirements,
Designing alternatives, Prototyping and
Evaluating
• This part of the module is taken from the
main text book for the module, the latest
release from 2019. This lecture focuses on
chapters 1 and 2.

Slide 4
WHAT IS INTERACTION DESIGN?
• Interaction Design (IxD) defines the structure and behaviour
of interactive systems. Interaction designers strive to create
meaningful relationships between people and the products
and services that they use, from computers to mobile devices
to appliances and beyond. Our practices are evolving with the
world.
The Interaction Design Association @ ixda.com

• It is the “design of spaces for human communication and

interaction.”
Winograd, T. (1997). The Design of Interaction. In Beyond Calculation: The Next Fifty Years of Computers,
Denning, P.J. & Metcalfe, R.M. (Eds.) Copernicus, New York, pp. 149-161.

• It is designing “interactive products to support the way people

communicate and interact in their everyday and working lives.”
Sharp, H., Roger, Y., & Preece, J. (2019). Interaction design: beyond human-computer interaction

Slide 5
THE GOOD, THE
BAD …
• How many of the interactive devices that you use are easy,
effortless and enjoyable?

• On the positive side we • On the negative side we

have have
• Smartphones • SharePoint
• iPads • In-house software
• Satellite navigation systems
systems • Self checkouts in shops
• The ribbon in MS where understanding
products where the scales are
• Note it started out over located is like a game of
there hide and seek
BAD
DESIGNS
• Lift controls and labels vary a lot, so it is easy to push the
wrong button by mistake.

https://uxdesign.cc/analyzing-elevator-controls-using-nielsen-normans-usability-heuristics-53e385fa8003

• People would not make the same mistake for the controls in
the last example. Why not?
• Another good example of bad design is drakes circus lifts –
have you ever got out at the wrong one?
WHY IS THIS VENDING MACHINE
SO BAD?
• Need to push button
first to activate reader

• Normally insert money

first before making
selection

• Contravenes well
known convention
www.baddesigns.com (accessed 18/11/20)
GOOD
DESIGN
• This is a classic: like ‘hello world’ is to programming
• Marble answering machine (Bishop, 1992)
• Based on how everyday objects behave
• Easy, intuitive, and a pleasure to use
• Only requires one-step actions to perform core tasks

Durrell Bishop's
answerphone:
vimeo.com/19930744
GOOD DESIGN – THE TIVO
REMOTE
• Why was the TiVo remote so successful
compared to standard remote controls?
• Peanut shaped to fit in hand
• Logical layout and colour-coded, distinctive
buttons, Easy-to-locate buttons
• What did TiVo do differently?
• They took time and effort to follow a user-
centred design process. They involved
potential users throughout the design
progress getting feedback
• Avoided “buttonitis”- where teams overwhel m
users with a button for everything Click here for the
• They received design awards for the story of a peanut
design.
DILEMM
A
• Which is the best way to interact with a smart TV? Why?
• Pecking using a grid keyboard via a remote control
• Swiping across two alphanumeric rows using a
touchpad on a remote control
• Voice control using remote or smart speaker
WHAT TO
DESIGN
• Need to take into account:
• Who the users are
• What activities are being carried out
• Where interaction is taking place
• Need to optimize the interactions users have
with a product:
• So that they match the users’ activities and
needs
Goals of interaction design
• Develop usable products
• Usability means easy to learn, effective to use, and
provides an enjoyable experience
• Involve users in the design process
WHICH KIND OF
DESIGN?
• Number of other terms used
emphasizing what is being designed,
for example:
• User interface design, software
design, user-centred design,
product design, web design,
experience design (UX)
• Interaction design is the umbrella
term covering all of these aspects:
• Fundamental to all disciplines,
fields, and approaches concerned https://en.wikipedia.org/wiki/Interactive_desi
gn#/media/File:Interactive_design_in_relation
with researching and designing _to_other_fields_of_study.jpg

computer-based systems for

people
INTERACTION DESIGN - GENUINELY
TRANSDISCIPLINARY
RELATIONSHIP BETWEEN IXD, HCI, AND
OTHER FIELDS

• Academic disciplines • Design practices contributing

contributing to IxD: to IxD:
• Psychology • Graphic design
• Social Sciences • Product design
• Computing Sciences • Artist-design
• Engineering • Industrial design
• Ergonomics • Film industry
• Informatics
RELATIONSHIP BETWEEN IXD, HCI AND
OTHER FIELDS
• Interdisciplinary fields that ‘do’ interaction design:
• HCI
• Ubiquitous Computing
• Human Factors
• Cognitive Engineering
• Cognitive Ergonomics
• Computer Supported Co-operative Work
• Information Systems
WORKING IN
MULTIDISCIPLINARY TEAMS
• Many people from different backgrounds involved
• Different perspectives and ways of seeing
and talking about things
• Advantages = More ideas and designs generated
• Disadvantages = Difficult to communicate and progress
forward the designs being create
• So, it’s all about striking the balance; although there is a
very wide variety of practice in business
• Based on the Ux maturity level of the business and its
management
INTERACTION DESIGN IN
BUSINESS
• Large number of ID consultancies.

• Examples of well known ones include:

• Nielsen Norman Group: “help companies enter the age
of the consumer, designing human-centred products and
services”
• Cooper: “From research and product to goal-related
design”
• IDEO: “creates products, services and environments for
companies pioneering new ways to provide value to their
customers”
THE USER
EXPERIENCE
• How a product behaves and is used by people in the real
world:
• The way people feel about it and their pleasure and
satisfaction when using it, looking at it, holding it, and
opening or closing it.
• “Every product that is used by someone has a user
experience: newspapers, ketchup bottles, reclining
armchairs”, cardigans.
Garrett, J. J. (2010) The Elements of User Experience: User-Centered Design for
the Web and Beyond (2nd edn). New Riders Press.

• “All aspects of the end-user's interaction with the

company, its services, and its products
Nielsen, J., and Norman, D. (2014) The Definition of User Experience,
www.nngroup.com/articles/definition-user-experience/ (accessed 18/11/2020).

• Cannot design a user experience - only can design for a

user experience
DEFINING USER
EXPERIENCE
• How users perceive a product, such as whether a
smartwatch is seen as sleek or chunky, and their
emotional reaction to it, such as whether people have a
positive experience when using it.
Hornbæk, K., and Hertzum, M. (2017) Technology Acceptance and User Experience:
A Review of the Experiential Component in HCI. Transactions on
Human-Computer Interaction, 24, 5, Article 33, 30 pages.

• Hassenzahl’s (2010) model of the user experience

• Pragmatic: how simple, practical, and obvious it is for
the user to achieve their goals
• Hedonic: how evocative and stimulating the interaction
is to users
Hassenzahl, M. (2010) Experience Design: Technology
for All the Right Reasons. Morgan & Claypool.
WHY WAS THE IPOD USER EXPERIENCE SUCH A
SUCCESS?
• Quality user experience from the start
• Simple, elegant, distinct brand, pleasurable, must have
fashion item, catchy names, cool ...
CORE CHARACTERISTICS OF
INTERACTION DESIGN
• Users should be involved throughout the development of
the project
• Specific usability and user experience goals need to be
identified, clearly documented, and agreed to at the
beginning of the project
• Iteration is needed through the core activities
WHY
?
• Help designers:
• Understand how to design interactive products that fit
with what people want, need, and may desire
• Appreciate that one size does not fit all (for example,
teenagers are very different to silver surfers)
• Identify any incorrect assumptions they may have
about particular user groups. (for example, not all old
people want or need big fonts)
• Be aware of both people’s sensitivities and their
capabilities
ACCESSIBILITY AND
INCLUSIVENESS
• Accessibility: the extent to which an interactive product is
accessible by as many people as possible
• Focus is on people with disabilities
• Inclusiveness: making products and services that
accommodate the widest possible number of people
• For example, smartphones designed for all and made
available to everyone regardless of their disability,
education, age, or income
• Inclusivity is much better than accessibility; disabled
people don’t want to be different
• Watch this video; it captures my point really well
DISABILIT
IES
• Whether someone is disabled, it changes over time with
age, or recovery from an accident
• probably the most frustrating thing
• The severity and impact of an impairment can vary over
the course of a day or in different environmental conditions
• Disabilities can result because technologies are designed to
necessitate a certain type of interaction that is impossible
for someone with an impairment
UNDERSTANDING
DISABILITY
• Disabilities can be classified as:
• Sensory impairment (such as loss of vision or hearing)
• Physical impairment (having loss of functions to one or
more parts of the body after a stroke or spinal cord injury)
• Cognitive (including learning impairment or loss of
memory/cognitive function due to old age)
• Each type can be further defined in terms of capability:
• For example, someone might have only peripheral vision,
be color blind, or have no light perception
• Impairment can be categorized:
• Permanent (for instance, long-term wheelchair user)
• Temporary (that is, after an accident or illness)
• Situational (for example, a noisy environment means that a
person can’t hear)
BEING COOL ABOUT
DISABILITY
• Prosthetics can be designed
to move beyond being
functional (and often ugly)
to being desirable and
fashionable

• People now refer to

“wearing their wheels,” Fashionable
rather than “using a (prosthetic) leg covers
wheelchair”

Skins for cochlea implants

USABILITY
GOALS

• Effective to use
• Efficient to use
http://www.79er.com/blog/articles/Usability-best-practice-for-UX-design.php
• Safe to use
• Have good utility (it works)
• Easy to learn
• Easy to remember how to use
USABILITY AND USER EXPERIENCE GOALS

• Selecting terms to convey a person’s feelings, emotions,

and so forth can help designers understand the
multifaceted nature of the user experience
• How do usability goals differ from user experience goals?
• Are there trade-offs between the two kinds of goals?
• For example, can a product be both fun and safe?
• How easy do you think it is it to measure usability versus
user experience goals?
USER EXPERIENCE GOALS

Desirable aspects Undesirable aspects

DESIGN
PRINCIPLES
• Generalizable abstractions for thinking about different
aspects of design
• The do’s and don'ts of interaction design
• What to provide and what not to provide at the interface
• Derived from a mix of
• theory-based knowledge
• experience and
• common-sense
VISIBILITY - POOR INTERFACE

• This is a control panel for a

lift. 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
YOU COULD ….

• 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
• Make relevant parts visible
• Make what has to be done obvious www.baddesigns.com
FEEDBACK

• It is crucial that you send information back to the user

about what has been done
• every time I would suggest
• Includes sound, highlighting, animation, and combinations
of these
• For example, when screen button is clicked, it provides
sound or red highlight feedback:
CONSTRAINTS

• Restricting the possible actions that can be performed

helps prevent user from selecting incorrect options
• For example, using groups of radio buttons
• Physical objects can be designed to constrain things.
• For example, there being only one way you can insert a
key into a lock
LOGICAL OR AMBIGUOUS
DESIGN?

• Old style mouse and keyboard

connectors.
• Where do you plug the
mouse?
• Where do you plug the
keyboard, in the top or bottom
connector?
• Do the color-coded icons help?
• Its not like that anymore? Or is it?

www.baddesigns.com
HOW TO DESIGN THEM MORE
LOGICALLY
FROM this .. To this …
A B (A) provides direct
adjacent mapping
between icon and
connector

(B) provides color coding

that associates the
connectors with the
labels
www.baddesigns.com www.baddesigns.com
www.baddesigns.com
CONSISTENCY
• Design interfaces to have similar operations and use
similar elements for similar tasks.
• For example, always use Ctrl key plus first initial of the
command for an operation: Ctrl + c, Ctrl + s , Ctrl + o
• The main benefit is that consistent interfaces are easier to
learn and use
• What happens if there is more than one command starting
with the same letter? For example, save, spelling, select,
style. Consistency breaks down 
• You have to find other initials or combinations of keys,
thereby breaking the consistency rule. For example,
Ctrl + s, Ctrl + Sp, Ctrl + shift + l
• Increases learning burden on user, making them more
prone to errors
INTERNAL AND EXTERNAL CONSISTENCY

• Internal consistency refers to designing operations to

behave the same within an application
• Difficult to achieve with complex interfaces
• External consistency refers to designing operations,
interfaces, and so on to be the same across applications
and devices
• Very rarely the case, based on different designer’s preference
KEYPAD NUMBERS LAYOUT

• A case of external inconsistency

(a) phones, remote controls (b) calculators, computer keypads

AFFORDANCES: TO GIVE
A CLUE
• Affordance refers to an attribute of an
object that allows people to know how to
use it.
• For example, a mouse button invites
pushing, a door handle affords
pulling
• Norman used the term to discuss the
design of everyday objects
Norman, D. (1988) The Design of Everyday Things. Basic Books, New York.

• Has since been popularized in interaction

design to discuss how to design interface
objects
• For example, scrollbars to enable
moving up and down; icons to click on
WHAT DOES “AFFORDANCE” HAVE TO
OFFER INTERACTION DESIGN?
• Interfaces are virtual and do not have affordances like
physical objects
• Norman argues that it does not make sense to talk about
interfaces in terms of ‘real’ affordances
• Instead, interfaces are better conceptualized as
‘perceived’ affordances:
• Learned conventions of arbitrary mappings
between action and effect at the interface
• Some mappings are better than others
ACTIVITY or

Virtual affordances
• How do these screen objects afford?
• What if you were a novice user? Would you
know what to do with them?
FOLLOW THE PROCESS … WELL ONE OF THEM …
• It is a process focused on
• discovering requirements
• designing to fulfil requirements
• producing prototypes and
• evaluating them
• Focused on users and their goals
• Involves trade-offs to balance
conflicting requirements
• Generating alternatives
• choosing between them is key
• Four approaches: user-centred
design, activity-centered design,
systems design, and genius design
THE DOUBLE DIAMOND OF
DESIGN

https://productfolio.com/double-diamond/
UNDERSTANDING THE
PROBLEM SPACE
• Explore
• What is the current user experience?
http://marli.us/clear-language-goals/
• Why is a change needed?
• How will this change improve the situation?

• Articulating the problem space

• Team effort
• Explore different perspectives
• Avoid incorrect assumptions and unsupported claims
IMPORTANCE OF
INVOLVING USERS

• Expectation management
• Realistic expectations
• No surprises, no disappointments
http://phil-makingchange.blogspot.com/2014/10/7-
ways-to-manage-expectations-during.html

• Timely training
• Communication, but no hype
• Ownership
• Make the users active stakeholders (bit like having an
insurance policy)
• More likely to forgive or accept problems (that
relationship is very important)
• Can make a big difference in acceptance and success
of product
DEGREES OF USER
INVOLVEMENT
• Member of the design team
• Full time: constant input, but lose touch with COVID
users lockdown
• Part time: patchy input, and very stressful restrictions
• Short term: inconsistent across project life have finally
changed my
• Long term: consistent, but lose touch with users opinion on
• Face-to-face group or individual activities this (but
face-to-face
• Online contributions from thousands of users still best)
• Online Feedback Exchange (OFE) systems
• Crowdsourcing design ideas
• Citizen science
• User involvement after product release
WHAT IS A USER-CENTERED
APPROACH?
• User-centered approach is based on:
• Early focus on users and tasks: directly studying
cognitive, behavioral, anthropomorphic (having human
characteristics), and attitudinal characteristics
• Empirical measurement: users’ reactions and
performance to scenarios, manuals, simulations, and
prototypes are observed, recorded, and analysed
• Iterative design: when problems are found in user
testing, fix them and carry out more tests
FOUR BASIC ACTIVITIES OF
INTERACTION DESIGN MORE ON
THESE NEXT WEEK

• Discovering requirements
• Designing alternatives
• Prototyping alternative designs
• Evaluating product and its user experience throughout

Comparison
elicits a
greater depth of
feedback
KEY
POINTS
• Interaction design is concerned with designing interactive
products to support how people communicate and interact
in their everyday and working lives
• It is concerned with how to create quality user experiences
for services, devices, and interactive products
• It is multidisciplinary, involving many inputs from wide-
reaching disciplines and fields
• Optimizing the interaction between users and interactive
products requires consideration of a number of
interdependent factors, including context of use, types of
activity, UX goals, accessibility, cultural differences, and user
groups.
• Design principles, such as feedback and simplicity, are
useful heuristics for informing, analyzing, and evaluating
aspects of an interactive product.
THESE ARE THE
LIFEBLOOD OF IXD
• Four basic activities in interaction design process
• Discovering requirements
• Designing alternatives
• Prototyping
• Evaluating
• User-centered design rests on three principles
• Early focus on users and tasks
• Empirical measurement using quantifiable and
measurable usability criteria
• Iterative design
Any question?
Would you like to share your feedback?
Thank you
Scribble here (in white box)

Spot the difference … (answer in chat) Dingbats

ANSWERS...

• ROW 1 = Top Gun – Brokeback mountain – The Pink Panther

• ROW 2 = Clockwork Orange --- Up ---West Side Story
• ROW 3 = The 6th Sense --- Super 8 --- Falling Down
• ROW 4 = Inception --- Halloween --- The Blues Brothers
• ROW 5 = The Green Mile --- ☺ First Blood ☺ --- Almost
Famous
Spot the difference … (answer in chat) Dingbats