INTERACTION, INTERFACE

& UX DESIGN - BASICS

 INTERACTION DESIGN
•Interaction design–often shortened to IxD – is a
field dedicated to making human-to-computer
interactions (HCI) feel human-like.
 INTERACTION DESIGN
•It is the design of the interaction between users and
products.

•Most often, when discussing interaction design, the

products tend to be software products like apps or
websites.
 INTERACTION DESIGN
•The goal of interaction design is to create
products that enable the user to achieve their
objective(s) in the best way possible.
 INTERACTION DESIGN
Interactive digital products that create this “human”
connection successfully lead to positive user
experiences, including:
Greater product satisfaction
Deeper usability comprehension
Faster learnability
A deeper personal connection
5 Increased likelihood of repeated use
 INTERACTION DESIGN
•Central to the IxD practice is increasing the
sense of human connection by selecting the
appropriate interactive elements.
 INTERACTION DESIGN
•Experienced interaction designers know how
animation, transitions, micro-interactions, copy,
color, visuals, timing, and layout impact users’
feeling and behavior.
 IXD Vs. UID
• IxD focuses on human- UID focuses on visual
computer interaction, design and aesthetics,
including animations, including color, fonts,
micro-interactions, iconography, layouts, etc.
transitions, search, and They decide what a user
other motion-based interface must look like.
designs.
 IXD Vs. UID
• IxD determines what's • UID design
on the screen and how determines what
people use those those elements look
elements. like.
• IxD is about Interactions • UID is about visual
and movement. design
9 and
aesthetics.
 FIVE DIMENSIONS OF IXD
The five dimensions of interaction design help us
understand what interaction design involves.
Gillian Crampton Smith, an interaction design
academic, first introduced the concept of four
dimensions of an interaction design language.
Kevin Silver, senior interaction designer at IDEXX
14 Laboratories, added the fifth.
FIVE DIMENSIONS OF IXD
1D: Words
2D: Visual Representations
3D: Physical Objects or Space
4D: Time
5D: Behaviour
1D: WORDS
Words on a website should be simple to understand,
but at the same time, they should convey much
meaning.
They should talk to the right demographic. The rule of
thumb here is to use concise language and not have
much fluff.
1D: WORDS
2D: VISUAL REPRESENTATIONS
Visuals in the digital space include anything that is not
a word, such as typography, photography, icons,
diagrams, and any graphical elements.
Images are the first way to grab a user’s attention.
Users should be able to interact with them seamlessly
using only their intuition.
 2D: VISUAL REPRESENTATIONS
IxD, INTERACTION & UID
3D: PHYSICAL OBJECT/SPACE
Creating good visuals is essential as they will have an
impact only if you put them in the right place.

Cluttered web design will affect the interaction

negatively, making it harder for users to interact with
the different elements of websites.
 3D: PHYSICAL OBJECT/SPACE
IxD, INTERACTION & UID
3D: PHYSICAL OBJECT/SPACE
3D: PHYSICAL OBJECT/SPACE
4D: TIME
Time dimension refers to the idea that media may
change over time and that motion and sound can and
do play a crucial role in giving visual and audio
feedback to users’ interactions.
Also of note is the time a user takes when interacting
with the product and how to pick up the interaction
later.
4D: TIME
5D: BEHAVIOUR
This includes the mechanism of a product: how do users
perform actions on the website? How do users operate
the product?
It is how the previous dimensions define the
interactions of a product.
It also includes the reactions—for instance, emotional
responses or feedback—of users and the product.
 IxD, INTERACTION & UID

27
5D: BEHAVIOUR
LAWS FOR CREATING A
POSITIVE INTERACTION

THADDEUS ALFONSO Ph.D., PDF

1. HICK’S LAW
1. HICK’S LAW
Hick’s Law (or the Hick-Hyman Law) is
named after a British and an American
psychologist team of William Edmund Hick
and Ray Hyman.
1. HICK’S LAW
In 1952, this pair examined the
relationship between the number of
stimuli present and an individual’s
reaction time to any given stimulus.
1. HICK’S LAW
As you would expect, the more stimuli to
choose from, the longer it takes the user
to decide which one to interact with.
 1. HICK’S LAW
IxD, INTERACTION & UID

Users bombarded with choices must take

time to interpret and decide, giving them
work they don’t want.
1. HICK’S LAW
This is considered an important
psychological principle of UX. It simply
means that the more options you have,
the harder it gets to choose.
1. HICK’S LAW
Generally, applying Hick’s Law is simple –
reduce the number of stimuli and get a
faster decision-making process — but
there are exceptions to the rule.
1. HICK’S LAW
E.g., a user may already have decided before
seeing the stimuli. In that instance, the time
it takes them to act is likely less than if they
had not already determined a course of
action.
1. HICK’S LAW

This presents a challenge for designers of all types, making it imperative to offer
the most useful set of options to avoid frustrating the user.
1. HICK’S LAW
Good designers try to employ Hick’s Law to
respect their users’ time and to ensure a
high-quality user experience.
1. HICK’S LAW
Hick’s Law determines the number of
controls on our microwaves or washing
machines.
1. HICK’S LAW
A design principle known as “K.I.S.S.”
(“Keep It Short and Simple”) became
recognized in the 1960s for its effectiveness
in this regard.
 IMPLEMENTATION OF HICK’S LAW
EFFECTIVELY IN THE DESIGN OF
INTERACTIVE PRODUCTS
1. CATEGORIZING
CHOICE
You can see Hick’s Law in action in
the navigation of almost any website. If
your menus offered direct access to every
link within your site, you could quickly
overwhelm the visitor.
EG- Amazon Categories Helps in this case
2. OBSCURING
COMPLEXITY
If you have a complex process, you can use
Hick’s Law to rationalize only presenting
specific parts of that process at a given
time on the screen.
2. OBSCURING
COMPLEXITY
Instead of throwing the entirety of your
payment process up in a long, complex
form, you can break it down into
prompting users to register their e-mail
and create a password.
2. Obscuring complexity
Then, you can give them another screen
with shopping cart details, another that
collects delivery information, etc.
GESTALT & UI
 GESTALT P R I NC I P L ES O F VISUAL
PERCEPTION
• The fundamental law that governs a Gestalt principle
is that we tend to order our experience in a regular,
orderly, and recognizable manner.
• Gestalt psychology, gestaltism or configurationism, is
a school of psychol ogy that e merge d in Austria and
Germany as a theory of perception in the early
twentieth century.
 GESTALT P R I NC I P L ES O F VISUAL
PERCEPTION

• "Gestalt" is German for "unified whole.”

German psychologists Max Wertheimer,
Kurt Koffka, and Wolfgang Kohler created
the Gestalt Principles in the 1 9 2 0 s .

49
 GESTALT P R I NC I P L ES O F VISUAL
PERCEPTION
• Gestalt Principles are principles/laws of human
perception that describe how humans group similar
elements, recognize patterns, and simplify complex
images when we perceive objects.

• Designers use the principles to organize content on

websites and other interfaces so it is aesthetically
pleasing and easy to understand.
WHAT D O YO U S E E W H E N YO U L O O K AT THIS IMAGE?
 GESTALT P R I NC I P L ES O F VISUAL
PERCEPTION
 Gestalt psychologists emphasized that organisms
perceive entire patterns or configurations, not merely
individual components. Acco rding to this, the mind
"informs" what the eye sees b y perceiving a series of
separate elements as a whole.

 The view is sometimes summarized using the adage,

“ The whole is more than the sum of its parts.”
 1. FIGURE-GROUND PERCEPTION
 Refers to the tendency of the visual system to simplify
a scene into the main object that we are l ooking at (the
figure) and everything else that forms the background
(or ground).

 The concept of figure-gro und perception is often

illustrated with the classic "faces or vases" illusion, also
k nown as the Rubin vase.
 1. FIGURE-GROUND PERCEPTION
• D ep e nd i n g on whether you see the black or the
white as the figure, you may see either two faces in
profile (meaning you perceive the dark color as the
figure) or a vase in the center (meaning you see the
white color as the figure).
Source: A Dwarf Named Warren
 1. FIGURE-GROUND PERCEPTION
• The figure-ground principle states that people
instinctively perceive objects as either b e i ng in the
foreground or the background.

• They either stand out prominently in the front (the

figure) or recede into the bac k (the ground).
2. SIMILARITY
Source: Creative Beacon
Source: Andy Rutledge
 2. SIMILARITY
 The principle of similarity states that when things appear to
b e similar to each other, we group them together. A n d we also
tend to think they have the same function.

 The law of similarity states that elements within an

assortment of objects are perceptually gro uped together if
they are similar to each other. This similarity can occur in the
form of shape, color, shading , or other qualities.
 2. SIMILARITY
 For example, the figure illustrating the law of similarity
portrays 3 6 circles all equal distance apart from one another
forming a square. In this depiction, 1 8 of the circles are
shaded dark, and 1 8 of the circles are shaded light.

 We perceive the dark circles as grouped together and the

light circles as gro uped together, forming six horizontal lines
within the square of circles.
3. PROXIMITY

Source: Andy Rutledge

 3.ThePROXIMITY
law of proximity states that when an individual perceives
an assortment of objects, they perceive objects that are close
to each other as forming a group.

 The principle of proximity states that things that are close

together appear to b e more related than things that are
spac ed farther apart.

 Proximity is so powerful that it overrides the similarity of

color, shape, and other factors that might differentiate a group
of objects.
 3. PROXIMITY

Notice the three groups of black and red dots above?

The relative nearness of the objects has an even stronger influence on grouping than colour
does.
3. PROXIMITY
 Proximity is one of the most basic and powerful ways
to organize visual information and communicate
meaning.
 When you use proximity effectively, you can create a
sense of order, hierarchy, and structure in your
interface.
 You can also g u i d e the user's attention, focus, and
navigation by gro u pin g related elements and
separating unrelated ones.
 Proximity can help you avoid your design's clutter,
confusion, and ambiguity.
3. PROXIMITY
Using varying amounts of whitespace
to either unite or separate elements is
key to communicating meaningful
groupings.
4. C O M M O N REGION

Source: Smashing Magazine

 4. C O M M O N REGION
 The principle of the common region is highly
related to proximity. It states that when objects are
located within the same closed region, we perceive
them as b e i n g grouped.
 4. C O M M O N REGION
 A d d i n g borders or other visible barriers is a great
way to create a perceived separation between groups
of objects—even if they have the same proximity,
shape, color, etc.
5. CONTINUITY
 5. CONTINUITY
 In the i mage above, for example, the red dots in the
curved line seem more related to the black dots on
the curved line than the red dots on the straight
horizontal line.
 That’s because your eye naturally follows a line or a
curve, m ak i n g continuation a stronger signal of
relatedness than the similarity of colour.
5. CONTINUITY
• Application in UI D esi gn

• Bo o k in g website uses the continuity law to

incentive users to fill out the search form on
their h o m ep a ge in the “correct” order.
5. CONTINUITY

Amazon uses continuity to communicate that each of the products above is similar and related to each other.
 HOW THE PRINCIPLE OF CONTINUITY APPLIES TO
TYPOGRAPHY AND HIGHLIGHTS A WIDESPREAD MISTAKE
DESIGNERS MAKE.

87
6. CLOSURE (REIFICATION)
6. CLOSURE
6. CLOSURE
• The principle of closure states that when we look at a
complex arrangement of visual elements, we tend to look for
a single, recognizable pattern.

• In other words, when you see an im age that has missing

parts, your brain will fill in the blanks and make a complete
image so you can still recognize the pattern.
6. CLOSURE
7. FO C A L POINT
7. F O C A L P O I N T
7. F O C A L POINT
• The focal point principle states that whatever stands out
visually will capture and hold the viewer ’s attention first.

• When you look at the image above, for example, you first
notice the red square because it’s different from all of the
black circles around it.

• It’s the first point of interest that grabs your attention; from
there, your attention moves to other parts of the image.
https://shop.obaku.com/
98
THANK YOU