Unit1 1
INTERACTION
DESIGN
Learning Objectives
After reading this chapter,
you will be able to:
❖ Define and understand Interaction design and user experience
❖ Explain and perform steps for interaction design process
❖ Understand and execute Design principles on products
❖ Explain Usability and user experience goals and wisely choose these goals
2
Sub-Topics
Learning Objectives
1.1. Introduction
1.2 Good and Poor Design
1.2.1 Good Design
1.2.2 Bad Design
1.2.3. Good Design Versus Bad Design
1.2.4. What to Design?
1.3 What is Interaction Design?
1.3.1. 5 dimensions of interaction design
1.3.2. Key Characteristics of Interaction Design
1.3.3 Usability Goals
1. Effectiveness
2. Efficiency
3. Safety
3
Sub-Topics
4. Utility
5. Learnability
6. Memorability
1.3.4. User experience goals
1.4 The User Experience
1.4.1. Seven factors that influence User Experience
1. Useful
2. Usable
3. Findable
4. Credible
5. Desirable
6. Accessible
7. Valuable
4
Sub-Topics
1.5 Process of Interaction Design
1.5.1. Interaction Design process
1.6 Interaction Design and User Experience
1.6.1. Design Principles
1. Constraint
2. Discoverability
3. FeedBack
4. Visibility
5. Consistency
6. Affordance
Summary
5
1.1 : Introduction
Introduction
In simple words, INTERACTION DESIGN is the interaction
between the clients, that are the users, and the items such
as applications and websites.
Definition
“Interaction Design (IxD) defines the structure and behavior 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.”
6
1.2: Good And Poor Design
● Elements and Principles of design are important to turn
a basic design into a good design which automatically
provides a good interaction design.
● Ignorance of any one characteristic can reduce your
design to a disaster eventually reducing your chances
of a good interaction design and user experience.
7
1.2.1: Good Design
01 Good Design ✓
1. Design is simple and easy. For good
designs, Less is always more.
1. The application has important
functionalities such as Like, Share which
helps me to do the task in one click.
1. The schematic design is grabbing my
attention in the right places. Hence the
text, color, size everything is in the right
proportion making the interface
attractive yet subtle.
8
1.2.1: Good Design
02 Good Design ✓
1. Balance of its elements is perfect. Two
buttons are present and yet it does not
hide or overcrowd the map.
1. Alignment is correct. The most
important is the search bar and that is
present on the top of the screen.
1. Contrast in color for different elements
is making the map easier to read.
9
1.2.2: Bad Design
01
Bad Design ✗
1. No visual order. One cannot decide
where to look. There is a lot of going on
that is diverting and indistinct. There are
excesses of overwhelming components.
2. No appeal. This is the ideal case of a
structure that is both unappealing and
not practical. The foundation is too loud
and detracts from the usefulness and the
objective of the site which is to guide
customers to its product.
3. No Balance, Alignment and Pattern.
Everything is missing. All the information
is dumped haphazardly making it
difficult to understand.
10
1.2.2: Bad Design
02
Bad Design ✗
1. The image is an example of how if even
one element is not proper can cause our
design to fall apart.
1. Color Scheme. The colors overlap each
other in the worst scene making it
almost impossible to read. Other than
the color scheme if you observe, unlike
the above design it has a grid, is not
much crowded and also has navigation
links. But due to the wrong choice of
color scheme, it looks shabby.
11
2.
1.2.4: What to Design?
1. Designing of a product depends on who is going to use
the product, how the product is going to be used, where
it is going to be used and what kind of users are going to
use the product.
2. Hence a designer has to do something different when he
is designing,in the picture the designer has invented a
biking jacket with inbuilt signal mechanism. But he has a
lot of options to choose from making it a difficult and
complicated task for the designer.
3. To overcome this difficult user has 2 options: assume or
understand. By assuming the choices of the user, the
designer can only hope for the best.
4. But by understanding the user, which will guarantee
better results, design will have to:
a. Understand what users are comfortable with
b. Think of ways that will help the users do their regular jobs
more easily.
c. Using the product should make the user feel satisfied i.e.
quality user experience.
d. Involving the user in this process and asking for their
feedback.
12
e. Making use of successful designing techniques.
1.3.1: 5 Dimensions of Interaction Design
Words envelop content. Easy to
understand Words should be used in 1D : Words
interaction for button labels,etc.
Customers interact with images and
2D: Visual Representation different illustrations which are known as
Visual Representations. Ex, ‘?’ means help
desk
In order to make use of products we need
physical objects through which we can 3D: Physical Object or Space
access the products and services of our
choice. Like, a mouse to click.
13
1.3.1: 5 Dimensions of Interaction Design
To understand the changes taking place
in the product, that can be a website or 4D: Time
application, time is an important factor.
Action and reaction together make up
the behaviour of the system. It helps us
5D: Behaviour understand the functioning of the
product by showing us the interaction
of the product with the user.
14
1.3.2: Key Characteristics of Interaction Design
Usability Goals and User
User Involvement Iteration
Experience Goals
● Usability goals and user experience goals
User involvement is extremely should be discussed and agreed upon at ● Iteration through the four activities is
important and takes place at first. inevitable
every step of the interaction ● It should be documented at the starting of ● Interaction design is an ITERATIVE
design process the process so that no confusion arises in PROCESS.
the end.
15
1.3.3: Usability Goals and User Experience Goals
16
[Link]: Usability Goals
● Usability alludes to guaranteeing that interactive products should not be difficult to learn, successful to utilize,
and fun from the client's point of view.
● Users should be able to complete their work or activities at school, office by advancing the interaction between
users and products.
● Usability aims are formed by asking questions.
01 02 03 04 05 06
Effectiveness Efficiency Safety Utility Learnability Memorability
17
[Link]: Usability Goals
It is a common aim of an interactive
product and it relates to how good Effectiveness
the product performs its tasks
It refers to how good performance the
product has. It means that the product is
Efficiency performing its task in the right way and
giving the desired output.
It includes avoiding risky situations or
dangerous situations with respect to the Safety
client.
18
[Link]: Usability Goals
It refers to the extent at which users
are being able to perform their task
correctly because the system is working Utility
perfectly with respect to
functionalities.
It refers to use of the system, whether it
Learnability is easy or difficult.
It means once the users have learned the
steps of how to use the system, the
ability to recollect the same steps, if the Memorability
user has not used the system for a long
time.
19
[Link]: User Experience Goals
Goals :
● Most of these are abstract feelings, which
1. Satisfying
tell us how the client feels about the
2. Enjoyable
product.
3. Fun
● It is related more to the experience the user
4. Entertaining
has while interacting with the product 5. Helpful
instead of whether the system is working or 6. Motivating
not 7. Aesthetically pleasing
● While the terms used to depict usability 8. Support creativity
objectives include a little but definite set, a 9. Rewarding
lot more terms are utilized to portray the 10. Emotionally fulfilling
multifaceted idea of the client experience.
20
1.3.4: Iteration
Interaction design is an ITERATIVE PROCESS, involving:
1. Again and again going through various design
processes and various levels of detail.
2. Design problems should be thought through i.e.
thinking about design problems in different aspects
such as the right amount of balance and alignment,
navigation, space,etc.
3. Clients' requirements should be understood.
4. Different designs should be used as alternatives.
5. Prototyping models. Models should be prototyped
6. Evaluating them. Models should be evaluated.
7. Brainstorming about design limitations.
8. Changing the model according to the new
requirements.
21
1.4: User Experience
● User experience is one of the factors that can
cause the product to fail or be a success in the
market.
● Often UX is considered as only the usability of the
product which is a misconception.
● Usability is just a part of UX.
● User experience in layman terms means the
overall experience of a person using a product
such as a website or computer application,
especially in terms of how easy or pleasing it is to
use.
22
1.4.1: Seven factors that influence User Experience
● Seven factors that influence User Experience have been mentioned below.
● These factors are used to find out whether the user experience is good or not.
● It helps us decide in which area is the improvement needed.
01 02 03 04 05 06 07
Useful Usable Findable Credible Desirable Accessible Valuable
23
[Link]: Usability Goals
A product can be successful only if it
is useful in some way to someone.
Useful
Usability refers to the functioning of
Usable the system
Findability refers to how easily you can
find the product in the market and if it's
an electronic device then how easily you Findable
can find the desirable content or
functionality in the device.
24
1.3.1: 5 Dimensions of Interaction Design
Credibility means the trust users
have in the product that has been Credible
created.
Desirability increases the
Desirable probability of success of the
product in the market.
25
1.3.1: 5 Dimensions of Interaction Design
Accessibility means your product is
accessible by all of the population Accessible
i.e. by common people as well as
people who have special needs.
Value should be one of the
Valuable prominent factors when it comes
to buying a product.
26
1.5: Process of Interaction Design
It is used to make products with best interaction design experience so that users
are satisfied and are attracted to such products.
27
1.5: Process of Interaction Design
First Step Second Step Third Step Fourth Step
1. Identifying needs and 2. Developing alternative [Link] 4. Evaluating what is
establishing requirements designs that meet those Prototypes being built throughout
requirements the process
A prerequisite given by the
Thinking of different When designers have Evaluation lets the
client should be satisfied.
designs empowers come up with various designer find what
Necessities will rely upon the
designers to explore ideas, they now have are the requirements
nature of the client, the
various methods for to decide on one idea that are already met,
exercises the client will
deciphering and fulfilling that suits the clients which requirements
perform utilizing the item, and
the requirement for a requirements. might crop
the environment 28
specific interaction product
1.6: Interaction Design and User Experience
Attention ● The way the designer thinks about the client
interaction with the product is the key
difference between IxD and UX.
● Interaction designers concentrate only on the
moment when users interact with the product.
Enriching the interaction experience is the final
goal.
● However, for User experience designers this
moment is just a part of the process. As user
experience design is a sum of all the user facing
needs.
29
1.6: Design Principles
01 Constraint
● It is a principle where the user is provided with
fewer options because the user might not satisfy
some conditions yet.
● As shown in the figure some options are available
whereas the grey text are options that are not
available because the user does not satisfy some
conditions.
30
2.8.1 : Expressive And Frustrating Interfaces
02 Discoverability
● The ability to discover something easily is known
as discoverability.
● It is important because finding functions should be
easy and simple instead of complicated
● To change font the user goes to the font section,
to insert an image he goes to Insert section as
shown in Figure 1.16. This makes the user feel safe
and gives a sense of authority on what he is doing.
31
2.8.1 : Expressive And Frustrating Interfaces
03 Feedback
● It refers to a response a user receives after
completion of his actions which let him know
whether the actions have been completed
successfully or not.
● Feedback should be provided in the form of dialogue
boxes or pop ups that show after task completion.
● For example in the figure below, we can see the
document has been submitted as below SUBMISSION
on the right hand side a document is visible. If it was
not visible the user would have then decided to
repeat the process again.
32
2.8.1 : Expressive And Frustrating Interfaces
04 Visibility
● Visibility refers to the ability of keeping the
mechanism of the product as transparent as
possible to the user.
● Visibility refers to the ability of keeping the
mechanism of the product as transparent as
possible to the user.
● Thus the user now clearly knows where he is and
this relieves him of the stress of the unknown
environment
33
2.8.1 : Expressive And Frustrating Interfaces
05 Consistency
● It refers to the same layout, functionality, color
scheme and all properties in respect to the
product are the same in every device.
● This helps the users to calm down their nerves and
do their jobs in a better way.
● This helps in a trustful relation between the
product and users as whatever is happening is
exactly as they expected.
34
2.8.1 : Expressive And Frustrating Interfaces
06 Affordance
● It is an attribute that tells us about how the use of
a particular product takes place.
● An example of poor affordance is the Norman
Doorway.
● In this doorway, similar handles are present on
both sides. This makes the user confused as to
which handle is for PULL and PUSH.
● Solution for this can be either label the handles as
PUSH or PULL or do not keep a handle on the
PUSH side as shown in figure.
35
Summary
● Interaction design means making the process of interaction with the screen a better experience for
users by understanding their requirements.
● User experience means the process of interacting with the whole product and not just the screens.
● Betterment of interactive products can be done by understanding the interaction design process
and carefully executing each and every step.
● Interaction design process has 4 steps: establishing requirements, designing alternatives,
prototyping designs, and evaluating prototypes.
● Interaction design and user experience are interrelated and hence overlap.
● Design principles are useful for judging an interactive product.
● There are namely 6 design principles: feedback, consistency, affordance, discoverability, constraint
and visibility.
● Usable, findable, utility, desirable, valuable, accessible, credible are seven factors that affect user
experience.
36
Review Questions
1. What is good design and bad design?
2. How should a designer design an application
3. What are the 5 dimensions of interaction design?
4. What are the key Characteristics of Interaction Design?
5. Write a short note on usability goals and user experience goals.
6. User Interface Design is an important part of usability. Justify the statement with an example.
7. Define Usability and identify the most relevant Usability Goals for Ecommerce web application.
8. Identify and explain the process of Interaction Design
9. Explain seven factors that influence user experience
10. Differentiate between User Experience and Interaction design.
11. Define Interaction Design and User Experience.
12. Identify the relationship between Interaction Design and User Experience
13. Identify the relationship between Interaction Design and User Experience using an example of real time products.
14. What are design principles? Explain with an example considering any application of your choice.
15. Enable you to evaluate an interactive product and explain what is good and bad about it in terms of the goals of interaction
design.
16. Describe what interaction design is and how it relates to human-computer interaction and other fields.
37
Multiple Choice Questions
1. Which of the following design principles provides limitations to the user?
a. Constraint
b. Discoverability
c. Feedback
d. Visibility
1. Making of interaction models takes place in which step of the interaction design process?
a. Identifying needs
b. Developing alternative designs
c. Building prototypes
d. Evaluating
1. Norman doorway is a poor example of which of the design principles?
a. Consistency
b. Feedback
c. Affordance
d. Constraint
38
Multiple Choice Questions
4. Considering the disabled population as customers is done in which of the following factors that influences user experience?
a. Usability
b. Findability
c. Accessibility
d. Utility
5. Remembering how the system works after once learning to operate the system is known as
a. Memorability
b. Learnability
c. Effectiveness
d. Efficiency
6. A user is unable to find how he can post pictures in a photo sharing application. What do you think, does the application have
good design or bad design?
a. Bad design
b. Good design
c. None of the above
d. Both a and b
39
THANK
YOU
