Dept. of Computer Science & Engineering.

Unit No 1
Introduction to Human-Computer Interaction
PL
D

Prepared By
Prof. A. R. Uttarkar
Assistant Professor
CSE Department, MIT SOE
 Unit -1 at a Glance

Unit-I: Introduction to Human-Computer Interaction

• Includes the difference between good and poor interaction
design
• What interaction design is and how it relates to
human-computer interaction and other fields
• What is involved in the process of interaction design, the
different forms of guidance used in interaction design, etc.
• Need for Design - Examples from Design of everyday
things, case studies, Evolution of the web and digital
interfaces, Design thinking and wicked problems.
• Exercise - Identify problems around us requiring design
solutions Or problems solved using design.
 By the end of this chapter, you will…

✦Understand the difference between good and poor interaction design.

✦Be able to describe what interaction design is and how it relates to human-computer interaction
and other fields.

✦Understand what is meant by the user experience and usability.

✦Understand what is involved in the process of interaction design.

✦Outline the different forms of guidance used in interaction design.

Good design makes a Which do you think should have the most holes?
product useful. A
product is bought to be
used. It has to satisfy
certain criteria, not only
functional, but also
psychological and
aesthetic. Good design
emphasizes the
usefulness of a product
whilst disregarding Image from http://www.jnd.org/books.html#608 :

anything that could

Does it matter what the designers think?
possibly detract from it.
Good design is innovative.
•Good design makes a product useful.
•Good design is aesthetic.
•Good design makes a product understandable.
•Good design is unobtrusive.
•Good design is honest.
•Good design is long-lasting.
•Good design is thorough down to the last detail.
•Good design is environmentally-friendly
Definition of good design
• Good design can be difficult to define, but in general it refers
to the creation of aesthetically pleasing items that are also
functional. Good design is often thought of as being visually
appealing and creative, yet still able to fulfil its purpose
whether it’s a piece of furniture or an app.

• Designers strive to create products that meet these criteria

by exploring elements such as shape, color, texture and size.
It’s important for designers to consider usability factors
when creating a product so that users can understand how
the product works effectively without confusion or
frustration.
Bad Design

✦Elevator controls and labels on the

bottom row all look the same, so it is
easy to push a label by mistake
instead of a control button
✦People do not make same mistake
for the labels and buttons on the top
row. Why not?
Definition of bad design
• Bad design is an umbrella term used to refer to any design
that fails to fulfil its intended purpose. Bad design can
encompass a wide range of failures, from aesthetic issues
such as poor color selection or a cluttered layout, to
functional issues such as usability problems or difficulty
navigating a website.

• Bad design can also refer to designs that don’t effectively

deliver their message, or are not appropriate for the
intended audience. It can be difficult to define bad design
since it’s often subjective and open to interpretation;
however, some common indicators of bad design include
confusing navigation systems, unreadable text, too-small
elements on the page, overcomplicated designs with too
much going on at once, and poorly designed visuals that fail
to grab attention.
Good Vs Bad Design
What to Design

✦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
Steve Jobs legacy : HCI

• Human-computer interaction (HCI) has always been at the heart of Apple design.
• Jobs recognized the central role of the user as well as human-computer interaction and design
in products.
• Steve Jobs and Apple computers, by investing in products that are enjoyable easy to use by
anyone, have changed the way that user experience is perceived in both technology and
computer companies.
• People working in the field of HCI often make a prime example of Apple products as a
standard for a device that has good user experience, while also being commercially successful.
• Steve quotes about Design : "the design that works". "Most people make the mistake of
thinking design is what it looks like. People think it's this veneer - that the designers are
handed this box and told, 'Make it look good!' That's not what we think design is. It's not just
what it looks like and feels like. Design is how it works," (New York Times, November 30,
2003).
What is Interaction Design?
✦Develop usable products
✦Usability means
1. easy to learn,
2. effective to use and
3. provide an enjoyable experience
✦Involve users in the design process
✦Number of other terms used emphasizing what is being designed, e.g.,
✦user interface design, software design, user-centered 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
with researching and designing computer-based systems for people
HCI and Interaction Design
Academic Disciplines
Design Practices

Computer Science/ Software

Engineering
Graphic Design
Ergonomics Product Design

Engineering
Artist Design
Psychology/
Industrial Design
Cognitive Science

Informatics Film Industry

Social Sciences

Human Factors Computer-Supported Human Computer Cognitive Engineering / Information

Engineering (HF) Cooperative Work (CSCW) Interaction (HCI) Cognitive Ergonomics Systems (IS)

Interdisciplinary Fields
What is HCI?

✦Human-Computer Interaction draws on the fields of computer science, psychology,

cognitive science, and organizational and social sciences in order to understand how
people use and experience interactive technology.
View design as a form of communication
between designers and the users.

Different
perspectives

👍 More ideas

👎 Challenge in
Different people/ ~ communication and
backgrounds progressing forward
 What do professionals do in the ID business?

✦interaction designers - people involved in the design of all the

interactive aspects of a product
✦usability engineers - people who focus on evaluating products, using
usability methods and principles
✦web designers - people who develop and create the visual design of
websites, such as layouts
✦information architects - people who come up with ideas of how to
plan and structure interactive products
✦user experience designers (UX) - people who do all the above but who
may also carry out field studies to inform the design of products
What is involved in the process of ID?

✦Discover
✦Identifying needs and establishing
requirements for the user experience
✦Design
✦Developing alternative designs to meet
these
✦Building interactive prototypes that can
be communicated and assessed
✦Evaluate
✦Evaluating what is being built
throughout the process and the user
experience it offers
 Core Characteristics of Interaction Design

✦Users should be involved through the development of the project

✦Specific usability and user experience goals need to be identified,

clearly documented and agreed at the beginning of the project

✦Iteration is needed through the core activities

Why go to this length?
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
e.g., teenagers are very different to grown-ups
✦Identify any incorrect assumptions they may have about particular user
groups
e.g., not all old people want or need big fonts
✦be aware of both people’s sensitivities and their capabilities
Are Cultural Differences Important?

✦5/21/1960 versus 21/5/1960?

✦Which should be used for international services and online forms?
✦Examples of websites that are reacted differently by people from
different cultures?
Virtual Agents, Avatars…

Virtual Agents, Avatars, ..

Elements of the User Experience (UX)

Virtual Agents, Avatars, ..

Usability Goals ✦Effectiveness: refers to how good a product is
at doing what it is supposed to do. (the
✦Effective to use expected result)
✦Efficient to use ✦Q: Is the product capable of allowing people
to learn, carry out their work effectively,
✦Safe to use
access the info they need, or buy the goods
✦Have good utility they want?
✦Easy to learn ✦Efficiency: refers to the way a product support
Virtual users
Agents, in
Avatars, ..
carrying their common tasks with the
✦Easy to remember
how to use least waste of time and effort. (ex: online
shopping, one-click option)
✦Q: Once users have learned how to use a
product to carry out their tasks, can they
sustain a high level of productivity?

Being effective is about doing the right things, while being efficient is
about doing the things in the right manner..
✦Safety: involves protecting the user from dangerous conditions and
undesirable situations.
✦Q: what is the range of errors that are possible using the product
and what measures are there to permit users to recover easily from
them?
Virtual Agents, Avatars, ..

✦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.
(ex: drawing tools)
✦Q: 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?
✦Learnability: refers to how easy a system is to learn to use.
✦Q: 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?

Virtual Agents, Avatars, ..

✦Memorability: refers to how easy a product is to remember how to
use, once learned.
✦Q: 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?
User Experience (UX) Goals

☺ satisfying ☺ aesthetically pleasing

☺ enjoyable ☺ supportive of creativity
☺ engaging ☺ challenging
☺ pleasurable ☺ rewarding
☺ exciting ☺ fun
☺ entertaining Virtual Agents,
☺ provocative
Avatars, ..
☺ helpful ☺ surprising
☺ motivating ☺ enhancing sociability
☺ emotionally fulfilling

☹ boring ☹ annoying
☹ frustrating ☹ cutesy
Usability & UX Goals

✦Selecting terms to convey a person’s feelings, emotions, etc., 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?
✦e.g. can a product be both fun and safe?
Virtual Agents, Avatars, ..
✦How easy is it to measure usability versus user experience goals?
✦Ex: when considering how engaging an interactive virtual agent is for
an online store, one can ask:
✦Q: How long do users interact with the virtual sales agent? Do
they suspend their disbelief when typing in questions?

✦Ex: to consider the

Virtual Agents, Avatars, ..
effect of its appeal one can ask:
✦Q: What is the user’s immediate response to the agent’s
appearance? Is it one of mockery, dismay, or enjoyment? Do they
smile, laugh, or scoff?
Virtual Agents, Avatars, ..
A B C
 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
Virtual Agents, Avatars, ..
 Design Principles

✦Visibility: can I see it?

✦Affordance: how do I use it?
✦Consistency: I think I have seen this before!
✦Feedback: what is it doing now?
✦Constraints: Virtual
whyAgents,
can’tAvatars,
I do.. that?
 Design Principles Visibility
✦One of the most important design principles is visibility.
Is achieved by placing the controls in a highly visible location.
✦Designing for visibility means that just by looking, users can see the
possibilities for action.

Virtual Agents, Avatars, ..

Design Principles Visibility

Virtual Agents, Avatars, ..

Design Principles Visibility

Virtual Agents, Avatars, ..

Virtual Agents, Avatars, ..
Virtual Agents, Avatars, ..
Design Principles Feedback

✦Sending information back to the user about what has been done
✦Includes sound, highlighting, animation and combinations of these

Virtual Agents, Avatars, ..

The properties of an object that limit the ways in which it can be used

Virtual Agents, Avatars, ..

Virtual Agents, Avatars, ..
Design Principles 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
✦Main benefit is consistent interfaces are easier to learn and use
Virtual Agents, Avatars, ..
 Design Principles Consistency

✦What happens if there is more than one command starting with the
same letter?
✦e.g. save, spelling, select, style
✦Have to find other initials or combinations of keys, thereby breaking
the consistency rule
✦e.g. ctrl+S, ctrl+Sp,
Virtual Agents, Avatars, ..
ctrl+shift+L
✦Increases learning burden on user, making them more prone to errors
Design Principles Consistency (Internal Vs External)

✦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, etc., to be the
same across applications and devices
✦Very rarely the case,
Virtual Agents,
based onAvatars, .. designer’s preference
different
Design Principles Constraints

✦Restricting the possible

actions that can be performed
✦Helps prevent user from
selecting incorrect options
✦Physical objects can be
designed to constrain things
✦e.g. only one way you can
insert a key into a lock

Restricting the possible actions that

can be performed
Usability Principles

Virtual Agents, Avatars, ..

The Meaning of Design: What Design Is and
Why It’s Important

What is design? Most people think that design is about making

things look pretty – a decoration. Art. But design is as much an art
as it is a science.

Cold and calculated process. Sometimes the detriment of pretty.

Yet, the design is not allowed to fail. Design is for everyone and no
one in particular. Website and mobile app design, as well as
design in general, is a complex yet subtle process, it’s more than
making things pretty

Design is a plan for arranging elements in such a way as best to

accomplish a particular purpose.”
-Charles Eames, American designer, architect, and filmmaker
Meanwhile, the meaning of design
depends on the context and can
also mean a variety of other things.
Design is the creation of an
experience. It’s also the process of
the said creation and how well it’s
organized. On top of that, design is
the result, i.e. the things we see,
hear, and feel.
The purpose of design
Every type of design exists to solve problems. To see the problem and find a solution,
designers rely on data. So the toolset of the designer is based on research, not
prettification.
User interface design
A user interface is the main touchpoint of a designed product and a user. The UI design is about
providing a user with the simplest and most efficient way to interact with a product. In that
sense, a designer has to be well aware of the following three concepts of user interface design:

Condition or where the UI exists.

Content or what the UI looks like.
Context or who operates the UI.
Why UX design is important and what makes good
design:

•Good design will crack you up. User satisfaction is no longer a goal. It’s a default
every design solution should be in line with. However, the fun and delight are the
goals. The hard sell times are past. Modern design seduces and brings pleasure.
•Good design will eat your money and make you feel good about it. Practical
value is only a part of what people are willing to pay for. Another part is happiness. If
your design makes people feel good, they will forgive you for technical issues and bad
updates. How to make them happy? Be genuine and honest about your work. Listen.
Change.
•Good design feels like a person. For people to care, they have to empathize with
something. If a product is designed in a way that favors everything, it favors nothing.
You make a social impact by having a strong distinctive voice, promoting the right kind
of values, and identifying with your audience. No matter what type of business you do,
there has to be a human side to it.
•Good design has meaning. Meaning connects people with objects. If that
connection is meaningful, it will stay for years. The design should empower people to
establish the connections they need to feel free, capable, and Enlighted.
Color in design

Colors are powerful

symbols by which you
live or die; they’re
worth paying attention
to.”
– Ben Hersh

What most people and, sadly, many designers know about color does not do
it enough justice. Color is the first thing we’d notice but the last we’d
understand. Colors can’t be explained and described unless seen. They can’t
be changed but can be learned and used. This is how nature communicates
with you, and that is why color is so important in design.
Animation in design
•Illustrative. It can demonstrate the
functionality or help understand it better.
•Amusing. Value can be expressed in
many ways. Positivity is one of them.
•Familiar. We expect certain reactions
from certain actions. Animation familiarizes.
•Engaging. We tend to follow patterns and
animation is a great source of those.
Design thinking and wicked problems

Every day, we are confronted with

problems–small and large scale. Design thinking
provides a systematic approach to solving these
problems. Formally, design thinking refers to the
diverse and interrelated approaches, techniques,
and tricks to scientifically addressing the
problems we face individually and collectively.
The term “wicked problem” was first coined by Horst Rittel, design theorist
and professor of design methodology at the Ulm School of Design, Germany.

In 1973, design theorists Horst Rittel and Melvin M. Webber used

the term “wicked problem” to refer to problems that are difficult to
define and inherently unsolvable.
 They suggested the following 10 characteristics of wicked
problems:
•A lack of definitive formulation.
•No stopping rule that determines when a solution has been found.
•Good or bad solutions rather than true or false solutions.
•Lack of immediate and ultimate tests of solutions.
•Solutions are “one-shot” operations rather than trial and error.
•Lack of criteria that indicate all solutions have been identified.
•The uniqueness of every wicked problem.
•Any wicked problem could be viewed as a symptom of another problem.
•Any discrepancies in wicked problem can be explained in multiple ways.
•Planners have no right to be wrong in that they are responsible for outcomes that
result from the actions they take.

Examples of wicked problems that have been addressed in scholarly literature include
poverty, urban renewal, school curriculum design, education, environmental and natural
resources policy.
Examples of wicked problems

Global heating
Is it unique and / or novel?
Yes—it is unique in the sense that we don’t face any problems similar to global heating as a whole. However,
it has been talked about since at least the 1980s, so it is no longer a novel problem.
Is it difficult or impossible to solve?
Yes—it is certainly difficult to solve. Whether or not it is impossible to solve remains to be seen.
Is it characterized by incomplete factors and / or complex interdependencies?
Yes—an example of an incomplete factor is the potential unavailability of reliable data about how much any
country has reduced its CO2 emissions, due to the political, economic, and social pressure to show
significant reductions.
Is it subject to contradictory evidence?
The scientific consensus that the climate is warming and this is being caused by humans is not subject to
contradictory evidence to any significant degree—as of 2019, 99% of the scientific evidence
supported it.
Is it dependent on multiple stakeholders with different interests?
Yes—not only do individual nations, groups of nations, industries, and unions have different interests, each
of those contains multiple stakeholders with different agendas and interests, such as political parties, lobby
groups, think-tanks, big business, etc.
Is it a wicked problem?
Yes—global heating clearly meets four of the five criteria to be classified as a wicked problem.
What are some examples of wicked problems?
Some examples of wicked problems are earthquakes, death, disease, and
economic problems. Political instability and floods are also good examples.
What is an example of a tame problem?
An example of a tame problem is a printer running out of paper. The solution
would be to add more paper to the machine.
Can wicked problems be solved?
Wicked problems cannot be solved. It is very difficult to understand a wicked
problem and formulate a solution to solve the problem.
Is homelessness a wicked problem?
Definition of homelessness
Experiencing homelessness means not having stable, safe and adequate
housing, nor the means and ability of obtaining it.
Homelessness is a wicked problem. This is because it is very difficult to understand
why it happens and to determine a suitable solution to end it and prevent it from
happening.
• Exercise and Case Study –
• Identify problems around us requiring design
solutions Or problems solved using design.
Virtual Agents, Avatars, ..

• Task
• Visit to Nearby 3 different Bank ATM. Identify
Problems in USER Interface and Discuss Solution
THANK YOU
Virtual Agents, Avatars, ..