Interaction Design

UI/UX
An intro to the world of User Experience (UX) and User Interface (UI)

Assistant Professor Siddharth Raje

Communication Design
What is Design?

• de sign|dəˈzīn | verb [with obj.]

do or plan (something) with a
specific purpose or intention in mind

• Noun: A plan or drawing produces to show

the look and function or working of building,
garment, or other object before it is built or
made.
What is Interaction?

Interaction
/ɪntərˈakʃ(ə)n/

The definition of interaction is an action which is

influenced by other actions.

An example of interaction is when you have a

conversation with each other.

• Reciprocal (mutual) action or influence.

"ongoing interaction between the two
languages“

• communication or direct involvement with

someone or something. "for a shy person, social
interaction can be a stomach-churning, anxiety-
filled experience"
Design Process? Recognize this ?

• Breaking down a large

project into manageable
chunks
What is Interaction Design?

“The practice of designing interactive digital

products, environments, systems, and
services. …

…Interaction design focuses on something

that traditional design disciplines do not
often explore: the design of behavior.”
In: Cooper et al.: About Face 3
Design Umbrella?

• Number of other terms used

emphasizing what is being
designed, e.g.,
• Image of user reference
• 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
What is involved in the process of
interaction design?
• Identifying needs and establishing
requirements for the user
experience
• Developing alternative designs to
meet these
• Building interactive prototypes that
can be communicated and assessed
• Evaluating what is being built
throughout the process and the
user experience it offers
Understanding users’

Need to take into account

• what people are good and bad at
• Who the users are
• What activities are being carried out
• Where the interaction is taking place
• 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 -
EMPATHISE

Need to optimize the interactions users have

with a product
• So that they match the users’ activities and needs
Why go to this length?

• Help’s 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
Goals of Interaction design!

• Develop usable products

• Usability means easy to learn,
effective to use and provide an
enjoyable experience
• Involve users in the design process
• Story telling/boarding in a visual
manner?
• 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
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, cardigan
sweaters.” (Garrett, 2003)
• Cannot design a user experience, only design for a
user experience
• Summary: User experience is focused on what the
end user encounters, whereas service design is
focused on how that user experience is internally
created.
Ref: https://www.netsolutions.com/insights/user-experience-design-is-hard-to-get-right/
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
UX Design?

UX Design
(User Experience Design)

• UX designers try to make the

best experience possible for
users that interact with their
products.
User flow

• User flow is the path taken by a

prototypical user on a website or app to
complete a task.
• The user flow takes them from their entry
point through a set of steps towards a
successful outcome and final action, such
as purchasing a product.
What is User Persona?

• User Personas are representations of

significant groups of the users,
archetypes, that reflects patterns based
on behavior, goals, attitude and other
variables.
• As a design tool, they are a powerful way
to communicate behaviors, goals, wants,
needs and frustrations
• As marketing communications tool, they
provide insight into reaching and
engaging your customer
UI Design?

UI Design
(User Interface Design)

• UI designers are responsible

for making the visual design
of a website appealing to
users while following a
business’ brand guidelines.
UI Design example?

UI Design
(User Interface Design)

• UI designers are responsible

for making the visual design
of a website appealing to
users while following a
business’ brand guidelines.
UX vs UI Design? Understanding Your role!
This is where it all begins.
This is where it all begins.

What user
want?

Application
Feature?

Business
Resource &
Solutions
This step transforms
strategy into requirements.

Software
Requirement
Specifications
Functional
& UI
requirement
This gives shape to
the scope.

Navigation

Sitemap
It makes the site
concrete.

Wireframes

Storyboards

Prototype
Information
Architecture
Surface brings everything
together visually.

Graphics

Icons

Colors
I think this is enough to start with!
So what’s next now ?
Format the groups! Define your role!

Step 1

• Choose any government portal online

(i.e. banking, travelling, food, telecommunication, broadcasting etc.)
• Observe/Study the entire portal by following:
• How it works/looks/feel
• Overall user experience while using it!
• Navigation, Site map, Architecture, overall structure
• Understand the kind of users/ define age groups and their needs
• Can it be used on different devices?
• Create presentation containing above mentioned points.