Interaction Design Faisal Imran

Interaction Design
Designing usable interactive products to support people in
their everyday and working lives.
 I
“ nteraction Design is the creation of a dialogue
between a person and a product, system, or
service. This dialogue is both physical and
emotional in nature and is manifested in the
interplay between form, function, and technology
as experienced over time.”
– John Kolko, Author of Thoughts on Interaction Design (2011)
What is Interaction Design?

Interaction Design (IxD) is the design

of interactive products and services in
which a designer’s focus goes beyond
the item in development to include
the way users will interact with it.
Thus, close scrutiny of users’ needs,
limitations and contexts, etc.
empowers designers to customize
output to suit precise demands.
Interaction design vs user experience design
What are user experience (UX) and user
experience design (UXD)?
User experience is how a user interacts with and experiences a product,
system or service.
User experience seeks to understand a user’s thoughts, feelings and
beliefs to help keep them happy.
User experience design (similar to interaction design) on the other hand,
tries to understand the design of a system with the user in mind.
The Interaction Design Foundation describes user experience design in
terms of the What, Why and How of product use.
 I
“ nteraction 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)
5 Dimensions of Interaction Design

• Words (1D) – the textual information is provided to users.

• Visual representations (2D) – the graphical elements/interface
elements, like iconography, imagery, and font.
• Physical objects/space (3D) – the device or physical
objects/tools used to interact with the product.
• Time (4D) – the elements that use time, like videos or
animations.
• Behavior (5D) – the user behavior that is needed to help the
interaction work and the system’s behavior in response.
Interaction Design

• Need to take into account:

• Who the users are
• What activities are being carried out
• Why the activities are being carried out
• Where & When the interaction is taking place
• How these activities are being carried out To optimize the
users interactions
Interaction Design Process
• Identify needs and establish requirements [SRS]

• Develop alternative designs

• Build interactive prototype

• Evaluate what is being built

 Laws and Languages of Interaction Design
Application of these scientific laws would enhance
interaction design

1. Fitts Law
2. Hicks Law
3. Miller’s Law
4. Tesler’s Law
5. Languages of Interaction design
6. Norman’s Seven stages of Action
Fitts Law
To ensure that the time taken by the pointing device
to reach an object on the screen should be
minimum
How to apply it in practice?
Shorten the distance between action A and action B
Fitts Law
Fitts Law
• The bigger the distance to the target, the longer it will take for the
pointer to move to it. In other words, closer targets are faster to
acquire.
• The larger the target, the shorter the movement time to it. In other
words, bigger targets are better.
Fitts Law
Fitts Law (Two-Component Model)
• An initial movement, rapid and relatively coarse, which is
intended to move the pointer in the direction of the target
• A final movement, which is slower and intended to secure
accuracy (for example, ensure that the target is acquired
correctly)
Fitts Law (Applications to UX)
• The implications of Fitts’s law can be grouped into 2 distinct
categories, corresponding to the two variables that affect the
movement time: target size and distance to target.

Optimizing Target Size

Bigger Is Better

https://www.nngroup.com/articles/touch-target-size/
Fitts Law (Applications to UX) Optimizing Distance to Target

You can improve the UX by

increasing the target size.

Change the location of the

control[Making it more accessible]
Fitts Law (Applications to UX) Optimizing Distance to Target
Fitts Law (Applications to UX) Optimizing Distance to Target
Fitts Law (Applications to UX) Optimizing Distance to Target
Fitts Law (Applications to UX) Icons Plus Labels

https://www.nngroup.com/articles/icon-usability/
Fitts Law (Applications to UX) Infinite Targets Along Screen Edges
Fitts Law (Applications to UX) Infinite Targets Along Screen Edges
Fitts Law (Applications to UX) Infinite Targets Along Screen Edges
HICK’S LAW
Hick’s law dictates that the greater the number of choices, the
longer it takes to make a decision.

How to apply it in practice?

Reduce the number of menu elements and put them in

categories
Highlight Search and Filter features
Break down the checkout or any long form-filling process into
manageable steps
Leave out excessive customization options
• RT = reaction time
• a = the time that is not involved with decision making
• b = an empirically derived constant based on the time it takes to
cognitively process each option (approximately 0.155 seconds for
humans)

• log2 = logarithm function

• (n) = the number of equally
probably alternatives
 (Applications to UX)
Navigation Menus

Amazon, generously applies

Hick’s law to categorize its
vast choice of listings. You do
have to read through them all
to find the needed
department, but you do it in
measured amounts, by
looking through different
sections step by step.
 (Applications to UX)
Navigation Menus

Designers can apply Hick’s Law when designing:

• Control display
• Drop down menus
• Contact pages
• Sign up forms
• Button selection
• Navigation menus
How to Implement Hick’s Law
1. Reduce the options for time-critical tasks.
How to Implement
Hick’s Law

2. Break down
complex
processes into
smaller steps.
How to Implement Hick’s Law
3. Highlight recommended options.
Miller’s Law

Good user experience plays a large role in every

successful website or app. The only way to design a
great user experience is by understanding how
people’s minds work and how the limitations of
human memory affect the way people interact with
design interfaces
Miller’s law in UX design
• Cognitive load
• Cognitive load is the amount of information that our working memory can
hold at one time.
• Chunking
• For most people, the numbers are easier to remember in smaller groups of 3
or 4, like that
Miller’s law: Ways to Improve your UX
• Visual hierarchy
• Rank design elements in order of importance and providing a clean visuals.
• This will help users focus on their initial goal with your product and
increase your conversions.
• Information architecture
• Information architecture (IA) focuses on organizing, structuring, and
labeling content in an effective and sustainable way.
• The goal is to help users find information and complete tasks.
Miller’s law: Good UX vs Bad UX (Cognitive Load)
Miller’s law: Good UX vs Bad UX (Cognitive Load)
Miller’s law: Good UX vs Bad UX (Chunking)
Miller’s law: Good UX vs Bad UX (Cognitive Load)
Miller’s law: Good UX vs Bad UX (Information overload)
Miller’s law: Good UX vs Bad UX (Cognitive Load)
Jakob’s Law or The Principle of Familiarity

“Users prefer
your site to work
the same way as
all the other sites
they already
know.”
Miller’s law: Good UX vs Bad UX (Cognitive Load)
Case Study: Microsoft Office 2007
The Company Microsoft, the world’s largest software company. The
Problem In the early 2000s, it was clear to many inside Microsoft
that something had to be done about their best-selling, nearly
universal software suite Microsoft Office. The original interaction
and interface design, created a decade before, was not scaling well.
New features were being hidden by the interface, and even features
users had requested and had been put into new versions of the
product couldn’t be found by those very same users. The software
appeared bloated, inefficient, and unwieldy. For example, 50 menu
items and 2 toolbars from Microsoft Word 1.0 had ballooned to
260 menu items and over 30 toolbars by Word 2003.
Case Study: Microsoft Office 2007
Case Study: Microsoft Office 2007
Microsoft Office 2007 has literally 1000 enhancements to it, all of
which take up less screen space than previous versions.
The new design has been a best-seller, and the headline for the
review in the New York Times read “From Bloated to Sleek.”
Tesler’s Law of Conservation of Complexity:
In the mid-1980s, Apple computer scientist and then vice
president at Apple.

Larry Tesler, who came up

with the law, worked at
Xerox PARC, Apple, Amazon,
and Yahoo in different
capacities. He was one of
the brains behind “cut/copy
and paste” functionality in
word processors.
Tesler’s Law of Conservation of Complexity:
“Every application has an inherent amount of irreducible complexity. The only
question is: Who will have to deal with it the user, the application developer, or
the platform developer?”
 Doherty Threshold

“Productivity rise
when a computer
and its users interact
at a pace that
ensures neither has
to wait on the other.”
 Pareto’s Principle or the 80/20 Rule

“For many events,

roughly 80% of
the effects come
from 20% of the
causes.”
 Law of Similarity
“The human eye
tends to perceive
similar elements in
a design as a
complete picture,
shape, or group,
even if those
elements are
separated.”
 Law of Proximity

“Objects that are

near, or proximate
to each other, tend
to be grouped
together.”
 Serial Position Effect

“Users have a
propensity to best
remember the first
and last items in a
series.”
Three Laws of Interaction Design
• A computer shall not harm your work or, through
inaction, allow your work to come to harm.

• A computer shall not waste your time or require you to

do more work than is strictly necessary.

• An interface should be humane; it should be responsive

to human needs and considerate of human frailties.
Three Laws of Interaction Design

A computer shall
not harm your
work or, through
inaction, allow
your work to
come to harm.
Three Laws of Interaction Design

A computer shall
not harm your
work or, through
inaction, allow
your work to
come to harm.
Three Laws of Interaction Design

A computer shall
not waste your time
or require you to do
more work than is
strictly necessary.
Three Laws of Interaction Design

An interface should be
humane; it should be
responsive to human
needs and considerate
of human frailties.
Three Laws of Interaction Design

An interface should be
humane; it should be
responsive to human
needs and considerate
of human frailties.